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

[tonto]

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

[わいひら]

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

[tonto]

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

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

宜しくお願い致します。

[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″

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

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

[わいひら]

Wordpressの一般設定部分にある以下の2つの設定項目はどのようなURLになっているか教えてもらっていいですか？

[わいひら]

あと、サイトトップページの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/」となっているのは、いったいどういう構造になっているのでしょうか？

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

[tonto]

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

[わいひら]

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

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

[tonto]

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

[tonto]

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

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

[わいひら]

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はバックアップして、動作確認後は元に戻してください。

[わいひら]

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

[tonto]

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

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

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

[わいひら]

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

僕の以下の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になってますし。不思議。

[わいひら]

あでも、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>';
}

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

[tonto]

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

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

[わいひら]

#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>';
}

[tonto]

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

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

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

[投稿者]

投稿