SWELL│コピペするだけ！横並びのSNSアイコンの作成方法

2023.10.082026.10.13

横並びのアイコンのカスタマイズ紹介です。

ボックスメニューを使っているのでアイコンや画像の挿入が容易で、もちろんリンクもつけることができます。

SWELLのボックスメニューを使う方法です。ブロック構造を貼り付けた後、各リンク先と読み上げ用の名前を自分のアカウントに変更してください。

サンプル

実際の見本です。

ブロックはボックスメニューだけです。見た目の調整でCSSも使っています。

コード

条件

ブロックエディタ
SWELL

このページの4つの見本は、すべて当社のお問い合わせページへ移動します。SNSの公式アカウントへのリンクではありません。使用時はhrefを自分のURLへ、aria-labelを「Instagramを開く」など実際の移動先に合う名前へ変更してください。

<!-- wp:loos/box-menu {"boxStyle":"fill","textColor":"var(\u002d\u002dcolor_main)","boxColor":"#fff","colPC":"4","colTab":"4","colMobile":"4","gap":"1px","iconSize":"2em","className":"horizontal-icons"} -->
<div class="swell-block-box-menu is-style-fill horizontal-icons" data-has-gap="1" data-direction="vertical" style="--the-box-width--mb:25%;--the-box-width--tab:25%;--the-box-width--pc:25%;--the-gap:1px;--the-icon-size:2em;--the-icon-color:#fff;--the-text-color:var(--color_main)"><div class="swell-block-box-menu__inner"><!-- wp:loos/box-menu-item {"boxStyle":"fill","iconName":"LsInstagram"} -->
<div class="swell-block-box-menu__item has-link" data-has-gradient="0" data-icon-type="svg"><a href="https://motoki-design.co.jp/contact/" class="swell-block-box-menu__link" aria-label="Instagram用の見本（お問い合わせページへ）"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M24 12.2c-6.5 0-11.8 5.2-11.8 11.8S17.4 35.8 24 35.8 35.8 30.6 35.8 24 30.5 12.2 24 12.2zm0 19.4c-4.2 0-7.6-3.4-7.6-7.6s3.4-7.6 7.6-7.6 7.6 3.4 7.6 7.6-3.4 7.6-7.6 7.6zm15-19.8c0 1.6-1.3 2.7-2.7 2.7-1.6 0-2.7-1.3-2.7-2.7s1.3-2.7 2.7-2.7 2.7 1.1 2.7 2.7zm7.8 2.7c-.2-3.7-1-6.9-3.8-9.6s-6-3.5-9.6-3.8c-3.8-.1-15-.1-18.9.1-3.7.2-6.9 1-9.6 3.7s-3.5 5.9-3.8 9.6c-.2 3.8-.2 15.1 0 18.9.2 3.7 1 6.9 3.8 9.6s5.9 3.5 9.6 3.8c3.8.2 15.1.2 18.9 0 3.7-.2 6.9-1 9.6-3.8 2.7-2.7 3.5-5.9 3.8-9.6.3-3.8.3-15 0-18.9zM42 37.6c-.8 2-2.3 3.5-4.4 4.4-3 1.1-10.2.9-13.6.9s-10.5.3-13.6-.9c-2-.8-3.5-2.3-4.4-4.4-1.1-3-.8-10.2-.8-13.6s-.3-10.5 1-13.6c.7-2 2.3-3.5 4.3-4.3 3-1.3 10.2-.9 13.6-.9s10.5-.3 13.6.9c2 .8 3.5 2.3 4.4 4.4 1.1 3 .9 10.2.9 13.6s.1 10.4-1 13.5z"></path></svg></div></a></div>
<!-- /wp:loos/box-menu-item -->

<!-- wp:loos/box-menu-item {"boxStyle":"fill","iconName":"LsYoutube"} -->
<div class="swell-block-box-menu__item has-link" data-has-gradient="0" data-icon-type="svg"><a href="https://motoki-design.co.jp/contact/" class="swell-block-box-menu__link" aria-label="YouTube用の見本（お問い合わせページへ）"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M46.1 12.9c-.5-2-2.1-3.6-4.1-4.1-3.6-1-18-1-18-1s-14.4 0-18 .9c-2 .5-3.6 2.1-4.1 4.1C1 16.5 1 24 1 24s0 7.5.9 11.2c.5 2 2.1 3.5 4.1 4.1 3.6.9 18 .9 18 .9s14.4 0 18-.9c2-.5 3.6-2 4.1-4.1.9-3.7.9-11.2.9-11.2s0-7.5-.9-11.1zm-26.8 18V17.2l12 6.8-12 6.9z"></path></svg></div></a></div>
<!-- /wp:loos/box-menu-item -->

<!-- wp:loos/box-menu-item {"boxStyle":"fill","iconName":"LsLine"} -->
<div class="swell-block-box-menu__item has-link" data-has-gradient="0" data-icon-type="svg"><a href="https://motoki-design.co.jp/contact/" class="swell-block-box-menu__link" aria-label="LINE用の見本（お問い合わせページへ）"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M20.2 39.2c2.7.6 2.4 1.6 1.8 5.2-.1.6-.4 2.3 2 1.3 2.5-1 13.3-7.8 18.1-13.4 3.3-3.7 4.9-7.4 4.9-11.5C47 10.4 36.6 2 24 2S1 10.4 1 20.8C1 30 9.2 37.7 20.2 39.2zm12.3-23c0-.2.2-.4.4-.4h6.5c.2 0 .4.2.4.4v1.6c0 .2-.2.4-.4.4H35v1.7h4.4c.2 0 .4.2.4.4V22c0 .2-.2.4-.4.4H35V24h4.4c.2 0 .4.2.4.4V26c0 .2-.2.4-.4.4h-6.5c-.2 0-.4-.2-.4-.4v-9.8zm-11.1.1c0-.2.2-.4.4-.4h1.6c.1 0 .3.1.4.2l4.6 6.2v-6c0-.2.2-.4.4-.4h1.6c.2 0 .4.2.4.4v10c0 .2-.2.4-.4.4h-1.6c-.1 0-.3-.1-.4-.2l-4.6-6.2v6c0 .2-.2.4-.4.4h-1.6c-.2 0-.4-.2-.4-.4v-10zm-4.2-.1c0-.2.2-.4.4-.4h1.6c.2 0 .4.2.4.4v10c0 .2-.2.4-.4.4h-1.5c-.2 0-.4-.2-.4-.4v-10h-.1zm-8.7 0c0-.2.2-.4.4-.4h1.6c.2 0 .4.2.4.4v7.9h4.4c.2 0 .4.2.4.4v1.6c0 .2-.2.4-.4.4H8.9c-.1 0-.2-.1-.3-.1-.1-.1-.1-.2-.1-.3v-9.9z"></path></svg></div></a></div>
<!-- /wp:loos/box-menu-item -->

<!-- wp:loos/box-menu-item {"boxStyle":"fill","iconName":"LsMail"} -->
<div class="swell-block-box-menu__item has-link" data-has-gradient="0" data-icon-type="svg"><a href="https://motoki-design.co.jp/contact/" class="swell-block-box-menu__link" aria-label="メール用の見本（お問い合わせページへ）"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M25.2 24.7 46 9.5V9c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v.5l20.8 15.1c.7.6 1.7.6 2.4.1z"></path><path d="M22.8 29.6 2 14.5V38c0 1.7 1.3 3 3 3h38c1.7 0 3-1.3 3-3V14.5L25.2 29.6c-.7.5-1.7.5-2.4 0z"></path></svg></div></a></div>
<!-- /wp:loos/box-menu-item --></div></div>
<!-- /wp:loos/box-menu -->

上のコードはGutenbergのブロック構造を含みます。投稿編集画面のコードエディターに貼り付け、ビジュアルエディターへ戻してボックスメニューとして認識されるか確認します。カスタムHTMLブロックへ貼る方法とは異なります。認識されない場合は、ボックスメニューを手動で作り、4項目と専用クラス horizontal-icons を設定してください。貼り付けキーだけで変換できるとは限りません。

CSSを使った微調整

CSSで微調整しています。

※他のボックスメニューブロックには影響を受けないようにしています。

表示の幅に関しては専用のクラスを追加しています。

アイコンのフォントサイズに合わせて調整してください。

.horizontal-icons.swell-block-box-menu.is-style-fill {
    width: 240px;
    max-width: 100%;
}
.horizontal-icons.swell-block-box-menu.is-style-fill .swell-block-box-menu__link {
    padding: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.horizontal-icons.swell-block-box-menu[data-direction=vertical] .swell-block-box-menu__figure {
    margin-bottom: 0;
}
.horizontal-icons.swell-block-box-menu.is-style-fill .has-link:hover {
    box-shadow: none;
}
.horizontal-icons .swell-block-box-menu__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

コードエディターで保存した場合の確認

スクロールできます

確認対象	結果
SWELL 2.19.0で本文コードを保存・再読み込み	4個のaria-labelを保持
公開側のアイコン	Instagram・YouTube・LINE・メールのSVGを4個表示
キーボード	InstagramのリンクからTabでYouTubeへ移動・枠を表示
375px幅	4個を表示・ページの横はみ出しなし

2026年10月2日に、WordPress 7.1.2のコードエディターから本文を保存して確認しました。

ビジュアルエディターでブロックを変更して再保存した場合の保持は未検証です。

ビジュアル編集を使う場合は再保存後にリンクの名前とアイコンを確認し、消える場合は文字付きの標準ボックスメニューへ戻してください。

設置後の確認と戻し方

リンク先と読み上げ用の名前が一致すること、Tabキーで4つのリンクへ順に移動できること、スマートフォンで押し分けられることを確認します。aria-hiddenの付いたアイコンだけではリンクの名前が伝わらないため、aria-labelを残してください。ビジュアル編集後にも、公開ページに名前が残っているか確認します。

CSSは追加CSSまたは対象記事のCSS欄へ1回だけ追加します。元に戻す場合は追加したボックスメニューと horizontal-icons 用のCSSを削除します。他のボックスメニューや共通CSSは削除しません。

本文や見出しへ添えるアイコンを探す場合はSWELLアイコン一覧と使い方へ、ほかの表示を探す場合は目的別カスタマイズ一覧へ進めます。

よくある質問：SWELLで横並びのSNSアイコンを作るとき

横並びのSNSアイコンは、どのブロックで作りますか？

記事では、SWELLのボックスメニューを使う方法です。ブロックはボックスメニューだけで、見た目の調整でCSSも使っています。アイコンや画像の挿入が容易で、リンクもつけられます。

記事の見本は、SNSの公式アカウントにリンクしていますか？

していません。記事では、このページの4つの見本は、すべて当社のお問い合わせページへ移動し、SNSの公式アカウントへのリンクではありません。使用時はhrefを自分のURLへ変更します。

リンクに付ける「aria-label」は、何のためですか？

記事では、読み上げ用の名前です。aria-hiddenの付いたアイコンだけではリンクの名前が伝わらないため、aria-labelを残します。「Instagramを開く」など、実際の移動先に合う名前へ変更します。ビジュアル編集後にも、公開ページに名前が残っているか確認します。

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

記事では、コードはGutenbergのブロック構造を含むため、投稿編集画面のコードエディターに貼り付け、ビジュアルエディターへ戻してボックスメニューとして認識されるか確認します。カスタムHTMLブロックへ貼る方法とは異なります。

ボックスメニューとして認識されないときは、どうしますか？

記事では、認識されない場合は、ボックスメニューを手動で作り、4項目と専用クラスhorizontal-iconsを設定します。貼り付けキーだけで変換できるとは限りません。

CSSは、どこに追加しますか？

記事では、追加CSSまたは対象記事のCSS欄へ1回だけ追加します。他のボックスメニューブロックには影響を受けないようにしていて、表示の幅は専用のクラスで調整し、アイコンのフォントサイズに合わせて調整します。

ビジュアルエディターで編集しても、設定は保たれますか？

記事では、2026年10月2日にWordPress 7.1.2のコードエディターから本文を保存して確認していますが、ビジュアルエディターでブロックを変更して再保存した場合の保持は未検証です。ビジュアル編集を使う場合は、再保存後にリンクの名前とアイコンを確認し、消える場合は文字付きの標準ボックスメニューへ戻します。