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

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

MENくん
目次のデザインを変えてみようと思うんだけどどうかな?
くま3号
なんのために?
MENくん
オリジナル感を出すためだけのカスタマイズだよ!ははっ
くま3号
キラキラと少年の目してやがる、、、深入りだけはするなよ

こんな感じ

BEFORE

AFTER

開くとこんな感じ

BEFORE

AFTER

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追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。

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

コメントを残す

メールアドレスが公開されることはありません。