Skip to content
Published:

年始に向けてブログのデザインを整える

IMAGE: https://cdn-ak.f.st-hatena.com/images/fotolife/i/ikmbear/20201231/20201231150902.png

f:id:ikmbear:20201231150902p:plain

みなさん年末いかがお過ごしでしょうか。私は職場の勉強会の資料を作りたくなくて、現実逃避しています。

さて今日で一年も終わり。来年はたくさんブログを書けるように、はてなブログのカスタムCSSを利用してブログのデザインを変更してみました。

大した変更ではありませんが、地味にハマったところを自分への備忘録として書き残しておきたいと思います。

カスタムCSSの使い方

カスタムCSSを開くには、まずはてなブログの右上に表示されている「デザイン」メニューを選択します。

f:id:ikmbear:20201231151440p:plain

次に、表示されたデザインメニューのサイドバーから「カスタマイズ」を選択します。

f:id:ikmbear:20201231151639p:plain

カスタマイズタブにある「カスタムCSS」の欄にCSSを書いていくことで、デザインが適用されます。

f:id:ikmbear:20201231151724p:plain

フォームからフォーカスが外れるとプレビューが更新され、画面上部の「変更を保存する」ボタンを押すことでブログにCSSが反映されます。カスタムCSSの使い方は以上です。

変更点(ざっくり)

デザインについては、無料配布されているsobokuというテーマをベースにしています。

記事全体

f:id:ikmbear:20201231152541p:plain
#wrapper {    box-shadow: 0 2px 4px rgba(67,133,187,.1);    padding: 20px 30px;    border-radius: 12px;    background-color: #fdfdfd;}/* スマホ用 */@media screen and  (max-width: 559px){#container {    padding: 10px}#wrapper {    padding: 10px 10px;}}.entry-content h2 {    font-weight: 700;}.entry-content h3 {    font-weight: 600;}.entry-title-link {    font-weight: 700;    }

目次

f:id:ikmbear:20201231161001p:plain
.entry-content .table-of-contents {    background-color: #f7f9f9;    border-radius: 5px;    padding: 16px 20px;    margin: 36px 0;    border: none;}.entry-content .table-of-contents:before {    content: "◆目次";    border-bottom: 1px solid #e6e6e6;    font-weight: 600;    margin-bottom: 16px;    color: #787c7b;}    .entry-content .table-of-contents>li>a {    font-weight: 600;    padding-top: 3px;}.entry-content .table-of-contents * {    color: #787c7b;    text-decoration: none;    list-style: none;    padding: 8px 4px;}

コードブロック

f:id:ikmbear:20201231152655p:plain
.entry-content pre {    padding: 16px;    border-radius: 3px;    background-color: #2c2d3a;    color: #F7F7F7;}

引用ブロック

f:id:ikmbear:20201231152726p:plain
.entry-content blockquote {    border: none;    color: #626e77;    margin: 1.4rem 0;    padding: 25px 36px;    line-height: 36px;    background: #f7f9f9;    border-radius: 3px;}

サイドバーのアイテム

f:id:ikmbear:20201231152435p:plain
.hatena-module {    padding: 15px 20px 15px;    box-shadow: 0 2px 4px rgba(67,133,187,.1);    border-radius: 12px;    background-color: #fdfdfd;}.hatena-module-title {    font-weight: 700;    }

やっていてつまったところ

メディアクエリが適用されない

記事全体について、修正初期段階ではスマホで見ると少し幅が狭かったです。

ブログのCSS少しいじった。PCは良さげだけど、スマホだともっと画面いっぱいに広げた方が読みやすそう。
暇な時変えよう pic.twitter.com/GB2l3QTyOa

— Ikuma_t (@ikumatdkr) 2020年12月31日

メディアクエリでスマホの場合だけpaddingを広げようとしたのですが、なぜか適用されませんでした。

/* ミスっていた時のCSS * //* スマホ用 */@media screen and  (max-width: 559px){#container {    padding: 10px}#wrapper {    padding: 10px 10px;}}#wrapper {    box-shadow: 0 2px 4px rgba(67,133,187,.1);    padding: 20px 30px;    border-radius: 12px;    background-color: #fdfdfd;}

これはCSSの書き順の問題だったようで、メディアクエリーの箇所を最後に適用するようにしたら、正しく反映されました。This is「カスケードスタイル」…

1階層目のリストにだけ、CSSを適用するセレクタ

f:id:ikmbear:20201231161526p:plain

目次部分はすべて順序付きリストで構成されているので、単純にli指定だとすべてのアイテムに装飾が施されてしまいます。

今回は一階層目(つまり記事内の見出し2)だけを太字にしたかったので、直下の子要素を指定する>を利用して、.table-of-contents>li>aとしました。

参考:CSSのセレクタチートシート | webliker

おわりに

ブログのデザイン変更は今年中にやろうと思っていたので、完了できてよかったです😊

来年の執筆まわりの目標としては

こんなところをやっていけたらいいな〜と思っています。

それではみなさま良いお年を〜🐄