AMPページで【サイトタイトルとキャッチフレーズを非表示】にする方法

Simplicityの特徴 フォーラム Simplicityについての質問 AMPページで【サイトタイトルとキャッチフレーズを非表示】にする方法

このトピックには11件の返信が含まれ、2人の参加者がいます。3 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #54976

    ちょき

    AMPページで同じ画像が連続してしまうのでアイキャッチ画像を非表示にすることはできますか?それとブログタイトルが長めなのでかぶってしまうアイコンをAMPページのみ非表示にすることはできますか?よろしくお願いします。

  • #55032
    わいひら
    わいひら
    キーマスター

    僕の環境では、AMPページで、設定で表示されるアイキャッチが連続表示されてしまうということはないようです。
    状態を見たいので、不具合の出ているURLを貼り付けてもらってよろしいでしょうか。

    また、「ブログタイトルが長めなのでかぶってしまうアイコン」というのがどういったアイコンなのかが、申し訳ないですがちょっとわからないです。
    できれば、もう少し詳細に説明していただけると助かります。言葉で説明が難しい場合は、キャプチャ画像をアップしてみてください。
    https://wp-simplicity.com/suport/topic/uploaders/

  • #55043

    ちょき

    わいひらさんすみません。SimplicityのAMPでなく、別のAMPプラグインが有効化になっていたために起こっていたようです。
    ですが、SimplicityのAMP有効化を使った場合、カスタマイズ→ヘッダーのヘッダー外側背景画像から設定してある画像(ブログタイトルを入れてある)に、ブログタイトルとディスクリプションがダブって表示されてしまいます。こちらはどのような方法を取ればよいでしょうか?度々すみませんがよろしくお願いいたします。

  • #55048
    わいひら
    わいひら
    キーマスター

    できれば、URLを掲載していただいてよろしいでしょうか。
    テキストだけだと、詳しい症状が分からないので。

  • #55174

    ちょき

    わいひらさん、返信が遅くなり申し訳ありませんでした。

    こちらが該当ブログの記事URLです。http://ire-via.com/2017/06/11/post-124/

    これまでカスタムのヘッダーから、ヘッダー外側背景画像と、モバイルヘッダー背景画像をそれぞれ設定していました。その上でスタイルシートに、

    #site-title, #site-description {
    display: none;

    を記述して、タイトル・ディスクリプション消していました。

    ですが、これでAMP画面を表示するとヘッダー画像とサイトタイトル・ディスクリプションが重なって表示されてしまいました。
    上記CSSをmobile.CSSにも記述しましたが変化なし。次に上記CSSをamp.CSSにも記述しましたが、その場合はヘッダー画像・サイトタイトルがどちらも消えて、トップに記事タイトルが来ます。

    PC・モバイルはそのままで、AMPを画像のみか、難しければタイトル・ディスクリプションのみか、どちらかにしたいと考えています。

    よろしくお願いします。

  • #55175

    かうたっく

    http://ire-via.com/2017/06/11/post-124/amp/ の場合下記画像の通りの表示です。
    http://netakiri.net/uploader/src/up0303.png

    google検索から入ると、下記画像の表示でした。
    http://netakiri.net/uploader/src/up0304.png

    どんな風に見えているのか分かりません…

    スタイルシートに、

    #site-title, #site-description {
    display: none;

    を記述して、タイトル・ディスクリプション消していました。

    こちら確認しましたが、閉じカッコがないので、反映しているのか不明です。

    #site-title, #site-description {
    display: none;
    }

    これで反映はすると思います。が、どこでおかしな表示になっているか不明です。

    キャッシュを削除してもまだエラーがでるようなら、どんな表示になっているか、スクショをとってもらっても良いですか!?

  • #55177
    わいひら
    わいひら
    キーマスター

    amp.CSSにも記述しましたが、その場合はヘッダー画像・サイトタイトルがどちらも消えて、トップに記事タイトルが来ます。

    そのCSSコードでは、ヘッダー画像までは消えないと思うのですが。
    もう一度、amp.cssにそのコードを記述してもらって見せてもらって良いですか?

  • #55180

    ちょき

    >>かうたっくさん
    ありがとうございます。すみません。昨日何度も試行錯誤していて閉じかっこ書き忘れていました。
    Google検索の表示画面ですが、ampプラグインによるものだと思います。ですが、昨日停止・削除していましたし、本日確認してみたところやはりちゃんと削除されていましたので、私には原因がわかりません。自分のスマホで見る限りSimplicityのamp画面になっています。

    >>わいひらさん
    スマホのスクショです。まず、スタイルシートだけにサイトタイトル・ディスクリプションを非表示にするcssを書いた状態のamp画面です。
    amp.css未記入
    画像が上半分ほどになり、画像とサイトタイトル・ディスクリプションが重なって表示されています。

    こちらが、同じcssをamp.cssにも書いた状態のamp画面です。
    amp.css記入時
    一番上に投稿タイトルがあります。
    今現在この状態にしております。

    カスタマイズ→ampの『AMP用のロゴ画像』の項目は関係がありますか?
    何度も申し訳ありません。よろしくお願いします。

  • #55183
    わいひら
    わいひら
    キーマスター

    画像付きでの説明ありがとうございます。

    なるほど、display:none;にすることで、中身が完全に空になってしまうため、外側までもが非表示になってしまっていたようですね。
    以下のように書くと、ヘッダー画像などは消えないようになるかと思います。

    #site-title, #site-description {
        visibility: hidden;
    }
  • #55195

    かうたっく

    今、関係ないですけど、一応・・・。

    google検索から入ると、下記画像の表示でした。
    http://netakiri.net/uploader/src/up0304.png

    >>かうたっくさん
    ありがとうございます。すみません。昨日何度も試行錯誤していて閉じかっこ書き忘れていました。
    Google検索の表示画面ですが、ampプラグインによるものだと思います。

    これはグーグルが作っているampで、おそらくプラグインではないと思います
    と言う結果のみ。一応^^

  • #55227

    ちょき

    >>わいひらさん
    お世話になります。amp.cssに教えていただいたcssを書いたところ、タイトルとディスクリプションが非表示にできました。ヘッダー画像のタイトル文字から下は切れておりますが、これはこれでいい感じで満足しております。おかげさまで現時点でのampの問題が全て解消できました。感謝しております。ありがとうございます。

    >>かうたっくさん
    お世話になります。あの画面がGoogleのものだとまったく知りませんでした。教えていただきありがとうございます。問題が解決できました。ご回答いただき感謝しております。

  • #55235
    わいひら
    わいひら
    キーマスター

    うまくいったようでよかったです。
    ヘッダー画像を好みの高さに調節するには、以下のようにamp.cssに高さを指定してみてください。

    div#h-top {
        min-height: 100px;
    }

    ※数字は好みに合わせて変更してみてください

トピック「AMPページで【サイトタイトルとキャッチフレーズを非表示】にする方法」への新規返信追加は締め切られています。

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