THOR」へ変更しました。THORの目次をおしゃれにカスタマイズ!2019年5月28日2019年11月19日ザ・トールカスタマイズザ・トールここあです。Plus」といった目次を表示させるためのプラグインは一切不要です。不満を持たれている人もいるかもしれません。↓なんせこのシンプルさですからね^^;なので、せっかくデフォルトで目次の機能が付いているなら「もっと生かさなければもったいない!」と私も素直に思いました。THOR」のシンプルな目次をおしゃれにカスタマイズする方法をご紹介したいと思います。ブログのカスタマイズはあくまでも自己責任でお願いします。私の記事は結果を保証するものではなく、あくまでもカスタマイズのきっかけを掴んでもらうことを目的として書いていますので、あらかじめご了承ください。カスタマイズをクリックし投稿ページ設定[THE]をクリックさらに目次設定をクリック以下、目次の設定画面で設定できます。▪️目次を表示するか選択の項目は必ず「表示する」に設定し目次を表示させるための見出しの数や見出しのレベルも必ず設定するようにしてくださいね。ここの設定が正しくできていなければどれだけカスタマイズを頑張っても目次は表示されませんので^^;ということで、下準備ができたらいよいよカスタマイズです。THORの目次をカスタマイズするためのCSSコードの記述先について先に説明を致します。カスタマイズをクリックし以下「追加CSS」の部分に記述しましょう。style-user.cssに記述しても特に問題はありませんが「追加CSS」に記述する方がライブプレビューで確認しながら作業ができるのでおすすめです。THORのおすすめ目次デザイン今回あなたにご紹介する目次のデザインは2つあります。それほど大きな違いはありませんがちょっとだけ仕様を変えているのであなたが使ってみたいデザインのCSSコードをコピペしてくださいね。カスタマイズ方法も合わせて解説致しますので紹介するコードをベースにあなたのオリジナル目次デザインに仕上げましょう!女性らしい可愛い目次デザインこちらの目次はh2、h3見出しをメインにした目次のデザインです。色をピンク系にして少し女性らしくしてあります。Fontの「Kosugi」になっておりますので予めご了承ください。THORの記事書体を変更する方法はこちらに記載しています。Googleフォントを使った少しクールな目次デザインこちらの目次はh2のみの見出しをメインにした目次のデザインです。※目次に設定する見出しのレベルは必ず「2」に設定してください。Fontにしてあります。私が今、このサイトに採用している目次デザインに近いイメージです。いうことで、まずはそれぞれのCSSコードをご紹介しますので気に入ったデザインがあればコピペしてくださいね。0;}}どちらを選んでもCSSコードをコピペした時点で目次のデザインは変わります。Fontのコードをコピーしていないので、目次の番号が正常に表示されません。Fontの設定方法はこの記事の最後に解説してあります。THORの目次デザインを調整する方法ということで、ここからはあなたがコピペしたCSSコードを調整し、あなた好みの目次に設定する方法を簡単にだけご説明致します。目次の外枠の色を変更する場合は以下のカラーコードで調整してください。#58a9ef;のカラーコード#58a9efを変更すれば、外枠の色を変更することができます。#58a9ef;の2pxの数字を変更すれば、外枠の太さも変わります。#58a9ef;のsolidをdashedやdottedに変更することで外枠の線を点線や破線にすることもできます。目次の背景色を変更したい場合はbackground:#fffef6;のカラーコード#fffef6を変更してください。#fd7a9c;カラーコード#fd7a9cを変更してください。.outline__number{width:1.8em;height:1.8em;padding:0;line-height:1.8em;text-align:center;background:#fd7a9c;color:#fff;border-radius:50%;}ここに表記されているbackground:#fd7a9c;のカラーコード#fd7a9cを変更してください。border-radius:50%;のコードをborder-radius:5px;などに変更することで数字の背景を丸ではなく、角丸の四角に変更することもできます。↓border-radius:5px;とするとこうなります。.outline__number{font-weight:bold;background:transparent;color:#cfcfcf;width:auto;}このコードにあるcolor:#cfcfcf;のカラーコード#cfcfcfを変更してください。block;color:#777;}上記コードcolor:#777;のカラーコード#777で目次の文字色を変更してください。OPEN]の文字は変更できます。]ここを書き換えるだけです。]を書き換えればあなたの好きなワードに変更すことが可能です。0;color:#58a9ef;}color:#58a9ef;のカラーコード#58a9efを変更すれば文字の色を変える事ができます。#58a9ef;のカラーコード#58a9efを変更すれば、縦棒の色を変更することができます。同じ箇所にある1.5px<の数字を変更すれば縦棒の太さを変えることもできます。文字のホバー色とは、文字の上にマウスを乗せた時にそこにマウスを乗せたことが分かるように文字の色が変わる設定のことです。現状のCSSコードでは、マウスを乗せた時の文字色は薄いグレーになるように設定してあります。この色もCSSのカラーコードを変更することでマウスホバーさせた時の文字色を変えることができます。#cfcfcf;}ここのカラーコード#cfcfcfを変更することで文字のホバー色が変更できます。Fontの設定方法について解説致します。Fontを採用しているのはこちらの目次デザインのみになりますので、もう一方のデザインを採用した方は無視してください。Fontの変更方法は簡単です。Fontのサイトにアクセスします。Fontが表示されているので好きなフォントを選んでください。フォントが多すぎて選べない場合はカテゴリーを減らすなどして調整してください。好きなフォントを選んだら続いて、そのフォントの右上にある「+」マークをクリックします。すると画面下に黒い帯でPOPアップウィンドウが表示されますので右端の「ー」マークをクリックしましょう。下から以下のようなウィンドウが開きますので続いて画面中心にある「@IMPORT」の文字をクリックします。Fontを使う場合は、以下2つのコードを設定しなければサイトに表示させることができません。いうことで、まずは1つ目。テーマ編集画面で使うコードをコピーしましよう。コピーの際はこれら2つ<style></style>のコードは不要なので間のコードだけをコピーしてください。url('https://fonts.googleapis.com/css?family=Oswald&display=swap');コードがコピーできたら、そのままワードプレスに戻りダッシュボードメニューから、外観→テーマエディターをクリックしさらに、style-user.cssをクリックします。Fontのコードを以下のように貼り付けます。コードの貼り付けが完了したら「ファイルを更新」をクリックして設定を保存してください。Fontのサイトに戻り今度は追加CSSに記述するためのコードをコピーします。sans-serif;コードを先ほどコピーしたコードで上書きして差し替えます。Fontの数字が反映されますのでぜひ焦らずじっくり試してみてください。目次のカスタマイズ方法は以上です。THORの非常にシンプルな目次を目立たせるための方法としてついでに少しでもオシャレになればとカスタマイズの方法をご紹介しました。あなたがどれほど目次を重視されるかは分かりませんが読者の立場から見た場合はやはり日々忙しい毎日の中で参考記事を探そうという時はまず目次を確認してから本文を見る方もいると思います。記事の導入文を書いた後に表示している人が多いのでいかに記事タイトルと目次の内容でブログが読まれるかが変わってくると私は考えています。今回はそんな目次をしっかり見てもらえるようにデザインをカスタマイズコードと共にあなたのオリジナル目次が作れるコードの変更方法も記載しました。記事の中身はもちろん大事ですがデザインにこだわるのも読者の気を引く1つのきっかけとしては視覚的にわかりやすい分、非常に有効な手段です。あなたもシンプルな目次から華麗な目立つデザインにカスタマイズして読者の興味を視覚的にも惹きながらぜひいろんな方にあなたの記事を読んでもらってくださいね。目次のカスタマイズに関しては個別での対応は致しかねますのでさらにカスタマイズしたいという方はあなたご自身でも色々と勉強してみてください。一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。【コピペだけ!】アコーディオンボタンをCSSとHTMLだけで実装する方法!この記事を書いた人ここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。詳しいプロフィールはこちら人脈が成功への最短ルート!私がMonologueを勧める理由WordPress設置代行始めました!※設置代行はメルマガ読者限定です。THORSTORKここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?●安定を求めれば求めるほど不安定になる理由とは?●いくら知識があっても、あなたが絶対に成功できない理由など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。印刷会社と取引がある制作プロダクションで様々な経験や実績を積み、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、ネットを生かした情婦発信を行い、新しい働き方や楽しい人生の過ごし方についてもお伝えしています。