【Cocoon】ブログ初心者でもできる『目次』のおしゃれなカスタマイズ【コピペでOK!】

ブログ運営のメモ WordPress

こんにちは、yujiです!WordPressで立ち上げたブログを自分なりにデザインしています。

「ブログ初心者なりに、ブログ記事の目次をおしゃれにデザインしてみたい。」

WordPressのテーマの多くは、隅々まで洗練されたデザインが行き届いていて本当に使いやすいものばかりです。

しかし多くの人が同じテーマを使っているので、どうしてもブログの雰囲気が似てきてしまいます。

そんな時、WordPressの醍醐味として、ちょっとした色味や幅の変更など、自分の好みに合わせてデザインすることができます!

ということで、この記事ではブログ初心者でもできる『目次』のカスタマイズを紹介します。

sponser link

『目次』の完成形はこちらです。

このページにも使われているとおり、目次の完成形はコチラです。

以上のような『目次』について、コピペでできるカスタマイズを紹介します。デザインは、モバイル表示にも対応しています。

※このブログはWordPress/Cocoonをベースにカスタマイズしています。

目次のカスタマイズ方法

Cocoon設定

まずは設定環境を整えます。

WordPressメニューの「Cocoon設定」から「目次」に進みます。

「目次ナンバー」を「表示しない」に設定してください。

以上の設定で、デフォルトの目次はこのように表示されています。何もさわらなくてもすでにスタイリッシュです。事前準備はこれでOK。

メニュー「外観」の「テーマエディター」から「style.css」を開き、以下のコードを書き込みます。

目次タイトルを太くして、色を付けます。

赤で囲った部分を変更します。

目次タイトル
.toc-title{
font-weight:bold;     /*太字*/
color:#7b7b7b;     /*フォントの色*/
}

これで目次タイトル部分のデザインは完了です。

H2見出しをカスタマイズします。

赤線で囲った部分がH2見出しです。H3と差をつけるために文字スタイルを太くして、色と表示位置も少し変えました。

H2見出し
.toc-list > li a {
font-weight: bold;  /*文字は太目に*/
color: #7b7b7b; /*文字カラー*/
display:block;
margin-top:10px;
margin-left: 10px;
}

H2見出しの先頭につけるアイコンを設定します。

FontAwasome4.7でおしゃれなアイコンが手軽に使えます。(CocoonはFontAwasome5.0ver.には対応していません。)

リンク先でアイコンを選び、アイコン表示画面のUnicode「f144」をコピーします。FontAwesome使用時のcssの書き方は以下の通り。

H2見出しのアイコン
.toc-list > li a::before {
font-family: FontAwesome;
content : “\f144”;
margin-right: 7px;     /*アイコンの表示位置を調節します*/
}

これでH2見出し部分のデザインは完了です。

H3見出しをカスタマイズします。

赤線で囲った部分がH3見出しです。H2と差をつけるために文字サイズを小さくして、色と位置も少し変えました。

H3見出し
.toc-list > li li a {
font-weight: normal;  /*文字の太さは普通*/
font-size: 95%;  /*文字を小さくします*/
color: #7b7b7b;   /*文字カラー*/
margin-left: 3em;  /*右に寄せます*/
}

H3見出しの先頭につける「・」を設定します。

H2と同様にFontawesomeでアイコンを表示してもよいのですが、ここでは背景を「・」っぽく加工してドット風に表示します。

H3見出しのアイコン
.toc-list > li li a::before {
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;
position: relative;
margin-bottom: 2px;
}

これでH3見出し部分の設定は完了です。

モバイル端末で表示に対応させます。

モバイル端末では画面幅が短くなるので、見やすいように位置を微調整しました。

モバイル表示
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.15); /*ボックス全体の影もつけます*/
}

この部分は「margin」の数値を変えればそれぞれの見出しが移動するので、レスポンシブテストを確認しながら好みの位置に最適化できます。

レスポンシブテストは、ページの画面下から確認できます。

これでモバイル対応の設定は完了です。

コードまとめ

以上で説明したコードをまとめると以下の通りです。

コードのまとめ
/************************************
** 目次
************************************/
.toc-title{
font-weight:bold;
color:#7b7b7b;
}
.toc-list > li a {
font-weight: bold;
color: #7b7b7b;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: FontAwesome;
content : “\f144″;
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #7b7b7b;
margin-top:0;
margin-left: 3em;
}
.toc-list > li li a::before {
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #90C31F;
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.15);
}

コピペができたら「ファイルを更新」をクリックします。

これで目次デザインの完成です。

『目次』は読者にとっても、情報を得やすくするために有効なので、是非コピペでカスタマイズしてみてください。

この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!

【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!
【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選!
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!

コメント

タイトルとURLをコピーしました