![](https://oyoyo-m.com/wp-content/uploads/2021/08/d9a3b9d2b785c467f2b334c6a059997f-1.png)
【SWELL】サイト型トップページにアンカーリンクで目次を作る方法|当サイトの実例で詳しく解説
当ページのリンクには広告が含まれています。
![【SWELL】サイト型トップページにアンカーリンクで目次を作る方法|当サイトの実例で詳しく解説](https://oyoyo-m.com/wp-content/uploads/2021/11/e61f3c0a30a8f93c07865f777db3a7fd.png)
ワードプレスの人気有料テーマ「SWELL」
人気の理由は「サイト型のトップページ」の作りやすさにある、といっても過言ではないと思います。
当サイトのトップページも、SWELLのブログパーツを使ってサイト型にしています。
トップページをサイト型にすると、新着記事コーナー以外に「紹介したい記事」や「ごあいさつコーナー」などを自由に掲載することができるようになります。
ところが・・・・
いろいろなコーナーを掲載すればするほどトップページが縦に長くなり、スクロール時間が長くなってしまいますよね。
![](https://oyoyo-m.com/wp-content/uploads/2021/08/748eb4bd5f4a117a999f499d279823c6.png)
せっかくブログに訪問してもらっても、トップページをスクロールしているうちに離脱されてしまうのではないかしら・・・
そんなお悩みをもつ方は、ぜひこの記事をごらんください。
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/a4e060c906a5112fd34500d84ab613ed-150x150.png)
トップページに「目次」を作れば、このお悩みは解決できます!
本記事ではトップページに「目次」を作る方法を、当サイトの実例を用いてくわしく解説をします。
この記事を読めばこんなことがわかりますよ。
- アンカーリンクを使ってトップページに「目次」を作る方法
- Twitterなど他のサイトに「トップページの特定場所のリンク」を設置する方法
SWELLでトップページをサイト型にしている方は、ぜひ参考にしてみてください。
(SWELLでブロックエディーターを使用していることを前提にした記事になっています)
これから【SWELL】でサイト型のトップページをつくって見たいという方は、どうぞこちらをご参考にしてください
スポンサーリンク
タップできる目次
アンカーリンクの基本的な使い方
![](https://oyoyo-m.com/wp-content/uploads/2021/11/6a0cf7a2c7f3fb587d20befe156c0ba8.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/6a0cf7a2c7f3fb587d20befe156c0ba8.png)
トップページの目次は「アンカーリンク」を使って作っています。
はじめに「アンカーリンク」の基本的な使い方について説明していきます。
「アンカーリンク」の使い方は下記の2パターンになります。
- 「ページ内の指定したブロック」にリンクを設置
- 「違うページの指定したブロック」にリンクを設置
❶ 同じページ内にリンクを設置する方法
最初に『ページ内の指定したブロック』にリンクを設置する方法を説明します。
![同じ記事にアンカーリンクを設置する説明をするための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/5350bbdad3ecbb3adfc75713a394c58e-1024x576.jpg)
![同じ記事にアンカーリンクを設置する説明をするための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/5350bbdad3ecbb3adfc75713a394c58e-1024x576.jpg)
- リンク元
- よく見かける『ここをクリックしてね』と表示された箇所です
- リンク先
- クリック』してジャンプさせたい箇所です
STEP
リンク先に「アンカーリンク」を設置する
STEP
リンクさせたいブロックをクリック
リンク先にしたいブロック(見出しなど)をクリックします
STEP
サイドバーのいちばん下にある「高度の設定」をクリック
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b7c5bf3a6bd9a95eb67d4e185ce7ca9f-1024x610.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b7c5bf3a6bd9a95eb67d4e185ce7ca9f-1024x610.jpg)
STEP
「HTMLアンカー」の枠内に好みのテキストを入れる
テキストは英数文字にすることをおススメします
今回は『kawauso』と入力をしました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/deb2c9d41a19dbe372a847a4d30f8ab3-1024x594.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/deb2c9d41a19dbe372a847a4d30f8ab3-1024x594.jpg)
STEP
リンク元に「アンカーリンク」を貼る
STEP
リンク元を選択する
リンク元の「テキスト」または「画像」を選択します
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b62e3c52d14f0ab6ecb6d0d96aa3537e-1024x395.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b62e3c52d14f0ab6ecb6d0d96aa3537e-1024x395.jpg)
STEP
リンクボタンをクリックする
![](https://oyoyo-m.com/wp-content/uploads/2021/11/9efa94e0b1cdc1eb7c38d7eccd901b23-1024x356.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/9efa94e0b1cdc1eb7c38d7eccd901b23-1024x356.jpg)
STEP
#(シャープ)+ 「HTMLアンカー」を入力する
今回は「#kawauso」と入力します
![](https://oyoyo-m.com/wp-content/uploads/2021/11/97ae3904518182800da2256799d9383d-1024x601.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/97ae3904518182800da2256799d9383d-1024x601.jpg)
STEP
赤枠内をクリック ⇒ リンク設置完了
リンク元にリンクを設置することができました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e8ea1f482e81deefcf19ca1bca6bb928-1024x453.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e8ea1f482e81deefcf19ca1bca6bb928-1024x453.jpg)
❷ 違うページにリンクを設置する方法
次に、違うページの『指定したブロック』にリンクを設置する方法 を説明します。
![違う記事にアンカーリンクを設置する説明をするための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/c9ed5d73b5d3a3924745431bf276dd90-1024x576.jpg)
![違う記事にアンカーリンクを設置する説明をするための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/c9ed5d73b5d3a3924745431bf276dd90-1024x576.jpg)
STEP
リンク先ページに「アンカーリンク」を設置する
リンク先にアンカーリンクを設置する手順は「同じページ内にリンクを設置する」と全く同じです
HTMLリンクも「kawauso」としました
STEP
リンク元のページに「アンカーリンク」を貼る
リンク先のURLが下記という設定で説明します
![](https://oyoyo-m.com/wp-content/uploads/2021/11/10aaffc08e2296475114ff789a82a844.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/10aaffc08e2296475114ff789a82a844.jpg)
STEP
リンク元を選択する
リンク元の「テキスト」または「画像」を選択する
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b62e3c52d14f0ab6ecb6d0d96aa3537e-1024x395.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b62e3c52d14f0ab6ecb6d0d96aa3537e-1024x395.jpg)
STEP
リンクボタンをクリックする
![](https://oyoyo-m.com/wp-content/uploads/2021/11/9efa94e0b1cdc1eb7c38d7eccd901b23-1024x356.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/9efa94e0b1cdc1eb7c38d7eccd901b23-1024x356.jpg)
STEP
リンク先URL + #(シャープ)+ 「HTMLアンカー」を入力する
今回は「https//neko/bbb/#kawauso」と入力します
これで、違うページにリンクを設置することができました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e14b3e5b4aaaf819589baac87b39e1e4-1024x577.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e14b3e5b4aaaf819589baac87b39e1e4-1024x577.jpg)
アンカーリンクの基本的な使い方は、下記のどのページでも同じです
- 記事投稿ページ
- 固定ページ
- ブログパーツ
スポンサーリンク
【当サイトの実例 】トップページに目次を作る方法
![](https://oyoyo-m.com/wp-content/uploads/2021/11/354b2d9605a88e2e8bc01a7b1118f276.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/354b2d9605a88e2e8bc01a7b1118f276.png)
当サイトのトップページは、ブログパーツを以下の構成で組み合わせて作っています。
以下をリンクでつないでいます。
- おススメの記事コーナーの【目次】と【各コーナー】
- 【新着記事コーナー】と【おススメの記事コーナー】
![](https://oyoyo-m.com/wp-content/uploads/2021/11/86232e8ca4c38e8f3fb8d5352a95ca16.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/86232e8ca4c38e8f3fb8d5352a95ca16.jpg)
【目次】(おススメの記事コーナ)の作り方
はじめに、トップページ内の「おすすめ記事コーナー」の最初に設置している【目次】の作り方を説明します
『おすすめ記事コーナー』はひとつの「ブログパーツ」で作っています
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b2917f809ab1a6aa1417dba3c1dcba6a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/b2917f809ab1a6aa1417dba3c1dcba6a.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e0f93495c4fa4bb3accfe24d8ed48eed.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e0f93495c4fa4bb3accfe24d8ed48eed.jpg)
アンカーリンクの設置方法は「 ❶ページ内にリンクを設置する方法 」と同じ手順で行います
- リンク元
- 『おすすめ記事コーナー』の<目次テキスト>
- リンク先
- 『おすすめ記事コーナー』の<見出し画像>
STEP
ブログパーツの作成画面でリンク元の【目次】を作る
![ブログパーツの中に作った目次](https://oyoyo-m.com/wp-content/uploads/2021/11/mokuzi-1-1024x671.jpg)
![ブログパーツの中に作った目次](https://oyoyo-m.com/wp-content/uploads/2021/11/mokuzi-1-1024x671.jpg)
STEP
リンク先の【見出し】画像に「HTMLアンカー」を設置する
各項目の見出し画像に「HTMLアンカー」を設置しました
HTMLアンカーの枠に「link-canva1」と入力しました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/3f9d5afd4060cedd4dd4e6125679846f-1024x580.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/3f9d5afd4060cedd4dd4e6125679846f-1024x580.jpg)
STEP
リンク元の【目次】のテキストに「#+リンク先のHTMLアンカー」を入力
「 #link-canva1」と入力しました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/ssssssss6-1024x624.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/ssssssss6-1024x624.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
おススメの記事コーナーの【目次】が完成しました!
トップページの「違うブログパーツ」をリンクでつなぐ方法
次に「違うブログパーツの指定した場所」にリンクを設置する方法を説明します。
当サイトのトップページ最初に表示される『最新記事コーナー』は、『おすすめの記事コーナー』とリンクさせています。
![](https://oyoyo-m.com/wp-content/uploads/2021/11/47a3d841cf60eaea96ac0ce9d3b18a7d-1024x676.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/47a3d841cf60eaea96ac0ce9d3b18a7d-1024x676.jpg)
アンカーリンクの設置方法は「 ❷ 違うページにリンクを設置する方法 」と同じ手順で行います
- リンク元
- 【新着記事コーナー】の<クリックのテキスト
- リンク先
- 【おすすめ記事コーナー】の<見出し画像>
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
2つの「ブログパーツ」間をリンクさせます」
STEP
リンク先の【見出し】画像に「HTMLアンカー」を設置する
HTMLアンカーの枠に「osusume」と入力しました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e867bb79a8e8b1b922185b2afb021641-1024x595.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e867bb79a8e8b1b922185b2afb021641-1024x595.jpg)
STEP
リンク元の【クリック】のテキストに 「リンク先のURL+#+HTMLアンカー」を入力
当サイトは『https://oyoyo-m.com/』ですので・・・
https://oyoyo-m.com/ #osusume と入力しました
![](https://oyoyo-m.com/wp-content/uploads/2021/11/0be43fa6ef4827c665d6202875d72fa2-1024x577.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/0be43fa6ef4827c665d6202875d72fa2-1024x577.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
![](https://oyoyo-m.com/wp-content/uploads/2023/07/70bdd706e2bbb924e4b54e1e823dd502-150x150.png)
違うブログパーツをリンクでつなげることができました
スポンサーリンク
【応用】別サイトに「トップページ」の特定場所のリンクを貼る方法
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e0bdf9237d0cc3967710ec65476e012d.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e0bdf9237d0cc3967710ec65476e012d.png)
Twitterなどの別サイトに「トップページの特定場所」のリンクを貼ることができます。
こちらは、当サイトのトップページに掲載をしている『山たびコーナー」のリンクを貼りつけたツイートです。
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e7697e0e77e48c9943507d91baccc656-1024x735.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e7697e0e77e48c9943507d91baccc656-1024x735.jpg)
URLをクリックすると、トップページの「山たびコーナー」に直接ジャンプするようにしました。
✨トップページに【山旅コーナー】作りました✨
— リタイアかわうそ|SWELL大好き (@Ed2QvvUTFM4ZLf0) October 31, 2021
ほとんど収益のない、趣味のブログ化しています😂
でも #SWELL にしたのは、こんなコーナーをトップページにつくるのが夢だったからなんです😆
チラッと見にいらしてください🌄
⬇️⬇️【山たびコーナー」はこちらをクリックhttps://t.co/2u7gyBdtF3 pic.twitter.com/y8Uxabydo7
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
やり方は、Twitterに「山たびコーナー」のURLを貼りつけるだけです
「山たびコーナー」の<見出し画像>には、アンカーリンク「link-yama」を設置しています。
アンカーリンクを設置すると「山たびコーナー」のURLは下記のようになります。
![](https://oyoyo-m.com/wp-content/uploads/2021/11/8ed8c9528f7712418b631aa78df7ca75-1024x452.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/8ed8c9528f7712418b631aa78df7ca75-1024x452.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/7c90e06bbdf05fe772ee5c7dcff4f064-2.png)
もっと簡単な方法があります
【リンク元の目次】をクリックすると、【リンク先のURL】を表示させることができます
![](https://oyoyo-m.com/wp-content/uploads/2021/11/811a667beb277cc4d9b2b4bd663b7ef0-1024x583.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/811a667beb277cc4d9b2b4bd663b7ef0-1024x583.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
ぜひ、お試しください
*トップページをリニューアルしたため、現在トップページには山たびコーナーはありません。
スポンサーリンク
まとめ
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e177e6267bd9f248f1198b5078a1a463.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/e177e6267bd9f248f1198b5078a1a463.png)
今回はトップページに、アンカーリンクを使って【目次】を作る方法を、当サイトの実例を用いて紹介しました。
アンカーリンクの基本的な使い方をマスターすれば、サイト型のトップページに目次を簡単につくることができます。
さらに、トップページの各パーツを自在にリンクでつなげることもできます。
アンカーリンクの基本的な使い方をイラストでまとめました。
![ページ内にリンクを設置する方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/4a8264948ab2a6f134137201572c56d4-1024x576.jpg)
![ページ内にリンクを設置する方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/4a8264948ab2a6f134137201572c56d4-1024x576.jpg)
![違うページにリンクを設置する方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/bb0e76a18e1c7b823be4df03f20afd7f-1024x576.jpg)
![違うページにリンクを設置する方法を説明するための画像](https://oyoyo-m.com/wp-content/uploads/2021/11/bb0e76a18e1c7b823be4df03f20afd7f-1024x576.jpg)
参考にしていただければ幸いです
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
![](https://oyoyo-m.com/wp-content/uploads/2021/08/d1fcc4031b16e399ee68b9785be8e4a1.png)
最後までお読みくだりありがとうございました
2022年4月17日追記
トップページのおすすめ記事コーナーの目次をリニューアルしました。
ビフォアはこちら
![](https://oyoyo-m.com/wp-content/uploads/2021/11/ec9357a33b78a4bf7702d80010a40564.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/ec9357a33b78a4bf7702d80010a40564.jpg)
アフターはこちら
![](https://oyoyo-m.com/wp-content/uploads/2021/11/aefac62a567e0f36d9e9de271a59b2d3.jpg)
![](https://oyoyo-m.com/wp-content/uploads/2021/11/aefac62a567e0f36d9e9de271a59b2d3.jpg)
ビフォアは、目次のテキストにリンクを挿入していました。
アフターは、SWELLのボックスメニューブロックでリンクボックスをつくりました。
ボックスメニューブロックの詳細は、こちらの記事で紹介していますので、ぜひ参考にしてください。
有用性の低いコンテンツの原因・対策・修正法教えます
私がアドセンス審査でお世話になった先生です。具体的で実践的なアドバイスを丁寧にしていただきました。無料修正回数は無制限。コンサルの日数は要相談。ビデオチャット打ち合わせ可能。
SWELL
ユーザーさん