そよかぜスタイル

Bloggerカスタマイズの覚え書き7つ

+ No comment yet
Growing Social Media / Photo mkhmarketing



Bloggerで更新しているこのブログ。
少しでも快適に閲覧してもらえるようにと、あれこれカスタマイズしてきました。
とても柔軟性のあるブログシステムだと思うのですが、他の無料ブログでは当たり前の機能がついていないこともあったりで、きっとテンプレートをカスタマイズしていきたくなるかと思います。

たまにBloggerについて記事を書いてきましたが、ページナビについてお問い合わせいただいたり、カスタマイズの参考Blogとして紹介していただく機会もあったりして嬉しい限り。

どこをどう変更したか忘れないうちに、ここ最近の主要なカスタマイズと参考にさせていただいた記事をまとめてみようと思います。
と、こんな知ったような記事を書いているのに、Android系、iPadなどで表示崩れしていました(汗 現在修正済み)

楽しいBlogerカスタマイズ

Bloggerすごいっと聞いて始めたものの、カスタマイズが行き詰まっている人もいるかと思います。
テンプレートやCSSを触ってみようと思う人向けにまとめてみます。

テンプレートを触るというと難しく感じるかもしれませんが、パターンを覚えてしまえばけっこう簡単です。
ぜひ、素敵なブログを作ってみましょう〜

Bloggerを高速化


Blogger表示が遅くね?
そんな表示スピード命の方にお勧めのカスタマイズ。

まずは、Bloggerから自動で追加されるCSSを読み込まないようにします。
このCSSはBloggerの基本的な部分を構成しているので、読み込まないようにすると、ラベルクラウドなど表示が崩れる場合があります。

カスタマイズについて書かれている記事と対処法です。


<b:skin><![CDATA[
スタイルシート



テンプレートの上部にあるこのコードを下のようにします。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/
スタイルシート


こちらのページを参考にさせていただきました。
とても見やすくわかりやすいのに、現在更新がストップしているのでちょっと心配・・・



こうすると、必要なCSSが読み込まれなくなってしまい、見た目が崩れてしまう可能性もあります。
主にウィジェットの表示が崩れてしまいました。

1からスタイルシートを組んでいくのが一番かもしれませんが、表示が崩れてしまった部分に必要なCSSを探して書き込みます。


ページのソースを開き、Bloggerから自動的に追加されている外部スタイルシートを開きます。
※ソースの確認方法は、ブラウザでBlogを表示して、ソースを表示で確認できます。

表示したソースの中の、この文字列から始るCSSへのリンクを見つけます。

/*<link type='text/css' 


ご自身のBlogタイトルのすぐ下あたりにあるはずですよ。
このBlogの場合だとこの文字列の下です。
<title>そよかぜスタイル</title>


CSSを開いたら、必要な部分をテンプレートへ追加しておきます。
私の場合は、ラベルクラウドや人気記事の表示が崩れていたのでCSSの先頭に以下を追加しておきました。

.label-size-1{font-size:80%;filter:alpha(80);opacity:.8}.label-size-2{font-size:90%;filter:alpha(90);opacity:.9}.label-size-3{font-size:100%}.label-size-4{font-size:120%}.label-size-5{font-size:160%}.cloud-label-widget-content{text-align:justify}.label-count{white-space:nowrap}.label-size{line-height:1.2}.PopularPosts .item-thumbnail{float:left;margin:0 5px 5px 0}.PopularPosts .widget-content ul li{padding:.7em 0}.PopularPosts img{padding-right:.4em}.PopularPosts .item-title{padding-bottom:.2em}



他にも、使っていない(このBlogではあまり必要ないと判断した)スクリプトが読み込まれています。
HTMLを開いて、一番下にあるこの文字列を変更します。

</body>
</html>


この様に変更します。

&lt;!--
</body>
--&gt;
&lt;/body&gt;
</html>


参考にしたのはこちらのページ。
上級者向けと書かれていますが、元に戻すのも簡単なので試す価値はあると思います。
不具合が出ても解決策は不明なので、だめなら元に戻しましょう。



ナビゲーション関連



カスタマイズしたページャー



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 == &quot;item&quot;'>
<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(){

$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#MBT-google-ad&#39;).html());
$(&#39;#MBT-google-ad&#39;).html(&#39;&#39;);

});
</script>


詳細はこちらのBlogを参考にしてください。



adsbygoogle.jsは、ひとつだけ</body>の手前に


具体的には、取得したアドセンスのコードのこの部分を</body>の手前に追加して、テンプレートに書いたすべてのアドセンスユニットのコードからこの部分を消しておきます。

 <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 


こうすることで、ムダなコードも減らせます。


個別記事のmoreタグ以外の場所に表示する
任意の段落の後にアドセンスを表示するコード。
<br />タグの数で表示位置を調整。




こちらは、記事の任意の場所にアドセンスを表示できるコード。
カスタマイズ後、記事投稿画面で<!-- adsense -->と書き込んだ場所に表示されます。
記事ごとに細かく表示位置を設定したい人には便利。



重要! スマホでの表示をチェックする


スマホの表示チェック




カスタマイズをしたら、表示チェックを忘れずに。
iPhoneのみでチェックをしていましたが、Android系スマホでBlogをみたら、がまったく読めない状態で表示されていました。
PC上でも、各種スマホでの表示チェックが簡単にできるので、カスタマイズをしたら確認を忘れずに。
Bloggerの場合、もうひとつBlogを作成して、カスタマイズのテストをするといいですね。

クロームでの確認方法はこちらでどうぞ。



その他なるべくページの表示スピードをあげるためにしたこと

どのブログについても有効な方法ですが、CSSの圧縮やスクリプトを可能な限り</body>の手前に持ってくるようにしました。

具体的には、ガジェットに追加したブログパーツ類のCSSは、テンプレートのCSSに移動。
CSSをひとつにまとめて、スタイルシートを読み込んでからスクリプトを読み込むようにします。

参考にしたのはこちらの記事。
中級〜上級者向けと書かれていますが、よい例、悪い例が書かれているのでとてもわかりやすいです。凄いです。



CSSの圧縮は、よけいな空白や改行が削除されてしまうので、あとあとメンテが面倒です・・・
検索すればネット上で圧縮してくれるページが出てきますので、興味のある方はチャレンジしてみてください。

Bloggerカスタマイズまとめ
今回は、このBlogで使用しているカスタマイズを駆け足で紹介してみました。
これからも、楽しみながら更新を続けていきたいと思います。

Sponsored Link








Comment