MagentoでCSSを適用する

MagentodでオリジナルテーマでCSSを適用する場合

フォルダ構成は以下のようになってる

Default_head_blocks.xmlに

を追加。

そして気をつけるべき点は、モジュールのディレクトリ名はMagento_モジュール名にすること。CSSを読み込むためのモジュールは

である。

CSSファイルがない場合は自動でlessファイルを参照しサーバー側でコンパイルしてくれる。

ChromeなどのBlinkレンダリングエンジン搭載のブラウザーでSVG画像がキャッシュされて別のSVG画像が表示されてしまうバグへの対処法

Chrome、VivaldiなどのBlink rendering engine搭載のブラウザーにて、キャッシュされたSVG画像が別の箇所に表示されてしまうバグへの対処。

特にソーシャルメディアのアイコンにSVG画像を使用し、アンカータグで囲ってリンクを追加し、そのリンクをクリックした後戻るボタンで戻った時に、キャッシュされた画像が違うところに出現したりする。(お化けのよう)

これへの対処は、

  1. SVG画像をobjectタグで読み込む
  2. objectタグ内に、name属性を追加し、ユニークな名前を設定する

特に、name属性を追加することで解決できる。

ソース:Google Chrome randomly shuffles SVG images in <object> tags