無題で行こう

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

MENU

はてなブログを簡単カスタマイズ!①レスポンシブデザイン編

■始めに

f:id:kay72234:20151021232809j:plain

はてなブログでブログを公開してから、2ヵ月以上になりました。最初のうちは、タイトル画像を付けたりしていた程度でしたが、いろいろとカスタマイズすることができることが分かってきました。

上記の記事を書いてからも、ちょくちょくとデザインを触っています。基本的に筆者は、あちこちのサイトから調べてきたカスタマイズ手法を取捨選択しながら、良さげなものを適宜取り込んでいます。そうしているうちに、出典がだんだんと分からなくなってきました…

そんなわけで、備忘メモの意味も含めて、諸々のカスタマイズ手法を整理して記事に纏めていきたいと思います。
初回は「レスポンシブデザイン」編です。

■無料版ではスマホ画面のカスタマイズはできない?

はてなブログは、無料版でも普通にブログを公開するには充分な機能を備えていますが、有料版の「pro」に比べると幾分か制約があります。広告を非表示にできない、画像のアップロード容量上限が厳しいなどです。
中でも筆者は、スマホ向けの画面のカスタマイズがほとんどできない点を非常に大きい制約と感じていました。

ただ、月々1,008円(2年の契約なら月々600円)の料金が悩みどころで、proへの移行を躊躇している方は多いのではないでしょうか。

■「レスポンシブデザイン」を使ってみる

しかし、「レスポンシブデザイン」に対応したデザインテーマを適用すれば、無料版でもスマホ向けの画面デザインをカスタマイズすることは可能です。厳密には、スマホ向けにPC向けと同じデザインの画面を表示できるようになります。

手法としては、次の2ステップになります。

①レスポンシブデザイン対応のデザインテーマを探す
②レスポンシブデザインを適用する

今回は、その具体的な方法を整理してみます。

■①レスポンシブデザイン対応のデザインテーマを探す

はてなブログでは公式のものとそうでないもの、多数のデザインテーマが公開されています。
ただ、レスポンシブデザインに対応したものを検索するようなことができないので、自分で探すのはなかなか骨が折れます。ここは先人の知恵(?)を拝借しましょう。

これらのサイトで丁寧に纏められていますので、お力をお借りするのが効率的です。どれにするか迷うところですが、デザインはカスタマイズできるので、シンプルなものを選ぶのが良いと思います。

デザインテーマの適用は、ダッシュボードのデザインのメニューから行ってください。

■②レスポンシブデザインを適用する

次にレスポンシブデザインを適用します。デザインのメニューからスマホのアイコンを選択してください。下の画面の通り、「レスポンシブデザインを適用する」にチェックを入れます。

f:id:kay72234:20151026224916j:plain


後はもう一息です。次の一文をコピーしてください。

/* Responsive: yes */

これを「デザインCSS」の欄に貼り付けます。「デザインCSS」は、デザインのメニューからスパナのアイコンを選択すると、一番下側にあります。

f:id:kay72234:20151026224946j:plain


ここまでが、具体的な手順になります。

■お疲れさまでした

設定画面では「変更を保存する」のを忘れないようにしてくださいね。
では実際にスマホ実機から確認してみてください。見た目がガラリと変わりましたでしょうか?

デザインテーマの中には2カラム、すなわち記事を表示するメインカラムとサイドバーに分かれているものがあります。レスポンシブデザインを適用した2カラムデザインをスマホで表示すると、サイドバーの部分はメインカラムの下側に表示されます。サイドバーの配置は、デザインメニューから変更することができるので、お好みでカスタマイズしてください。

■最後に

以上、レスポンシブデザインを適用する方法のまとめでした。無料版のはてなブログでも、これでデザインを自由にカスタマイズすることが可能になります。
しばらくは無料版で頑張ってみようという気になりますかね?
では次回以降は、細かなデザイン変更の方法をまとめていきます。


スポンサーリンク