SWELL SNSアイコンにnoteを追加するカスタマイズ【コピペのみ】

2023年3月29日2023年3月31日

URLをコピーしました！

SWELLの著者情報やプロフィールにはSNSアイコンを表示する機能があります。

SWELLのSNSアカウント情報の登録は、対応しているSNSが多いのですが、なぜかnoteのアカウントには対応していません。

この記事では、簡単にコピペだけで、SWELLのSNSアイコンにnoteを追加するカスタマイズをご紹介します。

この記事を書いた人

フリーランサー

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富。SWELLやCocoon、Snowmonkey、Arkheなどテーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。
第二種情報処理技術者試験（合格率：15.5％）、Google アナリティクス上級者向けコース、Google タグマネージャーの基礎コース、上級ウェブ解析士、HTML5プロフェッショナル認定レベル2

クリックできる目次

SWELLでSNSアカウント情報を設定するには？

SWELL公式サイトの説明では現在10種類のSNSサービスに対応しています。

現在、アカウント情報を設定できるSNSなどのサービスは以下の10種類です。
Facebook
Twitter
Instagram
楽天ROOM
LINE
Pinterest
Github
Youtube
Amazon欲しいものリスト
Feedly
サイト運営者のSNSアカウント情報を設定する方法 | WordPressテーマ SWELL

「外観」> 「カスタマイズ」>「SNS情報」の中に、以下のような入力欄がありますので、各SNSなどのサービスに対応するアカウントのURLを入力すればOKです。

ところが、noteには対応していません。

SNSアカウント情報にnoteを追加するカスタマイズ

SWELLのSNSアカウント情報は10種類登録できますが、すべて使うことはないと思います。

今回は楽天ROOMをnote用に割り当てて、noteのアイコンを表示するようにカスタマイズします。

li.c-iconList__item.-room{position:relative;}
.icon-room:before {
    margin: 0;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%0A%3Csvg width='500' height='500' viewBox='0 0 500 500' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M105.251 215.151C90.5437 214.742 69.9529 215.559 55 215.559V292.039H76.4079V234.189C76.4079 234.189 95.4463 233.535 102.31 234.352C108.765 235.088 111.135 239.092 111.38 247.426C111.543 256.904 111.38 261.889 111.38 292.039H132.788C132.788 292.039 133.033 257.558 132.788 245.547C132.461 224.22 125.025 215.641 105.251 215.151Z' fill='black'/%3E%3Cpath d='M204.283 214.906C183.121 214.906 165.88 232.228 165.88 253.554C165.88 274.881 183.121 292.203 204.283 292.203C225.446 292.203 242.687 274.881 242.687 253.554C242.687 232.228 225.446 214.906 204.283 214.906ZM204.283 273.737C193.171 273.737 184.183 264.667 184.183 253.473C184.183 242.278 193.171 233.209 204.283 233.209C215.396 233.209 224.384 242.278 224.384 253.473C224.384 264.749 215.396 273.737 204.283 273.737Z' fill='black'/%3E%3Cpath d='M445 253.554C445 232.228 427.759 214.906 406.596 214.906C385.434 214.906 368.193 232.228 368.193 253.554C368.193 266.056 373.913 276.76 382.819 283.869C389.029 288.771 397.69 292.203 409.293 292.203C414.931 292.203 429.557 290.651 440.097 278.966L431.436 267.363C427.759 270.632 418.526 275.207 411.172 275.207C401.857 275.207 396.219 273.41 392.134 269.569C389.601 267.282 387.803 263.768 386.986 259.438H444.428C444.755 257.476 445 255.597 445 253.554ZM387.15 246.527C389.274 237.458 395.647 230.757 406.515 230.757C417.872 230.757 423.837 237.948 425.798 246.527H387.15Z' fill='black'/%3E%3Cpath d='M315.408 207.797H295.39V229.287H274.799V248.08H295.39V270.387H315.408V248.08H335.999V229.287H315.408V207.797Z' fill='black'/%3E%3C/svg%3E%0A");

}

noteのアイコンは最近新しくなったので、note公式サイトからロゴのsvgデータをダウンロードして、CSSに埋め込んであります。