ロケLOG

大学生のロケットマンによるブログ

「Minimalism 」でカスタマイズしたまとめ【はてなブログ】

f:id:rocketman5th:20170806001004p:plain

シンプルなテーマ「Minimalism 」

これをもっとシンプルにかっこよくをもっとうにカスタマイズしました。

参考にやったことをまとめました!!

 

基本的なカスタマイズは製作者によってまとめられています。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

 

見出し

f:id:rocketman5th:20170805232041p:plain

h3はfontawesomeのアイコンを使っています。

h4はドットの下線

h5はfontawesomeのチェックマークのアイコン

 

参考にしたのは以下のサイトです。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 全て掲載されています。

(色は変更しました)

 

配色は以下のサイトが非常に参考になります。

配色パターン見本40選:ベストな色の組み合わせ確認ツール

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

グローバルナビ

f:id:rocketman5th:20170805224905p:plain

ヘッダー→タイトル下

グローバルナビを「Minimalism 」の使い方からコピペして、色の着いた部分を変えます。

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">


<div class="menu"><a href="http://www.rocketman-blog.com/"><i class="fa fa-home" aria-hidden="true"></i> ホーム</a></div>


<div class="menu"><a href="http://www.rocketman-blog.com/archive/category/ぼくの意見"><i class="fa fa-commenting-o" aria-hidden="true"></i>僕の意見</a></div>


<div class="menu"><a href="http://www.rocketman-blog.com/archive/category/日記"><i class="fa fa-calendar" aria-hidden="true"></i>日記</a></div>


<div class="menu"><a href="http://www.rocketman-blog.com/archive/category/"><i class="fa fa-book" aria-hidden="true"></i></a></div>

</div>
</nav>

:飛ぶURL

本なら自分の本のカテゴリーのURLを貼ります。

 

:fontawesome

Font Awesome Icons

ここより、アイコン検索。(英語で)

f:id:rocketman5th:20170805231123p:plain

矢印の部分をオレンジにはります。

f:id:rocketman5th:20170805231436p:plain

 

:メニューに表示する文字

表示したい文字を書きます。

 

デザインCSS

グローバルナビの背景の色の変更

 #gnav{background:#61C359;}

 グローバルナビの文字の色の変更

#gnav .menu a{color:white;}

アイコンの色の変更

.fa-home:before{color: white ;}

 .fa-homeの部分は使ったアイコンの名前を入力します。

 

モジュール

モジュールとはサイドバーにあるカテゴリーや人気記事といったものです。

 

f:id:rocketman5th:20170806000659p:plain

文字の色の変更

.hatena-module{color:#61C359;}


.hatena-module-title a{color:#61C359;}

 上だけでできると思ったのですが、なぜかアーカイブだけ色が変わりませんでした。

下はアーカイブだけの色が変わります。

 

文字の前のアイコンの色変更

.hatena-module-title::before{color: #61C359; }

 モジュールのチェックマークのアイコンの色が変わります。

 

モジュールの下線

.hatena-module-title{border-bottom: dotted 3px #C0C0C0;}

 下線を引けます。これはドット(点線)です。

 

 パンくずリスト消去

前のデザインとかでパンくずリストをONにしていたりします。

消し方は簡単で、

記事→パンくずリストのチェックをはずす

だけです。

 

「Minimalism 」はパンくずリストがないほうがきれいです。

 (僕の意見)

パソコン版ですとそんなに問題ないのですが、スマホで見ると最初のほうに幅をとります。

f:id:rocketman5th:20170805235345p:plain



「○○日前」の消去

f:id:rocketman5th:20170805235734p:plain

他の人のブログなどを見ているときに、この「○○日前」っていうのを見ると、

「古い記事なのか~」となんとなくテンションが僕は下がるので消去しました。

cssに

span.author.vcard{ display:none; }
span.entry-footer-time {display: none;}

 

以上でおわりです!!