OILOG

lifestyle - botanical - gadjetなブログ。

ブログデザインのカスタマイズ。「UnderShirt」がシンプル過ぎたのでhtml・CSSを弄ってみた。

f:id:sushimikan:20200818204030j:plain

どうも、oioi(@oioi0815)です。

先日こんな記事を書きました。

oioiroom.hatenablog.com

 「UnderShirt」というはてなブログテーマを使ってみて、良いなと思ったところを紹介した記事です。

シンプルかつ細部に凝っているデザインが個人的にとても好きなのですが、一部不満に思っているところもあるんです。

それが「シンプル過ぎる」という点。

 

今回はこのテーマの不満な点を解消するために私がしているカスタマイズをご紹介します。別に不満に思っているわけじゃないけど、個人的に好き勝手にカスタマイズしているところもせっかくなので書きたいと思います。

 

今回の記事を読むことで、

  • 「UnderShirt」を適用している本ブログのカスタマイズ
  • カスタマイズするためのhtml・CSSコード

を知ることができます。

 

 

 

 

私のブログカスタマイズ

①全体のフォント変更

「UnderShirt」を適用すると、デフォルトのフォントがメイリオになっているかと思います。

私はメイリオよりも游ゴシックの方が好みなので、デザインCSSに下記を記述して変更しています。

 

/*フォントの設定(游ゴシック) */
body {
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS ゴシック", sans-serif;
}

 

もし同じく游ゴシックにしてみたい方は、上記をデザインCSSにコピペしてみて下さい。

 

②目次の装飾

 目次はこちらの記事で紹介されているコードをそのまま使用させてもらっています。

www.kurasitotonoe.com

とても参考になりましたのでぜひご覧になってみて下さい。

現在はこんな感じです。(以前投稿した記事の目次をスクショしました。)

f:id:sushimikan:20200817223814j:plain

"-Contents-"の下の点線などかわいくてお気に入り。

ですが、そのうち自分なりにシンプルかつおしゃれなデザインにアレンジする予定。

 

 

③大見出しの装飾

「UnderShirt」を適用すると、大見出しの装飾がシンプルを追求しすぎていて、大見出しと中見出しの区別がしにくくなってしまいました。

f:id:sushimikan:20200817224304j:plain

 なので、下記記事のコードをそのまま使用させてもらい、装飾を施しています。

saruwakakun.com

こちらの記事のコードを参考にする際にひとつ注意して頂きたいのが、"h1"を"h3"に変更すること。

はてなブログの記事内のいわゆる「大見出し」はh3を使用しています。ちなみにh1はブログタイトルなどに使用されています。

そのため、デザインCSSに記述する際にh1をh3に変更しないと、記事内の大見出しではなく、ブログタイトルに装飾が適用されてしまいます。

 

で、カスタマイズ後がこんな感じ。

f:id:sushimikan:20200817224932j:plain

大見出し文の背景に色をプラスし、左端に縦線を入れて強調しています。だいぶ見出しの区別がハッキリとしました。こちらもそのうち自分なりにアレンジする予定です。

 

 

④ブログタイトルの下にグローバルメニューを表示

記事タイトルの下にカテゴリを表示しているサイト、よく見かけませんか?

本ブログですとこんな感じです。

f:id:sushimikan:20200818194703j:plain

「TOP」「Category」「New post」....などなど横一列に並んでいるかと思います。これをグローバルメニューといいます。

これは「UnderShirt」に限った話ではありませんが、ただテーマを適用しただけではこのように表示させることはできません。少し手間ですが、デザインCSSとヘッダにコードを記述する必要があります。

 

私はこちらの記事で紹介されているコードをお借りしています。

blog.minimal-green.com

 

PC表示だとこんな感じ。「Category」にカーソルを乗せると、本ブログのカテゴリ(暮らしのモノ、ライフハックなど)が浮かび上がってきます。

f:id:sushimikan:20200818195920j:plain

 

 

 

モバイル表示だと、こんな感じで右上にメニューボタンが表示されます。

f:id:sushimikan:20200818200612j:plain

このメニューボタンをタップすると、下記のようにリストが表示されます。プロフィールと各SNSへのリンク、はてなブログの読者登録ボタンもデフォルトで設置されています。めちゃめちゃ便利。(コード作成された方には感謝しかない...!!)

f:id:sushimikan:20200818200632j:plain

 

ちなみに、文字色・背景色などはこのブログの雰囲気に合うように自分なりにいろいろアレンジして使っています。

 

 

まとめ:だいぶブログがおしゃれになった。コードの作成者様に感謝...!!

テーマ「UnderShirt」を適用後はシンプル過ぎて味気の無かった本ブログですが、様々なカスタマイズによりだいぶおしゃれになった気がします。程よくシンプルが個人的にベスト。

今回は私がカスタマイズする際に参考にした記事をいろいろと紹介しました。コードに関する知識があまりない私でも分かりやすいな~と思ったのでよかったら覗いてみて下さい。(というかコピペだけでカスタマイズできるようにしてくれてあるので、知識ゼロでも大丈夫)

コードを公開されている方は他にもたくさんいますので、ぜひ自分好みのデザインを求めて探してみて下さい。コードを勉強して自作しちゃうのもおもしろいですね。

自分のブログに味気なさやダサさを感じている方は、いろいろと弄ってみることをおすすめします!

 

参考になったと思った方は読者登録をして頂けると励みになります。

それでは本日もご覧いただきありがとうございました。