JIN

JINカスタマイズ|目次をギュッとしてひょっこりさせてみた

目次をスリムにカスタマイズ

この記事では目次のカスタマイズを紹介します。

コードをコピペするだけなので、誰でも簡単にカスタマイズすることができます。

メンくん
オプションで画像を入れたり、色も簡単に変更できるように説明を入れておくね

カスタマイズ結果

くま
ギュッとコンパクトになったね。くまもひょっこりしてるよ
メンくん
このカスタマイズのこだわりをちょっとだけ説明するね

使いやすい様にカスタマイズしたつもりです。くまは遊び心です。

ちなみにPCでは

こんな感じでコンパクトに表示

カスタマイズの準備

これからカスタマイズしますが、まずはじめにこちらを読んでください。

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

くま
カスタマイズは仮に同じテーマであっても、100%成功する保証はありません。

準備といってもカスタマイズのコードを書き込む場所を開くだけです。

  • 追加CSS(初心者向け)
  • style.css(慣れた人向け)

このどちらから開きます。

追加CSSを開くにはワードプレスの外観カスタマイズ追加CSSの順で開きます。

使い方がわからない方はこちら

style.cssを開くにはワードプレスの外観テーマエディターjin-childスタイルシートの順で開きます。

メンくん
どちらで大丈夫です♪ 少ししかカスタマイズをしないなら追加CSSで十分です。

カスタマイズのコード

こちらのコードをコピーして、さきほど開いた追加CSS(もしくはstyle.css)に貼り付けてください

コメントなしのコード

コメントありのコード

目次に画像をひょっこりさせる

ぼくはしろくまをひょっこりさせました。やり方は簡単です。

コメントなしのコード60~66行目部分をちょっくら変更していきます。

黄色でハイライトされている部分の★画像URL★部分に画像のURLをコピペしてあげれば、画像が表示されます。

使用したしろくまの画像

ぼくは幅50px、高さ100pxのサイズで画像を作成しました。保存形式はSVG画像です。

SVGはめちゃくちゃ綺麗ですが、イラストレーターが無いと作成が難しいです。無難にPNG画像でもそこそこキレイに挿入できます。

SVG画像とは

拡大しても縮小してもずっとキレイなWEBで使える画像です。

SVG画像について
SVG画像を使って美しいイラストを挿入しよう

イラストレーターについて
ブログでイラストレーターを使うメリット

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。

これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません

キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。