SWELL カスタマイズ｜twitterアイコンを『X』に変更する
twitterがイーロンマスクによって買収され、名前が『X』に変更されたのは皆さんご存じでしょう。
しかし、サービス名が変更になると、Wordpressテーマで使用しているロゴや名前も変更する必要があります。
メンテナンスされているテーマであれば、有料テーマであれ、無料テーマであれ、twitterのサービス名の変更、ロゴの変更は必須で、いずれ対応されるはずです。
このサイトで使用している有料テーマSWELLは、残念ながらtwitterアイコンがいまだにXになっていません。
対応されている例として、Lightningがあります。Lightningはプラグインではありますが、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からご覧ください。
Font Awesomeのサイトから『X』アイコンのSVGをダウンロードします。
SWELLのSNSアイコンはフォントアイコンと疑似要素を使用して表示しています。
今回、SVGアイコンとmask-imageを使っているのでSWELLのCSSを変則的に上書きしています。
mask-imageは、background-colorを持つ要素をmask-imageでマスクする処理です。#FFFの背景をSVGアイコンでマスクすることで、アイコンの色を変更しています。
.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;
}子テーマの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アイコンの変更が入るのは確実でしょう。
それまでの救済処置として今回のカスタマイズで急場をしのぎましょう。
コメント