現在デフォルトスキンとして「Season (Autumn)」を適用中。

AMPでの表示:footerのnaviがスライドインにかぶる・カエレバ画像の比率・検索窓 | 不具合報告 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
AMPでの表示:footerのnavi...
 
Share:

[解決済] AMPでの表示:footerのnaviがスライドインにかぶる・カエレバ画像の比率・検索窓  


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月8日 15:37  

連日の対応:修正などお疲れ様です。

AMP対応をして気になった所をご報告します。

  • スライドイン設定時、AMPページの(メニューを含む)フッターが隠れる件。

footerのメニューが隠れた例:画像:amp-footer-menu

https://wp-cocoon.com/amp/?amp=1

  • カエレバの画像(もしもアフィリエイト経由)の比率:縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。

※使いかたにもよると思いますが、HTMLに75pxで指定があり、カエレバリンク上にある画像が凄く小さくなります。

※カスタマイズには干渉してないようです。

AMPカスタマイズ前:後:通常ページの比較:画像:kaerebalink-image_amp-img

一応リンク先は以下です。
https://bibabosi-rizumu.com/saize-lunch/?amp=1
目次:『おまけのランチパスポート』にカエレバがあります。

あれば良いかなとして

  • AMPで検索窓が表示されていない件。

検索窓は検索したらAMP対応できるみたいなページを見ただけで試してませんが、声かけさせていただきました。

3点。ちょっとだけ気になった所をご報告します。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月8日 22:57  

スライドイン設定時、AMPページの(メニューを含む)フッターが隠れる件。

これについては明日修正したいと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月8日 22:58  

カエレバの画像(もしもアフィリエイト経由)の比率:縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。

これは、外部サイトにある画像の縦横幅は取得できないからです(やろうと思えばできるけど、画像をすべて外部サーバーから取り寄せて計測するので速さを犠牲にするので実装していないと言った方が正しいです。相手サーバにも負荷をかけることになりますし)。
なので、外部サイト画像の場合で、width、height属性が取得できない場合は、300x300サイズになります(カエレバはそのサイズのものをCSSで縮小表示されていると思われる)。
例えば、カエレバで取得できるIMGタグはこれです。

<img src="https://images-fe.ssl-images-amazon.com/images/I/31-UZxlpDWL._SL160_.jpg" style="border: none;" />

これに対してwidth、height属性があれば、それを利用するのですが、無いのでどうしようもありません。対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月8日 23:02  

AMPで検索窓が表示されていない件。

これは、AMPでは通常の入力フォームを利用できないからです。

最新のAMP技術を利用すれば、できるとは思います。ただ現時点で、そこまでは対応していないです。AMPページで検索窓がそこまで必要もないだろうということで、実装も今のところは考えていないです。

ただ、ちゃんと調べてみて実装が簡単そうならするかもしれません。


Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 360
Akira - FacebookAkira - TwitterAkira - Google+
2018年4月9日 01:00  

AMPで検索窓が表示されていない件。

検索フォーム自体は、すごく簡単に設置できます。ただ、テーマでの実装は難しいかもしれません。

というのも AMP に検索フォームを設置するには、 https が必須です。 http サイトでは AMP エラーが出るので、利用者を選ぶテーマになるかもしれません。あと、「エラーが出ます」との問い合わせが殺到するかも。

また、 lib/amp.php も変更しないといけません。

一応設置方法を簡単に書いておきます。

まず tmp/amp-header.php の<head>タグ内に、下記のコードを追加します。

 https://cdn.ampproject.org/v0/amp-form-0.1.js 

次に searchform.php を下記のように変更します。

<?php if( !is_amp() ): ?>
<form method="get" class="search-box" action="<?php echo home_url('/'); ?>">

<?php else: ?>
<form method="get" class="search-box" action="<?php echo home_url('/'); ?>" target="_top">
<?php endif; ?>

<input type="text" placeholder="<?php _e( 'ブログ内を検索', THEME_NAME ) ?>" name="s" class="search-edit">
<button type="submit" class="search-submit"></button>
</form>

あとは  lib/amp.php の convert_content_for_amp を変更します。ただ、「 form タグを取り除く」と「 target 属性を取り除く」のコードを、検索フォームには適用しないように変更する必要があり面倒です。


わいひら 件のいいね!
Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 360
Akira - FacebookAkira - TwitterAkira - Google+
2018年4月9日 01:04  

<script></script>は変換しないとダメだったか…。

<head>タグ内に追加するコードは、 amp-form で書かれているものです。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月9日 06:09  

AMPでカエレバの画像比率がオカシくなる件

詳細で分かりやすい説明ありがとうございます。

外部サイト画像の場合で、width、height属性が取得できない場合は、300x300サイズになります(カエレバはそのサイズのものをCSSで縮小表示されていると思われる)。

通常そのようにしてくれてますけど、AMPではどこか(おそらく外部)のCSSが読み込まれてるような気がします。手元のamp.cssで以下を追記してもCocoonでは反映されないんです。

.kaerebalink-box .i-amphtml-layout-awaiting-size,
.kaerebalink-box .i-amphtml-layout-size-defined .i-amphtml-fill-content {
    position: static;
}

.kaerebalink-box .i-amphtml-fill-content {
    height: auto;
    max-height: none;
    min-height: 0;
    min-width: 0;
    width: 100%;
}
.kaerebalink-box i-amphtml-sizer {
	display: none !important;
}

!importantがではなくこのCSS全てが出力されない感じが不思議で。そのCSSを検証画面で追記すれば、それなりに反映されます。

Amazon画像を指定したとき現れるCSS。画像指定場所:画像afi-img

検証画面上で追記した場合のみ反映される、どこか何かのCSS/css/amp.css*に追記した様子:画像css

自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応

画像サイズを調べwidth・heightを入れるとAMP対応してない時と同じ表示になりました。

width・heightを検証画面上で追記:画像:width-height

該当ページ:管理画面上にある『AMP表示しない』をポチッと押すと手っ取り早いので、それで対応します。便利機能実装、ありがとうございます^^

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月9日 06:10  

CocoonAMPページに検索窓を実装する方法

 AMP に検索フォームを設置するには、 https が必須

 Akiraさん。その他、実装方法を検証してくださって、ありがとうございます^^

<html>とheadタグの間に、アドセンスが自動的作成したscriptでしたらampのとき自動的に削除されたか何かでエラーは出ませんでした。それで最近、良かった。。と思った記憶があります。

 良い内容だったのに、それぞれ項目を分けずにまとめてしまった・・・。せめてもと?ここでリンクを貼ってみました><


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月9日 14:37  

カエレバ画像の件:以下の通りの対応策で解決しました。

対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。

該当ページ:管理画面上にある『AMP表示しない』をポチッと押すと手っ取り早いので、それで対応します。

『AMP謎?のCSS出力』はコレで忘れる事ができそうです。ありがとうございました!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月9日 21:57  

検索フォーム自体は、すごく簡単に設置できます。

教えていただきありがとうございます。
思っていたより簡単そうです。httpは、is_ssl関数とかで判別して、httpページでは表示しないとかにすればいけそうです。

問題は以下がうまくいかどうかかもしれません。

「 form タグを取り除く」と「 target 属性を取り除く」のコードを、検索フォームには適用しないように変更する必要があり面倒です。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月9日 21:59  

AMPで検索窓が表示されていない件。

これについては、手元のファイルを修正したので、次のバージョンで改善されるかと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月9日 22:06  

通常そのようにしてくれてますけど、AMPではどこか(おそらく外部)のCSSが読み込まれてるような気がします

ここら辺は僕も詳しく検証しないんですけど、.i-amphtmlとかがつくものは、AMP側が勝手に追加してしまうCSSだと思います。
ここら辺は、僕もよくわかっていません^^;
たまに勝手に追加されるCSSで、表示が崩れるので、それを修正するぐらいで。
今回、AMPページでフッターのクレジットが表示されなかったのも、AMPがbody要素にCSSを追加したのが原因でした。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月9日 23:47  

勝手に追加されるCSSで、表示が崩れるので、それを修正するぐらいで。

そうでしたか。。いつもありがとうございます。初AMP対応しましたけど、CSSの容量縛りもあるのでホントに製作者さん泣かせな部分でもありそう…です。

TOPページやpreの表示にstyleを付けない分子テーマで自由にスタイルを書けるようにしてくれたんだろなぁ^^ っと勝手に思ってます。

今回も対応していただきありがとうございました。AMP用の検索窓のCSSを追記して置こう!と思います。ありがとうございましたペコリ


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月10日 20:33  

そうなんです。
CocoonテーマのAMP機能作成で、一番きつかったのは容量縛りでした。50KBは少ない^^;


Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 360
Akira - FacebookAkira - TwitterAkira - Google+
2018年4月11日 12:31  

is_ssl 関数ってあるんですね。初めて知りました。正規表現で判別しないといけないのかなとか思ってました。

たぶん、AMP に検索フォームがある 無料の国産テーマはないはず。差別化になりますね。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月12日 00:22  

一応、https環境でAMPページに検索フォームを実装してみました。
https://github.com/yhira/cocoon/archive/master.zip
AMPバリデーターでもエラーが出ないので、これで多分大丈夫ではないかと思います。
※http環境だとAMPページに非表示になります。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月12日 08:35  

ダウンロードしたファイルですが出力されてないと言うか、ファイルの変更箇所が見当たりませんでした。

https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1

※『添付画像』はPC検証画面ですが、スマホビューも同様です。

footerにあるmenu・copyrightの外部amp.css変更による修正、ありがとうございました!


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月12日 20:33  

一応、https環境でAMPページに検索フォームを実装してみました。

今Cocoonページを確認したら、検索フォームを確認できました。

https://wp-cocoon.com/0-4-6/?amp=1

次のバージョンで対応されたようなので、のんびり待っておこうと思います!

ありがとうございました^^


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月12日 21:52  

動作しなかった環境というのは、どういったサーバーでしょうか。
よろしければ、Cocoon設定にあるテーマ環境情報を貼り付けてもらってよろしいでしょうか。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月12日 23:22  
----------------------------------------------
サイト名:ビバ★りずむ
サイトURL: https://bibabosi-rizumu.com 
ホームURL: https://bibabosi-rizumu.com 
Wordpressバージョン:4.9.5
PHPバージョン:7.1.4
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:0.4.6
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:	0.0.2
----------------------------------------------
利用中のプラグイン:
----------------------------------------------

プラグインなし状態で確認した画像は以下です。

none-plugin.png

----------------------------------------------
サイト名:びば★サーバー
サイトURL: https://biba-server.xyz 
ホームURL: https://biba-server.xyz 
Wordpressバージョン:4.9.5
PHPバージョン:7.0.18
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:0.4.6
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.2
----------------------------------------------
利用中のプラグイン:
----------------------------------------------

試しに一時的にテストサイトをhttps化して公開してみたら、問題ありませんでした。

https://biba-server.xyz/hello-world/?amp=1

検索フォームはどちらも表示され、スライドインの検索をクリックするとポップアップが出てキチンと表示されます。

おそらく固有の問題っぽいので、ファイルは正常だとわかりました!お手数おかけしまいした。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月13日 00:09  

試しに一時的にテストサイトをhttps化して公開してみたら、問題ありませんでした。

httpページでは表示されない仕様になっています。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月13日 01:16  

httpページでは表示されない仕様になっています。

httpページでは試してない状態です。

https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1

▲httpsサイトで表示されず、あきらめたサイト

▼https化と公開をし、初めてAMP対応したページ(初めて公開したページ)はキチンと表示されます。

https://biba-server.xyz/hello-world/?amp=1

結果。bibabosi-rizumu.com以外では問題ないと分かったので、bibabosi-rizumuサイト上であきらめました❦

通常は問題ないかと思われます!ご対応ありがとうございました^^


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月13日 20:21  

cocoon-master-0.4.7.1.zipをダウンロードして試したら、スライドイン・サイドバーとも検索窓が表示されました。

これでこのトピック全て解決です。ご対応ありがとうございました^^


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月13日 22:10  

cocoon-master-0.4.7.1.zipをダウンロードして試したら、スライドイン・サイドバーとも検索窓が表示されました。

どっちのサイトも表示されたのですか?


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3387
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年4月13日 22:46  

そうですね。どちらも表示されました。

※テスト用は削除したので再構築:biba-server.xyz/hello-world/はアドレスが変わりましたが4.6のときから正常に表示されてました。※テスト環境は後程、削除します。

どちらもcocoon-master-0.4.7.1.zipで試したら正常に表示されてます。ありがとうございました。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6440
わいひら - Facebookわいひら - Twitter
2018年4月14日 00:26  

どちらも表示されたんですね。
それならよかったです。
同じHTTPS環境なのに表示されるケースとされないケースがあって、気になっていました。


かうたっく 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました