こんにちは。5年目ブロガーしゅーれいです。
TwitterがXになってしばらく経つので、シェアボタンを更新してみました。
HTMLとCSS修正メモです。
Xのロゴを公式サイトからダウンロード
Xのロゴは↓からダウンロード。
ZIPファイルを解凍して、使いたいロゴマークをはてなフォトライフにダウンロードします。
HTMLの変更点
元々
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
→
変更後
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/syu_rei/…….png（はてなフォトライフのXロゴマークのアドレス。ダウンロードしたときに設定される）" width="11.74" height="12" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></a>
はてなブログのXのアイコンは
<i class="blogicon-x lg"></i>
でいけると思ったけど、反応しなかったので、ロゴマークダウンロードで対応中。
はてな公式でロゴ使ってるので、絶対何かアイコン名つけてると思うのですがクラス名が分からず。
ロゴを使うときは、はてなフォトライフのアドレスは調べるより記事の下書きに貼ってみて「HTML編集」からコピペするのが楽です。
CSSの変更点
元々
.share-btn-type1 .share-btn__item--twitter {
background-color: #1BA1F3;
}
→変更後
.share-btn-type1 .share-btn__item--twitter {
background-color: #000000;
}
これで完了です。
