【WordPress】目次のおすすめカスタマイズ【コピペでOK!】

ブログ運営のメモ WordPress

ブログ初心者なりに、目次をおしゃれにデザインしてみたい!

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

ですが、多くの人が同じテーマを使っているとどうしても同じ型になってしまったり、雰囲気が似てきてしまうことがよくあります。

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

ということで今回は目次を少しだけカスタマイズしたいと思います。

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

やること
・目次タイトル
・H2見出し
・H3見出し
・モバイル端末で表示するときの設定(レスポンシブデザイン)

以上を画像付きで説明します。(コピペでできるので2分でできます。)

ちなみにこのブログは、

をベースに、自分でカスタマイズして作成しています。

sponser link

目次タイトル

事前準備

まずは「Cocoon設定」から。

WordPressダッシュボードの「Cocoon設定」→「目次」に進みます。

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

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

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

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

「外観」→「テーマエディター」と進み、「style.css」に以下を書き込みます。

.toc-title{
font-weight:bold;     /*太字*/
color:#38b48b;     /*フォントの色*/
}

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

H2見出しをカスタマイズ

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

.toc-list > li a {
font-weight: bold;
color: #708090;
display:block;
margin-top:10px;
margin-left: 10px;
}

FontAwasome4.7から、先頭につけるアイコンを設定します。

FontAwesomeが便利です。

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

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

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

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

H3見出しをカスタマイズ

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

.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: 30px;
}

それぞれの見出し前に「・」を付けます。

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

.toc-list > li li a::before {
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #38b48b;
position: relative;
margin-bottom: 2px;
}

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

モバイル端末で表示するときの設定

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

@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: 8px;
}
}

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

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

コードまとめ

/************************************
** 目次
************************************/
.toc-title{
font-weight:bold;
color:#38b48b;
}

.toc-list > li a {
font-weight: bold;
color: #708090;
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: #708090;
margin-left: 30px;
}

.toc-list > li li a::before {
content: ”;
width: 8px;
height: 8px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #38b48b;
position: relative;
margin-bottom: 2px;
}

@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: 8px;
}
}

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

このように、ページ内のほとんどのデザインがCocoon+スキンで完成しているのですが、初心者でも細かい部分をカスタマイズすることができます。

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

こちらの記事もよく読まれています。

【もしもアフィリエイト】かんたんリンクをカスタマイズ【コピペでOK!】
もしもアフィリエイトのかんたんリンク。手軽で便利ですが、新しいデザインがちょっとダサくて気になるのでカスタマイズしました。style.cssにコピペで完成なので是非使ってみてください!
【スキルなしでもOK!】アイキャッチ画像の作り方【canva】
無料の画像編集ソフト「canva」の使い方を解説します。デザイン経験のない初心者の方でも、canvaを使えばサクっとおしゃれな画像をデザインすることができます。もちろんアイキャッチ画像だけでなく、名刺やポストカードのデザインも可能です。
【著作権、大丈夫ですか?】おすすめの安心フリー素材サイト9選
おすすめのフリー素材サイトを紹介します。また、サイト運営者やクリエイターなら誰しもが気になる「著作権」についても、掲載サイトごとに徹底的にまとめました。

コメント

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