TwitterアイコンをX-Twitterアイコンに変更するには（弊社EC-CUBEテンプレート）

はじめに

弊社EC-CUBEテンプレートをご購入ご利用いただき、まことにありがとうございます。
さて、弊社EC-CUBEテンプレートではSNSシェアボタンをサイトフッターと商品詳細ページに設置しております。
シェアボタンにはTwitterボタンが含まれておりますがTwitter社がX（エックス）となりアイコンも変更になりました。弊社テンプレートではバージョン「4.2.3」以降はX-Twitterアイコンに変更しておりますが、それ以前のバージョンをご利用いただいているサイト様におかれましては以下の手順にて変更する事ができます。

シェアボタンが設置されていない古いバージョンは対象外となります。

EC-CUBEのCO環境では一部のTwigファイルを修正できませんので対象外となります。

その他、古いバージョンによっては説明内容に不備があるかもしれません。当記事はカスタマイズの参考情報となりますため予めご了承ください。

Twigファイルの修正

以下の3つのTwigファイルを修正してください。編集する際はエディタで修正してFTPアップロードしてください。
ファイルのバックアップは必ず残すようにしておいてください。

/app/template/dtJEIAxxxx/default_frame.twig

「FontAwesome」の読み込みバージョンを「6.5.1」に変更します。以下の1行を削除、あるいはコメントアウトして新たに行を追加してください。
修正前 ↓
修正後

/app/template/dtJEIAxxxx/Block/footer.twig

以下の旧Twitterアイコンのli要素を削除、あるいはコメントアウトして新たに行を追加してください。
※JEIA4002ではこの作業は必要ありません。
修正前 ↓
修正後

/app/template/dtJEIAxxxx/Product/detail.twig

以下の旧Twitterアイコンのli要素を削除、あるいはコメントアウトして新たに行を追加してください。
※JEIA4001_4.2.2未満ではこの作業は必要ありません。
修正前 ↓
修正後

CSSカスタマイズ

以上でアイコン自体の変更はできておりますがアイコンボタンのソーシャルカラーを黒へ変更する必要があります。
アイコンボタンの色を変更するためにCSSのカスタマイズを加えます。カスタマイズにはEC-CUBE管理機能の「CSS管理」を使用します。管理画面から「コンテンツ管理」→「CSS管理」を開いてください。コード入力欄に以下のコードを張り付けて登録ボタンをクリックしてください。

CSSコード

弊社テンプレートによって登録するCSSコードに違いがあります。以下のご利用JEIAテンプレートにあったCSSコードを張り付けて登録してください。

JEIA4001用のCSSコード

JEIA4002用のCSSコード

JEIA4004用のCSSコード

JEIA4005,4006,4007,4008,4009,4010用のCSSコード

JEIA4011用のCSSコード

以上で変更作業は完了となります。お疲れ様です。もし修正結果が反映されない場合は「コンテンツ管理→キャッシュ管理」からキャッシュ削除や、ブラウザの表示更新をお試しください。

JEIA4001での追加変更作業

JEIA4001におきましては左帯の底にもシェアボタンが設置されています。追加して以下の変更作業を行ってください。
※その他のJEIAテンプレートではこの作業は必要ありません。

〇SVGアイコンファイル
左帯底のシェアボタンはアイコンフォントではなくSVGファイルとなっています。X-Twitter用のSVGデータを準備ください。
SVGアイコンファイル名を「sns-x-twitter.svg」として、「/html/template/dtJEIA4001/assets/icon/」下にFTPアップロードしてください。

〇/app/template/dtJEIAxxxx/Block/category_nav_pc.twig

以下の旧Twitterアイコンのli要素を削除、あるいはコメントアウトして新たに行を追加してください。
修正前 ↓
修正後

以上で変更作業は完了となります。お疲れ様です。もし修正結果が反映されない場合は「コンテンツ管理→キャッシュ管理」からキャッシュ削除や、ブラウザの表示更新をお試しください。