[SWELL]目次設定では出来ないCSSカスタマイズ(数字のない小見出しリストの作り方)

SWELL は高機能なテーマなので、既存の機能だけでも目次をカスタマイズすることはできます。

目次カスタマイズはできますが、「できること」は少ないのです。

今回はWordPress SWELL の目次下層(小見出し)リストの「1-2」「1-3」…表示を何とかしたいということが課題です。

デフォルトの機能では解決しなかったので、CSSでカスタマイズします。

目次

SWELL 目次の下層(小見出し)リストから数字を抜く方法

まず、デフォルトの機能でできることについてですが、後ほど追記する予定ですが、今のところは公式のブログをご覧ください。

SWELLデフォルト機能で可能な目次カスタマイズ

設定場所ですが、カスタマイザーを開きます。

「投稿・固定ページ」→「目次」です。

SWELLデフォルト機能で可能な目次カスタマイズ

ここで目次を設置するページや、目次の色や背景を設定することはできるのですが、デザイン的には小見出し階層は「ol(数字)」か「ul(鍵みたいな記号)」しか設定できません。

SWELLデフォルト機能で可能な目次カスタマイズ

目次下層をCSSで変更する(コピペOK)

何をしたいのかというと、この「1-1」「1-2」…が嫌なわけで……。もう少しスッキリさせたいと考えます。

SWELL目次カスタマイズ

CSSで数字を無くしてアイコンフォントにする

SWELL目次カスタマイズ

数字を完全に無くしてアイコンフォント(Font Awesome)を入れ込んでいます。

CSS

ol.is-style-index ol > li::before {
font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 900;
	 margin-right: 5px;
border-right: solid 0px
 currentColor;
}

アイコンフォント( Font Awesome )について

SWELLはデフォルトでは Font Awesome は読み込まないので、「SWELL設定」から「CSSで読み込む」を有効にしなくてはなりません。

SWELL目次カスタマイズ

または、カスタマイザーの「高度な設定」→「</head>直前」欄に以下のコードを入れる必要があります。(入れないとアイコンが表示されません)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

アイコンフォントと一緒に小見出しの順番だけ数字を入れてみる

アイコンフォントだけでは少し寂しく感じるならば数字を付けてみる「1-1」「1-2」……ではなく、下階層には下階層の順番を(普通に「1」「2」「3」……)振ってみます。

SWELL目次カスタマイズ

CSS

ol.is-style-index ol > li::before {
font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 900;
	 margin-right: 5px;
border-right: solid 0px
 currentColor;
}

ol:not(.is-style-default)[class*=is-style-] ol, ol:not(.is-style-default)[class*=is-style-] ul, ul:not(.is-style-default)[class*=is-style-] ol, ul:not(.is-style-default)[class*=is-style-] ul {
    padding-left: 0;
    list-style: decimal;
}

アイコンと単数字だけを表示させて、スッキリしました。

SWELL 以外のテーマでも

目次のリスト部分の要素が分かれば、他のテーマでも使えるはずです。お試しください。

よかったらシェアしてね!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績360件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

aa a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次
閉じる