Luxeritas AMPで画像が表示されなくなった。今後の為カスタマイズ項目のメモ

2022年3月20日ルクセリタス

昨日、なんとなくAMP表示でブログカードを見てみたら、ブログカードの画像が表示されてないことに気づきました。

早速ローカルにも同じ環境を構築しているので確かめてみると、ローカルの方も画像が表示されてないではないですか。

いろいろ設定を変えて原因を探していたら、今度はAMP表示ですべての画像が表示されなくなってしまいました。

こんな時の為に保存していたルクセリタスのカスタマイズ内容のバックアップから復元してみたけれど、AMP表示の時だけすべての画像は表示されずじまい。

なんだかんだで管理機能にある「リセット」をしたら、やっと表示されるようになりました。

で、一からカスタマイズ項目を設定することになり、今後起きてほしくないですが、その時の為に現在のカスタマイズ項目をここにメモしておきます。

分かったこと。

AMPでブログカードの画像が表示されないのは、
「各種サムネイル画像の Lazy Load 有効化」 が有効になっていたからでした。

無効にする。

私の環境が悪いのかと思っていたらルクセリタスの不都合でした。
Ver 3.7.11 のアップデートで修正されました。

カスタマイズ(外観)にて、ブログカード設定項目にある画像の位置を左にしていてもAMPでは右になってしまう。

style-amp.cssへ以下追記
.blogcard-img {float:left;}

分からなかったこと。
AMPですべての画像が表示されなくなった原因。

設定してあるカスタマイズ項目

2022.3.20現在

====================
SEO
====================

追加するタグ
check_box canonical を追加
check_box net/prev を追加

トップページの meta description
パソコン操作の覚書

構造化データの設定
radio_button_checked Web サイト名
radio_button_checked 組織ロゴなんてない。もしくはそんな設定はいらない

Meta keywords の設定
radio_button_checked keywords なんて要らない

Google の検索結果に表示される日付
公開日

カテゴリ・タグページ
radio_button_checked どちらもインデクスさせない

====================
OGP
====================

OGP の設定
check_box OGP (Open Graph Protocol) を追加

デフォルト og:image の設定
og-image.png

====================
タイトル
====================

タイトルのセパレーター
radio_button_checked -(ハイフン記号)

一覧型のトップページのタイトル
radio_button_checked サイト名|キャッチフレーズ

固定ページ型トップページのタイトル
radio_button_checked サイト名|キャッチフレーズ

その他のページのタイトル
radio_button_checked ページタイトル|サイト名

====================
ページネーション
====================

リスト型トップページ
radio_button_checked デフォルト

カテゴリー
radio_button_checked デフォルト

アーカイブ
radio_button_checked デフォルト

検索結果ページ
radio_button_checked デフォルト

====================
AMP
====================

AMPの設定
check_box AMP (Accelerated Mobile Pages) 有効化
check_box コメント一覧を表示しない

AMP で有効化するプラグイン
無し

AMP 用ロゴ画像の設定
radio_button_checked サイトロゴと同じ

====================
PWA
====================

未使用

====================
圧縮・最適化
====================

HTML の圧縮率
圧縮率・低

子テーマの CSS 圧縮
親と子の CSS を結合して圧縮する

子テーマの Javascript 圧縮
必要ない(読み込まない)

====================
CSS
====================

モード選択
radio_button_checked Luxeritas Mode

テーマの CSS
check_box テーマの CSSを HTML に埋め込む(高速化?)

WordPress のブロックライブラリ用 CSS
CSS を HTML に埋め込む

子テーマのCSS
check_box 子テーマの CSS を読み込む

シンタックスハイライターの CSS
Solarized Light

ウィジェット用の CSS
Normal のみ
check_box 検索フォームウィジェット
check_box タグクラウドウィジェット
check_box アドセンス(Luxeritasオリジナル)

====================
Javascript
====================

JQuery の読み込み方法
Google CDN – jQuery v3 (おすすめ / 高速 / IE8 以下未対応)

Bootstrap.jp の読み込み方法
必要ない(読み込まない)

その他
check_box 子テーマの Javascript(luxech.js) を読み込まない
check_box WordPress の絵文字スクリプトを読み込まないようにする
check_box WordPress の Embed 機能を OFF にする

====================
Lazy Load
====================

Lazy Load(画像の遅延読み込み)
radio_button_checkedNative Lazyload(WP 5.5 or later)

====================
アイコンフォント
====================

アイコンフォントの選択
check_boxMaterial Icons(Outlined + Filled) : アイコン一覧(Google Fonts)
非同期(レンダリング高速)

====================
コメント
====================

コメント画像認証の種類
radio_button_checked Google reCAPTCHA v3 による画像認証を使用する

Google reCAPTCHA の設定
Site key *******
Secret key *****

v3 の設定
reCAPTCHA v3 バッジと Page Top ボタンの位置関係
コメント送信ボタンの上にプライバシーと利用規約のリンクを表示する

====================
検索
====================

検索結果の表示方法
radio_button_checked 1.検索でマッチした語句を中心に、その前後の文章を抜粋する
70 1 を選択した時の抜粋文字数

半角・全角・ひらがな・カタカナの区別
radio_button_checked WordPress で使用している MySQL / MariaDB の設定に従う

拡張機能
check_box 検索ワードをハイライトする

ハイライトの文字装飾
check_box 太字
check_box 背景に色を付ける
yellow 背景色
3 角の丸み

====================
コピーライト
====================

書式:
radio_button_checked Copyright (c)すきっぷのメモAll Rights REseved.

====================
その他
====================

404 Not Found ページ
デフォルト

サイトの表示設定
check_box hentry クラスを除去する

リンクへの自動変換防止
check_box 電話番号が自動でリンクに変換されるのを防ぐ
check_box メールアドレスが自動でリンクに変換されるのを防ぐ
check_box 住所が自動でリンクに変換されるのを防ぐ
check_box コメントに書かれた URL が自動でリンクに変換されるのを防ぐ

user-scalable の設定
radio_button_checked yes