Customize Mobile Template in Blogger vol.1

Explosion
Bloggerのモバイルテンプレートのカスタマイズを紹介します。

photo credit: c@rljones via photopin cc


現在のサイト





Chrome


分からなくなったら、 Chromeで要素の検証を行います。Bloggerのモバイルサイトは、 ?m=1をつけると、表示されます。Macでは、 Cmd+ Alt+ iで開くと思います。 Escを押して、対話と切り替えて使えます。





私は、 Shift+ Cmd+ cを使います。




PC用のテンプレートをそのまま適用する



Bloggerのテンプレートをモバイル端末対応にしてデザインの自由度を格段にアップさせる方法


上の記事で紹介されている方法を使います。追加は以下のとおりです。

#menu {display:none;}


後は、プロファイルなどを非表示にします。

<b:widget id='Profile1' locked='false' mobile='no' title='PROFILE' type='Profile'>



ここで、widgetが出てきましたね。Bloggerのカスタマイズには、結構な頻度で出てきますので、こちらを参考にしてください。widget(レイアウト)の要素についてですが、こちらが参考になります。


つまり、mobile='no'と記述することで、モバイルでは非表示にすることができます。


スワイプ無効



Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする


上の記事でほとんど書かかれている通りです。 </body>の上に以下を追記します。

<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
var c = document.getElementById("main");
c.addEventListener = null;
})()
</script>
<style>
#spinner-canvas {display: none !important;}
#left-arrow {display: none !important;}
#right-arrow {display: none !important;}
</style>
</b:if>
<!-- /END -->



微調整


表示がいまいちな部分があったので、CSSによる微調整を行います。 .mobileを設定すればいいようですが、今回は、HTMLを新たに書き換えました。

.post-body1 {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.blog-pager1 {
padding: 50px;
background-color: #F5F5F5;
border:1px solid #DCDCDC;
}



タイトルと本文の隙間を埋める


<div class='mobile-post-outer'>
.
.
.
<div class='post-body'>


<div class='mobile-post-outer'>
.
.
.
<div class='post-body1'>



ちなみに、PC版は以下の様な感じで設定されています。タイトル下にラベルを表示したら、隙間がなくなってしまったため結構広めに余白をとっています。

.post-body {
margin: 50px 0px 0px 0px;
font-size: 110%;
line-height: 1.4;
position: relative;
}



ページャーの領域を広くする


<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>



<b:includable id='mobile-nextprev'>
<div class='blog-pager1' id='blog-pager1'>



サムネイル画像を置き換える


画像を非表示にしてもいいのですが、置き換えてみました。

<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'><data:post.title/></h3>
<div class='mobile-index-arrow'>&amp;rsaquo;</div>
<div class='mobile-index-contents'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img src='ここに画像URL'/>
</div>
</div>
<div class='post-body1'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>


このブログは画像をあんまり使わないので、画像がない記事は必然的に画像なしになってしまいます。


それでは、統一感がなくなってしまいますので、特定の画像を表示することにしました。もちろん条件処理を書いてもいいのですが、サムネイルに指定される画像には気に入らないものも多いので...。


人気の投稿


文章の抜粋は、post.snippet、サムネイルなども「人気の投稿」ウィジェットで書かれている内容と一致します。


ここで、画像がない場合に指定した画像を表示する処理を書いてみたいと思います。

<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' src='ここに画像URL'/>
</a>
</div>

</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' src='ここに画像URL'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



参考 :

http://blog2.k05.biz/2012/11/blogger.html


Mobile Templateの場合もこちらを参考にすれば、画像がないときだけ、特定の画像を表示することができると思います。

これである程度のコンテンツもPC版と同じようにCSSが適用されるようになります。