ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑪目次を整えるCSS】

ブログ

こんにちは
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回は記事内の目次を整える
方法を紹介していきます!

当ブログ記事内の目次は
このようになっています。

今回のカスタマイズ
  • 目次の設定
  • 目次の調整

目次を設定する

目次の設定方法
  • cocoon設定から
    目次を設定する

目次の設定

やり方
  • wordpressメニュー
  • cocoon設定
  • 目次

  • 目次切り替え
    ・最初から目次内容を表示しない
  • 表示条件
    ・2つ以上見出しがあるとき
  • 目次表示の深さ
    ・H3見出しまで
  • 目次ナンバーの表示
    ・表示しない
  • 目次の中央表示
    ・目次をメインカラムの中央に表示する
  • 目次の表示順
    ・広告の手前に目次を表示する
  • 見出し内タグ
    ・H見出し内のタグを有効にする

「目次タイトル」「目次切り替えの言葉」
自身のサイトに合わせて入力してください。

設定が完了したら
左下の「変更をまとめて保存」を押します。

ファイルを保存を押さないと
変更内容が反映されないため気をつけてください!

目次の設定はこれで終わりだよ!

【コピペでOK!】目次のデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
** 目次
************************************/
.toc-title{/*目次タイトルを太く*/
font-weight:bold;
color:#7b7b7b;
}
.toc-list > li a {/*小見出し(H2)*/
font-weight: bold;
color: #7b7b7b;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {/*小見出し(H2)の先頭につけるアイコン*/
font-family: FontAwesome;
content : \f144;/*手打ち*/
margin-right: 7px;
}
.toc-list > li li a {/*小見出し(H3)*/
font-weight: normal;
font-size: 95%;
color: #7b7b7b;
margin-top:0;
margin-left: 3em;
}
.toc-list > li li a::before {/*小見出し(H3)の先頭につける「・」*/
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 a:hover {
color: #333333;
text-decoration: underline;
}

.toc-list > li a::before {/小見出し(H2)の先頭につけるアイコン/
font-family: FontAwesome;
content : “\f144“;/手打ち/

.toc-list > li li a::before {/小見出し(H3)の先頭につける「・」/
content: “”;/手打ち/

上記2か所の””は半角で入力しなおす
必要がありますので手打ちしてください。

『”(全角)』を打った後に変換を押し
『”(半角)』に打ち直してください。

“\f144“は見出し横のアイコンの番号になります。

変更する場合はFontAwesome4.7より選びます。

(変更方法は過去記事の②を参考にしてください)

background: #90C31F;/ここで緑点の色を変更できます/
H3見出しの「・」の色を変更する場合は
上の色番号を変更してください。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

変更した目次が
スマホとPC画面の両方で
反映しているか確認をします。

目次が上の画像のように
表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回は記事内の目次について
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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