どうも、まさひろと言います。
今回は有名WordPressテーマの「THE THOR」のカスタマイズを紹介していきたいと思います。
もちろん、コピペはOK。
今回は目次のカスタマイズを紹介していきますので、デフォルトの目次が気に入らないという方はぜひ参考にしてみてください。
「THE THOR」はとても使い勝手が良く、高機能なWordPressテーマです。
ですが高機能がゆえに、使い方を覚えないと宝の持ち腐れをしてしまいますのでぜひいち早く使い方を覚えましょう！
【THE THOR】目次のカスタマイズ方法
では早速、目次のカスタマイズ方法の紹介です。
まずはデフォルトの目次を見てみましょう。
オレンジの枠で囲ってある部分が目次ですね。
ハッキリ言いますがダサい。。。
正直、自身のサイトをある程度育てたいのであればこういった些細なところにもこだわってカスタマイズしたいものですよね。
ですが、きちんとカスタマイズすることであなただけのオリジナルサイトに成長させることができますのでこだわっていきましょう！
ちなみに当サイトの目次はこんな感じ。
自分ではかなり気に入っていますね。
では、実際のカスタマイズ方法の解説です。２ステップでカスタマイズできますので、簡単ですよ。
ステップ１：ダッシュボードから項目を選択
ダッシュボード内の、「外観」→「カスタマイズ」をクリックしましょう。
「追加CSS」にて、以下のコードをコピペします。
///*目次*////
.content .outline {border: 3px solid #ffcc99;/*外枠色*/
padding: 10px 0 10px;background:#fffff4;/*背景色*/}
.content li ul li .outline__number{font-weight:bold;background:transparent;color:#ffbab9;/*h3数字文字色*/width:auto;}
.content .outline__number{width:1.8em;height:1.8em;padding:0;line-height:1.8em;text-align:center;background:#ffa500;/*数字背景*/color:#fff;border-radius:50%;}
.content .outline__link {display: block;color:#000;/*文字色*/}
.content .outline__link:hover {color:#f8b862;/*ホバー色*/}
.outline__title {color: #ffa500;/*目次アイコン色*/
font-weight: 700;width:100%;padding: 0px 0px 0px 20px;}
.content .outline__switch{right:1.5rem;top:10px;}
.content .outline__toggle:checked + .outline__switch::before {content: “［CLOSE］”; /*「閉じる」マーク*/}
.content .outline__toggle:checked + .outline__switch + .outline__list {margin-top: 1rem;}
.content .outline__switch::before { content: “［OPEN］”; /*「開く」マーク*/
border: 0;color:#999;}
.content .outline__switch + .outline__list {background: transparent;}
.content .outline__switch + ul.outline__list {margin-left:0;margin-right:0;border-top:2px dotted #cfcfcf; /*「目次」下の点線*/}
.content .outline__switch + .outline__list-2 li:first-child{margin-top:1.0em;}
.content .outline__switch + .outline__list-2 li ul li:first-child{margin-top:0.5em;}
.outline__list-2 > li > a{font-weight:700;}
.outline__title:before{font-family: “icomoon”;content: “\e92f”;margin-right:5px;}
@media only screen and (min-width: 992px){.outline__list-2 > li > a{font-weight:700;}
.content .outline {width:90%;margin:3rem 5%;}}
@media only screen and (max-width: 991px){.content .outline {width:100%;
margin: 3rem 0;}}
上記をコピペでOKですが、カラーを変えたい！という方もいるかもしれないので、そういった方は自身でカラーのカスタマイズもしてみましょう。
ステップ２：項目ごとのカスタマイズ
それぞれのカラーコードの後ろに変更箇所を記載していますので、そちらを参考にしてみてくださいね。
例えば枠線全体のカラーの変更は、
.content .outline {border: 3px solid #ffcc99;/*外枠色*/
このオレンジ色で示している箇所が該当のカラーコードとなります。
もし自分が変更したいカラーコードが分からない方は、カラーコード表を参考にしてみてください。
カスタマイズのコツ
実際にカスタマイズしようとしているあなたへ、一つだけアドバイスです。
シンプルイズベスト、ですよ。
というのも、何も白黒のシンプルさにする必要はありません。
私もオレンジ系統で統一させています。
そう、色は統一させましょう。
あなたのサイトのシンボルカラーは何色ですか？
私はオレンジ色をサイトカラーにしていまして、そのカラーはあなたのサイトでそれぞれかと思います。
ですので様々な色を使ってカスタマイズするのではなく、シンプルに一色もしくは２色くらいで統一させるのが良いんじゃないですかね。
カスタマイズのメリット
目次をカスタマイズするメリットはたくさんあり、かなり重要な役割があります。
味気ない目次だと、ユーザーにとっても「なんだかオリジナル感のないサイトだな」と思われてしまいかねないので、意外と重要。
- CSSなどの知識が身に付く
- オリジナルサイトになる
- サイトがおしゃれに見える
- 自分でカスタマイズするので、サイトに愛着が湧く
本気でサイトを育てるのであれば、必ずこだわって取り組みたいですよね。
THE THORがすごい理由
実は「目次」などは、プラグインを使って自分で導入しなければいけません。
もちろん有料テーマはほぼ全て目次を標準で設置できるのですが、「THE THOR」は他にもまだまだ魅力的な機能が満載です。
あなたが『THE THOR』を使うべき理由でもその魅力は解説していますが、もう一度この場でまとめてみますね。
- SEOに強い
- 表示速度が速い
- 標準機能が満載
- 購入者サポートが充実している
- 有名ブロガーやアフィリエイターも使用
しかも一度購入すれば、複数サイトでの利用が可能ですのでコスパも最強ですね。
おそらくこの記事をご覧になっているあなたはすでにテーマを購入済みかと思いますが、まだ購入していないよ、という方はぜひ使ってみることをおすすめします。