お問い合わせ

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

  • URLをコピーしました!

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

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

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

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のアイコンを表示するようにカスタマイズします。

nアイコンのみ表示

note公式サイトに、アイコンデータが追加されたので、n一文字のアイコンを表示させるカスタマイズになります。

noteのアイコンが正方形ではないので、見た目を少し調整しています。

.icon-room:before {
 	content:"";
	display:block;
	background-color: #000;
	width:auto;
	height:1em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493 493'%3E%3Cpath class='cls-1' d='m139.57,142.06c41.19,0,97.6-2.09,138.1-1.04,54.34,1.39,74.76,25.06,75.45,83.53.69,33.06,0,127.73,0,127.73h-58.79c0-82.83.35-96.5,0-122.6-.69-22.97-7.25-33.92-24.9-36.01-18.69-2.09-71.07-.35-71.07-.35v158.96h-58.79v-210.22Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493 493'%3E%3Cpath class='cls-1' d='m139.57,142.06c41.19,0,97.6-2.09,138.1-1.04,54.34,1.39,74.76,25.06,75.45,83.53.69,33.06,0,127.73,0,127.73h-58.79c0-82.83.35-96.5,0-122.6-.69-22.97-7.25-33.92-24.9-36.01-18.69-2.09-71.07-.35-71.07-.35v158.96h-58.79v-210.22Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 1.2em;
    mask-size: 1.2em;

}

もし、楽天ROOM以外のSNSアカウント情報を使う場合は、セレクタ名(.icon-room)を変更してください。

ロゴ全体を表示(非推奨)

以前は、公式サイトにnアイコンがありませんでした。その時にnoteロゴを使った時のカスタマイズになります。

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

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");

}

もし、楽天ROOM以外のSNSアカウント情報を使う場合は、セレクタ名(.icon-room)を変更してください。

まとめ

SWELLのSNSアカウント情報にnoteを追加するカスタマイズをご紹介しました。追加CSSに張り付けるだけでカスタマイズできますので、トライしてみてください。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次