AMPのタイトルロゴのサイズを指定する方法

Simplicityの特徴 フォーラム Simplicityについての質問 AMPのタイトルロゴのサイズを指定する方法

  • このトピックには17件の返信、2人の参加者があり、最後にtontoにより2年、 10ヶ月前に更新されました。
17件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52633 返信
      tonto
      ゲスト

      質問です。
      AMP画面を表示した時にタイトルロゴが拡大されてしまいます。
      たぶんサイズ指定をするべきなのだと思いますが、どこを変更すればよいのでしょうか?。
      もしかしたらサイズ指定以外の部分が原因かもしれませんが・・・
      WordPressは4.7.5–ja 、テーマのバージョンは2.5.4です。
      宜しくお願い致します。

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

      現在の設定状態を見るため、サイトのURLを貼り付けていただいてよろしいでしょうか。

    • #52657 返信
      tonto
      ゲスト

      サイトは https://tontosan.com になります。

      最初にAMPを設定したときにはちゃんと表示できましたがSSLの設定をしたら表示が崩れました。
      280×60のjpgをカスタマイズのAMP用のロゴ画像にて設定しています。

      宜しくお願い致します。

    • #52716 返信
      tonto
      ゲスト

      タイトルロゴの拡大について

      URLの貼り方が適切ではなかったと思いますので再度貼らせて頂きます。

      https://tontosan.com

      AMPでタイトルロゴの画像がおかしいのはブログの記事部分になります。

      https://tontosan.com/blog/%E3%81%B5%E3%82%8C%E6%84%9B%E3%81%9F%E3%82%93%E3%81%BD%E3%81%BD%E7%A5%AD%E3%82%8A%E3%81%A7%E3%83%94%E3%82%A8%E3%83%AD%E3%81%AE%E5%85%A8%E5%8A%9B%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3/
      上記のAMPページ

      https://tontosan.com/blog/%E3%81%B5%E3%82%8C%E6%84%9B%E3%81%9F%E3%82%93%E3%81%BD%E3%81%BD%E7%A5%AD%E3%82%8A%E3%81%A7%E3%83%94%E3%82%A8%E3%83%AD%E3%81%AE%E5%85%A8%E5%8A%9B%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3/?amp=1″

      ブラウザのキャッシュはクリアにして確認しています。
      他の記事も同様です。

      ご確認宜しくお願い致します。

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

      Wordpressの一般設定部分にある以下の2つの設定項目はどのようなURLになっているか教えてもらっていいですか?
      メディアライブラリ ? Simplicity ? WordPress

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

      あと、サイトトップページのURLは以下のようになっているのに、
      https://tontosan.com/

      個別ページは以下のように、
      https://tontosan.com/blog/category/blog/%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e3%83%bb%e3%81%8a%e7%a5%ad%e3%82%8a%e7%ad%89/

      「https://tontosan.com/blog/」となっているのは、いったいどういう構造になっているのでしょうか?

      ここら辺に原因があるような気がします。

    • #52726 返信
      tonto
      ゲスト

      WordPress アドレス https://tontosan.com
      サイトアドレス https://tontosan.com
      としています。

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

      280×60のjpgをカスタマイズのAMP用のロゴ画像にて設定しています。

      ロゴの設定部分はカスタマイズの「ヘッダー」項目のロゴ設定部分です。
      あと、画像はpngのようですが、設定部分ではjpgを設定されているのでしょうか?
      https://tontosan.com/wp-content/uploads/2017/05/dc7adb5c44386919dfde6d954e1b4c88.png

    • #52731 返信
      tonto
      ゲスト

      jpgとpngを間違えて設定していたみたいです。
      jpgにしたところ直ったようです。
      お手数をおかけしました。
      本当に有り難うございます。

    • #52735 返信
      tonto
      ゲスト

      ごめんなさい。まだ直ってなかったです。

      1つ見落としていましたが、サイトurlのhttps:tontosan.comは固定ページを指定しています。
      投稿ページ用にhttps://tontosan.com/brogを用意してパーマリンク設定で/blog/%postname%/としています。
      構造的にまずいのでしょうか?

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

      functions.phpの以下の部分を

      function includes_site_url($url){
        //URLにサイトアドレスが含まれていない場合
        if (strpos($url, site_url()) === false) {
          return false;
        } else {
          return true;
        }
      }

      以下のように変更して動作確認するとどうなりますか?

      function includes_site_url($url){
        return true;
      }

      ※編集前にfunctions.phpはバックアップして、動作確認後は元に戻してください。

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

      #52735
      パーマリンクの設定でそのようになっているのなら、おそらく問題ないと思います。
      とりあえず、それを確認するためにも、#52742のコードを試していただければ幸いです。

    • #52747 返信
      tonto
      ゲスト

      お手数をおかけして申し訳ありません。

      #52742の件、確認しましたがダメでした。
      現在は戻しています。

      amp-img | AMPで画像を表示する – AMPのHTMLタグについて
      を見てみたのですが、
      <amp-img src=”https://hoge.com/image.png&#8221; width=”320″ height=”320″>
      </amp-img>
      みたいな感じでサイズの指定をすることは可能なのでしょうか?
      可能であればどこに記述すればよいのかが分からないので教えて頂ければと思います。

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

      画像タグは、すべてまとめてタグが置換されるので、そのように変更する部分はないです。

      僕の以下のSimplicityデモサイトならhttpsサイトでも問題なく表示されているのですが。何でだろう。

      何かしらSSL移行過程に問題があったか、サーバーによるものなのか。んー。

      とりあえず、lib/amp.phpの以下の部分を

      function get_image_width_and_height($image_url){
        //URLにサイトアドレスが含まれていない場合
        if (!includes_site_url($image_url)) {
          return false;
        }
        $wp_upload_dir = wp_upload_dir();
        $uploads_dir = $wp_upload_dir['basedir'];
        $uploads_url = $wp_upload_dir['baseurl'];
        $image_file = str_replace($uploads_url, $uploads_dir, $image_url);
        $imagesize = getimagesize($image_file);
        if ($imagesize) {
          $res = array();
          $res['width'] = $imagesize[0];
          $res['height'] = $imagesize[1];
          return $res;
        }
      }

      を以下の表に変更するとどうでしょう?

      function get_image_width_and_height($image_url){
        $wp_upload_dir = wp_upload_dir();
        $uploads_dir = $wp_upload_dir['basedir'];
        $uploads_url = $wp_upload_dir['baseurl'];
        $image_file = str_replace($uploads_url, $uploads_dir, $image_url);
        $imagesize = getimagesize($image_file);
        if ($imagesize) {
          $res = array();
          $res['width'] = $imagesize[0];
          $res['height'] = $imagesize[1];
          return $res;
        }
      }

      どういうわけか、ロゴに設定されている画像が外部URLと判断されているようなんですね。
      何かしらSSL移行時に合ったのかもしれませんが、画像URLはhttpsになってますし。不思議。

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

      あでも、header-logo.phpの以下の部分を
      $site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a>';
      以下のように変換すればいけるかも。

      if (is_amp()) {
      	//ここにAMPタグを書く
      	$site_title = '<a href="'.home_url('/').'">ここにAMPタグを書く</a>'
      } else {
      	$site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a>';
      }

      試してないのでうまくいくかはわかりませんが。

    • #52750 返信
      tonto
      ゲスト

      lib/amp.phpの変更も画面に変わりありませんでした。

      仮にAMPの表示のときだけテキスト表示にすることは可能なのでしょうか?
      画像が崩れているよりはマシかと思いますので。

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

      #52749のheader-logo.phpをカスタマイズする方法ではどうでしょう?
      こんな感じでAMPタグを書いてしまう

      if (is_amp()) {
        //ここにAMPタグを書く
        $site_title = '<a href="'.home_url('/').'"><amp-img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" width="280" height="60"></amp-img></a>'
      } else {
        $site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-tite-img" /></a>';
      }
    • #52752 返信
      tonto
      ゲスト

      #52749
      #52751
      どちらもロゴが変わることはありませんでした。
      むしろ通常ページに不具合が出ました(ハンバーガーメニュー以外表示されなくなった)ので元に戻しています。

      しばらくはAMPは見送ることにします。
      お手数をおかけしました。本当に有難うございます。

      また再チャレンジの時に問題が出た場合はご相談させて下さい。宜しくお願い致します。

17件の返信スレッドを表示中
返信先: AMPのタイトルロゴのサイズを指定する方法
あなたの情報:




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