酒屋ブロガーカズユキです
今回も
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通話も受け付けてます♪
お気軽にお問い合わせください♪
酒屋ブロガー
一幸(カズユキ)でした。
お気に召しましたら、ぜひ記念に
下記ボタンから応援下さると励みになります♪
最後までお付き合い、ありがとうございました!