kenkilog

新人ITエンジニアでミニマリストのブログ

はてなブログをミニマリストっぽくシンプルに

f:id:kenkitube:20180506182206p:plain

現在このブログでも使っているはてなブログの人気テーマ「ZENO-TEAL」。

流行りのカードスタイルのブログテーマでとても見栄えがいいのですが、人気のため他のブログと見た目が被ってしまうのは避けられません。

かといってCSSを頑張りすぎると逆にごちゃごちゃしてミニマリストっぽくなかったので、シンプルにまとめてみました。

f:id:kenkitube:20180506191347p:plain

人様に見せられるような凝ったデザインではないので申し訳ありませんが、一応コードを載せておきます。

ZENO-TEAL カスタマイズ

1.ブログタイトルを黒文字で背景を白に

f:id:kenkitube:20180506191527p:plain タイトルの背景を白にして、黒文字だけ表示させました。

これだけで結構見た目変わります。

#blog-title {
    background: #fff;
} 
#blog-title #title a {
color: #333;
}

2.シンプルな上下線の見出し

中見出し(h4)のデフォルトデザインに上下線を付け足しました。

特にこれといった工夫はなく、単純に border を付け足しています。

太さと色は以下のコードを変更すればよし。

.entry-content h3{
    border-top:solid 1px;
    border-bottom:solid 1px;
    border-color:#333;
}

3.画面上部グローバルヘッダーの非表示

f:id:kenkitube:20180506192150p:plain タイトル背景を白くしたらはてな標準の上部のグローバルヘッダーが目立つので消します。

#globalheader-container {
    display: none;
} 

4.カテゴリーラベルの非表示

f:id:kenkitube:20180506192932p:plain これもなんとなく消しました。

.page-index .entry-categories, .page-entry .entry-categories{
    display:none;
}

5.強調文字の蛍光マーカーを非表示

f:id:kenkitube:20180506193624p:plain 蛍光ペンで引いたようなデザインはおしゃれだし、強調が一目で分かって素晴らしいですね。

このブログでは強調(strong タグ)をよく用いるため、見た目がクドくならないよう非表示に。

.entry-content strong{
    background:none;
}

6.リンクの色をGoogleと同じに

f:id:kenkitube:20180506193932p:plain Googleはクリックされやすい色を絶対研究しているはずなので、こちらも便乗して同じ色に。

それぞれ未クリックは青、クリック済みは紫にしました。

.entry-content p a:visited {
    color:#660099;
}
.entry-content p a {
    color:#1A0DAB;
}

まとめ

以上です。

これでアクセスがどうこう変わるとは思えませんが、見た目が自分好みに変わってスッキリしました。

また何かあれば書きます。