Web
Analytics

雨のち晴れ

思った事をノンジャンルで綴ります

雨のち晴れ

MENU

はてなブログ おすすめテーマ「UnderShirt」カスタマイズ

はてなブログ以外の方も

UnderShirtカスタマイズ

@パパです。こんにちは。

少し前にブログ開設3ヶ月の稼働報告をさせてもらいました。

この3ヶ月の中で様々なブログのカスタマイズをしてきましたが、今回はそれをご紹介します。 

  

テーマを「UnderShirt」に変更しました

 

ブログを始めた頃のテーマは「Evergreen」という公式テーマを使っていました。

 

白が基調のシンプルなデザインで、結構気に入っていたのですが、サイドバーが表示されないテーマでした。

私は大半がスマホからブログを確認するのですが、「Evergreen」はスマホで見ると記事も大きく表示されて綺麗なのですが、パソコンで見るとサイドバーがないため、記事のみでかでかと表示されていました。

それで、すごく迷ったあげく別のテーマを探すことにしました。

 

私ははてなブログ無料版なので、トップページが記事一覧表示になるように設定していました。

そこで、記事一覧ページがカード形式に表示されるテーマがかっこいいなと思い、色々探した結果、無料版でも綺麗なカード表示ができる「UnderShirt」に決めました。

blog.hatena.ne.jp

こちらから見てもらえば分かると思います。

meipapa.hatenablog.jp

 

UnderShirt」すごくおすすめですよ。

では、私が「UnderShirt」に変えた後に行ったカスタマイズをお伝えしたいと思います。

ほとんどが「UnderShirt」を使っている方のサイトを見て、真似したものになります。ただ、自分なりに少し変更は加えています。

気に入っていただけたら是非使ってみてください!

CSSと入っているものは、すべて「デザインCSS」の部分に貼り付けるだけで大丈夫です。

<img src=”drink.jpg” alt=”はてなブログ デザインCSSの設定”>

貼り付ける前には必ず元のCSSのバックアップを取るようにお願いします

  

私が変えた「UnderShirt」のデザイン

テーマカラー、フォントサイズ、記事一覧表示、サイドバー、この4つを変更させました。

テーマカラーを白色に

以前の「Evergreen」も元々白色がベースだったので、今回も白色ベースにしました。

これは私の無知で知らなかったのですが、背景色の変更だけで変えられたんですね!

「デザイン」→「レンチのマーク(カスタマイズ)」

<img src=”drink.jpg” alt=”はてなブログ 背景色の設定”>

それなのにこんなCSSを貼ってしまいました。

css

どちらでも白色に変更は可能です!

 

フォントサイズと行間の変更

フォントサイズは少しだけ大きくしたのと、行間を少し広くしました。

css

フォントサイズはデフォルトより少し大きめの方が見やすいと思います。行間については、好みが分かれますが、私は1.8倍の広さに設定しています。

 

記事一覧表示のカスタマイズ

記事一覧表示にしたときに、記事本文、はてなスターの表示を消してすっきりさせました。

また、日付位置は右下、カテゴリー表示の位置を左上にして見やすくさせました。

お好みで調整してみてください。

css

サイドバーのカスタマイズ

サイドバーは初期の状態だと、各項目の上下にグレーの区切り線が入っています。

こんな感じに。

<img src=”drink.jpg” alt=”はてなブログ カテゴリーデフォルトの状態”>

これをなくして、各項目の下に少し薄くしたグレーの下線を引きました。

こんな感じです。 

<img src=”drink.jpg” alt=”はてなブログ カテゴリー下線カスタマイズ後”>

css

まとめ

UnderShirt」まだまだこれから自分でカスタマイズができそうです。

とりあえずは、ここまで。

記事一覧表示がカード形式になっているのは非常に見やすいですよね。

他にも「見出し」や「もくじ」もカスタマイズしましたので、今後お知らせしたいと思います。

 

いつも最後まで読んでいただき、ありがとうございます!