はてなテーマ「minimalism」をベースにブログデザインをカスタマイズ

ミニマリストブロガーとしては見過ごせないので、はてなブログのテーマをあの言わずと知れた「minimalism」に変更してみました。

hitsuzi.hatenablog.com

今回のテーマ変更に伴ってブログデザインを一新したので、それらHTML/CSSのコピペコードを紹介します。

「minimalism」がデフォルトで出来ること

大前提として、まず本テーマをインストールしたら上記のリンクからある程度のカスタマイズは出来てしまいます。
出来ることは以下のリスト

• SNSシェアボタンの設置

ナビゲーションメニューの設置

• ブログタイトルのフォントサイズ
• テーマカラーの変更方法

目次のカスタマイズ

↓こんな感じに目次を出し入れするカスタマイズ。

これは下記のリンクから参考にしました。
はてなブログのブログテーマ「Minimalism」のカスタマイズまとめ - スキナコトワークス

見出しのカスタマイズ

ブログデザインで重要になる見出しのカスタマイズはこちらを参考にしました。

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

リンク先を見てもらって構わないですが、当ブログのデザインのCSSコードも貼っておきます。

大見出し（H3）

.entry-content h3 {
	position: relative;
	background: #f3f3f3;
	margin-tpo:30px;
	margin-bottom:20px;
	padding: 2px 5px 2px 40px;
	font-size: 20px;
	color: #474747;
	border-radius: 0 10px 10px 0;
}
.entry-content h3:before {
	font-family: "Font Awesome 5 Free";
	content: "\f5ad";
	display: inline-block;
	line-height: 40px;
	position: absolute;
	padding: 0em;
	margin-left:20px;
	color: white;
	background: #616161;
	font-weight: 900;
	width: 40px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	left: -1.35em;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
	border-bottom: solid 2px #333;
}

中見出し（H4）

.entry-content h4 {
	border-bottom: solid 3px #ddd;
	position: relative;
}

.entry-content h4:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #616161;
	bottom: -3px;
	width: 20%;
}

小見出し（H5）

.entry-content h5:before{
 font-family: "Font Awesome 5 Free";
 content: "\f56b";
}

その他邪魔なものを非表示

最後に、ミニマリズムを感じるように、余計な表示は消してしまいました。
例えばスマホページの下に現れる「はてなブログをはじめよう」の表示とか要らないので消去。

/* はてなブログをはじめようを非表示にする */
.footer-action-wrapper{
display:none;
}
/* はてなブログ開発ブログ等のリンクを非表示にする */
.touch-item-list{
display:none;
}
.guest-footer-content{
display:none;
}

「minimalism」超おすすめ

このテーマすごくいいよーと今までオススメされてたんですが、今回思い切って変えてみました。
だいたい半日もかからないで細かい設定まで終わったので、ほんとオススメかもしれない。
以上です。