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

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

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

特にスマホ表示では、見出し横のスペースを活用できるため省スペースで効果的です。

ブロックエディタのコピペだけで再現できます。CSSの追加は不要です。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

完成イメージ

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

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

使いどころ

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

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

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

SWELLの投稿リストブロックには標準で「MOREリンク」機能がありますが、見出し横に配置した方がスマホ表示時にファーストビューでリンクが目に入りやすいというメリットがあります。

構成の仕組み

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

①グループブロック（横並び）：レイアウトを「横並び（Flex）」、配置を「両端揃え（space-between）」に設定します。これにより、中に入れたブロックが左右に分かれて配置されます。

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

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

コピペ用コード

以下のコードをコピーして、ブロックエディタに貼り付けてください。

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","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 -->

貼り付け方の注意点

ブロックエディタにコードを貼り付けるときは、必ずCtrl＋Shift＋V（Macの場合は⌘＋Shift＋V）を使ってください。

通常のCtrl＋Vで貼り付けると、テキストとしてそのまま表示されてしまい、ブロックに変換されません。

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

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

手順としては、まず上記のコードを貼り付けて見出し＋もっと見るリンクを作成し、そのすぐ下に投稿リストブロックを追加します。投稿リストの設定で、表示する投稿数・レイアウト・カテゴリーなどを指定すれば完成です。

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

カスタマイズの応用例

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

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

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

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