Simplicityの特徴 › フォーラム › 不具合報告 › AMPページ(画像について)
-
投稿者投稿
-
-
まさ太郎ゲスト
お世話になります。
先日はYouTube動画の件、有難うございました。本日は別サイトで画像の横のテキストが下に落ちていたので報告に参りました。
AMPページではこのように表示されています。
https://carp.hp-joho.net/archives/10332?amp=1通常ページではこのように表示されています。
https://carp.hp-joho.net/archives/10332AMPページでも通常ページと同様に、画像の横にテキストを並べることは可能でしょうか?
よろしくお願いします。Attachments:
-
かうたっくゲスト
.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,.i-amphtml-layout-responsive {
display:inline-block;
}ちょっとおおざっぱですが、この部分を触ったら横並びにはなります。
不具合報告のところ申し訳ないですが、何かのプラグインでこのような表示になっているなどはないですよね?
勘違いしてたらすみませんが。。テーマのCSSを確認しても元々の記載には思えず…
またCSSも圧縮されてたりもするので。初めての方は必ずお読みください
動作不良時のガイドライン
このあたりの項目はチェック済みでしょうか?? -
まさ太郎ゲスト
かうたっくさんへ
コメントありがとうございます。
プラグインは全部停止して確認しました。
「Simplicity」サイトさんの中で画像の横のテキストが落ちているページがないか探してみたらありました。
通常ページ
https://simplicity.sample.mixh.jp/markup-image-alignment/AMPページ
https://simplicity.sample.mixh.jp/markup-image-alignment/?amp=1通常ページでは画像の横にテキストが回り込まれていますが、AMPページでは画像の横のテキストが回り込まれず落ちています。
こういう仕様なのかもしれませんが、できれば画像の横にテキストを表示させたいと思っています。
AMPページのCSSはページ内に設定してあるので、子テーマ用のAMP.CSSで追加はできても変更はできないですよね!
たぶん♪ -
かうたっくゲスト
まさ太郎さん!凄い^^
色々探してくれはったんですね❦この状況興味があって。私もわいひらさんのコメントを、密かにチェックしておきます^^
ご返信、ありがとぉございます! -
わいひらキーマスター
最新版Simplicityのamp.cssを以下のように修正してみてもらってよろしいでしょうか。
https://github.com/yhira/simplicity2/commit/d9d7fef65d5126734edb1937897c99e936da31ef
これで、指摘のあったような場所は大丈夫とは思います。多分。
ただ、他に影響が出なければ良いのですが。
AMP自体デフォルトで、amp-imgに対してdisplay: block;を入れてしまうっぽいので、そういう仕様をといえばそうなのかもしれません。AMPページのCSSはページ内に設定してあるので、子テーマ用のAMP.CSSで追加はできても変更はできないですよね!
子テーマのamp.cssに追記して、スタイルの上書きをすれば、見た目を変更することは可能です。
-
まさ太郎ゲスト
わいひらさんへ
最新版Simplicityのamp.cssを修正したら、新しいバージョンが出るたびに修正しないといけないですよね!
それは面倒なので、上記リンク内を参考に子テーマのamp.cssに下記を追記してみました。
.entry-content amp-img{ display: inline-block; }
うまく表示されました。
有難うございます。 -
かうたっくゲスト
AMP専用のHTMLを作ってCSSを当ててるだけに、PCと同じ表示になるもの。と考えちゃダメですね。これはダメというルールも凄く多そうだし・・
WordPressが生成している、『画像の右寄せ・左寄せの回り込み・センタリングやキャプションなど』class指定がamp化することなくなってしまう(・CSSの対応は不明)も原因の1つっぽいかもしれないです?
今回の例のように、WordPressで指定した画像の表示方法で表示させていれば、AMPの不具合っぽく感じるかもしれません?
また今回は1行だったので、inline-blockで適応されますけど、画像右寄せ・左寄せで隙間に何行もテキストを表示。これを重要視する人がいれば……。。そういった事は現在質問もなさそうなので、そっとしておきます❦
-
かうたっくゲスト
指摘のあったような場所は大丈夫とは思います。多分。
ただ、他に影響が出なければ良いのですが。あるとしたら、センタリングして改行せずに更新した場合。スマホビューでも隙間ができるほど小さな画像なら、つぎ文字が右した1行数文字横並びになる。
- その対処
- 改行すれば問題ない。
このCSSが次のバージョンで反映したとき。検索から来られたユーザーさんへ❦って、感じです
※メモ:現在の最新バージョン:2.6.0.4 - その対処
-
わいひらキーマスター
最新版Simplicityのamp.cssを修正したら、新しいバージョンが出るたびに修正しないといけないですよね!
試してみてうまくいくようであれば、次のバージョンで採用しようと思っていました。なので、問題なければ修正する必要ないです。
その他のページとかでも、おかしな表示とかにはなっていないんですよね?#55401
AMPのデフォルト自体が、通常表示と違うので、何とも言えないところです。
本来はimgしかないものに対して、いろいろな要素でラップされているし。
一応、子テーマ側でamp.cssで表示を変えられる仕組みは取り入れているので、最終的には、自前で好みの表示にしてもらうしかないかと思います。 -
まさ太郎ゲスト
わいひらさんへ
全部のページは確認してませんが、主要なページでは問題なく表示されています。
問題があれば、また報告にきます。 -
かうたっくゲスト
まだ試してないし確認もしてませんけど、captionもインラインになりそうな気がする?止まりです。ならないかも知れませんが……
-
かうたっくゲスト
キャプションは段落が入るから大丈夫でしたね^^
子テーマ側でamp.cssで表示を変えられる仕組みは取り入れているので、最終的には、自前で好みの表示にしてもらう
はい、確かにそうですねっ❦
※体調。復帰されたようで、何よりです! それからいつもお疲れ様です^^
-
わいひらキーマスター
みなさん、動作確認ありがとうございます!
もし、また不具合がありましたら、出来る限り修正したいと思います。ただ、AMP自体仕様がややこしいので、必ずしも修正できないかもしれません;
-
-
投稿者投稿