うっ晴れ！WEBデザイン初心者ぽたです。
ご覧いただき、ありがとうございます。
※このブログはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。
最近ブログをカスタマイズしたというブロガーさんに感化されて、私も見よう見まねで目次と見出しのカスタマイズをしてみました。
この記事では実際に使ったコードも紹介します。
自分、ウェブデザインを今まで勉強したことのない初心者なので、簡単なことしかしていません。
だからこそ再現性は高いと思います。
この記事がはてなブログのカスタマイズに興味のある方の参考になれば幸いです。
- こちらの記事はリンクフリーですが、WEBデザインの専門家ではないのでお問い合わせにお答えすることはできません。ご了承ください。
- デザインCSSにコードを入力すると、元々のテーマや過去の記事にまで影響が出るので、そちらもご了承の上お楽しみください。
- パソコンでの設定が必要です。スマホではできませんのでご了承ください。
- スマートフォンで表示させる場合は、レスポンシブデザインに設定する必要があります。
※CSS（Cascading Style Sheets）：Webサイトやページのデザインを設定するプログラミング言語
カスタマイズの目的
- 記事を開いたときに構成が分かりやすくなるように
- 色味をそろえて全体に統一感を出すため
- スマホで見たときも読みやすくするため
できるだけシンプルに、なによりも読みやすくなるよう調整したつもりです。
実際に使っているコード
目次と見出し（h3～h5）のデザインを調整しました。
以下のCSSを「デザイン → カスタマイズ → デザインCSS」に貼り付けています。
目次デザイン
👆️これを作ります。
.entry-content .table-of-contents {
margin: 0;
padding: .7em 1.2em 1.2em;
background: #f6f6f7;
font-size: 100%;
border: solid 1px #5a598c;
}
.entry-content .table-of-contents::before {
content: "目次";
position: static;
display: block;
text-align: center;
margin: 0 0 .8rem;
padding: 0 0 .4rem;
border-bottom: 1px dashed #9aa0c1;
font-size: 120%;
}
.table-of-contents ul {
padding-left: 10px;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1em;
list-style-type: decimal;
line-height: 1.6em;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
}
.table-of-contents li a {
text-decoration: underline;
line-height: 1.6em;
color: #3f3f3f;
}
「content: "目次";」の赤文字部分は「Contents」とかお好きなものに変えられます。
背景色や枠の色も変えられるのですが、下手に変えておかしくなるといけないので一旦こちらで落ち着きました。
大見出しのみを表示する
大見出し（h3）だけが表示されるようにしました。
ネタバレ防止のために「中見出しや小見出しを先に見せたくない」、そんな時に使えます。
上のコードに下に以下のコードを付け足すだけです。
.table-of-contents ul {
display: none;
}
ここまでできたら設定を保存すると良いです。
目次を設定した過去の記事を見るか、下書き記事の「目次」をクリックしてプレビューを確認してみましょう。
見出しデザイン
大見出し（h3）
シンプルに、薄い水色（skyblue #87ceeb）の背景に白抜きの文字（#ffffff）を入れてみました。
お好みで背景色を変えると個性が出ると思います。
.entry-content h3 {
color: #ffffff;
padding: .5em .75em;
background-color: #87ceeb;
border-radius: 4px;
}
中見出し（h4）
グレー（#f5f5f5）の背景に、左と下に大見出しと同じskyblue（#87ceeb）の線を入れています。
.entry-content h4 {
padding: 4px 10px;
background-color: #f5f5f5;
border-left: 8px solid #87ceeb;
border-bottom: 2px solid #87ceeb;
}
小見出し（h5）
👆️これを作ってみます。
大見出しと同じskyblue（#87ceeb）の点線です。
.entry-content h5 {
padding: .25em 0 .25em .75em;
border-bottom: 3px dotted #87ceeb;
}
カラーコードについて
配色は「WEB色見本 和色大辞典」を参考にしています。
#ffffff（白）というように「#と6つの文字」がカラーコードです。
私は全体的に青系でまとめてみました。
参考にしたサイト・本
はてなブログのブロガーさん中心に先人の知恵をお借りしました。
参考にさせていただいた皆様、ありがとうございます。
サイト
シンプルな目次
目次を大見出しだけにする方法
書籍
本気で稼げるアフィリエイトブログ
亀山ルカさんも元々ははてなブログからブログキャリアを始めた方です。
見出しのデザインは「本気で稼げるアフィリエイトブログ」の184～188ページを参考にしました。
まとめ：カスタマイズって個性が出ますね
派手な装飾はせず、青系さわやかトーンで統一しました。
見出しで自然に区切りがわかるようにしています。
今後もブログ全体が見やすくなるよう、デザインを整えていく予定です。
大したことはできてませんが、カスタマイズでも自分らしさが発揮できるのはうれしいものですね。
とにかく、これ以上サイトの読込みが遅くならないことを祈る！
ついでにこんなのも作ってみました。
ここまで読んでいただき、ありがとうございます。
では、うっ晴れ！
👉あわせて読みたい
