冷めたコーヒー

Weniger, aber besser

はてなブログの設定を変更したのでメモを残しておきます。

f:id:mirucacule:20190923071309j:plain

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 などのメニューを設けていますが、対応するページは作成していませんし、今後どうしていくかは未定です。

おわりに

ひとまずここまで。細かい部分に拘るよりも、まずはアウトプットを出すことに集中したいです。