ブログやサイト運営において、訪問者に対して有用な情報を効果的に提供するためには、記事の見せ方が大切です。特に、閲覧者の目に留まる「リンクリスト」は、記事の回遊率を増やし、情報提供の幅を広げる強力なツールです。でも、ただリンクを羅列するだけでは、思ったような成果を上げることはできません。
今回は、人気のWordPressテーマ「SWELL」を使って、シンプルながらも効果的に目立つリンクリストを作成する方法をご紹介します。プロフェッショナルな見栄えを保ちつつ、ユーザーの興味を引くリンクリストを活用することで、読者がどのようにしてサイト内を回遊しやすくなるのか、その具体的な手法を解説していきます。
では、早速リンクリストの作成に取り掛かりましょう。次は、SWELLで実際に手順を踏んでいく方法を詳しく見ていきます。
SWELLでリンクリストを活用して目立つ記事リンクを作る方法
SWELLは、使いやすさとカスタマイズ性の高さで人気のあるWordPressテーマです。その中でも、リンクリストを活用して目立つ記事リンクを作成することができます。本記事では、SWELLでリンクリストを効果的に活用する方法について詳しく解説します。
SWELLブロックエディターを活用する
SWELLには、直感的に操作できるブロックエディターが搭載されています。このエディターを活用することで、簡単にリンクリストを作成することができます。
リンクリストの設定手順
リンクリストの基本的な設定手順は以下の通りです。
+ボタンは2箇所あり、どちらをクリックしても可。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/6e80cec2e0512907d609486afa1ec16d-1024x451.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/09e9293a5558ac6d3722163dd0b2c133-1024x505.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/8fddf39e4677fe932839d4e9d18b0259-1024x505.png)
追加がある場合は+ボタンをクリックする。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/23ebb14c6affdc11a343e67fe65247d1-1024x505.png)
活用のポイント
- リンクリストブロックには、様々なスタイルが用意されています。お好みに合わせて選択しよう。
- リンクリストブロックは、記事だけでなく、ページやカスタム投稿にも利用できます。
- リンクリストブロックの詳細な設定は、サイドバーから行うことができます。
外部リンクを挿入する方法
SWELLリンクリストブロックに外部リンクを追加するには、以下の手順を行います。
挿入手順
記事やページを編集している画面で、リンクリストブロックをクリックすると、編集画面が開きます。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/66c281ab883cfb1645c37f73dced55a9-1024x442.png)
編集画面の下側にある「リストを追加」ボタンをクリックします。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/58bce8cc5f50b957656ace920719a5c5-1024x491.png)
以下の項目を入力します。
- URL: リンクしたいウェブサイトのURLを入力します。
- 表示するテキスト: リンクをクリックした際に表示されるテキストを入力します。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/a2c98a0b7a25d4b66c956b981ad750e6-1024x455.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/f1ee4e8639f6aaf3462c4924ee52cd5a-1024x448.jpg)
挿入時のポイント
- 表示するテキストは、簡潔で分かりやすいものにするのがおすすめです。
- リンクを追加する際は、著作権などに注意する必要があります。
貼り方を工夫してリンクリストを作る
SWELLリンクリストブロックの効果を最大化するためには、貼り方にも工夫が必要です。以下に、いくつかのポイントをご紹介します。
- 関連するリンクをまとめて配置する
記事の内容に関連するリンクをまとめて一箇所に配置することで、関連情報を素早く提供できます。読者は、記事を読みながら関連する情報に簡単にアクセスすることができます。 - 目立たせる
リンクリストをブログ本文の上部や中間に配置することで、目立たせることができます。重要なリンクやよく参照されるリンクを目立たせることで、読者の興味を引くことができます。 - リッチカラムやボタンブロックを活用する
リッチカラムやボタンブロックを活用することで、視覚的なアクセントを加え、よりクリックされやすいリンクを作成できます。 - デザインにこだわる
リンクリストのデザインにこだわることで、より見やすく、魅力的なコンテンツになります。 - 定期的に更新する
リンクリストは、定期的に更新して最新の情報に保つことが重要です。
リンクリストのスタイルをカスタマイズする
![](https://yoshiaki75.com/wp-content/uploads/2024/06/customization.jpg)
リンクリストのスタイルをカスタマイズすることで、訪問者にとってより魅力的なデザインに仕上げることができます。
リンクボックスのデザインを変更する方法
SWELLリンクリストブロックのデザインは、SWELLのりンクリストのスタイルを使用して簡単に変更できます。
手順
右サイドバーのスタイルから設定できます。詳細は以下に示します。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/300e472eb19897ce900cfa2c0772dd9f-1024x307.png)
SWELLのリンクリストブロックでは、以下2種類のデザインを選ぶことができます。
ディフォルトスタイル
![](https://yoshiaki75.com/wp-content/uploads/2024/06/a9b5f759bee7ad45b32f3eeae7b447cc-1.png)
ボタンスタイル
![](https://yoshiaki75.com/wp-content/uploads/2024/06/74fc2b70cd0df7e261c617c5374f372c-1-1024x302.png)
リンクを横並びに
![](https://yoshiaki75.com/wp-content/uploads/2024/06/e7dd4476eb238b02d453d6976658c28a-1024x144.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/35c7be76eae442f60b333500dc08c5cc-1024x144.png)
デフォルトスタイルの場合は、リストにボーダーを付けることができます。
ボタンスタイルの場合は、ボタンのカラーを塗りつぶすかどうかの設定もできます。
デフォルト/ボーダー
![](https://yoshiaki75.com/wp-content/uploads/2024/06/a87f0fb839a8f2cdf989038a366992da-1024x460.png)
ボタン/塗りつぶし
![](https://yoshiaki75.com/wp-content/uploads/2024/06/3cb6277f8a6a64d7c411dc029ecd4aa2-1024x338.png)
リッチカラムを使ってリンクリストを装飾する
SWELLのリッチカラム機能を使うと、通常のリンクリストよりも視覚的に魅力的で、情報量が多いリンクリストを作成することができます。リッチカラムは、複数のカラムを自由にレイアウトできる機能で、各カラムに異なるコンテンツを配置できます。
このようなレイアウトを使用することで、より複雑で興味深いリンクリストが作成できます。
リンクリストを装飾する例
左カラムに画像、右カラムにリンクと説明
![](https://yoshiaki75.com/wp-content/uploads/2024/06/5b7ce94611031ed64319143492636619-1024x507.png)
上カラムにタイトル、下カラムにリンク一覧
VOD(動画配信サービス)の関連記事
リッチカラムを使うメリット
- 視覚的に訴求力のあるリンクリストを作成できる
- 情報量が多いリンクリストを作成できる
- 自由度の高いレイアウトが可能
- デザインの幅が広がる
アイコンを追加してリスト項目を目立たせる
SWELLリンクリストブロックにアイコンを追加することで、リストをより視覚的に魅力的にし、ユーザーの興味を引くことができます。アイコンは、各リンクの種類や内容を分かりやすく伝えるのに役立ちます。
手順
右サイドまたは上段にある「親ブロックを選択」をクリックします。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/2ee9be4bed9d627b695e52c9434208c7-1024x413.png)
用意されているアイコンの中から、好きなものを選択します。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/d5a3d5113ce7e07d5e1ba9609656d8ff-1024x500.png)
リンクリストを効果的に配置する方法
リンクリストを効果的に配置するためには、視覚的な統一感とナビゲーションのユーザビリティを意識することが重要です。また、リンク先が適切な装飾で提示されるようにしましょう。記事全体の流れを損なわずに読者にとってわかりやすい位置に配置すると良いでしょう。
記事中にリンクリストを配置するポイント
記事中にリンクリストを配置する際には、以下の点に注意することで、より効果的に情報を伝えることができます。
- 読者の目線を意識する
-
- 読者が最初に目にする場所に配置することで、リンク先の情報が補完的であることを示します。
- 記事の重要なポイントの近くに配置することで、読者の興味を引くことができます。
- 目立たせたいリンクには、アイコンやボタンなどを活用するのも効果的。
- 視覚的なバランスを考慮する
-
- 行間や文字サイズを調整して、リンクリストが記事全体のデザインに調和するように配置。
- 複数のリンクリストを配置する場合は、間隔を空けたり、色やデザインを統一したりする。
- リンクの重要度や関連性を考慮する
-
- リンク先の重要度や関連性を考慮して、適切な順序でリンクを配置。
- 時系列順やカテゴリー順など、論理的な順序で配置することで、読者が情報を見つけやすくすることができます。
- よくクリックされると思われるリンクは、目立つ位置に配置します。
リンクリストの位置やサイズを調整する方法
SWELLリンクリストブロックは、デフォルトの設定でも使いやすいですが、より高度なカスタマイズを施すことで、デザイン性やユーザビリティをさらに向上させることができます。ここでは、CSSとHTMLを活用した、リンクリストの位置とサイズの調整方法について解説します。
CSSでマージン・パディングを調整する
margin
プロパティを使用することで、リスト全体の外側の余白を調整できます。padding
プロパティを使用することで、リスト内の要素と境界線の間の余白を調整できます。- 具体的な値は、デザインやレイアウトに合わせて調整する必要があります。
メディアクエリで画面サイズに応じたレイアウト調整を行う
- スマートフォンやタブレットなどの小型デバイス向けに、リストの表示方法を変更できます。
- 例えば、リストを複数列に並べ替えたり、フォントサイズを小さくしたりすることができます。
- メディアクエリを使用することで、様々な画面サイズに対応した柔軟なレイアウトを作成できます。
文字サイズ・リンク間のスペースを調整する
font-size
プロパティを使用して、リスト内の文字サイズを調整できます。letter-spacing
プロパティを使用して、文字間のスペースを調整できます。- 適切な文字サイズとリンク間のスペースを設定することで、視認性が向上し、読みやすくなります。
リンクリストをフローティングウィンドウとして配置する
position: absolute;
プロパティを使用することで、リストを固定位置に配置できます。top
、left
、bottom
、right
プロパティを使用して、リストの位置を調整できます。- フローティングウィンドウとして配置することで、常に画面に表示され、ユーザーの注目を集めることができます。
リスト項目の順序を変更する方法
リストを作成中に、リストの順番を入れ替えたくなるケースもあると思います。
そんな時は、対象のリンクリスト項目ブロック(子ブロック)を選択した状態で、ブロックツールバーの以下ボタンをクリックすることで簡単に順序を入れ替えることができます。
① 順序を変更した「子ブロック」を選択。
② 上矢印・・・ワンランク上に移動。
下矢印・・・ワンランク下に移動。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/image-19.png)
一括生成の機能を利用する
SWELLリンクリストブロックは、記事やページに簡単にリンクを追加できる便利な機能ですが、複数のリンクを個別に設定していくのは時間と手間がかかります。そこで、一括生成という機能を活用することで、作業効率を大幅に向上させることができます。
一括生成の手順
サイト内のカテゴリー・タグ・タクソノミーへのリンクを一気に生成する機能が用意されています。
サイト内のカテゴリーやタグのリンク集を作成したい時に使うと便利です。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/434083701d0ec60621cd6f04c69b0564-1024x401.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/ca252f8dc346ae67b4cdd09e9f635ff2-1024x825.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/01b951f94d89abc14a97c0a90e965990-1-1024x825.png)
前ステップで選択した「ブログ」「SWEII」「canva」「VOD」が追加されている。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/e0286922fbb8ca2c155d041ea682e793-1024x757.png)
具体的な活用例
- ブログ記事の関連記事を自動生成する
- 商品ページに関連商品のリストを表示する
- カテゴリーページに人気記事のリストを表示する
- ランディングページにCTA(行動喚起)ボタンのリストを表示する
リンクリストの便利機能を活かす
リンクリストは、ウェブサイトのナビゲーションを簡単に改善し、ユーザビリティを向上させるための非常に便利なツールです。適切なリンクリストを使うことで、訪問者が情報をスムーズに探し出せるため、滞在時間の増加や利用者の満足度向上が期待できます。
リンクリストを使ったメールマガジンの構築方法
メールマガジン、リンクリストは読者が情報に柔軟にアクセスできるよう導く効果的なツールとして活用できます。以下、具体的な活用方法とポイントをご紹介します。
- 読者の興味のあるコンテンツ
・ニュースや新商品情報など、読者が興味を持つ可能性の高いコンテンツを選択しましょう。
・商品画像は高画質で魅力的なもにして、クリックしたいような感じのものを選択しましょう。 - カテゴリー分け
・複数のコンテンツを扱っている場合は、カテゴリーごとに分類することで、読者が目的の情報を見つけやすくしましょう。
・カテゴリー名を簡潔にし、カテゴリーに合ったコンテンツを表示しましょう。 - 視覚的に訴求するデザイン
・単調なテキストだけのリストではなく、アイコンや画像を視覚的に訴求しましょう。
・適切な余白とフォントサイズを使用し、読みやすいレイアウトを心がけましょう。 - クリック誘導
・リンクに簡潔でわかりやすい説明文を記載し、クリックしたくなるような文を作成しましょう。
・CTA(Call to Action)ボタンの割り当てにより、読者がすぐにアクションを起こすことができます。 - 分析と改善
・メールマガジンの配信後、開封率やクリック率などの分析結果を確認しましょう。
・結果、コンテンツやデザインが改善されていくことで、より効果的なリンクリストを作成することができます。
リンクボックスを用いてブログカードを作成する
リンクボックスは、ブログ記事を視覚的に魅力的に紹介する手法として非常に有効です。記事や画像、タイトルなどを一つのカードにまとめ、クリックしやすい形で行うことで、読者の興味を引くことができます。
リンクボックスのメリット
- 記事への誘導率向上
キャッチ画像やタイトルを効果的に表示することで、読者の興味を惹き、記事への誘導率を高めることができます。 - ブログ全体のデザイン向上
統一感のあるデザインのリンクボックスを使用することで、ブログ全体の見た目や使い勝手も向上させることができます。 - 記事の整理整頓
カテゴリーやタグごとにリンクボックスを分類することで、記事を整理整頓し、読者が目的の記事を見つけやすくなります。
リンクボックスの作成方法
- SWELLボックスメニューを使う
- WordPressなどのプラグインを使う
- HTMLとCSSで自作する
ある程度の HTML と CSS の知識が必要です。
リンクボックス作成のポイントと作成例
![](https://yoshiaki75.com/wp-content/uploads/2024/06/ae469c813fcdd0a97af9c99cbc1a7fdb.png)
(作成ポイント)
- アイキャッチ画像 使う
- タイトルを明確に記載する
- 簡潔な説明文を記載する
- 適切なサイズにする
- 統一感のあるデザインにする
リンクリストを使ったサイドバーのウィジェット作成方法
サイドバーは、ウェブサイトにおいて訪問者が最初に目にする重要なエリアであり、サイトのナビゲーション機能を向上させるために存在します。リンクリストをサイドバーにウィジェットとして追加することで、カテゴリ、人気記事、新着記事などへのアクセスを容易にし、ユーザーにとって使いやすく、魅力的な買い物をすることができます。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/c1414dd6a91c18170fce52c835611e13-1024x752.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/c7f8b3386bb692b65a46c8106fb54556-1024x614.png)
カスタムHTMLのタイトルを「リンクリスト」、内容に「呼び出しコード」を貼り付ける。
![](https://yoshiaki75.com/wp-content/uploads/2024/06/00d29e6a7c715c014c9c50f2a52fcc49-1-1024x539.png)
![](https://yoshiaki75.com/wp-content/uploads/2024/06/c59d2f39f38a078e2847b81b5597079c-1024x337.png)
まとめ
本記事では、SWELLでリンクリストを活用して目立つ記事リンクを作成する方法について詳しく解説しました。最初に、SWELLテーマの基本機能とリンクリストのメリットを理解することが重要です。リンクリストは、読者の視線を集めやすく、サイトの滞在時間を延ばす効果があります。次に、実際にリンクリストを作成する手順について詳しく説明しました。リストアイテムの配置やデザインの工夫により、視覚的に魅力的でクリックされやすいリンクを作成できます。
また、具体的な使用例と成功事例を紹介し、どのような内容がリンクリストに適しているのかを具体的に示しました。これにより、皆さんが自分のブログやウェブサイトで実際に活用できるイメージを持つことができたでしょう。
総じて、SWELLでのリンクリスト活用は非常に有益であり、SEO効果も期待できます。今回紹介したポイントを押さえ、自分のコンテンツ作りに役立ててください。これによって、より多くの読者に訪問してもらい、エンゲージメントを高めることができるでしょう。あなたのサイト運営がさらに成功することを願っています。
下記のカテゴリーをクリックすると関連記事が表示されます。あわせて読んでください。