弊社EC-CUBEテンプレートをご購入ご利用いただき、まことにありがとうございます。
さて、弊社EC-CUBEテンプレートではSNSシェアボタンをサイトフッターと商品詳細ページに設置しております。
シェアボタンにはTwitterボタンが含まれておりますがTwitter社がX(エックス)となりアイコンも変更になりました。弊社テンプレートではバージョン「4.2.3」以降はX-Twitterアイコンに変更しておりますが、それ以前のバージョンをご利用いただいているサイト様におかれましては以下の手順にて変更する事ができます。
以下の3つのTwigファイルを修正してください。編集する際はエディタで修正してFTPアップロードしてください。
ファイルのバックアップは必ず残すようにしておいてください。
「FontAwesome」の読み込みバージョンを「6.5.1」に変更します。以下の1行を削除、あるいはコメントアウトして新たに行を追加してください。
修正前
↓
修正後
以下の旧Twitterアイコンのli要素を削除、あるいはコメントアウトして新たに行を追加してください。
※JEIA4002ではこの作業は必要ありません。
修正前
↓
修正後
以下の旧Twitterアイコンのli要素を削除、あるいはコメントアウトして新たに行を追加してください。
※JEIA4001_4.2.2未満ではこの作業は必要ありません。
修正前
↓
修正後
以上でアイコン自体の変更はできておりますがアイコンボタンのソーシャルカラーを黒へ変更する必要があります。
アイコンボタンの色を変更するためにCSSのカスタマイズを加えます。カスタマイズにはEC-CUBE管理機能の「CSS管理」を使用します。管理画面から「コンテンツ管理」→「CSS管理」を開いてください。コード入力欄に以下のコードを張り付けて登録ボタンをクリックしてください。
弊社テンプレートによって登録するCSSコードに違いがあります。以下のご利用JEIAテンプレートにあったCSSコードを張り付けて登録してください。
以上で変更作業は完了となります。お疲れ様です。もし修正結果が反映されない場合は「コンテンツ管理→キャッシュ管理」からキャッシュ削除や、ブラウザの表示更新をお試しください。
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要素を削除、あるいはコメントアウトして新たに行を追加してください。
修正前
↓
修正後
以上で変更作業は完了となります。お疲れ様です。もし修正結果が反映されない場合は「コンテンツ管理→キャッシュ管理」からキャッシュ削除や、ブラウザの表示更新をお試しください。