WordPressで、あるページのCSSだけを変更したいときの変更方法

この記事は約5分で読めます。

ご縁があって地元八王子の「さくらアカデミー」さんのサイト制作のお手伝いをさせていただいています。コンテンツはプラグイン Table of Contents Plus で目次をつけてわかりやすくなっています。
しかし、部分的に目次はない方がいいな、と思うページもあります。そこであるページのCSSだけを変更する方法を考えてみました。

Table of Contents Plus は自動的に目次をつけてくれる便利なプラグインです

Table of Contents Plus はこのblogでも使っています。記事の頭に

こんな感じの目次自動的に表示してくれます。

Table of Contents Plus の導入方法や詳細については、

[ryus_blogcard url=”https://usortblog.com/tableofcontentsplus/”]

↑こちらで紹介しています。

目次を出したくないページの対応をCSSでしてみた

このblogではTable of Contents Plusの設定で 投稿 だけに目次が出るようにしていますが、さくらアカデミーさんでは 投稿、固定ページ の両方に自動的に目次が出るようになっています。

お問い合わせページ
にもう少し詳しく説明を入れようとして手を加えました。説明文フォームそれぞれにh2で見出しをつけました。すると、

こんな風に、お問い合わせページなのに目次が表示されます。お問い合わせページで見てほしい電話番号フォーム入力などが下に下がって表示できる部分が減ってしまうので、ここでは目次はいらないと思いました。

Table of Contents Plus
 の設定であるコンテンツだけ目次を表示しないようにというオプションがないのかな?と思ったのですが、見つかりませんでした。

ということは、そのページだけCSSで目次を display:none と指定すれば出ないはずです。

目次部分のソースは、

<div id="toc_container" class="toc_light_blue no_bullets">
(目次の内容)
</div>

となっていて、 toc_container というidが指定されていました。そこで、この固定ページの編集画面のテキストタブで、

<style type="text/css">
<!--
#toc_container {
    display:none !important;
}
-->
</style>

お問い合わせはお気軽に

(以下略)

このCSSを追加しました。

これで表示すると、

このように目次が表示されなくなりました(^^)/

実際のページは、

無料体験申し込み / お問い合わせ | 八王子市・国立市でプロ講師が完全個別指導:さくらOne個別指導塾
プロ講師によるマンツーマン個別指導塾。大学受験・都立高校受験・私立中学受験の個別指導進学塾。英語と数学の受験指導に実績を持つ講師陣。小学生・中学生・高校生にやる気と家庭学習の習慣をつけ受験合格へ。八王子駅前と日野市豊田駅前の校舎。

こちらになります。

どこでも簡単に使えるようにショートコードにしてみた

このコードですが他のページでも目次を表示したくないときに簡単に使えるようにショートコードにしてみました。

使っている子テーマのfunctions.phpに、

/* TOC+目次を非表示にするショートコード */
function tocplus_display_none() {
    return '
<style type="text/css">
<!--
#toc_container {
    display:none !important;
}
-->
</style>
    ';
}
/* ショートコードを追加する */
add_shortcode('tocplus_display_none', 'tocplus_display_none');

このコードを追加します。

そして、固定ページの編集画面で

[tocplus_display_none]
<h2>お問い合わせはお気軽に</h2>
(以下略)

このように記述します。ショートコードなので、このページには目次を出さないようにしたいなと思ったら[tocplus_display_none]を追加するだけでそのページには目次が追加されないようになります。

おまけ:Table of Contents Plus の目次を出したいページにだけ出す方法もあります

今回の場合、Table of Contents Plus の管理画面で、

このように 投稿(post)、固定ページ(page) のすべてに表示をする設定になっていました。もしも固定ページについては目次を出したいページの方が少ない、という場合は「固定ページの目次を出したいページだけに目次を出す」という方法があります。

まず、この設定で

固定ページのチェックを外して

更新しておきます。すると、固定ページを見ても

目次が表示されなくなります。この状態で、このページに目次を表示したければ、Table of Contents Plus目次を表示させるショートコードを入れます。

固定ページの編集画面で

  
<h1>都立高校受験コース</h1>
(以下略)

と頭に1行、 [toc]と追加するだけで、目次を表示してくれます。このコードは好きなところに記述できます。

そのサイトの状況によって「目次をページごとに非表示にする」のか「目次をページごとに表示するのか」どちらかの方法を選ぶと良いと思います。

[amazon_searchlink search=”WordPress プラグイン”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress プラグイン
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。