読者です 読者をやめる 読者になる 読者になる

無題で行こう

気の向くままに書きたいことを書いていきます。とりあえず無題でいきましょう。毎日いろいろありますよね♪

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

ブログ運営

■始めに

f:id:kay72234:20151012082519j:plain

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

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

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

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

■具体的な方法は?

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

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

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


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

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

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

■最後に

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


スポンサーリンク