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

副業

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

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

スポンサーリンク

336×280




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が動かなくなってしまうので、皆さん作業する前は必ずバックアップファイルを取ってから編集作業を行うように気をつけましょう!

336×280




336×280




CATEGORIES & TAGS

副業, , , , , , ,

blogenist

Author: blogenist