+http://www.fiveforblogger.com/2012/03/responsival-responsive-blogger-template.htmlずっと気になっていたこのブログのテンプレートを、ついにレスポンシブデザインにしてみました。閲覧している端末に最適な表示サイズで、スマホ用サイトなどを作ることなく表示できるようにする・・・といえば説明できているでしょうか?今まで使っていたテンプレートをそのままカスタマイズしようと、ごにょごにょしていたのですが、途中で挫折してしまいました・・・そこで新しいテンプレートを使うことにしました。久しぶりのBloggerカスタマイズ・・・あれだけ必死に覚えたことをほとんど忘れてしまって、かなり手こずってしまったので、カスタマイズした部分の覚え書きとして、この記事に残しておきます。レスポンシブ化!Bloggerカスタマイズまとめ!今まで使用していたテンプレートをそのままカスタマイズしていこうか迷ったのですが、海外製のテンプレートをカスタマイズしていたこともあり、なかなか簡単にできませんでした。そのように設計されているテンプレートを使ってカスタマイズした方がすっきりするかなぁ〜と思い、今回のテンプレートに変えてみました。Responsive』と検索して探してみました。Blogちなみに、使用中のテンプレートをスマホやタブレット端末に最適化してみようと思う方は、国内のサイトでしっかりと解説されています。http://www.fiveforblogger.com大きく写真を表示できるところと、シンプルな右サイドバーのテンプレートだったので、こちらにすることにしました。写真は、コードを加えなくても最低限表示できるので、よしとしておきました。管理画面からレイアウトへ移動して、消したいガジェットをクリックして削除できるのですが、たまに削除できないカジェットが存在しています。管理画面からテンプレートへ、テンプレートの編集をクリックしてコードを直接触ります。ガジェットのコードはこんな風になっています。ヘッダーもこのようにして削除しました。mobileという文字列がなければ、このとおり付け加えればOKです。私は、気に入ったブログやサイトには、こういったページナビがついていないと、疲れしてしまいます・・・1ページずつしか移動できないと、何ページ目まで見にきたのか?通り過ぎてまた戻ろうとした時に見失ってしまったりとか・・・ぱぱっと気になったページに移動できないからです。Bloggerにはページナビをカスタマイズしなければ付けることができません。PCで見ている場合は、カスタマイズして付けてしまえばいいのですが、レスポンシブデザインのテンプレートにこれを付けてしまうと上手く動作しません・・・モバイルで見ていると、ページナビが上手く動作しなくなり、トップページに戻ることができなくなってしまうのです。解決策として、今まではモバイルテンプレートを有効にしてページナビを表示させない方法をとっていたのですが、レスポンシブにしてしまうとレイアウトは変化しても基本的なものの表示は同一のものが使われてしまいます。切り替えることができるのですが、今回はコードを直接書き込んでいたので、条件分岐のコードを足してカスタマイズしました。ページナビはこちらのコードを参考にしました。styleデフォルトでついているページナビのコードを2つ書き換える部分があります。name='nextprev'/>このコードに書き換えます。/></b:if></b:if>これだとモバイル閲覧時には機能しないので、2つともカスタマイズしてこうしました。name='page-navi'/></b:if></b:if></b:if>これで、少し不安定な部分はあるものの、モバイル閲覧時にはデフォルトのページナビが出現してきます。↑のコードだと、アーカイブページにはページナビがつきますが、個別記事の下に、前の記事、次の記事へのページャーが表示されないので、こんな感じにアレンジしておきました。このブログには、月別で表示することをしていないので、archiveの表示はいらないかなぁ〜と思いました。name='nextprev'/></b:if></b:if></b:if>表示の切り替えはこのようにおこなうとよいようです。解決していたものもありましたが、Bloggerでは、画面サイズではなく、モバイル端末かどうかで判断しなければいけないカスタマイズが必要になる場合があるかと思います。コメント欄のアバターが・・・カスタマイズの方法を忘れてしまって、コメント欄のアバターが代えられなくなってしまいました・・・ツイッターのアカウントなどアバターを持っていない人の表示は、ミステリーマン的な画像になってしまっています(汗あと、自分のコメント欄は背景色を変えてみやすくしていたのですが、そのカスタマイズも忘れてしまいました・・・しかたなく、ツリー型のコメント欄に切り替えました。どなたか、ご存知の方いましたら教えて下さい^^;このほか、パンくずリストをつけたり、記事タイトル上にど〜んと表示されていた日付と時刻を消したり、サイドバーを広げたり、背景色を変えたりこまごまとしておきました。ヘッダーの画像が丸くならないのはなぜ?と思って気になっていますが、さらっと流しておきます。Bloggerのカスタマイズは楽しいっ!同じBloggerを使っているブロガーさん(ややこしいぃ)が、あんまりいないこともあったり、カスタマイズ難しそう!なんて思っていますが、Blogger楽しいですね!WordPressのように何でもできてしまう感じはありませんが、海外のテンプレートなどを見ていると、ブログとは思えないようなものが多数存在しています。ふだん困ることはなさそうなBloggerですが、記事の途中にリンクさせるアンカーテキストを使って、かつ、モバイル端末で閲覧すると、アドレスの後ろに?m=1が追加されてURLが変ってしまうからか?リンクが効きません・・・あと、ちょっと表示がおそいかしら・・・そんな部分は気になるものの、Bloggerブログ、これからもすこしずつ記事を重ねて楽しんでいきたいと思います。最後になりましたが、新しいテンプレートは、導入前にテストすることをお勧めします。あれこれカスタマイズしているテンプレートを使用している場合、動作確認用のブログをひとつつくってテストしておくと、テンプレートの変更もすんなりおこなえると思います。HatenaFeedlyやTwitterをお使いの方は、Blogの更新情報などを簡単にチェックすることができます。Meシンプルでベーシックなものをこよなく愛しつつ、気になったことをまとめたりして、日常をゆるめに楽しんでもらえるようなブログを目指してはじめました。リンクはご自由にどうぞ。広くない、建売三階建住宅に暮らしている我が家。専用の室内干しスペースなどは夢のまた夢。雨が続く梅雨、厚手の洗濯物が増え、晴れた日でもパリッと洗濯物が乾きにくい冬など、洗濯物を室内で干す機会は年間通して想像以上に多いもの。理想の物干しスタンドはこれ!快適な室内干しを実現するためのまとめ4人家族にぴったりな鍋はこれ!北欧系ダンスクの両手鍋26cmは手放せなくなるほど使い勝手がよかった後悔しない鍋選び。