シンプリシティ2おすすめカスタマイズ⑥「目次をカスタム」

酒屋ブロガーカズユキです

今回も

Simplicity(シンプリシティ)2

カスタマイズについて

引き続き書いていこうと思います。

前回までの予告編として、CSSコードを使っての

カスタマイズがメインだとお伝えしています。

「ダッシュボード」より

「外観」⇒「テーマの編集」へ進むと

「スタイルシート」の画面が表示されます。

要はここに、どんどん、気に入ったコード

コピペして貼り付けていくという作業だけなので

誰でも簡単に出来ますのでご安心を。

では早速、貼り付けていってみましょう。

シンプリシティ2*目次のおすすめカスタマイズ

では今回は「目次」をおしゃれに

変更してみたいと思います。

<完成イメージ>

「Table of Contents Plus」

まず必要になってくるのが

「Table of Contents Plus」

という、WordPressプラグインです。

WordPressのダッシュボード画面から

プラグイン」→「新規追加と進んで、

Table of Contents Plusを検索します。

インストール出来ましたら「有効化」して完了です。

Table of Contents Plus の設定

続けて「Table of Contents Plus」の設定をします。

ダッシュボード画面から「設定」→「TOC+」

設定画面に移って下さい。

ほとんどデフォルトで大丈夫かも知れませんが、

上記の「表示条件」で、見出しが幾つ以上あれば

目次が生成されるかを決めれますので、

お好みの数字に変えても良いかと思います。

※個人的に、よく聞くのは2か3と思ってます。

また、デフォルトでは、その下の「post」

チェックが入っているかと思います。

「post」とは投稿した記事のことで、

投稿した記事目次が生成されるという意味です。

因みにその下の「page」固定ページの事なので

必要であれば、チェック入れておいても大丈夫です。

他のチェックは外したままで大丈夫かと思います。

見出しの設定

では次に「上級者向け」の項目を設定します。

「TOC+」設定画面の下部にボタンがあるので、

クリックして開いて下さい。

開きましたら次の項目にチェックを入れます。

「CSSファイルを除外」は必ずチェックします。

スタイルシートを使って

「Table of Contents Plus」

カスタマイズする場合、

ここのチェックが外れたままだと

目次が崩れて表示されてしまいます。

次の見出しレベルは、

目次に表示させたい見出しの種類を選ぶ項目です。

表示される数があまり多くてもややこしいので、

通常はh2、h3にチェックの場合が多いです。

コードを貼り付ける

あとは下記コードをスタイルシート

貼り付ければ、カスタマイズ完了です。

/* TOC もくじのカスタマイズ */
#toc_container{
margin-top:25px;
margin-bottom:35px;
border-radius: 4px;
font-size: 16px; /* 文字の大きさ */
padding-right: 16px;
padding-left: 16px;
background-color: #FFFBF4; /* 背景色 */
border: 2px solid #F89174; /* 外枠の設定 */
}

#toc_container .toc_title{
font-size: 18px; /* タイトルの文字の大きさ */
font-weight:bold;
color: #F89174; /* タイトルの文字色 */
text-align: left;
}

/* タイトル前のアイコン FontAwesomeの設定 */
#toc_container .toc_title:before{
content: “\f046”; /* FontAwesomeのコード */
font-family: FontAwesome;
padding-right: 6px;
font-size:18px; /* アイコンの大きさ */
color: #F89174;
}

#toc_container .toc_toggle a{
color: #F89174;
}

#toc_container ul{
counter-reset:number;
list-style:none;
}

#toc_container ul li{
line-height: 1.25em;
margin-bottom: 0.9em;
margin-top:10px;
}

#toc_container ul li:before{
counter-increment: number;
content: counter(number);
font-weight: bold;
color: #555555;
padding-right:12px;
margin-left:-25px;
}

#toc_container ul li a{
font-weight: bold;
color: #555555;
text-decoration:none;
}
#toc_container ul li a:hover{
text-decoration:underline
}

#toc_container ul ul{
margin-top: 0.5em;
}

#toc_container ul ul li{
line-height: 1.25em;
margin-bottom: 0.5em;
font-size:14px;
margin-left:-50px;
}

#toc_container ul ul li:before{
content: “\f0da”;
font-family: FontAwesome;
padding-right: 6px;
margin-left:0px;
color: #CCC;
margin-left:-10px;
}

#toc_container ul ul li a{
color: #3D3D3D;
font-weight: normal;
padding-right:6px;
text-decoration:none
}

#toc_container ul ul li a:hover{
text-decoration:underline
}

デザインが変更されていると思いますので

確認してみて下さい。

また、文字の大きさは「px」の数字を変えて

お好みサイズにしてみても良いかと思います。

シンプリシティ2おすすめカスタマイズ「目次」まとめ

今回は簡単に

目次のカスタマイズについて

書かせていただきました。

「目次」も、

グローバルナビなどと一緒で

お客さんをナビゲーションしてくれる

便利で大切な機能です。

いわば「玄関」みたいなもんですから

綺麗にしといて損はないはず!

素敵な目次に仕上げてみて下さい!

では今回はこの辺で。

ありがとうございました

お問い合わせ&メルマガ

「ブログではちょっと・・・」

という内容に関しては

僕のメルマガから発信していく予定です。

裏情報も混じるかも知れませんので

登録しておいて損はないかと思います。

(不定期ですし、やかましくはしません)

⇒ 酒屋ブロガーのメルマガを無料で読んでやる

※万が一お気に召さなければ解除して

全力でゴミ箱に投げ捨ててやって下さい!

現状、稼げてる人なんて

みんな結構どん底味わってたりしますよ♪

ネットビジネスというのは

少しの努力さえあれば、

必ず結果の出るビジネスです。

諦めさえしなければ

失敗は永遠にやってきません!

⇒ 酒屋ブロガーのメルマガを無料で読んでやる

今後とも、よろしくお願いいたします。

また、ご質問はこちらから

必要であればSkype通話も受け付けてます♪

お気軽にお問い合わせください♪

酒屋ブロガー

一幸(カズユキ)でした。

お気に召しましたら、ぜひ記念に

下記ボタンから応援下さると励みになります♪

最後までお付き合い、ありがとうございました!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る