はてなブログの設定を変更したのでメモを残しておきます。
TL;DR
- はてなブログのテーマを「Minimalism」に変更した。
- ヘッダをカスタマイズした。
テーマ変更
もともとは、「Sentence」というテーマ(シンプルで文章が読みやすいレスポンシブ対応のはてなブログテーマ【Sentence】 - おきがるみがる)を使っていました。使っていたといっても、まだ記事も投稿していませんし、暫定的に使っていただけでした。変更しようと思った理由は特にないのですが、シンプルで美しいテーマを探していたら「Minimalism」というテーマ(シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳)に行き着いたので、使ってみよう!と思った次第です。変更方法に関しては、特に説明するまでもないと思うので割愛します。テーマの配布、感謝です。
ヘッダのカスタマイズ
「管理画面」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」の順にページを推移します。そこに、以下の CSS を追加することによって、ブログタイトル下にナビゲーションメニューを追加できます。コードは、先ほどの「Minimalism」の URL に記載されているものです。他にも、細かい設定の仕方について書かれているので、より自分好みに設定したい場合は参考にするとよいと思います。
<nav id="gnav"> <div class="gnav-inner" id="menu-scroll"> <div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div> <div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div> <div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div> <div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div> <div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div> <div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div> </div> </nav>
href タグの "URL" の部分は適切に指定してあげます。例えば、ABOUT の部分であれば、次のようにします。
<a href="https://mirucacule.hatenablog.com/about">
とりあえず、TIPS や DESIGN などのメニューを設けていますが、対応するページは作成していませんし、今後どうしていくかは未定です。
おわりに
ひとまずここまで。細かい部分に拘るよりも、まずはアウトプットを出すことに集中したいです。