SWELL│コピペするだけ！見出し横に「もっと見る」の表示

2023.10.032024.03.08

もっと見るリンク付き見出しのカスタマイズ紹介です。

投稿リストなどの見出しに使うのが有効的です。

スマホ表示で、もっと見るボタンのスペースを有効的に使えます。

コピペするだけで再現します。

サンプル

実際の見本です。

H3のタイトルともっと見るのテキスト、そして横並びのグループでまとめています。

コード

条件

ブロックエディタ
SWELL

<!-- 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で貼り付けてください。

Ctrl+Vだとブロックに変換されません。