【初心者ができる】スマホ用デザインをカスタマイズ【①準備編】（はてなブログ）

   ブログを始めて、２ヶ月半が経過しました。

   私は通勤時間をブログにあてているので、ブログを作るのも、観るのもスマホがメインです。

   デザインテーマは「Brooklyn」を採用しています。「Brooklyn」はレスポンシブデザインに対応しているので、初心者の私でも、少しのカスタマイズでスマホ画面をカッコよくできるし、メニューバーなども設置できます。

   しかし、先輩ブロガーの皆さまのサイトの観やすさ、カッコ良さは全然違う…と、ずっと思っていました。何よりオリジナリティに溢れています。

   そこで、私もレスポンシブデザインを未設定にして、スマホの独立したデザインをカスタマイズしてみました。

   色々なサイトを参考にしましたが、なかなかスムーズにはいかず、睡眠時間を削って取り組んだ結果です…   大型連休中だから出来た感じです。

    HTMLとか、CSSとか…全くわからない私ですが、何とか形にする事ができたので、方法などを、ご紹介しますね。

   私のように、WEBデザイン素人の方でも、カスタマイズ出来るよう、参考にしていただければ嬉しいです。

大切にしたこと

   カスタマイズをするにあたって、次のことを大切にしました。

１   観やすさ

   スマホの場合、PCより画面が小さいです。視界に全ての情報が収まります。感覚的ですが、私は、スマホで記事を読む場合は、「読む」といより、「観る」という感覚です。

   なので、文字の大きさや、行間、色など、全体の、観やすさを意識してカスタマイズしました。

２   楽しさ・ワクワク

   スマホの場合、パソコンよりも直帰率が高いと言われています。つまり、１記事だけをみて、他のサイトに移動する場合が多いのです。

   確かに、PCだと画面が広いので、色々なメニューが視界に入りますが、スマホはそうはいきません。

   なので、観やすさはもちろんのこと、読者の興味・関心を引けるよう意識して、カスタマイズしました。「他にどんな記事があるんだろう？」とメニューを探していただける、それが理想です。

   こちらが提供できる情報と、読者が求める情報がマッチしていても、気付かれなければ、勿体ないですから。

３   オリジナリティ

   最後にオリジナリティです。これは、説明不要ですが、私であれば「ハレバレ」らしさです。

   「読者が晴れ晴れとした気持ちになる」ようなデザイン、「ハレバレっぽい」と思っていただけるデザインを目指しました。

ベースとなるカスタマイズ

   スマホのデザインと言えば、必ず検索にヒットする「ひつじの雑記帳」さまにお世話になりました。

   本当に有難いですね。このクオリティを無料で公開してくださって。

   しかし、「こちらのサイトで紹介されてるコードを貼り付ければ万事解決！」という話ではありませんでした。

    単純に、素人の私にはもっと具体的な説明がないと分からないところや、自分なりにアレンジをしたいところ etc.…。これが、連日の睡眠不足の原因です。

   あなたが睡眠不足にならないよう、私が「なるほどっ！」と学んだことをご紹介しておきますね。

アイコンの表示について

  「ひつじの雑記帳」で紹介されるカスタマイズは、アイコン表示がとっても視覚的でオシャレです。

   ただし、事前にFontAwesomeを導入しておかないと、アイコンが正しく表示されません。

   導入方法については、同サイトのリンクから紹介されていますが、必要な手続きを行っても上手くいきませんでした。いきなり躓いたのです。

   もしかしたら、FontAwesomeがバージョンアップされたことで、「ひつじの雑記帳」のコードとマッチしていないのかも？と思い……旧バージョン（Font Awesome4）のコードを探しました。

   結果、こちらのサイトからコピペさせていただき、無事アイコン問題は解決しました。

   念のため、貼り付ける場所はこちらです。

   設定画面の詳細設定の中にある「headに要素を追加」という項目 

ヘッダー画像について

  「ひつじの雑記帳」のデザインは、ヘッダーのブログタイトル画面がシンプルです。

   これはこれで、とってもカッコ良いのですが……。私は「心が晴れる=虹」をどうしても描きたくて……、なので、ヘッダー用画像を別途作成しました。

   方法は過去記事に掲載してます。※当時はレスポンシブデザインを念頭に、PCヘッダー用画像を作りましたが、手順はスマホ用でも同じです。

   結果、現在のヘッダー画像となっています。

おわりに

   あなたが、以前から私のブログを読んでくださっていたなら、「あれっ？」と、デザインの変化に気付いていただけましたでしょうか？（そうであれば、嬉しいのですが…）

  今回は、スマホデザインのカスタマイズのうち、準備段階のポイントをご紹介しました。

  次はいよいよ、導入段階のポイントをご紹介します。

  間を空けずに投稿しますので、少しでも関心を持っていただけたら、ぜひ続編もご覧いただければ幸いです。

   それでは、今日も一日晴れ晴れと過ごしましょう。