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

このエントリーをはてなブックマークに追加 Pocket

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

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

Happy Go Lucky

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

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

▼ [レイアウト] でフッターのレイアウトを三列に
Blogger Happy Go Lucky  テンプレート デザイナー

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

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

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

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

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

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

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

簡単にできるので、今回は 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>

おわりに

あー、スッキリしたw

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

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

補足エントリ

関連記事

0 コメント: