【カスタマイズ】ZENO-TEALをシンプルにスッキリさせるCSSコピペ集

はてなブログにもWordPressみたいにテーマがあることに今更気づいた。じわる😂です。

とりあえず人気No.1は「Minimalism」ってやつらしい。たしかにミニマム感漂うシンプルなデザインだな。モテそう。

だがしかし、なんてゆーか、トレンディじゃない。

ざっと見た限り、一番トレンディ感が強かったのが「ZENO-TEAL」。WordPressみたいな今風のカードスタイルが素敵やん。

てなわけでさっそく実装してみた。 

カスタマイズなしの裸の状態

うん。このままでも全然よい。現に多くのブロガーが色も含めてこのまま使用していたのが散見された。

まーでも、どーせなら更にカスタマイズしたいよね。個人的なノリとしては、この緑のところとか全部払拭したい。

背景もいらないしメインコンテンツの枠線もいらないかな。サクッと出来そうなところで以下のポイントが思い当たる。 

なので、これからこれらを全部カスタマイズしていく。

たぶんCSSコピったらそのまま転用できると思うので、やりたい方はどうぞご自由にｗ 

カスタマイズの下準備

まず、このテーマが構造的にどないなってるかってゆーのを把握しておく必要がある。上記のような簡単な装飾をいじる系はすべてCSSで管理されているので、大本のCSSを確認する。

「デザイン」→「カスタマイズ」→「デザインCSS」だ

これを開くと、2行目に
@import "https://blog.hatena.ne.jp/-/theme/10328749687225937733.css";
このような記述がある。

これは、このテーマは前提としてこのCSSを読み込んでまっせーーーっていう指示だ。このリンクをクリックすると、このテーマの元のCSSが明らかになる。

まー、基本的に初心者はこんなのを見ても意味不明だと思うので、見なくていいですｗ

この中で書かれている大事なことは、このテーマはレスポンシブなんで、まずはPCのデザインをしてからタブレット、からのスマホのデザインを画面サイズによって制御してますよーってこと。

以上を踏まえたうえで、早速カスタマイズしていこう。（上記画像の①〜⑥の順で） 

①サイト全体の背景色を白く

上記のCSSをコピーして「デザインCSS」に貼り付けると、サイト全体の背景が白くなったはずだ。 

 ②ヘッダーの背景色＆文字色の変更

上記のCSSをコピーして①の下に貼り付け。ヘッダーの枠が白くなり、テキストが黒くなったはずだ。 

ちなみに、タイトルだけにするため、ブログの説明文も消してある。消す必要がなければ21行目をまるっと削除しておけばよい。

また、高さに関する調整は4行目を適当に100pxとかにすれぼよい。 

③メインコンテンツの枠の削除

上記のCSSをコピーして②の下に貼り付け。 

④サイドバータイトルの背景色＆文字色

上記のCSSをコピーして③の下に貼り付け。また、タイトルに関しては文字を大きくしたり太くもしていたと思う。 

⑤サイドバーの最新記事リストの装飾

上記のCSSをコピーして④の下に貼り付け。 

⑥カテゴリーのバッチの背景色＆文字色＆角丸化

上記のCSSをコピーして⑤の下に貼り付け。

以上で、背景色が白で文字が黒で統一されたデザインの完成だ。 

まとめ

今回は実装ついでのサクッとしたカスタマイズしか着手していない。本日以降もどんどんカスタマイズはしていくつもりなので、またご紹介できればと思う。

カスタマイズの進捗具合でも確認しに、このブログを覗きに来てくれる読者が一人でもいれば幸いだ😂