素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2017年10月27日
最終更新日:

【WordPressの目次をお洒落に】Table of Contents Plusのレイアウトの修正方法

YouTubeも見てね♪

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

Table of Contents Plus

おさらい

以前、コチラの記事に「Table of Contents Plus」というWordpressに目次機能自動追加してくれるプラグインを紹介しました。

プラグインをインストールし、ルールに則って記事を作成するだけで目次機能が追加されるので非常に便利です。

不満点

しかし、こちらのプラグインで追加される目次エリアはデフォルトだと非常にシンプルかつちょっとダサいです。。。笑

このプラグインを知っている人がブログを見ると、「あ、このブログはプラグインを入れただけなんだ〜。」と気づかれてしまうこともあります。(現に筆者はいくつか気づきました。笑)

こちらの目次エリア、もちろんCSSによってレイアウトを調整することは可能です!

今回はそちらのやり方を紹介していこうと思います♪

手順

ファイルの編集をする前に!!

WordPressプラグインテーマのファイルを編集する際は必ず作業前にバックアップファイルを保存しておきましょう!
一歩間違えるとWordPressが動かなくなってしまう恐れがあります!

デフォルトCSSの無効化

まずは、デフォルトのCSS無効化します。
レイアウトを調整する上で他の設定がある中で調整するのは非常にめんどくさいです。(コーダーさんなら分かると思います。笑)

設定>TOC+を選択し、Table of Contents Plusの設定画面を開きます。
基本設定タブを開き中段にある上級者向けを開きます。
その中に「プラグインのCSSスタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。」という項目があるので、チェックを入れて設定を更新ボタンをクリックします。

そうすると、このようになっていた目次エリアが

このように変わります。

CSSの調整

CSSはstyle.cssに記述するようにします。

style.cssの下部に以下を記述してください。

こちらのサイト様の記事を参考にさせて頂きました!
記事の目次【Table of Contents Plus】をオシャレにカスタマイズ!

レイアウトの確認

このCSSを適用すると以下のようになります。

その他の調整

見た目はよくなりましたが、このままだと一旦閉じてからまた開く横幅が狭くなってしまいます。

幅を固定したいので、Table of Contents Plusプラグインを修正します。

プラグイン>プラグイン編集を選択し、編集するプラグインTable of Contents Plusに設定します。
次にプラグインファイルtable-of-contents-puls/front.min.jsを選びます。
そうするとソースコードが表示されるので、キャプチャにて選択している部分の「t(this).css({width:”auto”,display:”table”}),」を削除した上で、ファイルを更新ボタンをクリックします。

動作確認

エラーが発生することなく編集が完了すると、閉じる・開くを選択しても目次エリアの横幅が固定されていると思います♪

終わりに

導入するだけで完了するプラグインもあれば、Table of Contents Plusのように導入後に手を加えることでさらにクオリティが良くなるプラグインもあります。

ただし、プラグインの編集は一歩間違えるとWordpressが動かなくなってしまうので、皆さん作業する前は必ずバックアップファイルを取ってから編集作業を行うように気をつけましょう!

CATEGORIES & TAGS

副業