Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

はてなブログのスマートフォン表示のデザイン改善

f:id:tk0137:20210815205529j:plain

イメージ図

目次

はじめに

 

今回は、はてなブログにおいて、スマートフォンでのこのサイトの見た目を良くするために、方法を調べて実践してみましたので、紹介したいと思います。

 

とても簡単でしたので、是非ご参考にしていただければと思います。

 

まず、ビフォーアフターを以下に示します。

 

f:id:tk0137:20210814235000j:plain   f:id:tk0137:20210814235013j:plain

 

どうでしょうか。

 

まずBeforeの方です。

 

今までパソコンでの表示しか気にしたことがなく、スマートフォンでの見え方はほとんど気にかけていませんでした。

 

なので、スマートフォンでサイトを開くと記事の内容ではなく、いきなり広告が並んでしまい、印象がよくありませんでした。

 

今思うと、よくこのデザインでここまでやってこれたと思います。

 

続いてAfterの方です。

 

PCで表示した際のサイトのデザインがとてもよく維持されており、開いてすぐに、このサイトの見た目を判断できます。

 

広告も自然な位置に配置され、以前よりもかなり改善されたと思います。

 

 参考サイト

 

以下の二つのサイト様を参考にさせていただきました。

 

たった3つの設定ではてなブログのデザインをいい感じにカスタマイズする方法 - IT女子ちーさんのwebろぐ

 

はてなブログ 3STEPでレスポンシブデザインに!やり方を解説♪ - イロイロひとりごと。

 

手順

 

 作業は以下の通りです。

 

  • レスポンシブデザインを有効にする

 

そう、この一つの作業だけで良いのです。

 

以下に図を用いて具体的な手順を示します。

 

 まず、現在適用しているサイトデザインがこのレスポンシブデザインに対応しているかどうかを確認する必要があります。

 

以下の方法で確認します。

 

まず、はてなブログにログインし、すぐ左にあるメニューより「デザイン」をクリックします。

 

f:id:tk0137:20210815183609j:plain

 

「デザイン」をクリックすると、以下のような画面に移ります。

 

そうしたら、次は左上にある3つのアイコンより、一番右側の「スマートフォン」をクリックします。

 

すると、その下にさらにメニューが現れますので、そのメニューの一番下の「詳細設定」をクリックします。

 

f:id:tk0137:20210815183632j:plain

 

「詳細設定」をクリックすると、以下のような画面になります。

 

「レスポンシブデザイン」というチェックボックスがあるので、ここにチェックを入れれば、良いのですが、その前に確認することがあります。

 

チェックボックスの下にある「現在選択中のテーマを確認する」というリンクがありますので、ここをクリックします。

 

すると、現在使用しているサイトデザインのレスポンシブデザインの対応の有無が確認できます。

 

f:id:tk0137:20210815184229j:plain

 

「現在選択中のテーマを確認する」というリンクをクリックするとサイトデザインのページに飛びます。

 

それぞれのサイトデザインのレスポンシブデザインの対応の有無を確認するには、「テーマの説明」の下に記載があるかと思います。

 

以下にレスポンシブデザインの対応がある場合とない場合の記載例を示します。

 

レスポンシブデザインの対応がある場合

 

f:id:tk0137:20210815184420j:plain

 

レスポンシブデザインの対応がない場合

 

f:id:tk0137:20210815184433j:plain

 

レスポンシブデザインの対応がある場合とない場合では少し異なる対応をしなければならないので、それぞれの場合について少し説明させていただきます。

 

 レスポンシブデザイン対応がある場合

 

レスポンシブデザインの対応がある場合は基本的には、以下の2つの作業を行います。

 

  • 「レスポンシブデザイン」のチェックボックスにチェック
  • とあるCSSコードを記述

 

「レスポンシブデザイン」のチェックボックスにチェックについては先ほどの現在選択中のテーマを確認する」というリンクの上にあったチェックボックスにチェックを入れるだけです。

 

f:id:tk0137:20210815184551j:plain

 

チェックボックスを入れた状態で、一度「変更を保存」をクリックします。

 

この状態でスマートフォンからサイトを見ると、サイトのデザインがパソコン表示のように反映されているかと思います。

 

しかし、これだけでは表示される文字が縮小されて見にくい場合があります。

 

その時にとあるCSSコードを記述すると改善される場合があります。

 

以下に手順を示します。

 

先ほどはデザイン編集画面で「スマートフォン」をアイコンをクリックしましたが、今回は真ん中にあるアイコンの「カスタマイズ」をクリックし、その下に表示されたメニューの「{}デザインCSS」をクリックします。

 

f:id:tk0137:20210815191333j:plain

 

「{}デザインCSS」をクリックすると、以下のようにサイト全体に反映するためのCSSコードを入力するためのフォームが現れます。

 

ここに以下のコードを記述します。

 

/* Responsive: yes */

 

このコードを以下の図のように最初の方に記述しておくと良いでしょう。

 

このコードを記述した後に「変更を保存する」をクリックします。

 

f:id:tk0137:20210815184951j:plain

 

変更を保存したら、一度スマートフォンからサイトを確認します。

 

文字が縮小されずに見やすい大きさになっていれば成功です。

 

しかし、デザインによってはレスポンシブデザイン対応のものでもうまく表示できない場合があるみたいです。

 

以下は、私が実際にレスポンシブデザイン対応のデザインで表示させたものです。

 

f:id:tk0137:20210815185105j:plain

 

サイトのメニューの「ブログ作成記録」、「プログラミング」という項目が枠からはみ出しています。

 

この場合は、うまく表示されるようにコードを調整することが対処法ではありますが、あまりサイトの形を変えたくない場合は、/* Responsive: yes */というコードを外して、少々縮小されたものを採用するのもひとつの手であると思います。

 

後に記述しますが、私のサイトは/* Responsive: yes */を抜いて、少し文字が小さく表示されるようにしてありますが、そこまで見た目に問題はないように思います。

 

以下に示すレスポンシブデザイン対応がない場合もご参考にしていただければと思います。

 

 レスポンシブデザイン対応がない場合

 

レスポンシブデザイン対応がない場合でも無理してレスポンシブデザイン対応のデザインに変更する必要はありません。

 

サイト運営を始めたばかりでレスポンシブデザイン対応があるデザインに変えても問題がないなどの場合はデザインの変更も検討されると良いでしょう。

 

私もレスポンシブデザイン対応がないもの最初から使用していたため、少しがっかりしましたが、問題なく改善ができました。

 

まず、レスポンシブデザイン対応がある場合の作業と同様に「レスポンシブデザイン」のチェックボックスにチェックを入れます。

 

f:id:tk0137:20210815193023j:plain

 

この状態で「変更を保存」をクリックし、スマートフォンから実際にサイトを見てみます。

 

おそらくパソコンで表示されるものと同じ画面がスマートフォン上に縮小された状態で表示されると思います。

 

しかし、縮小されるとは言ってもスマートフォンでは画面の拡大縮小することはとても簡単です。

 

あまり問題にすることではないかもしれません。

 

また、レスポンシブデザイン対応がないデザインに対しても/* Responsive: yes */のCSSコードを入れて表示させた場合についても書いておきます。

 

f:id:tk0137:20210815184951j:plain

 

レスポンシブデザイン対応がある場合の作業と同様に/* Responsive: yes */を記述してサイトをスマートフォンで表示すると、パソコン表示のデザインがそのまま拡大表示されて画面にきれいに収まらなくなります。

 

f:id:tk0137:20210815202659j:plain

 

先ほども申し上げましたが、スマートフォンで表示を拡大縮小することは容易ですので、このような表示方法でも問題ないと言えるかもしれません。

 

最後に

 

今回は、はてなブログのスマートフォン表示のデザインの改善を行いました。

 

はてなブログで記事を編集すると、パソコン表示の画面ばかり気にしがちです。

 

今回スマートフォン表示のサイトのデザインを見直すきっかけになったのはTwitterです。

 

私のTwitterにこのサイトへのリンクを貼り付けているのですが、そこからサイトを表示すると、普段パソコンで見慣れているデザインで表示されなかったのでとても違和感を覚えてしまいました。

 

少々苦労はしましたが、スマートフォンからも普段見慣れたパソコン表示のデザインを反映させることができたので、とりあえずは良かったのかなと思います。

 

文字を見やすくするなどの改善の余地はまだまだありそうですので、このサイトでも改善方法も含めて紹介できたらと思います。

 

以上、最後までありがとうございました。