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

f:id:kenkitube:20180506182206p:plain

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

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

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

f:id:kenkitube:20180506191347p:plain

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

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

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

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

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

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

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

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

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

#globalheader-container {
    display: none;
}

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

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

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

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

.entry-content strong{
    background:none;
}

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

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

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

以上です。

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

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

ケンキブログ！