お問い合わせ

SWELL カスタマイズ|twitterアイコンを『X』に変更する

  • URLをコピーしました!

twitterがイーロンマスクによって買収され、名前が『X』に変更されたのは皆さんご存じでしょう。

しかし、サービス名が変更になると、Wordpressテーマで使用しているロゴや名前も変更する必要があります。

メンテナンスされているテーマであれば、有料テーマであれ、無料テーマであれ、twitterのサービス名の変更、ロゴの変更は必須で、いずれ対応されるはずです。

このサイトで使用している有料テーマSWELLは、残念ながらtwitterアイコンがいまだにXになっていません。

対応されている例として、Lightningがあります。Lightningはプラグインではありますが、twitterアイコンがしっかり『X』に変更されています。

SWELLで使用しているtwitterアイコンを『X』に変更するカスタマイズをご紹介します。

SWELLアップデートでtwitterアイコンがXに変更された

SWELL バージョン2.8以降でTwitterアイコンがXに変更されました。SWELLを最新バージョンにアップデート可能な場合はアップデートすることで、本記事の内容は不要になります。

もし、何らかの事情でSWELLを最新バージョンにアップデートできない場合のみ本記事のカスタマイズをご参照ください。

SWELLのtwitterアイコンをXに変更する要望は出ている

TwitterのアイコンをXにしたいという質問がSWELL フォーラムにありました。

質問者がWeb制作している方のようですので、いかにも回答が付かないような案件ですが、有志の方が回答していました。

Twitter (X) のロゴは、黒板文字と呼ばれる数学で良く使われる太字で Unicode に登録されているものと殆ど同じです。
具体的には、𝕏 (U+1D54F) です。

アイコンは疑似要素で文字として表示されているので手軽にやるなら CSS 上で文字コードで上書きすれば以下のように変更できます。

回答内容も必要最低限に抑えられているので、これだと、直ぐに行動に移せる人は限られるでしょう。

この回答をCSSにすると以下のようになると思います。この短いCSSを追加すれば、twitterのアイコンは『X』になります。

.icon-twitter:before {
    content: "\1D54F";
}

しかし、この施策の通りに行った時のMacとWindowsの見た目の違いが以下の記事で説明されていて、Windowsの場合は見た目がかなり違うようです。

SWELLのSNSアイコンはどうやって表示している?

SWELLのSNSアイコンは疑似要素で配置されている

SWELLで表示しているSNSアイコンは、icomoonのアイコンフォントを疑似要素で配置しています。

もし、真面目にtwitterアイコンを置き換えるには、アイコンフォントを追加して、CSSを書き換える必要がありそうです。

それはテーマ作者が行うべきことで、ユーザーは別の応急処置で対応することになります。

ブロックエディタにはSNSアイコンブロックがあるが・・

ブロックエディタにはソーシャルアイコンブロックがありますが、いまだにtwitterの鳥のマークのままでした。

つまり、Wordpressコアには『X』アイコンはありません。

SWELLのtwitterアイコンを『X』に置き換えるカスタマイズ

このカスタマイズはCSSのコピペだけですので、コピペのコードが必要なだけであれば、Step3からご覧ください。

STEP
Fontawesomeの『X』アイコンのSVGをダウンロード

この手順は、CSSに含まれているので不要です

Font Awesomeのサイトから『X』アイコンのSVGをダウンロードします。

STEP
SVGファイルをCSSに変換

この手順は、CSSに含まれているので不要です

Font Awesomeからダウンロードしたsvgファイルを以下のサイトでCSSに変換します。

STEP
SWELLのtwitterアイコンのCSSを上書きコードを作成

SWELLのSNSアイコンはフォントアイコンと疑似要素を使用して表示しています。

今回、SVGアイコンとmask-imageを使っているのでSWELLのCSSを変則的に上書きしています。

mask-imageは、background-colorを持つ要素をmask-imageでマスクする処理です。#FFFの背景をSVGアイコンでマスクすることで、アイコンの色を変更しています。

mask-imageはIE11に対応していませんが、そもそもSWELLはIE非対応ですので問題ありません。

.c-shareBtns__item.-twitter {
	color: #000;
}
.c-shareBtns__btn:hover .icon-twitter:before {
	background-color: #FFF;
	
}
.icon-twitter:before {
	content:"";
	display:block;
	background-color: #000;
	width:1em;
	height:1em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
    mask-size: auto;
}
.l-footer .icon-twitter.c-iconList__icon:before,
.l-header__bar .icon-twitter.c-iconList__icon:before {
	background-color: #FFF;
}

参考:https://www.asobou.co.jp/blog/web/mask-image

STEP
追加CSSなどにCSSを追加

子テーマのstyle.cssや追加CSSなどから今回のCSSを追加します。

WordPressテーマのtwitterアイコン⇒『X』への対応状況

有料テーマを含めて、ほぼtwitterアイコンの『X』への置き換えは未対応です。

対応しているのは、以下の3つのテーマです。

  • Lightning
  • AFINGER
  • yStandard

Xアイコンに対応できるだけの情報や素材は揃っているのですが、全体的になぜか腰が重いですね。

Xのアイコンがまた変わるかもしれないという心配からか、他のテーマが対応したら対応しようと考えているテーマが多いと思います。

ユーザー数の少ないテーマは、こういう時にさっさと対応した方がユーザーを獲得できるチャンスなのに、なぜしないのか?とても不思議です。

テーマ名対応状況
2023年9月時点の調査
対応状況
2023年11月時点の調査
SWELL未対応対応
Cocoon未対応対応
Lightning対応(プラグイン)対応(プラグイン)
SANGO未対応未対応
SNOW MONKEY対応対応
JIN:R未対応未対応
THE SONIC未対応未対応
NISHIKI未対応未対応
The Thor未対応未対応
AFINGER対応対応
yStandard対応対応

まとめ

将来的には、SWELL側でTwitterアイコンの変更が入るのは確実でしょう。

それまでの救済処置として今回のカスタマイズで急場をしのぎましょう。

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

コメント

コメントする

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

クリックできる目次