ハニエルの中の人

嵐の大野智くんと京都の神社仏閣が好き

超簡単!はてなブログProでレスポンシブデザインにする方法

はてなブログProにして、理想のブログにできました!

以前、はてなブログProにしてやりたい事の代表が、

  1. キーワードの自動リンクを消したい
  2. 広告を消したい(特にスマホ)
  3. ブログのトップページを一覧表示にできる

だと書きました。

 

hanielu.hatenablog.com


ええ、もう、スッキリしましたよー!

1.の「キーワード自動リンク」はウザいし、ダサいし

2.の「広告(特にスマホ)」は、自分で見ても嫌になる位だから、
訪問者様には迷惑だろうなぁと
思っていたので、消す事ができて嬉しかったです!


あと、更新する度、過去ログが後ろに流れていくのが微妙に嫌だったのですが、
3.「トップページを一覧表示」にした事で、
ある程度のストックを見て頂ける(PCで訪問された場合は特に回遊性があがる)
のが、非常に嬉しかったです。

 

レスポンシブデザインにしようと思っていた

そして、絶対忘れてはいけないのが「レスポンシブデザイン」にする事でした。

はてなブログProにしたら、レスポンシブデザインにできる、って読んだのに
やっていませんでした(恥)

テンプレートのページで
「※一部のデザインテーマは、はてなブログPro(有料プラン)の機能を想定して作られている場合があります。」
と言うのを読んで、Pro化したら、どのテンプレートでもレスポンシブにできるんだ!って嬉しかったです。

レスポンシブデザインというのは、PCで見えているのと、スマホで見て頂くのを同じ
にする事です。

特に重要なのが、サイドバーです。

レスポンシブデザインにしていないと、PCのサイドバーが、スマホで表示できないのです。

 

超簡単!レスポンシブデザインにする方法

やり方は、とにかく簡単です。

勿論、レスポンシブデザインのテーマ(テンプレート)を使っていないとできませんが
それも、「現在選択中のテーマを確認する」から、確認できますし、
もし、レスポンシブデザインのテーマではない場合、はてなブログのテーマを探す
ページに行って、レスポンシブデザインのテーマに変えれば、一瞬でできます。

 

図解:一瞬でレスポンシブデザインにする方法

1.自分のはてなIDの横の下向き▼をクリック →ブログタイトル →デザインへ

はてなブログをレスポンシブデザインに変更する方法

はてなブログをレスポンシブデザインに変更する方法


2.左側が管理画面で、右半分が、現在スマホで見えているプレビュー画面です。

プレビュー画面を見ていると、広告こそ出ていませんが、
タイトルやロゴマークが、無駄に広く場所を取っているのがわかりますね。


左上部のスマホのマークをクリック →詳細設定をクリック →レスポンシブデザインのチェックボックスにチェックを入れる

はてなブログをレスポンシブデザインに変更する方法

管理画面のスマホの詳細設定を開く

 

3.レスポンシブデザインにチェックした途端、左側のプレビュー画面が変わります。
スクロールして、納得できたら左上の「変更を保存する」で、一瞬にして、反映されます。
これだけで、PCのデザインがそのまま、スマホで表示できるように変更されます!

はてなブログをレスポンシブデザインに変更する方法

レスポンシブデザインにチェックを入れる!

 

レスポンシブデザインにして、良かった点!

まず、一番上のタイトル部分がスッキリします。
最初は、はてなのアイコン画像が出ていましたが、タイトルと説明文だけに。

次に、日付と記事タイトルが黒一色だったのが、日付がブルーに変わりました。

そして、カテゴリーも表示されて、より、便利に!
カテゴリーの表示は、非常に重要です。

スマホの場合、関連記事を探すのが大変ですが、
カテゴリーが表示される事で、簡単に同じカテゴリの別記事を読んで頂けます。

 

どうでもいい情報が消え、サイドバーが表示されます。

レスポンシブデザインにチェックを入れる前は、
下記画像のように「記事を書く」だの「週刊はてなブログ」へのリンクだの、
訪問者様に、直接関係のない情報が沢山表示されていました。

 

はてなブログをレスポンシブデザインにする方法

スマホでの表示が必要な情報に一瞬で変わる



でも、チェックを入れた途端、それらから、PCのサイドバーの情報に変更されます!
即ち、
カテゴリーや、人気記事、新着記事、コメント、アーカイブ、プロフィールなど、
PCと同じ物が反映する為、訪問者様に、必要な情報をお届けしやすくなります。

 

まとめ

はてなブログProにすると、全てのレスポンシブデザイン対応のテーマを、
たった一つの作業で、 レスポンシブデザインに変更できます!

通常、スマホ用プロフィール欄は、記入しないと空欄になってしまいますが、
この作業で、PCに書いたプロフィールが自動で反映する為、
プロフィールを新たに書く必要もありませんし、
後で、プロフィール内容を変えた場合も、自動で、PCとスマホで同じ物が
反映します。

私は1円の収益もないのに、はてなブログをPro化しました。

でも、訪問者様に、読みやすいブログをお届けしたい一心で
広告などを消せる仕様にしました。

だから、とても満足しています。

 

ブックマークか、Twitterのフォローお願いします♡

そんなわけで、
● このブログに直接来て下さる方は → https://hanielu.hatenablog.com/
をブックマーク(お気に入り登録)して下さいませ

● Twitterのフォローをして下さる方は → https://twitter.com/hanielu_115
から、フォローして下さいませ。
そんなにツイートしないので、あなた様のTLの邪魔にはならないと思います。

※何か、アドバイスがあったら、何でもいいので、教えて下さいね!