WordPress

WordPress★もくじプラグイン「Easy Table of Contents」のカスタマイズ

投稿日:

記事のもくじを自動的に作ってくれる便利なプラグイン「Easy Table of Contents」。
デフォルトの見た目がイマイチなので、ちょっとカスタマイズしてみました。

 

元の見た目はこんな感じ。

 

カスタマイズ後はこんな感じ。

 

  1. プラグインのデフォルト設定を変更。

    プラグインの設定の中に「css」という項目があるので、そのチェックをはずしておく。これで余分なコードがつかなくなる。

  2. cssコードをあてるためのセレクタを調べる。
     該当するHTMLコード ↓ ↓ ↓
    
    <div id="ez-toc-container" class="counter-hierarchy counter-decimal ez-toc-grey">
            <div class="ez-toc-title-container">
                <p class="ez-toc-title">このページのもくじ</p>
                <span class="ez-toc-title-toggle"></span>
            </div>
            <nav>
                <ul class="ez-toc-list">
                    <li><a href="#Mac" title="Macでは定番のアンインストールアプリ" data-wpel-link="internal" sl-processed="1">Macでは定番のアンインストールアプリ</a></li>
                    <li><a href="#Launchpad" title="Launchpad から消す" data-wpel-link="internal" sl-processed="1">Launchpad から消す</a></li>
                </ul>
            </nav>
        </div>
    該当するCSSコード ↓ ↓ ↓
    
    #ez-toc-container 
    }
    #ez-toc-container .ez-toc-title {
    }
    #ez-toc-container li {
    }
    #ez-toc-container a {
    }
  3. CSSを設定する。
    テーマカスタマイザーの「追加CSS」に追記する。

    実際に追記したコードはこれ ↓ ↓ ↓

    #ez-toc-container {
                width:85%;
                margin: 0 auto 40px;
                border: 1px solid #1ccef6;
                border-radius: 6px;
                padding: 10px 16px 0;
            }
            #ez-toc-container .ez-toc-title {
                color: #1ccef6;
                text-align: center;
            }
            #ez-toc-container li {
                margin-bottom: 10px;
            }
            #ez-toc-container li:last-child {
                margin-bottom: 0;
            }
            #ez-toc-container a {
                text-decoration:none;
                color:#5b5b5b;
            }
            #ez-toc-container a:hover {
                color: #1ccef6;
            }

     

以上です!

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPress|twenty seventeen カスタマイズ準備|子テーマをつくる

デフォルトのテーマ「twenty seventeen」をカスタマイズする前の準備 テーマをカスタマイズするには、元になるテーマの子テーマを作り、その子テーマを改造していきます。元のテーマは変更しないよ …

WP★吹き出し風デザインをCSSだけでやる方法

ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。   手順はこちら   [codepen_embed height=”400 …

WordPress★Contact Form 7 で隠しフィールドを設定する

Contact Form 7 と Flamingo のセットで使用中。 Flamingo側の受信メッセージの一覧表示で使うために、送信元となるContact Form 7 に隠しフィールドを設定するこ …

WordPress|子テーマのstyle.cssの画像パスはどう書くの?

WordPressでは、themesフォルダ内の「テーマ名フォルダ」の中に「style.css」が入っています。子テーマの場合は「テーマ名-child」としていることが多いので、「テーマ名-child …

WordPress★サイトをコピーしてテスト環境をつくる手順【プラグインなし】

今回は、 WordPressをそのままコピーしてテスト環境とする。 というのをやろうとして、サイトの複製にとりかかったのですが、 いつも使っている便利なプラグインを使うとエラーが出まくり、手動で作業し …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。