Simplicity2.4.1公開。AMPページにアイコン追加、外部URLの画像でもAMPエラーが出ないように仕様変更。

Simplicityを2.4.1にバージョンアップしました。

主な変更点は以下。

  1. AMPページにアイコン追加
  2. 外部URLを利用した画像でもAMPエラーが出ないように仕様変更
  3. AMPページでスキンのamp.cssを読み込む処理追加
  4. アフィリエイトのインプレッション画像はdisplay: inline-block;に(詳細
  5. ブログカードスタイルの調整
スポンサーリンク

AMPページにアイコン追加

以前は、テキストで表示していた「カテゴリ」などを、Simplicityの通常投稿に合わせた、アイコンをSVGで追加しました。

これにより、AMPページでも以下のようなワンポイントアイコン表示がされるようになりました。

AMPページにアイコン追加

ちなみに、通常ページの「AMPロゴマーク」も変更しました。

以前は、Push7のロゴマークを流用していたのですが、AMPロゴに変更しました。

AMPロゴマークを変更

外部URLを利用した画像でもAMPエラーが出ないように仕様変更

以前は、AMPページでwidth・height属性のないIMGタグではAMPエラーが出ていたと思います。

けれど今バージョンから、AMPエラーが出ないように変更しました。

ただ、AMPエラーは出なくなりますが、width・height属性のないIMGタグは、自動的に幅と高さが300pxに設定されて以下のように表示される仕様になります。

外部URLで呼び出している画像は縦横300px固定

これは、WEB制作に慣れていない方の場合は、AMPエラーを修正するのも大変と思い、とりあえず画像の表示は多少変わろうとも、「なるべくへAMPエラーの出にくいものにしよう」ということからです。

もし、意図通りのAMP画像表示にしたい場合は、自前で外部URLを呼び出しているIMGタグにwidth・height属性を指定してください。

AMPページでスキンのamp.cssを読み込む処理追加

スキンフォルダ内にamp.cssを作成すれば、AMPページでamp.cssで書かれたスタイルが読み込まれるように機能追加しました。

スキンなどで、AMPページの表示の変更したい場合は、amp.cssファイルを利用してください。スキンフォルダ内に、amp.cssがない場合は、無視されるので、利用しない場合はそのままでもOKです。

スキンの詳しい仕様は以下。

Simplicity20140907からスキン機能を追加しました。 テーマ、子テーマ自体がスキン機能みたいなもんなのですが、ウイジェットや...

あとがき

今回の修正で、AMPページのエラーは、かなり出にくくなったのではないかと思います。

ただ、まだ、何かしらエラーが出たり、表示がおかしい場合は、フォーラムに該当ページのURLを掲載の上、ご報告いただければ、幸いです。

僕の環境では、もうAMPエラーは0なので、いろいろな使い方をされているブログの、いろいろなサンプルをいただければ、コードで吸収できそうなところは吸収して、エラーなし表示させたいと思います。

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

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

コメント

  1. みき より:

    2.4.1リリースお疲れ様です!!
    ついに外部画像も縦横サイズがつきましたね
    これでAMPエラーがまた減りますね!!

    2.4安定版でも書いたのですが
    AMPにするかをさらに迷ってしまいました
    広告ウィジェットが表示されない点とアクセス解析です
    アクセス解析はプラグインを使っているので反映されない・・・(javascript)
    広告はスマホとPCで分ける必要があるので広告ウィジェットを使っています(表示されないのをさっき知った・・・)
    AMP有効化したいけどできない・・・

    解決できれば有効化してみます
    2.4.1リリースお疲れ様でした!!

    • わいひら わいひら より:

      ニュースサイトや、トレンド系のサイトでない限り、そこまでアクセスに影響しないかなとは個人的に思っています。
      アクセス解析プラグインを使用していると、計測できないのはどうしようもないかもしれません(自前でタグを挿入するカスタマイズをするしか)。
      広告ウィジェットで、広告を設定していたとしても、以下の方法で、表示だけはできると思うのですけどできないでしょうか?(ウィジェットでの細かな設定はできないけど)
      SimplicityのAMPページに表示するアドセンスの設定方法

  2. みき より:

    ニュースサイトや、トレンド系のサイトでない限り、そこまでアクセスに影響しないかなとは個人的に思っています。

    そうなんですよね
    正直AMPの情報量が少ないので
    どうなるかが不安ではあります
    もう少し待ってみたら良いかなとか思っています
    さすがにSEOまで影響してくるとするしかないとは思いますが・・・

    広告ウィジェットで、広告を設定していたとしても、以下の方法で、表示だけはできると思うのですけどできないでしょうか?(ウィジェットでの細かな設定はできないけど)

    参考ページありがとうございます!!
    勉強してみます!!

  3. カグア! より:

    お世話になります。いつも便利に利用させていただいております。
    バグ報告です。ヘッダー画像を表示しているときにAMP表示しますと、
    ヘッダー画像のサイズが乱れます。
    https://gyazo.com/d5f8be11194a53f2087abcf5442482b1
    よろしくお願い致します。

    • わいひら わいひら より:

      サイトのソースをみると、httpsサイトなのに、ロゴ画像のURLがhttpで読み込まれています。
      なので、ロゴ画像が外部サイトの画像として処理されています。
      なので、テーマカスタマイザーから、ロゴ画像の再設定を行えば、画像のURLもhttpsとなり問題が解決するかと思います。

      というか、今あらためてサイトを見てみたら、ロゴ画像がhttpsになっているようなので、自己解決したっぽい。
      ただ、一応同様の問題が起こった方が、検索でこの書き込みを見ることがあるかもしれないので、解決方法を記しておきます。