Bloggerで更新しているこのブログ。
少しでも快適に閲覧してもらえるようにと、あれこれカスタマイズしてきました。
とても柔軟性のあるブログシステムだと思うのですが、他の無料ブログでは当たり前の機能がついていないこともあったりで、きっとテンプレートをカスタマイズしていきたくなるかと思います。
たまにBloggerについて記事を書いてきましたが、ページナビについてお問い合わせいただいたり、カスタマイズの参考Blogとして紹介していただく機会もあったりして嬉しい限り。
どこをどう変更したか忘れないうちに、ここ最近の主要なカスタマイズと参考にさせていただいた記事をまとめてみようと思います。
と、こんな知ったような記事を書いているのに、Android系、iPadなどで表示崩れしていました（汗 現在修正済み）
楽しいBlogerカスタマイズ
Bloggerすごいっと聞いて始めたものの、カスタマイズが行き詰まっている人もいるかと思います。テンプレートやCSSを触ってみようと思う人向けにまとめてみます。
テンプレートを触るというと難しく感じるかもしれませんが、パターンを覚えてしまえばけっこう簡単です。
ぜひ、素敵なブログを作ってみましょう〜
Bloggerを高速化
Blogger表示が遅くね？
そんな表示スピード命の方にお勧めのカスタマイズ。
まずは、Bloggerから自動で追加されるCSSを読み込まないようにします。
このCSSはBloggerの基本的な部分を構成しているので、読み込まないようにすると、ラベルクラウドなど表示が崩れる場合があります。
カスタマイズについて書かれている記事と対処法です。
<b:skin><
Blogを見にきてくれた人が、あちこち移動しやすいようにするための機能がナビゲーション。
残念ながらBloggerの個別記事には、『新しい投稿』『古い投稿』とページ下に出るだけです。
新しい（古い）記事のタイトルを表示できると優しい（嬉しい）ですよね。
ガジェットに追加するだけの簡単カスタマイズなのでお勧めです。
Blog Pager Post Titles Blogger（またはblogspot）で検索するといろいろでてきます。
お好みのものを使って下さい。
jQueryを使用しますが、一度読み込んでいるならこの部分は必要はありません。
もし読み込んでいなければ（テンプレートに書かれていなければ）</head>の手前に追加します。
可能であれば（動作に不具合がなければ。読み込むタイミングが最後でもよければ）、</body>の手前に追加するとページの表示がスムーズです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
ページナビ モバイル対応
スマホでは動作しなかったページナビ。
個人的には、ついていないBlogさんは見にくく感じてしまいます。
このカスタマイズは、テンプレートの書き換えが必要です。
こちらのページを参考にしました。
この他、たくさんページナビのカスタマイズがアップされていますのでBlogger Page Navigationなどと検索して、使用中のテンプレートにあうものを見つけて下さい。
これで、PCページにはナビゲーションが表示されます。
スマホでの表示については、スクリプトの一部を書き換えると紹介されています。
if (m.indexOf(f) != -1)nitiji=f.replace(/%3A/g,":");if (m.indexOf(f) != -1||m.indexOf(nitiji) != -1)詳しくはこちらのBlogさんを参考にして下さい。
カスタマイズについて、たくさん記事がアップされています。
※2016.1 現在、仕様変更により、他のページナビを使用しています。
記事中にアドセンス
個別記事を開いた時にmoreタグ（続きを読む）の場所にアドセンスを挿入するカスタマイズ。
こちらも、いろいろなコードが紹介されているので、AdSense moretag blogger などと検索してお好みのものを使用して下さい。
レスポンシブユニットはなぜだかうまく表示されませんでした。
手順です。
jQueryを使用しますが、このBlogでは、ページャーのカスタマイズで読み込んでいるので省きます。
テンプレートを開き<data:post.body/>を探します。
※テンプレートによって複数あります。その場合は後から出てくる方が該当するコードです。
data:post.hasJumpLink（続きを読む）がすぐ下にあるはずです。
コードを見つけたら、下のコードをペースト。
このBlogではこの様に書いています。
<b:if cond='data:blog.pageType == "item"'> <div style="display:none;"> <div id='MBT-google-ad'> <br/> <b:if cond='data:blog.isMobile'> スマホで表示するアドセンスのコード サイズ300×250 <b:else/> PCでの表示するアドセンスのコード サイズ336×280 </b:if> <br/> </div> </div> </b:if>
スマホとPC用に表示を変えています。
※アドセンスの上部には規約に準じて、お好みのスタイルで見出しを適用して下さい。
最後に下のコードを</body>の手前にペーストしておしまい。
<script type='text/javascript'>
$(document).ready(function(){
$('a[name="more"]').before($('#MBT-google-ad').html());
$('#MBT-google-ad').html('');
});
</script>
詳細はこちらのBlogを参考にしてください。
adsbygoogle.jsは、ひとつだけ</body>の手前に
具体的には、取得したアドセンスのコードのこの部分を</body>の手前に追加して、テンプレートに書いたすべてのアドセンスユニットのコードからこの部分を消しておきます。
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> こうすることで、ムダなコードも減らせます。
個別記事のmoreタグ以外の場所に表示する
任意の段落の後にアドセンスを表示するコード。
<br />タグの数で表示位置を調整。
カスタマイズ後、記事投稿画面で<!-- adsense -->と書き込んだ場所に表示されます。
記事ごとに細かく表示位置を設定したい人には便利。
How to Put AdSense Ads Anywhere in The Posts in Blogger? | New Blogger Lab
重要！ スマホでの表示をチェックする
カスタマイズをしたら、表示チェックを忘れずに。
iPhoneのみでチェックをしていましたが、Android系スマホでBlogをみたら、がまったく読めない状態で表示されていました。
PC上でも、各種スマホでの表示チェックが簡単にできるので、カスタマイズをしたら確認を忘れずに。
Bloggerの場合、もうひとつBlogを作成して、カスタマイズのテストをするといいですね。
クロームでの確認方法はこちらでどうぞ。
その他なるべくページの表示スピードをあげるためにしたこと
どのブログについても有効な方法ですが、CSSの圧縮やスクリプトを可能な限り</body>の手前に持ってくるようにしました。具体的には、ガジェットに追加したブログパーツ類のCSSは、テンプレートのCSSに移動。
CSSをひとつにまとめて、スタイルシートを読み込んでからスクリプトを読み込むようにします。
参考にしたのはこちらの記事。
中級〜上級者向けと書かれていますが、よい例、悪い例が書かれているのでとてもわかりやすいです。凄いです。
CSSの圧縮は、よけいな空白や改行が削除されてしまうので、あとあとメンテが面倒です・・・
検索すればネット上で圧縮してくれるページが出てきますので、興味のある方はチャレンジしてみてください。
Bloggerカスタマイズまとめ
今回は、このBlogで使用しているカスタマイズを駆け足で紹介してみました。
これからも、楽しみながら更新を続けていきたいと思います。
コメントを投稿