【コピペOK】WordPressテーマ「SWELL」STEPブロックの「おまじない」

当ページのリンクには広告が含まれています。

当サイトでは「SWELL」と言うWordpressのテーマを使っております。今のところ気に入ってブログ執筆も続いております。テーマ制作者参加のコミュニティやテーマの更新頻度も良く、機能も多く安定しているテーマだと思います。

過去にリストタグのおまじない記事を書きましたが、今回はその続編です。

  • SWELLのSTEPブロックを目次に出せる
  • STEPブロックにページ内リンクが自動で張れる
目次

SWELLのおまじない(STEPブロック編)

おまじないを準備しましたが「間違い」の可能性もあります。また、正解だとしてもSWELLは更新が短時間なので、記事公開時には対応されているかもしれません。他の箇所にて「怪しい挙動」があった際には今回のコードを外して見る事をお試しください。

まずは前回のおまじない記事はこちら。

目次の仕組みについて

SWELLで記事を書くと、通常H2タグとH3タグを入れる事で自動に目次が生成されます。タグの種類や目次表示階層、見せ方は「外観」>「カスタマイズ」>「投稿・固定ページ」>「目次」で設定できます。

目次の表示も2種類あり、上図の「目次のリストタグ」を「ol」タグにするか「ul」タグにするかで分ける事ができます。

今回の目次おまじないは「ul」タグの場合で作ってます。

STEPブロックを入れた表示

通常通り、記事にSTEPブロックを入れるとSTEPのタイトルは目次には表示されませんが、STEPのタイトル部分に目次からページ内リンクを張りたいと思う時が多々あります。むしろ目次からあった方が便利かと思います。

STEPを目次に出す「おまじない」

STEPブロック内にH3タグを入れると、目次に表示されますが、これだと記事上ではH3の装飾になります。

これに「おまじない」を掛ける事で、通常の表示にします。

おまじない後の表示

おまじないのコード(コピペでどうぞ)

この条件の「おまじない」コード

.swell-block-step__body h3{
font-size: var(--swl-fz--large) !important;
border-top: 0px solid #fff;
border-bottom: 0px solid #fff;
padding: 10px;
margin-top: 40px;
margin-bottom: 20px !important;
}

.swell-block-step__body h3::before{
height: 0px;
}

設置方法

おまじないの設置はいくつか方法があるので、サイトルール(自分でやり易い)仕様で。
一般的には以下の3つの方法かと思います。

テーマ内のカスタマイズに記載する

カスタマイズの「追加CSS」で記載する事ができる。

カスタマイズメニューの追加CSS

FTPでCSSファイルに記載する

サーバーにFTPできれば、SWELLのテーマに記載するファイルがあるので追記してください。
style.cssの中では、最終行に入れる様に。

サーバー内のファイル位置

記事単位に記載する

今回は記事単位に書くのが面倒で作った「おなじない」ですが、設置方法としてはアリなので。

SWELLの記事入力画面の下

最後に

今回も、おまじないを作ってみましたが、記事はじめに記載した内容を再度記載します。

おまじないを準備しましたが「間違い」の可能性もあります。また、正解だとしてもSWELLは更新が短時間なので、記事公開時には対応されているかもしれません。他の箇所にて「怪しい挙動」があった際には今回のコードを外して見る事をお試しください。

SWELLは使いたいお気に入りのテーマなので、おまじないを書いてみました。
(製作者さん勝手にすいません。。。ご連絡あれば記事は変更もしくは削除します)

<ご注意>上記の紹介は、提供者や販売・運営者様及びその企業を差別や批判するものではありません。個人的な見解結果としての紹介となりますので、最終判断は皆さまご自身でお願いいたします。また、掲載内容は変更されていくのでこの記事記載日以降は内容が異なる場合もあります事ご了承ください。

楽天市場で注目の商品![ sponsored ]

  • URLをコピーしました!
目次