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

2023.10.082024.03.08

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

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

コピペするだけで再現しますが、CSSも使うとより細かい調整ができます。

サンプル

実際の見本です。

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

コード

条件

ブロックエディタ
SWELL

コードのリンク先は後から変更してください。仮で入れております。

<!-- 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"><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"><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"><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"><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 -->

コピーしたコードを貼り付けるときはCtrl＋Shift＋Vで貼り付けてください。

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

CSSを使った微調整

CSSで微調整しています。

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

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

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

/* アイコン同士の幅を狭くする */
.horizontal-icons.swell-block-box-menu.is-style-fill {
    max-width: 240px;
}
/* アイコンの余白を消す */
.horizontal-icons.swell-block-box-menu.is-style-fill .swell-block-box-menu__link {
    padding: 0;
}
/* 空のテキストの場合の余白を消す */
.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;
    opacity: .6
}

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

サンプル

コード

CSSを使った微調整

関連記事