WordPress「SWELL」カスタマイズ | モーダルの目次を少し華やかにする方法!

2019 12/04
WordPress「SWELL」カスタマイズ | モーダルの目次を少し華やかにする方法!

スマホ時に目次を表示させるボタンを付けて、そのボタンをクリックしたら
目次の表示が若干、味気がなかったのでカスタマイズをしてみたお話。

目次

スマホ時の目次ボタンを押したら・・。

通常のページにある目次は、サイトのメインカラーが一番上にあって、シンプルかつ綺麗に表示がされているが
スマホ時に目次ボタンを表示させ、ボタンをクリックするとこんな感じ。

画像

若干味気がないような・・・。
もちろん、シンプルでいいんですが、、、、やっぱり味気がないような・・・。

って事で、カスタマイズをしてみました。
最終系はこんな感じにします。

画像

モーダルの目次を少し華やかにする

CSSを追加する準備

CSSの追加に関しては安全な方法にて記事を書きますが、あくまでも自己責任にて行ってください。
もし、万が一のトラブルが起きても、当方にて責任は致しません

サイトのデザインを変更するのは「CSS」という言語を使っておこないます。
CSSについてここでは詳しく説明をしませんが、サイトに影響が出ない手順で説明をしていきますね。

テーマカスタマイザーの追加CSSとは

テーマカスタマイザーの「追加CSS」を使ってCSSを記載していきます。

追加CSSのいいところ
  • 標準機能なので誰でも簡単にできる
  • 入力と同時にCSSが反映される
  • テーマをアップデートしても消えない

テーマカスタマイザーの追加CSSの開き方

管理画面(ダッシュボード)の左側にあるメニュー一覧の中の
外観」「カスタマイズ」をクリックします。

テーマカスタマイザーを開いたら、左側のメニューの「追加CSS」をクリックしてください。

画像

すると右の画像(スマホなら下)のような表示がされるので
赤丸を囲んだところに「CSS」を記載していきます。

画像

追加するCSS

では先ほど開いた「追加CSS」にコードをコピペしましょう。
以下のコードを張り付けてくださいね。

#index_modal .p-toc.post_content {
    overflow: hidden;
    border: solid 5px #265961;
    border-radius: 2px;
    padding: 0;
}

#index_modal .p-toc__ttl {
    background-color: #265961;
    margin-bottom: 0;
    padding: .5em;
    font-size: 1.3em;
    color: #fff;
}

#index_modal .p-toc.post_content {
    padding: 0;
}

ol.p-toc__list.is-style-index {
    padding: 1em;
}

CSSの補足

#index_modal .p-toc.post_content {
    border: solid 5px #265961;
}
#index_modal .p-toc__ttl {
    background-color: #265961;
}

上記の#から始まる数字は、サイトのメインカラーに合わせていると
サイトに統一感があっていい感じになります。

また、枠線(左右、下)の枠がいらない場合は「.p-toc.post_content」の「border」を削除してください

この記事が気に入ったら
フォローしてね!

目次
目次