AMPページ(画像について)

Simplicityの特徴 フォーラム 不具合報告 AMPページ(画像について)

このトピックには12件の返信が含まれ、2人の参加者がいます。1 年、 10 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #55335 返信

    まさ太郎

    お世話になります。
    先日はYouTube動画の件、有難うございました。

    本日は別サイトで画像の横のテキストが下に落ちていたので報告に参りました。

    AMPページではこのように表示されています。

    https://carp.hp-joho.net/archives/10332?amp=1

    通常ページではこのように表示されています。

    https://carp.hp-joho.net/archives/10332

    AMPページでも通常ページと同様に、画像の横にテキストを並べることは可能でしょうか?
    よろしくお願いします。

  • #55352 返信

    かうたっく

    .i-amphtml-layout-container,.i-amphtml-layout-fixed-height,.i-amphtml-layout-responsive {
    display:inline-block;
    }

    ちょっとおおざっぱですが、この部分を触ったら横並びにはなります。

    不具合報告のところ申し訳ないですが、何かのプラグインでこのような表示になっているなどはないですよね?

    勘違いしてたらすみませんが。。テーマのCSSを確認しても元々の記載には思えず…
    またCSSも圧縮されてたりもするので。

    初めての方は必ずお読みください
    動作不良時のガイドライン
    このあたりの項目はチェック済みでしょうか??

  • #55367 返信

    まさ太郎

    かうたっくさんへ

    コメントありがとうございます。

    プラグインは全部停止して確認しました。

    「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で追加はできても変更はできないですよね!
    たぶん♪

  • #55370 返信

    かうたっく

    まさ太郎さん!凄い^^
    色々探してくれはったんですね❦

    この状況興味があって。私もわいひらさんのコメントを、密かにチェックしておきます^^
    ご返信、ありがとぉございます!

  • #55392 返信
    わいひら
    わいひら
    キーマスター

    最新版Simplicityのamp.cssを以下のように修正してみてもらってよろしいでしょうか。
    https://github.com/yhira/simplicity2/commit/d9d7fef65d5126734edb1937897c99e936da31ef
    これで、指摘のあったような場所は大丈夫とは思います。多分。
    ただ、他に影響が出なければ良いのですが。
    AMP自体デフォルトで、amp-imgに対してdisplay: block;を入れてしまうっぽいので、そういう仕様をといえばそうなのかもしれません。

    AMPページのCSSはページ内に設定してあるので、子テーマ用のAMP.CSSで追加はできても変更はできないですよね!

    子テーマのamp.cssに追記して、スタイルの上書きをすれば、見た目を変更することは可能です。

  • #55400 返信

    まさ太郎

    わいひらさんへ

    最新版Simplicityのamp.cssを修正したら、新しいバージョンが出るたびに修正しないといけないですよね!

    それは面倒なので、上記リンク内を参考に子テーマのamp.cssに下記を追記してみました。

    .entry-content amp-img{
      display: inline-block;
    }

    うまく表示されました。
    有難うございます。

  • #55401 返信

    かうたっく

    AMP専用のHTMLを作ってCSSを当ててるだけに、PCと同じ表示になるもの。と考えちゃダメですね。これはダメというルールも凄く多そうだし・・

    WordPressが生成している、『画像の右寄せ・左寄せの回り込み・センタリングやキャプションなど』class指定がamp化することなくなってしまう(・CSSの対応は不明)も原因の1つっぽいかもしれないです?

    今回の例のように、WordPressで指定した画像の表示方法で表示させていれば、AMPの不具合っぽく感じるかもしれません?

    また今回は1行だったので、inline-blockで適応されますけど、画像右寄せ・左寄せで隙間に何行もテキストを表示。これを重要視する人がいれば……。。そういった事は現在質問もなさそうなので、そっとしておきます❦

  • #55405 返信

    かうたっく

    指摘のあったような場所は大丈夫とは思います。多分。
    ただ、他に影響が出なければ良いのですが。

    あるとしたら、センタリングして改行せずに更新した場合。スマホビューでも隙間ができるほど小さな画像なら、つぎ文字が右した1行数文字横並びになる。

    • その対処
      • 改行すれば問題ない。

    このCSSが次のバージョンで反映したとき。検索から来られたユーザーさんへ❦って、感じです
    ※メモ:現在の最新バージョン:2.6.0.4

  • #55414 返信
    わいひら
    わいひら
    キーマスター

    最新版Simplicityのamp.cssを修正したら、新しいバージョンが出るたびに修正しないといけないですよね!

    試してみてうまくいくようであれば、次のバージョンで採用しようと思っていました。なので、問題なければ修正する必要ないです。
    その他のページとかでも、おかしな表示とかにはなっていないんですよね?

    #55401
    AMPのデフォルト自体が、通常表示と違うので、何とも言えないところです。
    本来はimgしかないものに対して、いろいろな要素でラップされているし。
    一応、子テーマ側でamp.cssで表示を変えられる仕組みは取り入れているので、最終的には、自前で好みの表示にしてもらうしかないかと思います。

  • #55421 返信

    まさ太郎

    わいひらさんへ
    全部のページは確認してませんが、主要なページでは問題なく表示されています。
    問題があれば、また報告にきます。

  • #55423 返信

    かうたっく

    まだ試してないし確認もしてませんけど、captionもインラインになりそうな気がする?止まりです。ならないかも知れませんが……

  • #55428 返信

    かうたっく

    キャプションは段落が入るから大丈夫でしたね^^

    子テーマ側でamp.cssで表示を変えられる仕組みは取り入れているので、最終的には、自前で好みの表示にしてもらう

    はい、確かにそうですねっ❦

    ※体調。復帰されたようで、何よりです! それからいつもお疲れ様です^^

  • #55445 返信
    わいひら
    わいひら
    キーマスター

    みなさん、動作確認ありがとうございます!
    もし、また不具合がありましたら、出来る限り修正したいと思います。ただ、AMP自体仕様がややこしいので、必ずしも修正できないかもしれません;

返信先: AMPページ(画像について)
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)