Bloggerのモバイルテンプレートにサイトマップのボタンを設置する

Investors Guaranty Sitemap Design
Bloggerのモバイルテンプレートにサイトマップのボタンを設置しました。


photo credit: barrettportfolio via photopin cc




まず、前提としてサイトマップのページを作成します。これは、 過去記事で紹介したと思うので、今回は解説しません。


そして、私の場合は、以下のようにページャーに表示してみました。ちなみに、 We Love Icon Fontsを使用しています。 <b:includable id='mobile-nextprev'>を検索してその下あたり、具体的には、 home-linkのしたあたりに以下を追記します。


<!--###Older Mobile Menu###-->
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='home-link' expr:href='&quot;ここにサイトマップのURL&quot;'><span class='entypo-menu'/></a>
</div>



私の場合、モバイル版サイトマップは、 http://mba-hack.blogspot.jp/p/sitemap.html?m=1ですので、これを指定箇所に挿入します。





解説としては、 expr:を付けた属性の中で、任意の文字列リテラルを利用したい場合は、quot;で囲ってやることが必要になります。


そして、CSSにid:blog-pager-older-linkを指定しているためサイトマップアイコンは、"古い投稿へ"の左側に表示されます。


ちなみに、CSSでは、 idはページ中に一度しか登場しないというものらしいので、使い方は違っているかもしれません。