SNSシェアボタンを変えました

SmartのSNSシェアボタンのTwitterアイコンが青い鳥なのでＸに変更しました。

ボタンを鳥からＸに変更したい

使わせてもらっているテーマのSmatには、初めからSNSシェアボタンが付いています。
これのTwitterがいつまでも青い鳥なのが気になってきました。

SNSシェアボタンのコードはどれ？

Smartを作成された、ふでたまごさんのページに解説がありました。
この辺を変更すればいいんですね。

HTMLコードを変更

Google検索すると、多くの方が書いてくれています。
fab fa-twitter を fa-brands fa-x-twitter に変更すればいいみたいです。

 <!-- Twitter -->
 <li class='twitter'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='data:top.shareToTwitterMsg' rel='nofollow' target='_blank'><i class='fab fa-twitter'/></a></li>

アイコンが消えた

変更したら･･･消えました😓

アイコンが出た

X-twitterのアイコンが追加されたのは Font Awesome 6.4.2 以降だそうです。

今のコードは v5.6.1 を指定していました。
無いものを指定したから消えたんですね。

<!-- font-awesome CDN -->
<link href='https://use.fontawesome.com/releases/v5.6.1/css/all.css' rel='stylesheet'/>

Font Awesomeは下位互換とのことなので、最新のバージョン番号に書き換えてみました。

<!-- font-awesome CDN -->
<link href='https://use.fontawesome.com/releases/v6.7.2/css/all.css' rel='stylesheet'/>

アイコンがＸになって出てきました。😊

自分のブログをひと通り見てみましたが、変なところはなさそうなので、バージョン６を指定でも大丈夫なのかな。

ただし、Font Awesome公式ではCDNは廃止されており、『Font Awesome Kitsホスト』の使用を推奨しているそうです。

CSSコードを変更

色が青いままなので黒に変えます。
これはきっとCSSを書き換えればいけるはず。

    /* SNSボタン
    ---------------------------------------------------------------------------- */
    .twitter a {
      background-color:#55acee;
    }

何色にすればいいか

どうせなら公式の色にしたいと思いChat-GPTに調べてもらいました。

変更完了です

思いどおりのものが出来ました。😍

Pocketはサービス終了

久しぶりに見たら、Pocket はサービス終了してるみたいです。
この機会に消しておいたほうがいいですね。

Pocketを削除

２つ削除すればいいんでしょうか？

CSSを削除

    /* SNSボタン
    ---------------------------------------------------------------------------- */
     .pocket a {
      background: #ee4056;
    }

HTMLを削除

<!-- Pocket -->
<li class='pocket'>
<a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='blank' title='Pocket で共有する'><i class='fab fa-get-pocket'/></a>
</li>

完成です

せっかくなので、順番も変えて、お願いコメントも入れてみました。

思った以上に大変でした。
テーマのカスタマイズってパズルみたいです。