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★Crayon Syntax Highlighter プラグインのテーマが一覧できるサイト

    「Crayon Syntax Highlighte」は、コードをハイライト表示してくれる便利なプラグイン。 使っている人も多いのではないでしょうか。 とっても便利なプラグイ …

WordPress★常時SSL化する方法 Xserver編

http〜でサイトを作り始めて、後からhttps〜に変更すると、画像リンクが切れてしまったり、http〜のリンクのせいでブラウザがアクセス拒否をしたり…となにかとトラブルになってしまいます。 常時SS …

サイト内で別ページの特定場所にリンクを貼るには

  サイト内で別のページの特定の箇所にリンクを張りたいとき。 エディターの「リンク」ボタンでは、別ページにはリンクを貼れますが、リンク先の特定の箇所を指定できません。 長いページの場合、リン …

no image

WordPress★カスタムフィールドを使って関連リンクを手動で埋め込む方法

SEOの「内部対策」のひとつ、 内部リンクの調整で大切なこと SEOには「内部対策」と「外部対策」の二つがあります。 内部対策は、Googleからクロール&インデックスされやすいようにHTMLソースを …

WordPress★TwitterとInstagramをサイトに表示させる

サイトにTwitterのタイムラインを埋め込む方法のメモ。 Twitterのタイムラインをサイトに埋め込むコードを取得する ここにアクセスして、コードを取得する!  ↓  ↓  ↓ https://p …

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