ライブドアブログから「はてなブログPRO」に移行し、右も左も分からないままブログカスタマイズに挑戦することになりましたが正直、不安しかありません。でもより良いブログにするためにも、多少の見栄えも大切ですですよね。ということで、このブログ自体のカスタマイズについて書いてみました。
ブログテーマの選択［minimalism］
ブログカスタマイズを行う前に決めなければならない［テーマ］はてなブログでは無料で利用可能なテーマが数多く揃っています。
テーマストアでは、はてな公式テーマ、はてなユーザーが独自に作成したテーマまで多種多様なデザインで溢れかえっています。 テーマ選びだけで、あっと言う間に時間が過ぎ寝不足になるほど。散々悩み結局、人気No.1テーマ［minimalism］に決定！
シンプルで飽きのこないスッキリとした［minimalism］codomisu さんのセンスが光りますね。［minimalism］は、その名の通り必要最低限の装備となっています。標準の状態でも満足できる仕上がりですが、シンプルだからこそ［カスタマイズ］熱が湧き上がるのは私だけでしょうか？
カスタマイズに関しては［minimalism］をリリースしている codomisuさんの［ひつじの雑記帳］を参考にカスタマイズを行うことに。
［minimalism］テーマを初めて利用する際は必ず、下記リンク［ひつじの雑記帳］をしっかりと目を通して下さい。重要な初期設定を怠ると正常に表示されなくなる恐れがあります。
［ナビゲーションメニューバー］設置（2018/12修正版）
タイトル下のナビゲーションメニューバーですが、初期状態では表示されていませんが、標準で記述されているので［ひつじの雑記帳］さんより、メニューバーのコードをコピーし、デザイン→PC→記事上・下にペーストして完了となります。
実際に記事上、下にコードをコピペしてプレビューしてみたところ…
［ CONTACT ］のアイコンだけがブランクになってしまいました。（画像は正常に修正済み）コード自体はコピペしているので間違いはありません。それでもブランク表示になっているので、アイコンの提供元をチェックすることに。
［ Font Awesome ］のバージョンに注意（Ver.5.6.1）
2018年12月現在のバージョンの設定方法を記載しておきます。
❶ ［Font Awesome］をはてなブログで利用するには、上記のリンクから［Font Awesome］のスタートページへ…
❷ Free → All → SVG を選択し、最後に <script defer src=… をコピー。
❸ はてなブログの設定 →詳細設定 → headに要素を追加にペーストすれば完了です。
［CONTACT］のブランク表示は［Font Awesome］の最新バージョンとの違いによる不具合でした。
［ CONTACT ］アイコンコード
変更前 <i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
変更後 <i class="fas fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
※分かりやすく赤で表示しましたが［ s ］を追加する必要があります。
［ソーシャルボタン］設置（2018/12修正版）
ソーシャルボタンも［ひつじの雑記帳］よりコードを拝借し、デザイン→PC→記事上・下へコードをペースト。
するとTwitter、facebook、pocket がブランク（？）になってしまいました。
※画像は修正後の正常な表示となります。
メニューバー設置と同様に［Font Awesome］のバージョンによるコード違いだと推測できたので確認すると…
［Twitter］アイコンコード
変更前 <i class="fa fa-twitter"></i>
変更後 <i class="fab fa-twitter"></i>
※分かりやすく赤で表示しましたが［ b ］を追加する必要があります。
［Twitter］以降の［facebook］…も同様にブランクとなっている、すべてのコードへ［ b ］を追加して下さい。
［見出し］のカスタマイズ
見出しに関して参考にすべきオススメサイトは、saruwakaさんの［見出しデザイン例まとめ68選］これ凄すぎます！見出しデザインの決定版であり完全保存版です。
好きな見出しデザインをコピーして、デザイン→PC→CSSへペーストするだけで完了です。（h1〜h5）を変更することにより強弱のついたデザインになりますね。
さいごに
今まで、ライブドアブログしか利用たことがなく、カスタマイズも避けてきましたが［はてなブログPRO］への移行をキッカケにカスタマイズにチャレンジすることに。小難しいことが大の苦手でHTMLやらCSSやらサッパリわからないズボラーなのですが、コピペOKなサイトもたくさんあるおかげで無知な私でも簡単にカスタマイズすることができました。
実際にカスタマイズする中で、上手くいかない場面もありますが、解決に向け考える事により、苦手なHTMLやCSSへの苦手意識も少しづつ改善しているような気もしています。今回はオーソドックスなカスタマイズだったので、今後もバージョンアップした際には、リライトしていきたいですね。