SWELL│見出し横に「もっと見る」リンクを表示する方法【コピペOK】

2023.10.032026.10.21

SWELLで見出しの横に「もっと見る」リンクを横並びで表示するカスタマイズ方法を紹介します。

トップページや固定ページで投稿リストを配置するとき、セクション見出しの右側に「もっと見る」のリンクがあると、ユーザーの導線がスムーズになります。

幅に余裕があれば左右に並び、狭い画面ではリンクを次の行へ折り返す構成です。長い見出しを入れた場合も、スマホのプレビューで確認してください。

掲載コードをコードエディターへ貼り付け、見出し・リンク先・リンク名を自分のページに合わせて変更します。この構成では追加のCSSは不要です。

完成イメージ

見出し（H3）の右側に、小さめのテキストで「もっと見る」リンクが表示されます。

SWELLのセクション用見出しスタイル（is-style-section_ttl）と、横並びグループブロックを組み合わせて実現しています。

WordPressとSWELLで公開前に確認したいカスタマイズ記事

カスタマイズ記事の一覧を見る

長い見出しとリンクが390px幅で別の行に表示され、リンクにキーボードのフォーカス枠が付いたWAZAの実画面 — 2026年10月2日撮影。SWELL 2.19.0、390px幅の公開画面。長い見出しの下へリンクが折り返した状態です。

使いどころ

このカスタマイズは、以下のようなシーンで活用できます。

まず、サイト型トップページのセクション見出しに最適です。「新着記事」「人気記事」「カテゴリー別おすすめ」など、投稿リストブロックの上に配置すると、一覧ページへの導線を自然に作れます。

また、固定ページでのコンテンツ整理にも使えます。LP風のページでセクションごとに詳細ページへ誘導したい場合にも、見出し＋リンクの構成がぴったりです。

投稿リストの下部にリンクを置く場合は、SWELL標準の「MOREリンク」機能を使えます。見出し横に置きたい場合に、この記事の方法を使ってください。

構成の仕組み

この見出しは、3つのブロックの組み合わせで作られています。

①グループブロック（横並び）：レイアウトを「横並び（Flex）」、配置を「両端揃え（space-between）」に設定します。中のブロックが左右に分かれます。「複数行への折り返し」も有効にしておきます。

②見出しブロック（H3）：スタイルを「セクション用」に変更します。通常の見出しスタイルでも使えますが、セクション用の方がトップページの区切り見出しとして馴染みます。

③段落ブロック（右寄せ）：テキスト配置を「右寄せ」にし、「もっと見る」のテキストにリンクを設定します。SWELLのインラインアイコン（▶）とフォントサイズ小（u-fz-s）を使って、コンパクトに仕上げています。

コピペ用コード

動作条件

WordPress ブロックエディタ
SWELL テーマ

以下はWordPressのブロック構文です。投稿・固定ページの編集画面の右上メニューから「コードエディター」を開き、既存ブロックの途中を避けて本文末尾へ貼り付けます。続いて「ビジュアルエディター」に戻り、見出しとリンク先を編集してください。最初は下書きで試すと、既存の本文を保ったまま確認できます。

<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","orientation":"horizontal"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"className":"is-style-section_ttl"} -->
<h3 class="wp-block-heading is-style-section_ttl">新着記事</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><a href="https://motoki-design.co.jp/wordpress/" data-type="URL" data-id="https://motoki-design.co.jp/wordpress/"><span class="swl-fz u-fz-s"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMTkuNCAzOC4zIDMyLjcgMjVjLjYtLjYuNi0xLjUgMC0yLjFMMTkuNCA5LjZjLS45LS45LTIuNi0uMy0yLjYgMS4xdjI2LjVjMCAxLjQgMS42IDIuMSAyLjYgMS4xeiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="LsCaretRight" data-id="2" aria-hidden="true" class="swl-inline-icon"> </span>もっと見る</span></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

貼り付け方の注意点

このコードは「カスタムHTML」ブロックではなく、記事全体の「コードエディター」に貼り付けます。見出し・段落・グループとして編集できることを確認してください。

文字列として表示された場合は一度取り消し、貼り付け先を確認します。コードブロックの外側にある説明文や、表示用の枠までコピーしないでください。

貼り付け後、プレビューで確認してから以下を変更してください。

見出しテキスト：「新着記事」を任意の見出し名に変更
リンク先URL：サンプルのWAZAトップページURLを、自分のサイトの記事一覧やカテゴリーURLに変更
リンクテキスト：「もっと見る」を「一覧を見る」「Read More」など好みに変更可
見出しレベル：本文の階層に合わせて変更。この見本はH2配下なのでH3ですが、トップページの大きな区切りならH2などを選択

投稿リストと組み合わせる方法

実際のトップページでは、この見出しブロックの下にSWELLの投稿リストブロックを配置するのが定番です。

手順としては、まず上記のコードを貼り付けて見出し＋もっと見るリンクを作成し、そのすぐ下に投稿リストブロックを追加します。投稿リストの設定で、表示する投稿数・レイアウト・カテゴリーなどを指定します。「新着記事」なら日付順、「人気記事」なら人気順にし、見出しと一覧の内容を合わせてください。

なお、この方法では投稿リストブロック標準の「MOREリンク」機能は使いません。見出し横の「もっと見る」がその役割を担うため、投稿リストブロック側のMOREリンクは空欄にしておくとスッキリします。

カスタマイズの応用例

同じ構造を応用して、見出し右側のテキストを変えるだけで様々なパターンが作れます。

たとえば「もっと見る」の代わりに「一覧を見る →」「View All」「カテゴリーページへ」などのテキストにすれば、用途に応じた導線を作ることができます。

また、アイコン部分はSWELLのインラインアイコン機能を使っているため、エディタ上でアイコンの種類を変更することも可能です。

矢印以外にも、外部リンクアイコンなどに差し替えればデザインの幅が広がります。

ほかの実装例はSWELLカスタマイズのまとめから探せます。

見出しを変えるときに残すリンクの要素

要素	変更時の確認
見出しの本文	長い見出しでは右側リンクと重ならず、折り返すか確認
a要素のhref	見出しの文字を変えても移動先は自動では変わらない
リンクの表示文字	もっと見るだけで用途が伝わらないときは、一覧の対象も記載
swl-inline-icon	アイコン用spanを残し、リンク名は文字で伝える

見出しとリンクは別のブロックです。

見出しを「カスタマイズ記事」に変えた場合は、右側のリンク先もカスタマイズ一覧に合っているか確認します。

表示文字とURLを同時に変更するときは、編集前の両方を控えておくと戻せます。

コードエディターでは、リンクの表示文字を囲むspanとアイコン用のswl-inline-iconを区別します。

表示文字とhrefを変更して保存し、再編集時にリンク名・URL・アイコン用spanが残るか確認してください。

公開画面ではTabで右側リンクへ移動し、Enterで目的の一覧へ進めることを確かめます。

公開前の確認と戻し方

PCとスマホのプレビューで、見出しとリンクが重ならず読めること、リンク先が意図した一覧であることを確認します。キーボードのTabでリンクへ移動し、Enterで開けることも確認してください。同じページに複数置く場合は「制作実績をもっと見る」など、行き先が分かるリンク名にします。

元に戻す場合は、リストビューで今回追加した横並びのグループを選び、削除します。直下の投稿リストまで選択しないようにしてください。既存本文も変更してしまった場合は、保存前なら取り消し、保存後ならリビジョンで変更前の内容を確認します。

2026年10月2日に、SWELL 2.19.0のコードエディターから本文を保存し、公開画面をPCと390px幅で確認しました。ビジュアルエディターでブロックを変更して再保存したときに、リンク名と移動先が保持されるかは未検証です。

よくある質問：SWELLで見出し横に「もっと見る」リンクを表示するとき

この方法では、CSSの追加は必要ですか？

この構成では追加のCSSは不要です。掲載コードをコードエディターへ貼り付けた後、見出し・リンク先・リンク名を自分のページに合わせて変更します。SWELLのセクション用見出しスタイル（is-style-section_ttl）と、横並びグループブロックを組み合わせて実現しています。

どんな場面で使いますか？

記事では、サイト型トップページのセクション見出し（「新着記事」「人気記事」「カテゴリー別おすすめ」など）や、固定ページのコンテンツ整理に使えます。投稿リストブロックの上に配置すると、一覧ページへの導線を自然に作れます。

コードは、どこに貼り付けますか？

記事では、WordPressのブロック構文を、投稿・固定ページの編集画面の右上メニューから「コードエディター」を開き、既存ブロックの途中を避けて本文末尾へ貼り付けます。その後「ビジュアルエディター」に戻り、見出しとリンク先を編集します。「カスタムHTML」ブロックではなく、記事全体のコードエディターに貼り付けます。最初は下書きで試します。

貼り付けたあと、何を変更しますか？

記事では、見出しテキスト、リンク先URL（サンプルのWAZAトップページURLを、自分のサイトの記事一覧やカテゴリーURLに変更）、リンクテキスト、見出しレベルを変更します。見出しレベルは本文の階層に合わせ、この見本はH2配下なのでH3です。

コードが文字列として表示されたときは？

記事では、一度取り消し、貼り付け先を確認します。コードブロックの外側にある説明文や、表示用の枠までコピーしないでください。

投稿リストブロックと、どう組み合わせますか？

記事では、見出し＋もっと見るリンクを作成し、そのすぐ下に投稿リストブロックを追加します。なお、この方法では投稿リストブロック標準の「MOREリンク」機能は使いません。見出し横の「もっと見る」がその役割を担います。

見出しの文字を変えると、リンク先も変わりますか？

自動では変わりません。記事では、見出しとリンクは別のブロックなので、見出しを変えた場合は、右側のリンク先も一覧に合っているか確認します。表示文字とURLを同時に変更するときは、編集前の両方を控えておくと戻せます。アイコン用のspanは残します。

公開前に確認すること、元に戻す方法は？

記事では、PCとスマホのプレビューで、見出しとリンクが重ならず読めること、リンク先が意図した一覧であること、Tabでリンクへ移動しEnterで開けることを確認します。元に戻す場合は、リストビューで今回追加した横並びのグループを選んで削除し、直下の投稿リストまで選択しないようにします。なお、ビジュアルエディターで変更して再保存したときの保持は未検証です。