JetThemeのSNSアイコンを変更する話
当ブログの左上にあるSNSアイコンをTwitter時代の青い鳥からXへ変更する話。
このブログにJetThemeを導入している時点で、TwitterはXへと変わっていたのだけど今更ながらアイコンを青い鳥からXへと変更してみようと思い立った。
アイコンの作成
公式アイコン（SVGファイル）の入手
まずはXのロゴをSVG形式で手に入れる。
X公式のブランドツールキットから『X logo』をダウンロードする。
https://about.x.com/en/who-we-are/brand-toolkit
ダウンロードしたファイルの中にある「logo.svg」を今回は使用する。
SVGファイルからsymbolタグを作成する。
SVG形式のファイルはテキストファイルとして開くことができる。
<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>
これをHTMLへ組み込むために、<symbol>タグに変更する。
<symbol id="i-twitterx" fill="currentColor" stroke="none" viewbox="0 0 1200 1227">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path>
</symbol>
- <svg>タグを<symbol>タグへ変更する
- パラメータのwidth、heightを削除する
- id="i-twitter-x” を追加する（※1）
- fill="currentColor"を追加する（※2）
- <path>タグを修正する
- パラメータのfillを削除する
- タグを</path>で閉じるように修正（※3）
※1：今回は従来の青い鳥を残すために、Twitter用のID「i-twitter」とは別に新しく「i-twitter-x」を使用する。
※2：アイコンの色表示を他のアイコンの色と揃えるために色指定を追加する。
※3：HTMLの記法としては元々の<path ～ />で問題ないが、この後の設定追加時に<path ～ /></path>と自動追加されていたので、念のため記録として残しておく。
アイコンの追加
BloggerにSVGアイコンを追加する
Bloggerの管理画面から レイアウト＞SVG Icons を編集して、前項で作成した<symbol>タグを追加する。
今回は新規追加のため、設定ファイルの一番最後に作成した<symbol>タグを追加して、保存する。
リンクの追加
Bloggerの管理画面から レイアウト＞Icons, Dark, Search を編集して、Xへのリンクを追加する。
- サイト名：twitter-x
- サイトのURL：（Xの自分のプロフィールページのURLを追加）
サイト名は、<symbol>タグで指定したID名から接頭辞の"i-"を除いた名前を指定する。
今回の場合はIDに"i-twitter-x"と指定したので、"i-"を除いた"twitter-x"を設定することになる。
設定が終わったら保存する。ブログページを更新してアイコンが反映されていることを確認する。
設定を他の項目にも反映する
SVGアイコンをヘッダ以外のリンクでも使用している場合は、「レイアウト＞Icons, Dark, Search」で設定した内容と同じように更新しておく。
当サイトの場合はフッターにあるSNSリンクも同様にSVGアイコンを利用しているため、同じようにリンクリストから"twitter-x"を追加している。
シェアボタンの更新（未検証）
当ブログではシェアボタンを現時点では利用していないため、動作確認は行っていないがレイアウトにTwitter関連の記述があるので念のため追加しておく。
CSSにXロゴ用のカラー表示を追加
Bloggerの管理画面から テーマ＞HTMLの編集 を行う。
CSSの root セレクタ、およびダークモード用の .dark-mode セレクタにロゴ用の色表示を追加する。
:root {
（中略）
--x-logo-color: #FFFFFF;
--x-logo-bg: #000000;
}
.dark-mode {
（中略）
--x-logo-color: #000000;
--x-logo-bg: #FFFFFF;
Xのブランドロゴガイドラインに従って、通常時は黒背景に白文字、ダークモードは白背景に黒文字となるようにカラーコードを設定する。
シェアボタンの設定を追加
Bloggerの管理画面から テーマ＞HTMLの編集 を行う。
id="JetShare" にて記述されている<a>タグの中に、X用のリンク設定を追加する。
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://x.com/intent/post?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:var(--x-logo-bg);' target='_blank' title='X(Twitter)にポスト'><svg aria-hidden='true' class='jt-icon' style='fill: var(--x-logo-color);stroke: none;'><use xlink:href='#i-twitter-x'/></svg></a>
旧Twitterのリンク設定をもとに、X用のリンク設定を作成して追加する。
- <a>タグ内のhref パラメータ内のURLを旧TwitterドメインからXドメインへと変更する
- 変更前：expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical'
- 変更後：expr:href='"https://x.com/intent/post?url=" + data:post.url.canonical'
- <a>タグ内のstyle パラメータ内のカラーコードを CSSで設定したセレクタ名へ変更する
- <use>タグ内の xlink パラメータに指定しているタグ名を X用に新規に作成した"i-twitter-x"に変更する
編集が終わったら保存するとX用のシェアボタンが出来ている…はずである。前述のとおり、現時点では使用していないため未検証のため、間違っていたらすみません。
参考URL
- 広く浅く生きる：ブログデザインをJetThemeに変更。独自のカスタマイズも紹介
関連
- BloggerにJetThemeを導入する話