Retina画像対応、動作も安定、jQuery非依存で軽量の「image-map-resizer」

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
  imageMapResize();
</script>

参考

クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった

EC-CUBE
4.0.5
サーバーOS
Linux xserver.jp
DBサーバー
MySQL 10.5.11-MariaDB-log
WEBサーバー
Apache
PHP
7.4.13

ファビコンを変更

<link rel="icon" href="/html/user_data/assets/img/common/favicon.ico">

FTPでダイレクトに置き換え

EC-CUBE
4.0.5
サーバーOS
Linux xserver.jp
DBサーバー
MySQL 10.5.11-MariaDB-log
WEBサーバー
Apache
PHP
7.4.13

コンテンツ管理>ブロック管理>ロゴ

logo.twig

<div class="ec-headerTitle">
    <div class="ec-headerTitle__title">
        <h1>
            <a href="{{ url('homepage') }}">
                {{ BaseInfo.shop_name }}
            </a>
        </h1>
    </div>
</div>

コンテンツ管理>CSS管理

/* カスタマイズ用CSS */
.ec-headerTitle .ec-headerTitle__title a {
    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    font-size: 32px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #1F4E79;
}
.ec-headerTitle .ec-headerTitle__title a span {
    font-size: 37.34px;
    color: #2E75B6;
}

参考

[ JavaScript ] フォントサイズ変換(pt↔px)

WordPressのプラグインで評判のいい『シンタックスハイライト』は「Highlighting Code Block」だが、ブロックエディタとか、ビジュアルエディタでの運用のみになっていて、テキストエディタ(HTML)では動作しない。
以下、「Crayon Syntax Highlighter」「Code Prettify」「WP Code Prettify」も同様。

Syntax Highlighter Evolved」はテキストエディタ(HTML)でも動作する。
ショートコード[code]で括ること。<code>ではダメ。

参考

SyntaxHighlighter Evolved – 記事の中でソースコードを綺麗に表示できるWordPressプラグイン

EC-CUBE
4.0.5
サーバーOS
Linux xserver.jp
DBサーバー
MySQL 10.5.11-MariaDB-log
WEBサーバー
Apache
PHP
7.4.13

現象

Chromeのデバッガーで『Access to CSS stylesheet at ‘https://use.fontawesome.com/releases/v5.3.1/css/all.css’ from origin ‘https://xxx.jp’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.』というエラーが出る。
で、当然のことながらアイコンが出ない。

解決

/xxx.jp/public_html/.htaccess

SetEnvIf Origin "^https?://(www\.)?(fontawesome.com)$" ORIGIN=$0
Header set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN

参考

外部サイト設置のリソース読み込み時に、「Access to font at ‘https://〇〇〇〇.com/style.css’ from origin ‘https://localhost/’ has been blocked by CORS policy」エラーの対応方法

ヘッダーにロゴを表示

拡張設定 > デザイン設定 > ページレイアウト管理 > 商品一覧 > ショップロゴ