[Blogger] フッターを追加したくなったのでテンプレートを見直しました

和室Mac » [ブログ改造記]フッターウィジェット追加。
このブログのテーマのフッターにウィジェットを置けるようにしてみました。 理由は、フッターに何かあるとかっこよくね？って思ったからww ...
私もやりたいなー

ってことで、フッターを追加しました。

最初はテンプレートにコードを追加してやろうと思ったのですが、 調べてみると Blogger で用意されているテンプレートが何気に HTML5 になっていたので、 Simple Template をベースにカスタマイズしました。

テンプレートデザイナでカスタマイズ

▼ [レイアウト] でフッターのレイアウトを三列に

レイアウトを選択して、ウィジェットの配置を変更しました。 また、各領域の幅や色、フォント([アドバンス] > [CSS を追加])などもテンプレートデザイナで設定しました。

テンプレートをダウンロードしてテキストエディタで編集

テンプレートデザイナでは設定できないものは、 テンプレート(XML)をダウンロードしてテキストエディタで編集しました。

追加した内容は以下のものです。

• ソーシャルボタンの追加
• エントリの日付をカレンダー表示に変更
• Smart Related Posts Widget for Google Blogger - v2.0　を追加

もう少し細かい部分も弄りましたが、大きくはこんなところです。

Disqus をウィジェットで再設置したら反映されないページががが

コメントシステムは Disqus を使用しているのですが、 いままではコードを直接追加していました(理由は失念ｗ)。

簡単にできるので、今回は Blogger のウィジェットとして追加したのですが、 モバイルアクセス時と static_page(MarsEdit まとめ など)に Disqus が反映されませんでした。

モバイルアクセス時に Disqus が反映されるようにする

ウィジェットの mobile 属性を 'yes' にすることで、 モバイルテンプレート適用時にもウィジェットが有効になります。

<b:widget id='HTML6' locked='false' mobile='yes' title='Disqus for Happy-Go-Lucky' type='HTML'>

static_page に Disqus が反映されるようにする

Disqus のウィジェットの以下の部分で、 pageType が static_page の場合も反映されるように条件を変更することで対処できました。

<b:if cond='data:blog.pageType != &quot;index&quot;'>
    <style type='text/css'>
        #comments {display:none;}
    </style>
    <script type='text/javascript'>
        (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
        })();
    </script>
</b:if>

おわりに

あー、スッキリしたｗ

見た目はあまり変わっていませんが、以前よりゆったりしたレイアウトになりました。

本当は検索ウィジェットをページリストの右側に埋め込みたいのですが、 すんなりいかない雰囲気なので保留しました。

補足エントリ

• [Blogger] テンプレートを弄るときなんかのためにテスト用のブログを作っておいた方がよい、という話

関連記事

loading..