サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年5月26日 23:45
わいひら様
お世話になっております。
これは自分だけの現象かもしれませんが、一応ご報告させていただきます。
スマホでツイッターアプリの方から直接ブログ記事を開くと記事内で行った色々な設定などが反映されていない状態で記事が表示されてしまいます。
・字の色を赤などに変えても黒で表示される。
・字の大きさを変えても反映されない。
・記事内で囲み線などを使っているのですが、それも出ません。
・アドセンス広告がレスポンシブではなく300×250の大きさで表示されてしまう
上記、アドセンスの不具合のせいでしょうか…？アドセンスの「関連コンテンツユニット」の広告が表示されません。
自分の使っているスマホはAndroid（HUAWEI P9 lite）です。
Cocoonは最新バージョン（0.6.3.2）を使わせていただいております。
よろしくお願いいたします。
2018年5月27日 06:53
書いてある内容では分からない事が色々ありますので『おそらく』が前提です。
スマホでツイッターアプリの方から直接ブログ記事を開くと記事内で行った色々な設定などが反映されていない状態で記事が表示されてしまいます。
スマホからアクセスした時のURLを確認していただけますか。
https://domain.com/cocoon-archive-title-css/
ではなく、AMP対応ページを見ているなどありませんか？
https://domain.com/cocoon-archive-title-css/?amp=1
その場合。
amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。
アドセンスも同様の可能性が高そうですが、実際の状況を確認できませんから不明です。
トピックスターター 2018年5月27日 13:26
かうたっく様
ご返信ありがとうございます。
amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。
その辺りのことはやっておりませんでしたので、それが原因なのかと思い調べようかなと思いましたが・・・
その前に他の方の記事はツイッターから直接入ると、どう表示されるか確認してなかったので、失礼ながら、かうたっく様のツイートから直接記事の方を拝見させていただきました。
すると、やはり自分と同じ現象になりました。
・文字の色などが反映されていない
・アドセンス広告がレスポンシブではなく300×250の大きさ
正確に言うと、その記事を読み終わり、一つ前の記事に移動した後、戻ると文字の色などがちゃんと反映された記事になっています。
※これも自分と同じです。
つまり、ツイッターから直接入った初回の記事がちゃんと反映されていない状態で表示されてしまうのです。
スマホの端末の問題などもあるのでしょうか？
iphoneがないので確認できませんが＾＾；
2018年5月27日 19:13
これは、スマホの仕様というよりも、AMPの厳しい仕様上このようにせざるを得ません。
・文字の色などが反映されていない
・アドセンス広告がレスポンシブではなく300×250の大きさ
AMPではstyle属性を使えない等の制限があります。
なので、上記はAMPの仕様に合わせたテーマの仕様です。
https://www.ampproject.org/ja/
AMPは高速化することと引き換えに、表示が遅くなるようなことは全て制限がかかっています。
モバイルでも意図した表示にするには、AMP機能を使用しない設定にするしかないかもしれません。
2018年5月27日 20:36
私はAMP対応ページと、そうでないページがあります。どこがどのように文字色が変わるのかもわかりません・・・。
広告に関して『AMPの仕様通り』でCocoonで対応されてるAMP対応用・広告は一切してない状況です。
記事内はstyle属性をあえて使う事もやってません。自分のスマホに導入しているTwitterアプリから初めてクリックしましたが、同じ状況にはなりませんでした。。。
ご自身が見ている状況は、思いのほか他の人には伝わらないので、詳しい状況やスクショを添付し伝えればもしかすると、別のかたが見て解決するかもしれません！？
amp.cssに記事・固定ページなどに反映するCSSを書いてなければ反映しないと思います。
その辺りのことはやっておりませんでしたので、それが原因なのかと思い調べようかなと思いましたが・・・
納得いかないかも知れませんが、やれることをやってみるのも1つの手だったりしませんかね？
それでもオカシイと思う事もあれば。
状況がわからない人が分かるよう手段を整え、書かれていない新たな状況を載せる人・さらに情報を見た人がその解消方法が出るのを待ってみるのも手、かとも思います。
わいひら reacted
トピックスターター 2018年5月27日 22:27
わいひら様
かうたっく様
ご回答ありがとうございます。
AMPは高速化することと引き換えに、表示が遅くなるようなことは全て制限がかかっています。
なるほどですね。
自分も何度か試してみて、何となく…そうゆうことかもしれないなと感じていたので、合点がいきました。
つまり、表示が遅くならないように簡易表示になってしまうということですね＾＾；
書き忘れましたが、もう一つ問題がありまして＾＾；
「AMP簡易表示」になる場合、画像が全て正方形で表示されてしまう辺りも気になっていました。
・縦長の画像の場合→画像の高さが縮まって表示
・横長の画像の場合→画像の幅が縮まって表示
上記のように画像の見栄えが悪くなってしまいます＾＾；
最後に…先程、わかったことがあるのでご報告いたします。
家族のスマホ（自分と同じ機種）を借りてツイッターから表示を確認したところ、一回目はstyle属性が反映された状態で記事が表示されました。
ただ、2回目に確認したところstyle属性が反映されていない記事が表示されました。
どうやら、通信状況によっても反映される、されないがあるようです。
AMPにこのようなデメリットがあるとは思ってなかったので…
「AMP機能を使用しない設定」も考えたいと思います。
ご回答ありがとうございました。
2018年5月28日 06:05
「AMP簡易表示」になる場合、画像が全て正方形で表示されてしまう辺りも気になっていました。
・縦長の画像の場合→画像の高さが縮まって表示
・横長の画像の場合→画像の幅が縮まって表示
上記のように画像の見栄えが悪くなってしまいます＾＾；
画像に幅と高さが入ってないからだと思います。画像のサイズを入れるとキチンと反映されますよ。
<img class="" src="画像パス" alt="" width="800" height="500" />
家族のスマホ（自分と同じ機種）を借りてツイッターから表示を確認したところ、一回目はstyle属性が反映された状態で記事が表示されました。
ただ、2回目に確認したところstyle属性が反映されていない記事が表示されました。
どうやら、通信状況によっても反映される、されないがあるようです。
なるほどです。
”style属性が反映された状態”とありますが、これはAMPでは除去されるので反映された状態にはなりません。なるとしたら通常ページ閲覧時です。
”style属性が反映されていない記事が表示されました。”
ちなみに確認方法としてHTMLタグを見る感じです。※WordPress投稿編集画面ビジュアルではなくテキストのほう。
<span style="color: #ff0000;">ｈｈｈ</span>
上がスタイル属性が付いたコード。HTMLに装飾を書いている。
下は装飾する為にマークclass="red"を付けたもの。
<span class="red">ｈｈｈｈ</span>
クラスred領域をCSSで装飾するためです。
.red { color: #ff0000; }
文字色などの装飾が消えても、ヘビーユーザーさん（自分）位しか気づかない。と思って割り切るか、スマホビュー高速化をあきらめる、それは運営者さんの考え方次第ですね＾＾
わいひら reacted
トピックスターター 2018年5月28日 10:30
かうたっく様
ご回答ありがとうございます。
画像に幅と高さが入ってないからだと思います。画像のサイズを入れるとキチンと反映されますよ。
<img class="" src="画像パス" alt="" width="800" height="500" />
上記の設定をやってみたいと思います。
ありがとうございました。
2018年5月28日 11:33
このページは『スマホでツイッターからブログの記事を開くと起こる不具合』で検索してこられるかたにも助かるページになるかもしれません。
画像の件は全く違う内容『#3605』なので、別トピックをたてるのがベストだと思われます。※トピ主さんの別質問でスクショしましたが、ここでも一応書いておきます。
1つのトピックにつき1つの質問を書き込んでください
その1つ前の書き込みは認識の違いがあったので、他の人も同じ認識違いがある場合にかきました。そのついでに解答したのがダメだったのかも・・。※あと過去トピにも同様質問があるのでそちらでご確認ください＾＾
この件は
「AMP機能を使用しない設定」も考えたいと思います。
でトピ主さんは解決されたようで、なによりです！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。