【SWELL】サイト型トップページにアンカーリンクで目次を作る方法｜当サイトの実例で詳しく解説

ワードプレスの人気有料テーマ「SWELL」

人気の理由は「サイト型のトップページ」の作りやすさにある、といっても過言ではないと思います。

当サイトのトップページも、SWELLのブログパーツを使ってサイト型にしています。

トップページをサイト型にすると、新着記事コーナー以外に「紹介したい記事」や「ごあいさつコーナー」などを自由に掲載することができるようになります。

ところが・・・・

いろいろなコーナーを掲載すればするほどトップページが縦に長くなり、スクロール時間が長くなってしまいますよね。

そんなお悩みをもつ方は、ぜひこの記事をごらんください。

本記事ではトップページに「目次」を作る方法を、当サイトの実例を用いてくわしく解説をします。

この記事を読めばこんなことがわかりますよ。

SWELLでトップページをサイト型にしている方は、ぜひ参考にしてみてください。

(SWELLでブロックエディーターを使用していることを前提にした記事になっています）

これから【SWELL】でサイト型のトップページをつくって見たいという方は、どうぞこちらをご参考にしてください

アンカーリンクの基本的な使い方

トップページの目次は「アンカーリンク」を使って作っています。

はじめに「アンカーリンク」の基本的な使い方について説明していきます。

「アンカーリンク」の使い方は下記の２パターンになります。

❶ 同じページ内にリンクを設置する方法

最初に『ページ内の指定したブロック』にリンクを設置する方法を説明します。

❷ 違うページにリンクを設置する方法

次に、違うページの『指定したブロック』にリンクを設置する方法 を説明します。

【当サイトの実例 】トップページに目次を作る方法

当サイトのトップページは、ブログパーツを以下の構成で組み合わせて作っています。

以下をリンクでつないでいます。

【目次】（おススメの記事コーナ）の作り方

はじめに、トップページ内の「おすすめ記事コーナー」の最初に設置している【目次】の作り方を説明します

『おすすめ記事コーナー』はひとつの「ブログパーツ」で作っています

アンカーリンクの設置方法は「 ❶ページ内にリンクを設置する方法 」と同じ手順で行います

リンク元

『おすすめ記事コーナー』の＜目次テキスト＞

リンク先

『おすすめ記事コーナー』の＜見出し画像＞

トップページの「違うブログパーツ」をリンクでつなぐ方法

次に「違うブログパーツの指定した場所」にリンクを設置する方法を説明します。

当サイトのトップページ最初に表示される『最新記事コーナー』は、『おすすめの記事コーナー』とリンクさせています。

アンカーリンクの設置方法は「 ❷ 違うページにリンクを設置する方法 」と同じ手順で行います

リンク元

【新着記事コーナー】の＜クリックのテキスト

リンク先

【おすすめ記事コーナー】の＜見出し画像＞

【応用】別サイトに「トップページ」の特定場所のリンクを貼る方法

Twitterなどの別サイトに「トップページの特定場所」のリンクを貼ることができます。

こちらは、当サイトのトップページに掲載をしている『山たびコーナー」のリンクを貼りつけたツイートです。

URLをクリックすると、トップページの「山たびコーナー」に直接ジャンプするようにしました。

✨トップページに【山旅コーナー】作りました✨

ほとんど収益のない、趣味のブログ化しています😂

でも #SWELL にしたのは、こんなコーナーをトップページにつくるのが夢だったからなんです😆
チラッと見にいらしてください🌄

⬇️⬇️【山たびコーナー」はこちらをクリックhttps://t.co/2u7gyBdtF3 pic.twitter.com/y8Uxabydo7

— リタイアかわうそ｜SWELL大好き (@Ed2QvvUTFM4ZLf0) October 31, 2021

「山たびコーナー」の＜見出し画像＞には、アンカーリンク「link-yama」を設置しています。

　アンカーリンクを設置すると「山たびコーナー」のURLは下記のようになります。

【リンク元の目次】をクリックすると、【リンク先のURL】を表示させることができます

＊トップページをリニューアルしたため、現在トップページには山たびコーナーはありません。

まとめ

今回はトップページに、アンカーリンクを使って【目次】を作る方法を、当サイトの実例を用いて紹介しました。

アンカーリンクの基本的な使い方をマスターすれば、サイト型のトップページに目次を簡単につくることができます。

さらに、トップページの各パーツを自在にリンクでつなげることもできます。

アンカーリンクの基本的な使い方をイラストでまとめました。

参考にしていただければ幸いです