★当サイトは【SWELL】を使用しています....(▽◕ ᴥ ◕▽)    ★★ 【Canva】のテンプレートで年賀状を作る方法を紹介しています(^-^)/

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

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

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

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

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

ところが・・・・

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

お悩みさん

せっかくブログに訪問してもらっても、トップページをスクロールしているうちに離脱されてしまうのではないかしら・・・

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

かわうそ

トップページに「目次」を作れば、このお悩みは解決できます!

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

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

  • アンカーリンクを使ってトップページに「目次」を作る方法
  • Twitterなど他のサイトに「トップページの特定場所のリンク」を設置する方法

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

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

この記事はこんな方におすすめ
  • トップページをサイト型にしている方
  • 見やすいサイト型のトップページにしたい方
  • サイト型トップページにたくさんのコンテンツを掲載している方
  • 他のサイトとトップページの特定の場所をリンクでつなげたい方
こんな
SWELL
ユーザーさん

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

目次

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

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

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

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

  1. 「ページ内の指定したブロック」にリンクを設置
  2. 「違うページの指定したブロック」にリンクを設置

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

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

同じ記事にアンカーリンクを設置する説明をするための画像
リンク元
よく見かける『ここをクリックしてね』と表示された箇所です
リンク先
クリック』してジャンプさせたい箇所です

STEP
リンク先に「アンカーリンク」を設置する
STEP
リンクさせたいブロックをクリック

リンク先にしたいブロック(見出しなど)をクリックします

STEP
サイドバーのいちばん下にある「高度の設定」をクリック

STEP
「HTMLアンカー」の枠内に好みのテキストを入れる

テキストは英数文字にすることをおススメします

今回は『kawauso』と入力をしました

STEP
リンク元に「アンカーリンク」を貼る
STEP
リンク元を選択する

リンク元の「テキスト」または「画像」を選択します

STEP
リンクボタンをクリックする
STEP
#(シャープ)+ 「HTMLアンカー」を入力する

今回は「#kawauso」と入力します

STEP
赤枠内をクリック ⇒ リンク設置完了

リンク元にリンクを設置することができました

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

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

違う記事にアンカーリンクを設置する説明をするための画像

STEP
リンク先ページに「アンカーリンク」を設置する

リンク先にアンカーリンクを設置する手順は「同じページ内にリンクを設置する」と全く同じです

HTMLリンクも「kawauso」としました

STEP
リンク元のページに「アンカーリンク」を貼る

リンク先のURLが下記という設定で説明します

STEP
リンク元を選択する

リンク元の「テキスト」または「画像」を選択する

STEP
リンクボタンをクリックする

STEP
リンク先URL + #(シャープ)+ 「HTMLアンカー」を入力する

今回は「https//neko/bbb/#kawauso」と入力します

これで、違うページにリンクを設置することができました

アンカーリンクの基本的な使い方は、下記のどのページでも同じです

  • 記事投稿ページ
  • 固定ページ
  • ブログパーツ

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

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

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

  • おススメの記事コーナーの【目次】と【各コーナー】
  • 【新着記事コーナー】と【おススメの記事コーナー】

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

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

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

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

リンク元
『おすすめ記事コーナー』の<目次テキスト>
リンク先
『おすすめ記事コーナー』の<見出し画像>

STEP
ブログパーツの作成画面でリンク元の【目次】を作る
ブログパーツの中に作った目次

STEP
リンク先の【見出し】画像に「HTMLアンカー」を設置する

各項目の見出し画像に「HTMLアンカー」を設置しました

HTMLアンカーの枠に「link-canva1」と入力しました

STEP
リンク元の【目次】のテキストに「#+リンク先のHTMLアンカー」を入力

#link-canva1と入力しました

かわうそ

おススメの記事コーナーの【目次】が完成しました!

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

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

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

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

リンク元
【新着記事コーナー】の<クリックのテキスト
リンク先
【おすすめ記事コーナー】の<見出し画像>
かわうそ

2つの「ブログパーツ」間をリンクさせます」

STEP
リンク先の【見出し】画像に「HTMLアンカー」を設置する

HTMLアンカーの枠に「osusumeと入力しました

STEP
リンク元の【クリック】のテキストに 「リンク先のURL+#+HTMLアンカー」を入力

リンク先のURLはサイトのURLになります

当サイトは『https://oyoyo-m.com/』ですので・・・

https://oyoyo-m.com/ #osusume と入力しました

かわうそ

違うブログパーツをリンクでつなげることができました

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

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

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

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

かわうそ

やり方は、Twitterに「山たびコーナー」のURLを貼りつけるだけです

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

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

かわうそ

もっと簡単な方法があります

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

かわうそ

ぜひ、お試しください

まとめ

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

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

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

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

ページ内にリンクを設置する方法を説明するための画像
違うページにリンクを設置する方法を説明するための画像

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

かわうそ

最後までお読みくだりありがとうございました

当サイトのトップページは「ブロブパーツ」で作成しています。

ポチっとしていただけると嬉しいです

リタイアかわうその主婦活ブログ - にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
目次
閉じる