無料版はてなブログのデザインをカスタマイズしました

■はじめに

無料版のはてなブログでは原則、スマホ向けの画面のデザインをカスタマイズする余地がほとんどありません。
また、スマホ向けの画面には最初から広告が３ヵ所に埋め込まれています。なんとかGoogleアドセンスの審査に通過したとしても、この状態では自分のアドセンス広告を貼り付けることができません。
これらの制約から解放され、スマホ向け画面をカスタマイズするには、通常は有料のpro版はてなブログに移行しないといけません。

■第一歩は「レスポンシブデザイン」

冒頭の文章では、あえて「原則」や「通常」と書きました。すなわち、スマホ向けの画面をカスタマイズする方法もあるわけです。
具体的には「レスポンシブデザイン」に対応したデザインテーマを適用する方法です。
はてなブログは、PC向けとスマホ向け、それぞれに最適化したデザインの画面を自動的に出しわけてくれるようになっています。無料版のはてなブログでは、PC向けの画面をカスタマイズすることができるのですが、スマホ向けの画面はカスタマイズすることができません。

しかし、レスポンシブデザインを適用すると、スマホに対してもPC向けの画面を表示してくれるようになるのです。
したがって、厳密にはスマホ向け画面をカスタマイズしているというわけではありませんが、結果としてカスタマイズしたPC版の画面をスマホ向けにも見せることができるようになります。

■具体的な方法は？

さて、では具体的にはどうすれば良いの？ということですが、大きくは２点です。

①レスポンシブデザインに対応したデザインテーマを探す
②その中から自分の気に入ったデザインテーマを適用する

筆者はいろいろなサイトを参考にしましたが、次のサイトが分かりやすくて重宝させていただきました。感謝です。

■無料版でも「できる」ことが分かりました

自分でレスポンシブデザインを使ってみると、無料版のはてなブログでもかなり自由なデザインが組めることが分かりました。センスの問題があるので、お洒落なページにできるかどうかは分かりませんが…

また、スマホ向けには表示できないと思っていたGoogleアドセンス広告も、PC向けと同様に２枚までなら表示することができます。いずれはpro版に…と考えていましたが、もうしばらくは無料版で頑張ってみようと思いました。

■最後に

デザインをあれこれ変更するのは非常に楽しい行為です。また新たな楽しみができてしまったようです。
少し触っては確認し、また触って…という感じで、やり始めると際限がありません。自分だけのこだわりなのは分かっているのですけどね…
ある程度納得のいく状態になったら、備忘メモ代わりに、また記事としてまとめようと思います。