【SWELL】ページ内リンク「目次へ戻る」の作り方【ブログの便利機能】

SWELL「目次へ戻る」内部リンクの作り方

ワードプレステーマ「SWELL」を使って

⬆︎目次へ戻る

というページ内リンクの作り方を解説していきます。

まず右側の「目次へ戻る」はSWELLの標準機能で作れますので簡単です。

筆者

ただ私はどうしても左側の「⬆︎目次へ戻る」が作ってみたかったんですよね

この「⬆︎目次へ戻る」はSWELLの質問フォーラムでも言及されていますのでチャレンジした方も多いと思います。

ただ目次が2個になってしまったり、[swell_toc]とそのまま表示されて困っていませんか?

そこで本記事ではSWELLを使った「目次へ戻る」ページ内リンクの作り方の手順を解説します。

SWELLならHTMLやCSS、プラグインみたいな難しいことしなくても大丈夫です。

テーマ選びに迷われているなら、目次が自動生成できたり便利機能が多いSWELLはオススメなので読んでみてくださいね。

初心者にもオススメのワードプレステーマSWELLをレビュー !

タップできる目次

SWELL標準機能を使った「目次へ戻る」ボタンの作り方

まずはSWELL標準機能で作れる「目次へ戻る」ボタンの作り方です。

「目次へ戻る」その1

ダッシュボードのメニューから、外観 > カスタマイズ > サイト全体設定 > 下部固定ボタン・メニュー、と選んでいきます。

目次ボタンの表示設定 > 表示する、と選び、目次ボタン下のテキスト > 目次へ戻る、と入力すれば完了です。

PCでもスマホでもページ右下に追従して表示されるので便利ですね。

【SWELL】ページ内リンク「目次へ戻る」の作り方

次に本題、SWELLでページ内リンクを使った「目次へ戻る」の作り方です。

⬆︎目次へ戻る

STEP
最初の見出し(H2タグ)の直前にショートコード[swell_toc]を書く

SWELLは自動で生成された目次にアンカー(飛び先の指定)を付けることは出来ません。

そこでフォーラムの回答にある通り、ショートコードを使い手動で目次を設置して、そのショートコード自体にアンカーを設定します。

(理解しなくても手順通りすればできるので大丈夫です!)

まず[swell_toc]という文字列を、記事内の最初の見出し(H2タグ)の直前に書きます。

注意:このコードをコピーしないでください。記事に表示させるために半角と全角が変えてありますので失敗します。

全て半角を使い[swell_toc](真ん中のはアンダーバー)とご自身で入力してください。

コードブロックやインラインコードを使わずそのまま入力するだけで大丈夫です。

SWELL開発者様のツイートにもあるように投稿ページ(個別記事)でこのコードを使用した場合、最初の見出し直前には重複して目次が表示されることはありません。

STEP
[swell_toc]にアンカーを設定する

次に設定バーの「高度な設定」を選択し、「HTMLアンカー」欄に任意の文字を入力します。

ここでは例として「link」としますが、「mokuji」とか好きなテキストで大丈夫です。

STEP
任意の場所に「目次へ戻る」と入力し、リンクの設定をする

次に記事内の任意の場所へ「目次へ戻る」と入力します。

入力した「目次へ戻る」を選択し、リンク先の入力欄へ頭に#を付けて「#link」と入力すれば完了です。

【SWELL】ページ内リンク「目次へ戻る」の作り方【ブログ】:まとめ

「高度な設定 > アンカー」を使えば目次だけではなく、見出しや段落など好きなブロックへページ内リンクでつなぐことができます。

SWELLの「タップできる目次」は自動生成、そして各見出しへ内部リンクでつながります。

ワードプレステーマSWELLは「タップできる目次」の自動生成以外にも便利機能が豊富にありますよ。

初心者にもオススメのワードプレステーマSWELLをレビュー !

*記事内容に関して、掲載商品の効果・効能があることを保証するものではありません。購入にあたっては各商品に記載された説明をご確認ください。なお記事で紹介した商品を購入すると、売上の一部が当サイトへ還元されることがあります。

よかったらシェアしてね!
目次へ戻る
タップできる目次
閉じる