Customize Mobile Template in Blogger vol.2

Adjusting time circuits on my iPhone.
Bloggerのモバイルテンプレートのカスタマイズを紹介します。

photo credit: JD Hancock via photopin cc


Pager


ページャーの文字位置が適切ではない問題に対応します。デフォルトでは、文字位置は、左なのですが、ページャーの場合、これがどちらも左だとアイコンが左右対称にならないわけです。



.mobile-link-button {
background-color: $(link.color);
text-align: center;
}



Home Button


前回のカスタマイズ後に表示がおかしくなったので、以下のように修正しました。







    <div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><span class='entypo-home'/></a>
</div>

<div class='mobile-desktop-link'>

<!--###"PC版"を表示しない
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
###-->
</div>



具体的には、 blog-pager-home-linkblog-pager-newer-linkに書き換えた後、ページャー下に表示されるPC版を表示するリンクをコメント化しました。


Icon


iPhoneで言う「ホーム画面に追加」される時に、アイコンを使用します。ちなみに、EffektはNoにしています。





<link href='ここに画像URL' rel='apple-touch-icon-precomposed'/>



Date


タイトル上に表示される日付のスタイルを変更してみます。ちなみに、前回紹介した We Love Icon Fontsを使います。





<b:includable id='mobile-post' var='post'>の箇所を検索して、その下あたりにあるタグを書き換えます。


<h2 class='date-header'><span><data:post.dateHeader/></span></h2>



<h2 class='date-header'><span><span class='fontawesome-bookmark-empty'/>  <data:post.dateHeader/></span></h2>



.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
background-color: #FF0066;
}



Disqus Wigdet


Disqus Wigdetをモバイルで有効にします。




まず、 Disqusで検索し、以下の様なタグを見つけます。


<b:widget id='HTML1' locked='false' title='Disqus for XXXXX' type='HTML'>



そして、それに mobile='yes'を追加します。


<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for XXXXX' type='HTML'>


Breadcrumb Navigation for Blogger


CSSでカスタマイズしたパンくずリストを、ボックスからはみ出した場合には表示しないようにしました。




と言っても、単にoverflow:hidden;を追加するだけです。

.breadcrumbs {
overflow:hidden;
zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0;
}