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

YUTOです。

昨日更新した、

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

そして、ブログテーマを人気の【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部分を書き換えれば色の変更ができます。

まとめ

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

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

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