はてなブログテーマを【Innocent】に変更した



YUTOです。

昨日更新した、

はてなブログのトップページを記事一覧化にした

2016.12.26
トップページを記事一覧表示にさせ、その後も夜中にまた色々とカスタマイズしていました。

そして、ブログテーマを人気の【Innocent】に変更しました。

Innocent – テーマ ストア

f:id:ytter3:20161227145301j:image

テーマを変更後、細かい部分を少し変更したので紹介していきます。

やったこと

トップページでのはてなスターの非表示

↓の記事を参考にさせていただき、トップページの記事一覧ではてなスターを表示させないようにしました。

blog.shinoegg.com

以下のコードを【デザイン-カスタマイズ-デザインCSS】に。

/*アーカイブ*/
.archive-entries .categories a {
display:none;
}
.archive-entries .hatena-star-star-container{
display:none;
}
.page-archive .archive-entry-body {
margin-top: 0px;
}
.page-archive .entry-thumb {
margin: 0px 26px 0px 0;
}

.entry, .page-archive .archive-entry {

margin-bottom: 20px;
padding-bottom: 20px;
}

そうすると、

このような表示から、

f:id:ytter3:20161227140242p:plain

トップページにてはてなスターが表示されなくなり、スッキリとした見た目にになりました。

f:id:ytter3:20161227140317p:plain

スマートフォンの画面でもトップページでスターの表示がされなくなり多少スッキリしました。

2017/2/5 追記 トップページにて記事本文も表示させないようにしました。(その他にもブログ名の変更やサイドバーの変更をしました。)↓f:id:ytter3:20170205104650p:plain

フォントの変更

はてなブログ全体のフォントを変更しました。

Before

f:id:ytter3:20161227141034p:plain

After

f:id:ytter3:20161227141047p:plain

フォントはGoogle Fontsから自分の好きなものを選び、【デザイン-カスタマイズ-デザインCSS】へ

body{
font-family: ‘Slabo 27px’, serif;
}

僕の場合はこのようにコードを入れてあります。

タイトルのみを変えたい場合は、

#title a{

好きなフォント

}

をデザインCSSに入力します。

ナビゲーションバーの変更

ナビゲーションバーはテーマを作られた方の記事を参考に変更しました。

moonnote.hateblo.jp

色のコードWEB色見本 原色大辞典 – HTMLカラーコードを参考に自分の好きなように書き換えれば簡単に変更できます。

ナビゲーションの文字色やマウスオーバー時の色を変えたい場合は

.menu-toggle,
.main-navigation a {
color: #000000;
}

.menu-toggle:hover,
.main-navigation a:hover {
color: #87cefa;
}

僕の場合このようになっています。

color部分を書き換えれば色の変更ができます。

まとめ

その他、細かい部分はちょくちょく変更していますが、大きくカスタマイズした箇所はこのような感じです。

参考にさせていただいた方々、ありがとうございます。

ブログをカスタマイズする方の参考になれば幸いです。