【SANGOを自分でカスタマイズ】「もくじ」にオリジナル感を出してみる

目次をシンプルにカスタマイズする

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
目次の部分をシンプルにカスタマイズした方法を説明。
MENくん

目次のデザインを変えてみようと思うんだけどどうかな?

くま3号

なんのために?

MENくん

オリジナル感を出すためだけのカスタマイズだよ!ははっ

くま3号

キラキラと少年の目してやがる、、、深入りだけはするなよ


このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じ

Before

目次カスタム前

After

目次カスタム後


開くとこんな感じ

Before

目次カスタム前-2

After

目次カスタム後-2

MENくん

かなりシンプルにしてオリジナル感を出してみました!


変更点はこんなところです

変更点

くま3号

意外と細かく調整したんやな


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

目次をシンプルにカスタマイズをする準備

目次の設定が終わっている方も、重要の部分だけは変更してください(クリックで飛ぶ)

まずは目次の設定は確認

TOC設定1
目次の設定をされていない方は、していきましょう!WordPress設定TOC+を選択します。③と④は次に説明します。

③の部分

こちらは、目次のタイトルになります。ただ単に「目次」とするよりも「記事をざっとみる」や「流し見する」「この記事をパッと読む」「この記事の内容」などが良いかもしれませんね。ぼくはシンプルに柔らかくひらがなの「もくじ」にしました。

④の部分  重要 

開いたり閉じたりするボタンに表記する文字です。この部分は注意してください。ボタンにリンクが付くのではなく、文字にリンクが付きます。なので「ひらく」よりも「  ひらく  」のように前後に2個くらいスペースを入れるとリンクの幅が伸びて押しやすくなります。

TOC設定2
後は上級者向けの部分を開いてCSSファイル~の部分にチャックを入れてください。他の設定部分はお好きなように変更してください。

すべての設定が終わったら、一番下にある設定更新ボタンをポチッと押してください。

MENくん

WordPressでの目次の設定はこれで終わりです。さあ、style.cssにコードを追加していきましょう。


追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加する

style.cssにコードを追加する

MENくん

ではちゃちゃちゃっとコピーして貼り付けちゃいましょう。

お好みで色を変更する部分は太文字にしてあります。

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

キャッシュを削除して更新
ブラウザ(Google Chromeなど)で自分のサイトを開いた状態で、F12を押す>更新マーク右クリックキャッシュの削除とハード再読込をクリックするとスタイルが反映されます。

目次を配色してみた

色がつくとこんな感じ

配色してみた

MENくん

色が付いてる方がおしゃれ感が、、、、

くま3号

どーすんの?今からサイトのカラー変える?

MENくん

無理っ

 

 

目次をシンプルにカスタマイズする手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • WordPressで目次を設定。
  • FTPソフトとテキストエディタを開いてcss追加の準備。
  • css追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。

もくじがシンプルになった!これでオリジナル感が出たはず!
オリジナル感ってなんやねん