晴れ晴れ生活のつくりかた

カウンセラーとして働くアラフォーパパのブログ。読者も私も前向きになれる記事を書きたい。純粋な気持ちです。

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

   おはようございます。ハレバレです。😊

 

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

 

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

 

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

 

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

 

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

 

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

 

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

   

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

f:id:harebarepapa:20190430103233j:image

大切にしたこと

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

1   観やすさ

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

 

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

2   楽しさ・ワクワク

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

 

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

 

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

 

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

3   オリジナリティ

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

 

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

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

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

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

 

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

 

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

 

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

アイコンの表示について

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

 

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

 

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

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

 

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

 

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

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

ヘッダー画像について

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

   

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

 

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

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

f:id:harebarepapa:20190430102057j:image

おわりに

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

 

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

 

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

 

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

 

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

f:id:harebarepapa:20190505231949p:plain