シンプルでかわいいMinimalismのカスタマイズ

 

※HTMLやCSSを変更する際は必ずバックアップを取ってからにしましょう。

はてなブログテーマ「Minimalism」に変更

f:id:motimoti444:20201102233533p:plain

引用:シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました

このブログのテーマを「Brooklyn」から「Minimalism」に変更しました。

今回は「Minimalism」で行ったカスタマイズについて紹介します。

▽「Minimalism」のテーマはこちらまずお読みください。

レスポンシブに対応しており、スマホでの利用も可能となっています。

私はレスポンシブデザインに設定しています。

 

見出しの変更

見出しのCSSはこちらのサイトさんの物をお借りしました。

シンプルの欄の

  • 「下線付き」
  • 「両端に線を伸ばす」
  • 「二重線バージョン」

等がシンプルかつかわいらしいです。

 

見出しに関しての基本知識は

  • 大見出し=h3
  • 中見出し=h4
  • 小見出し=h5

ということくらいしかなかったのですが、簡単にカスタマイズできました。

もっと詳細を知りたい方はこちらのサイトさんが分かりやすいです。

【簡単】はてなブログの見出しをカスタマイズする方法【コピペでOK】

 

グローバルメニューの設置

このテーマを作成した方のカスタマイズでグローバルメニューを設置しました。

私はグローバルメニューのアイコンはいらないと感じたため削除しています。

グローバルメニューのアイコンを消す方法

<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>

配布されているHTMLには最初からアイコンが表示されるようになっています。

上のマーカーの部分を削除することでアイコンの表記がなくなります。

※HTMLやCSSを変更する際は必ずバックアップを取ってからにしましょう。

 

 

 

蛍光ペン風のアンダーライン

こういう感じに

太字の文字が蛍光ペンを引いたようになるカスタマイズをしました。

こちらのサイトさんからコピペさせてもらいました。

色の変更はこちらのサイトのカラーコード変換を利用させてもらいました。

 

おわりに

今回は「Minimalism」のカスタマイズの紹介でした。

最初は「SOHO」にしていろいろ試してみてて、

グローバルメニューのカスタマイズしてたら表示が全然上手くいかなくて「Minimalism」に変更しました。

 

「Minimalism」ははてなブログのテーマの中でも1番人気みたいですし、ここで紹介していないカスタマイズも沢山あるみたいなので、気になる方は調べてみてください。