コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。THOR(ザ・トール)の標準機能で使える目次のデザインはシンプルなので、少し物足りないかもしれません。出来れば自分好みの目次デザインで可愛くおしゃれにカスタマイズしたいですよね。THORの目次のデザインをCSSでカスタマイズする方法を解説。この記事の目次には以下の特徴があります。PCとスマートフォンの両方に対応Googleのモバイルフレンドリーにも合格CSSはサンプル付きなので良ければコピペしてお使いください。CSSの変更は自己責任でお願いします。※おかしい時は削除すれば大丈夫ですが、念のため。THORの目次をカスタマイズしたCSSを入れる方法デザイン変更したCSSのサンプルを後ほど紹介しますが、コピペしたCSSをどうやって入れたらいいか不安な方も居るかと思います。大きく分けると方法は2つあります。THORのカスタマイザーの追加CSSに貼り付ける子テーマのCSSファイルに直接貼り付けるここでは簡単な一つ目の方法を紹介します。THORのカスタマイザーにCSSを貼り付けるCSSの追加はWordPressのダッシュボードの【外観】→【カスタマイズ】から行えます。カスタマイズページ内の一番下に【追加CSS】という項目がありますので、次から紹介するCSSをここに貼り付けます。コピペで使える目次のデザインサンプルここでのサンプルはコピペして自由にお使い下さい。フォントサイズやカラーはCSSに詳しくない人でもわかる様にコメントを付けています。お好みで90%くらいでも。*/}見出しの長さに応じて横に広がりますが、見出しが短い時は目次エリアがとても小さいです。ベースとなる目次の横幅を記事のエリアいっぱいに広げておきます。THORには「デザイン着せ替え機能」がありますが、目次の見た目はどれも同じデザインです。使っているデモサイトのカラーを取り入れる事で目次にも一体感を出せますよね。デモサイト09のカラー【#fb7494】もちろんこれ以外の好きな色に変えても大丈夫です。簡単なので解説しますね。*/}色の変更は、カラーコードを変更する事で可能になります。ハッシュ「#」で書かれた箇所です。SNSのハッシュタグでもお馴染みですね。※サンプルはデモサイト01のカラーを使いました。枠線だけでなく背景色も同じ要領で変更可能です。カラーコードをもっと知りたい方はこちらの記事も参考にどうぞ。2rem;}大抵の場合、見出しや本文は左揃えかと思います。「目次」のタイトルが中央にある事でコンテンツエリアと区別出来るので目次全体が見やすくなります。ちなみに目次は閉じずに表示させる設定にしておくのがおすすめ。理由は、ユーザーが記事の全体像を掴みやすくなるから。記事の導入文だけでなく、記事の後半の内容に興味を示すことも結構あります。目次が表示されていればクリックで一気に移動出来ます。記事冒頭で離脱されるのは避けたいですよね。THORでは「icomoon」というアイコンフォントを使っています。コードを指定すれば色んなアイコンを表示させることが出来ます。画像ではありませんので、フォントサイズやカラーをCSSで変更する事も簡単です。*/}デフォルトのままだと詰まった感じがして読みづらいです。枠線とテキストの間の余白を調整してスッキリさせました。*/}見出しの先頭に付いている番号に丸い背景を付けています。THORの雰囲気を壊さない程度にカスタマイズしてみました。やり過ぎて記事が読み見づらくなってしまっては本末転倒です。フォントサイズやカラーはお好みで変更してくださいね。ブログのメインカラーをベースに考えると合わせやすいです。プラグイン導入から記事投稿まで検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。