ずっと気になっていたこのブログのテンプレートを、ついにレスポンシブデザインにしてみました。
閲覧している端末に最適な表示サイズで、スマホ用サイトなどを作ることなく表示できるようにする・・・といえば説明できているでしょうか？
今まで使っていたテンプレートをそのままカスタマイズしようと、ごにょごにょしていたのですが、途中で挫折してしまいました・・・
そこで新しいテンプレートを使うことにしました。
久しぶりのBloggerカスタマイズ・・・
あれだけ必死に覚えたことをほとんど忘れてしまって、かなり手こずってしまったので、カスタマイズした部分の覚え書きとして、この記事に残しておきます。
まずはレスポンシブ化！Bloggerカスタマイズまとめ！
今まで使用していたテンプレートをそのままカスタマイズしていこうか迷ったのですが、海外製のテンプレートをカスタマイズしていたこともあり、なかなか簡単にできませんでした。
もともとそのように設計されているテンプレートを使ってカスタマイズした方がすっきりするかなぁ〜と思い、今回のテンプレートに変えてみました。
たぶん・・・ですが、国内で配布していることはないと勝手に決めつけて、『Blogger Responsive』と検索して探してみました。
ちなみに、使用中のテンプレートをスマホやタブレット端末に最適化してみようと思う方は、国内のサイトでしっかりと解説されています。
使用中のテンプレート
大きく写真を表示できるところと、シンプルな右サイドバーのテンプレートだったので、こちらにすることにしました。
気になったのは、既存のヘッダーガジェットを消さなければいけないこと、ページナビがついていないこと、写真の表示には、コードを加えなければいけないことなど・・・
投稿ごとに設定が必要なものだと、次にテンプレートを変えた時、今まで使ってきたものを適用させるのに手間がかかるので、気になる方にはあまりお勧めしません・・・
写真は、コードを加えなくても最低限表示できるので、よしとしておきました。
Blogger 消せないガジェット（ウィジェット？）の消し方
管理画面からレイアウトへ移動して、消したいガジェットをクリックして削除できるのですが、たまに削除できないカジェットが存在しています。
管理画面からテンプレートへ、テンプレートの編集をクリックしてコードを直接触ります。
ガジェットのコードはこんな風になっています。
赤字の部分が true になっているときは削除できませんから false に書き換え。
ヘッダーもこのようにして削除しました。
ついでに、モバイル閲覧時に表示するかしないかは青字のyes noで実現できます。
mobileという文字列がなければ、このとおり付け加えればOKです。
<b:widget id="HTML6" locked="false" mobile="yes" title="About Me" type="HTML">
ページナビってBloggerには不向きなアイテムかも・・・
私は、気に入ったブログやサイトには、こういったページナビがついていないと、疲れしてしまいます・・・
1ページずつしか移動できないと、何ページ目まで見にきたのか？通り過ぎてまた戻ろうとした時に見失ってしまったりとか・・・ぱぱっと気になったページに移動できないからです。
Bloggerにはページナビをカスタマイズしなければ付けることができません。
PCで見ている場合は、カスタマイズして付けてしまえばいいのですが、レスポンシブデザインのテンプレートにこれを付けてしまうと上手く動作しません・・・
モバイルで見ていると、ページナビが上手く動作しなくなり、トップページに戻ることができなくなってしまうのです。
解決策として、今まではモバイルテンプレートを有効にしてページナビを表示させない方法をとっていたのですが、レスポンシブにしてしまうとレイアウトは変化しても基本的なものの表示は同一のものが使われてしまいます。
ガジェット単位であれば、先ほどの mobile yes no で切り替えることができるのですが、今回はコードを直接書き込んでいたので、条件分岐のコードを足してカスタマイズしました。
ページナビはこちらのコードを参考にしました。
デフォルトでついているページナビのコードを２つ書き換える部分があります。
<b:include name='nextprev'/>
このコードに書き換えます。
<b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi' /> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi' /> </b:if> </b:if>
これだとモバイル閲覧時には機能しないので、２つともカスタマイズしてこうしました。
<b:if cond='data:blog.isMobile'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi'/> </b:if> </b:if> </b:if>
これで、少し不安定な部分はあるものの、モバイル閲覧時にはデフォルトのページナビが出現してきます。
※追記 ↑のコードだと、アーカイブページにはページナビがつきますが、個別記事の下に、前の記事、次の記事へのページャーが表示されないので、こんな感じにアレンジしておきました。
このブログには、月別で表示することをしていないので、archiveの表示はいらないかなぁ〜と思いました。
<!-- navigation --> <b:if cond='data:blog.isMobile'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/> <b:else/> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> </b:if> </b:if> </b:if>
表示の切り替えはこのようにおこなうとよいようです。
<b:if cond='data:blog.isMobile'> モバイルの時の表示 <b:else/> PCでの表示・・・ </b:if>
※以前のテンプレートでは、トップページに表示していたスライドショーを画面サイズによって表示を切り替える @media screen max-device-width で解決していたものもありましたが、Bloggerでは、画面サイズではなく、モバイル端末かどうかで判断しなければいけないカスタマイズが必要になる場合があるかと思います。
コメント欄のアバターが・・・
カスタマイズの方法を忘れてしまって、コメント欄のアバターが代えられなくなってしまいました・・・ツイッターのアカウントなどアバターを持っていない人の表示は、ミステリーマン的な画像になってしまっています（汗
あと、自分のコメント欄は背景色を変えてみやすくしていたのですが、そのカスタマイズも忘れてしまいました・・・
しかたなく、ツリー型のコメント欄に切り替えました。
どなたか、ご存知の方いましたら教えて下さい＾＾；
このほか、パンくずリストをつけたり、記事タイトル上にど〜んと表示されていた日付と時刻を消したり、サイドバーを広げたり、背景色を変えたりこまごまとしておきました。
ヘッダーの画像が丸くならないのはなぜ？と思って気になっていますが、さらっと流しておきます。
Bloggerのカスタマイズは楽しいっ！
同じBloggerを使っているブロガーさん（ややこしいぃ）が、あんまりいないこともあったり、カスタマイズ難しそう！なんて思っていますが、Blogger楽しいですね！WordPressのように何でもできてしまう感じはありませんが、海外のテンプレートなどを見ていると、ブログとは思えないようなものが多数存在しています。
ふだん困ることはなさそうなBloggerですが、記事の途中にリンクさせるアンカーテキストを使って、かつ、モバイル端末で閲覧すると、アドレスの後ろに?m=1が追加されてURLが変ってしまうからか？リンクが効きません・・・
あと、ちょっと表示がおそいかしら・・・
そんな部分は気になるものの、Bloggerブログ、これからもすこしずつ記事を重ねて楽しんでいきたいと思います。
最後になりましたが、新しいテンプレートは、導入前にテストすることをお勧めします。
特に、あれこれカスタマイズしているテンプレートを使用している場合、動作確認用のブログをひとつつくってテストしておくと、テンプレートの変更もすんなりおこなえると思います。
