Luxeritas AMPで画像が表示されなくなった。今後の為カスタマイズ項目のメモ
昨日、なんとなくAMP表示でブログカードを見てみたら、ブログカードの画像が表示されてないことに気づきました。
早速ローカルにも同じ環境を構築しているので確かめてみると、ローカルの方も画像が表示されてないではないですか。
いろいろ設定を変えて原因を探していたら、今度はAMP表示ですべての画像が表示されなくなってしまいました。
こんな時の為に保存していたルクセリタスのカスタマイズ内容のバックアップから復元してみたけれど、AMP表示の時だけすべての画像は表示されずじまい。
なんだかんだで管理機能にある「リセット」をしたら、やっと表示されるようになりました。
で、一からカスタマイズ項目を設定することになり、今後起きてほしくないですが、その時の為に現在のカスタマイズ項目をここにメモしておきます。
分かったこと。
AMPでブログカードの画像が表示されないのは、
「各種サムネイル画像の Lazy Load 有効化」 が有効になっていたからでした。
無効にする。
私の環境が悪いのかと思っていたらルクセリタスの不都合でした。
Ver 3.7.11 のアップデートで修正されました。
カスタマイズ（外観）にて、ブログカード設定項目にある画像の位置を左にしていてもAMPでは右になってしまう。
style-amp.cssへ以下追記
.blogcard-img {float:left;}
分からなかったこと。
AMPですべての画像が表示されなくなった原因。
設定してあるカスタマイズ項目
2020.6.27
「CLS に関する問題」というエラーを回避するため少し変更しました。
====================
SEO
====================
追加するタグ
canonical を追加
net/prev を追加
トップページの meta description
パソコン操作の覚書
構造化データの設定
Web サイト名
組織ロゴなんてない。もしくはそんな設定はいらない
Meta keywords の設定
keywords なんて要らない
Google の検索結果に表示される日付
公開日
カテゴリ・タグページ
どちらもインデクスさせない
====================
OGP
====================
OGP の設定
OGP (Open Graph Protocol) を追加
デフォルト og:image の設定
og-image.png
====================
タイトル
====================
タイトルのセパレーター
-(ハイフン記号)
一覧型のトップページのタイトル
サイト名|キャッチフレーズ
固定ページ型トップページのタイトル
サイト名|キャッチフレーズ
その他のページのタイトル
ページタイトル|サイト名
====================
ページネーション
====================
リスト型トップページ
デフォルト
カテゴリー
デフォルト
アーカイブ
デフォルト
検索結果ページ
デフォルト
====================
AMP
====================
AMPの設定
AMP (Accelerated Mobile Pages) 有効化
コメント一覧を表示しない
AMP で有効化するプラグイン
無し
AMP 用ロゴ画像の設定
サイトロゴと同じ
====================
PWA
====================
未使用
====================
圧縮・最適化
====================
HTML の圧縮率
圧縮率・低
子テーマの CSS 圧縮
親と子の CSS を結合して圧縮する
子テーマの Javascript 圧縮
必要ない(読み込まない)
====================
CSS
====================
モード選択
Luxeritas Mode
テーマの CSS
テーマの CSSを HTML に埋め込む(高速化？)
WordPress のブロックライブラリ用 CSS
CSS を HTML に埋め込む
子テーマのCSS
子テーマの CSS を読み込む
シンタックスハイライターの CSS
Solarized Light
ウィジェット用の CSS
Normal のみ
検索フォームウィジェット
タグクラウドウィジェット
アドセンス(Luxeritasオリジナル)
====================
Javascript
====================
JQuery の読み込み方法
Google CDN – jQuery v3 (おすすめ / 高速 / IE8 以下未対応)
Bootstrap.jp の読み込み方法
必要ない(読み込まない)
その他
子テーマの Javascript(luxech.js) を読み込まない
WordPress の絵文字スクリプトを読み込まないようにする
WordPress の Embed 機能を OFF にする
====================
Lazy Load
====================
サイドバーの Lazy Load 有効化
オプション
Javascript が無効でも画像を表示する
エフェクト・効果
Fade-in（フェードイン）
====================
Font Awesome
====================
Font Awesomeバージョン
Font Awesome 5
アイコンの読み込み方法
Web Fonts with CSS (Webフォントで表示)
CSS の読み込み方法
非同期(レンダリング高速)
CSS の読み込み元
ローカル
フォントファイル本体の読み込み元
ローカル
====================
検索
====================
検索結果の表示方法
1.検索でマッチした語句を中心に、その前後の文章を抜粋する
70 1 を選択した時の抜粋文字数
半角・全角・ひらがな・カタカナの区別
WordPress で使用している MySQL / MariaDB の設定に従う
拡張機能
検索ワードをハイライトする
ハイライトの文字装飾
太字
背景に色を付ける
gold 背景色
6 角の丸み
====================
画像認証
====================
コメント画像認証の種類
Securimage PHP CAPTCHA による画像認証を使用する
Securimage PHP CAPTCHAの設定
画像のサイズ(幅:高さ) 150 : 40
文字数(最小-最大) 4 – 6
字体 英数字(小文字)
文字サイズ 中央よりちょっと右
画像の色
black 文字色
lightgrey 背景色
文字の歪み 3/4
背景のノイズ
中央よりちょっと右
見えにくくするために画像上に引く線の数 0
whitesmoke 線の色
====================
コピーライト
====================
Copyright (c)すきっぷのメモAll Rights REseved.
====================
その他
====================
404 Not Found ページ
デフォルト
サイトの表示設定
hentry クラスを除去する
リンクへの自動変換防止
電話番号が自動でリンクに変換されるのを防ぐ
メールアドレスが自動でリンクに変換されるのを防ぐ
住所が自動でリンクに変換されるのを防ぐ
コメントに書かれた URL が自動でリンクに変換されるのを防ぐ
user-scalable の設定
yes