ズボラログ

ズボラーがブログに挑戦!いつまで続くのか?

[2018年12月最新]はてなブログをカスタマイズしてみた [メニューバー・シェアボタン・見出し編]

f:id:writer036bloger:20181220051324j:plain

はてなブログPROに移行し、右も左も分からないままブログカスタマイズに挑戦することに…

 

不安しかありません(笑)

 

 

 

テーマの選択[minimalism]

 

ブログカスタマイズをする前に決めなければならない[テーマ]はてなブログでは無料で利用可能なテーマが数多く揃っています。

テーマ ストア - はてなブログ

 

テーマストアでは、はてな公式テーマ、はてなユーザーが独自に作成したテーマまで多種多様なデザインで溢れかえっています。

 

テーマ選びだけで、あっと言う間に時間が過ぎ寝不足に。

 

散々悩んだ挙句、人気No.1テーマ[minimalism]に決定!

 Minimalism - テーマ ストア

 

シンプルで飽きのこないスッキリとした[minimalism]codomisu さんのセンスが光りますね。

 

[minimalism]は必要最低限の装備となっています。標準の状態でも満足できる仕上がりですが、シンプルだからこそ[カスタマイズ]熱が湧き上がるのは私だけでしょうか?

 

カスタマイズに関しては[minimalism]をリリースしている codomisuさんの[ひつじの雑記帳]を参考にカスタマイズを行うことに。

 

[minimalism]テーマを初めて利用する際は必ず、下記リンク[ひつじの雑記帳]をしっかりと目を通して下さい。重要な初期設定を怠ると正常に表示されなくなる恐れがあります。

 

hitsuzi.hatenablog.com

 

[ナビゲーションメニューバー]設置(2018/12修正版)

タイトル下のナビゲーションメニューバーですが、初期状態では表示されていませんが、標準で記述されているので[ひつじの雑記帳]さんより、メニューバーのコードをコピーし、デザイン→PC→記事上・下にペーストして完了となります。

 

実際に記事上、下にコードをコピペしてプレビューしてみたところ…

f:id:writer036bloger:20181219235419p:plain

[ CONTACT ]のアイコンだけがブランクになってしまいました。(画像は正常に修正済み)

コード自体はコピペしているので間違いないので、アイコンの提供元をチェックすることに。

 

[ Font Awesome ]のバージョンに注意(Ver.5.6.1)

Font Awesome

 

2018年12月現在のバージョンの設定方法を記載しておきます。

 

[Font Awesome]をはてなブログで利用するには、上記のリンクから[Font Awesome]のスタートページへ…

 

f:id:writer036bloger:20181219235226p:plain

 

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→記事上・下へコードをペースト。

 

f:id:writer036bloger:20181220044601p:plain

 

すると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)を変更することにより強弱のついたデザインになりますね。

 

saruwakakun.com

 

デザインまとめ

 

今まで、ライブドアブログしか利用していなくカスタマイズも避けてきましたが[はてなブログPRO]へ移行をキッカケにカスタマイズにチャレンジすることになりました。

 

小難しいことが大の苦手でHTMLやらCSSやらサッパリわからないズボラーなのですが、コピペOKなサイトもたくさんあるおかげで無知な私でも簡単にカスタマイズすることができました。

 

実際にカスタマイズする中で、上手くいかない場面もありますが、解決に向け考える事により、苦手なHTMLやCSSへの苦手意識も少しづつ改善しているような気もしています。

 

今回はオーソドックスなカスタマイズだったので、今後もバージョンアップした際には、皆さんのお役に立てる記事にしていきたいと思います。