Magazine - FC2ブログテンプレート

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Firefoxの件 内緒さん

こんばんは。

申し訳ないんですがブラウザサポートは現行バージョンとそのひとつ前のバージョンまでです。
Firefoxの最新バージョンは70でエンジンもgeckoではなくquantumです。
Mozilla自体が安定版(メジャー版)が出た時点で旧バージョンをサポートしていません。

ということなんで、すみませんが対応は致しません。申し訳ない (∵`)
私はセキュリティ面から見ても最新バージョン以外の利用を推奨しない派です。IEについてもそうです。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Firefoxの件 内緒さん

いえいえ。ご親切にありがとうございます。

結局危機感の無い人に何を言っても無駄というか。こちらが一生懸命説明しても、疎ましがられたり悪感情持たれたらこちらが損するばかり。
なので私はそういうのはやらないことにしてるんです (´・ω・｀)
その気になれば(痛い目に遭えば)自分で動くやろ、という感じで見ています。不親切だとは思うけど ^^;

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineブログタイトルの件 内緒さん

こんばんは。ありがとうございます :)

> すべて大文字になってしまいます〜

#blog-title {
で検索するとスタイルシート内に2箇所あります。1つ目のルールセット内に
text-transform: uppercase;
というのがありますので、この一行を削除してください。よろしくお願いします。

----- 別件
当記事内容をお読み頂きまして、「必須個人設定」を行ってくださいね。
あとホントは未来記事を作成するのは良くないですね。時系列が狂いますし(SEO的に)、常にnewの文字が付き、かつ一番良い場所を専有するのでもったいないと思います。
できればナビゲーション内にリンクを設けて該当ページに誘導するなど別のアプローチを選択されると良いかもしれません。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineブログタイトルの件 内緒さん(完了のご報告)

こんにちは。

修正できているのを確認しました。お疲れ様でした :)

お借りします

深緑の女魔術師です。

新しいスマートフォン出て惹かれるように
同様に新しいテンプレートが出て惹かれるFC2ブロガー・・・

いつも開発ありがとうございます。

語弊があるけど、
これはTOP配置がすごい素敵なので、
是非ってことでお借りしますね。

トップのリンク画像の上に表
示される文字色が難しいですね・・・

白が無難であるかもしれないけど、
画像によっては白があれな場合があったり・・・
頑張ってカスタマイズしてみたいと思います。

FC2ブロガーとして素朴な質問なのですが、
テンプレを借用する画面でコメント書けますが、
あれって作者にメールなどの通知が届くのでしょうか？

（作者さん＝Akiraさんに届くならあれだけど、
届かないであるなら借りるかもしれないユーザ向けに
書くべきなのかな？とちょい思いました）

以上です。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To 深緑の女魔術師さん

こんにちは ('0')/

> 画像によっては白があれな場合があったり〜

文字が見づらくならないように半透明(黒)のオーバーレイを付けていますのでよほど大丈夫だとは思います。度合いは不透明度で調整を行ってくださいね。

> 作者にメールなどの通知が届くのでしょうか〜ユーザ向けに書くべきなのかな？〜

メールは届きません。私はダウンロードページをほとんど見ませんので、コメントについてはどうぞお気になさらず、というスタイルです(笑)
ユーザー同士で会話を交わすと喧騒に発展することがあります(一度経験しています)ので、レビューではなくあくまでも作者へのコメント、という形でお使い頂くのが理想だと思います。
コメント欄が仮にレビュー欄になってしまうと、勘違いや間違った情報が出てきたりで製作者が対応に追われる事態になるので避けたいところです(笑)

To Magazineファビコンの件 内緒さん

こんにちは。

> グーグルクロームでもファビコン表示されてたのですが〜表示されなくなりました〜

原因はhead要素内にある不正な文字列
　※
(全角スペース + 全角アスタリスク)です。クリティカル(致命的)なエラーなので早期修正(削除)をおすすめします。head内を操作する際は十二分に気をつけてくださいね。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

To Akiraさん

早速、コメントありがとうございます。m(_ _"m)

ベース色をダーク系に変えようとしてブロブタイトルの下に表示されるブログの説明文の文字色白系にを変えたくて、※印を付けていたのをそのままにしてたようです。
単純なミスでした。(;^_^A
無事に表示するようになりました。
お手間をお掛け致しました。

To Akiraさん

うわぁ～・・・(;^_^A

ブログのチェックまでしていただき、その上至らない所のアドバイス（回答）まで頂き、ありがとうございます。
本人としては質問以外の部分は気が付かないですけど、見る人が見ると「ここ何か変だぞ！」ってのが、すぐわかるんですね！(;^_^A

かゆい所まで手の届くakiraさんの心遣い感謝です。m(_ _"m)

To NOBさん

こんばんは。今しがた記事を書きましたのでご覧くださいね。NOBさんの場合は一括で管理した方が良いかもしれませんね (´・ω・｀)
上記コメントに推奨html内容を書きましたが、もしかすると新記事のhtml内容の方が希望に叶うかもしれませんので、修正作業されるかどうかわかりませんが、作業をするならばその前にご一読ください。

こんばんは。

記事にしてもらい私以外の人でもコピペでランキングバナー使ってる人が多いと思いますので助かります。
私の場合、コピペで慣れてますので、とりあえずakiraさんの書き換え推奨でやってみますが、今回の記事分も試してみたいと思います。
ひょんなことから記事に発展するとは・・・(;^_^A

To NOBさん

そうですね。該当者さんは非常に多いと思います(笑)
ともかくポイントは「クラス属性」です。これさえあれば無理やりなやり方だとしても全記事で修正が発生、という事態だけは避けられるはずです 。今後に向けて (o'ω')ﾉ

グーグル検索時の説明文の表示に関して

AKIRAさんのテンプレートが好きで使用させてもらっています。
いつもありがとうございます。

今回は質問がありコメントから連絡させてもらったのですが、
もしテンプレートの設定ではなくFC2の方の設定であればごめんなさい。

テンプレートの中身に関して無知なので、
質問の内容を分かってもらえるか不安ですが、
宜しくお願い致します。

質問
現在は「Magazine」を使用させてもらっているのですが、
グーグル検索すると出てくるサイトの説明文がFC2で設定したのが反映されてないのですが、
これは私が設定を間違えているのでしょうか？
設定する方法はあるのでしょうか？

※現在、グーグルで検索した時の説明文は以下のようになってます。
水中撮影＆調査ダイブコメント(-)TB(0). 2020/02/0819:29. 海の中は可愛くない子ばっかりだ… ビーチダイビング (沖縄本島全域)コメント(-)TB(0). 2020/02/0723:19. 2020年はごげ茶色！ 水中撮影＆調査ダイブコメント(-)TB(0). 2020/02/0521:37. 癒し系と ...

もしかしたら凄く初歩的な質問かも知れませんが、
回答を頂けたら凄く助かります。
宜しくお願い致します。

To yusuke38さん

こんばんは。こちらこそありがとうございます :)

【インデックス概要文の件】
テンプレートで関連するのは主にhead要素と呼ばれ、ここでSEOに係るいろいろな指定がされていますが、テンプレートを変更したらすぐにそのテンプレートのhead要素に切り替わるわけではありません。
弊テンプレートに
TB(数字)
という表記を採用しているものはありませんので、yusuke38さんが過去に利用していたテンプレート(スマホ版含む)のhead要素のままインデックスが書き換わっていないということになります。つまりMagazineテンプレートの内容は反映されていません。
スマホ版を併用していた場合には、現在はモバイルファーストインデックスといってスマホでの表示が優先で検索結果に掲載されますので、PC版ではなくスマホ版の影響も考えられます。

既にインデックス済のページもGoogleは再クロールしますが、それはあくまでもGoogleのタイミングや発リンク・被リンクの内容も絡んできます。いずれ書き換わりますが、自発的に再クロールを依頼するには以下の記事を参照して手順に従ってください。

参考記事: Google ヘルプ
https://support.google.com/webmasters/answer/6065812?hl=ja

ただしキューイング(順番待ちの列に並ぶこと)されるだけで即座にクロールしてくれるわけではなくGoogleのタイミングで行われます。
Magazineのhead要素が正しく伝わればyusuke38さんのブログ説明文は
「沖縄〜省略〜海ブログ」になります。

よろしくお願いします。

----- 別件
ナビゲーションにリンクを追加される際に少しだけhtmlのミスがあります。

×
href="省略"target="_blank"

✔
href="省略" target="_blank"

属性間半角スペースの欠如4箇所です。早めの修正をおすすめします。

ありがとうございます！

ご回答いただきありがとうございます。

実はテンプレートを変更して昨日まで、
環境設定のスマートフォン版の表示設定を有効にしてたので、
それが原因なんだと思います。

htmlはすぐに書き換えします。

今回は丁寧な回答有難う御座いました。
これからもAKIRAさんのテンプレートを使用させてもらうと思いますので、
宜しくお願いします。

To yusuke38さん(終了のご報告)

お返事遅くなりました (*_ _)

はい。こちらこそよろしくお願いします :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazine誤情報記載の件 内緒さん

こんばんは。

全く気づいていませんでしたー！確かにleftとrightが逆だったので訂正しました。
お知らせありがとうございます。助かりました :)

こちらこそよろしくお願いします :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineテンプレートの件 内緒さん

こんばんは。ご協力ありがとうございます :)

#blog-title {
で検索するとスタイルシート内に2箇所あり、1つ目のルールセット内
text-transform: uppercase;
の一行を削除してください。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineテンプレートの件 内緒さん(完了のご報告)

修正を確認できました。お疲れ様でした :)

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineテンプレートの件 内緒さん

こんにちは ('0')/

> プロフィール画像と〜丸ごと非表示、もしくは削除〜

<!-- 注)SNSシェアボタン不要の方ここから削除 -->
で検索するとhtml内に1箇所あります。これを目印にして、下のスクリーンショットの赤い範囲を削除してください。

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/2021090915383001e.png

-----
> SNSシェアボタン〜順番の変更〜

上記スクリーンショット内に各SNSに区切り線を入れておきましたので、お好きに並べ替えてください。何に対応しているかは文言が入っているのでわかると思います。

編集時には「全角スペースは絶対に押下しない」ことを気をつけてくださいね。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineテンプレート ページ送りの件 内緒さん

こんばんは。
ページ送りを非表示にしたい(更新順, 同カテゴリ内 共に)、という解釈で合ってますでしょうか。

<!-- 個別記事ページナビ -->
で検索するとhtml内にありますので、スクリーンショットの範囲を削除してください。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_10.png

ページ送りを削るとユーザービリティ・SEO面であまりおすすめはできないので、よくよくお考えになってから実行してくださいね。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazineコメントの件 内緒さん

お返事遅くなりごめんなさい。

> 各記事ページの記事タイトルの下の「コメント欄へのリンク」の部分を丸ごと消したい〜

<!--allow_comment-->
で検索するとhtml内に1箇所ありますので、この行を含み近接の
<!--/allow_comment-->
までを削除してください。よろしくお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

いつも大変お世話になっております。
一点、質問があります。各ページの記事タイトル下に日付が２カ所表示されているうちの、右側の日付（おそらく記事の最新更新日：https://imgur.com/a/DexDXdD）の部分を丸ごと削除したいと思っております。お手隙の際で構いませんので、やり方をご教授いただけると幸いです。ｍ（＿　＿）ｍ

To KrowNewsさん

参考：https://krownews.jp/blog-entry-245.html

To KrowNewsさん

ごめんなさい。

> 一点、質問があります。各ページの記事タイトル下に日付が２カ所表示されているうちの、右側の日付（おそらく記事の最新更新日〜の部分を丸ごと削除したい〜

この件を失念しておりました。
えっと、これもちょっと再考を促したい件です ^^;
どうされるか方針をお聞かせください。

googleにとってより重要なのは「最終更新日」です。なのでこの部位のマークアップは

<time class=grid-datetime datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>年<%topentry_month>月<%topentry_day>日</time>

と、こうして time要素 を利用しています。time要素というのは今回のような「ブログ」で言えば「記事を書いた、あるいは修正をした日付」をダイレクトに伝える役割を持ちます。
「一方記事を書いた日」つまり更新のことは考慮しない日付の方はdiv要素としてマークアップしています。
googleのアルゴリズムによって「おそらく日付であろう」というのは伝わりますが、time要素ほどの確実性はありません。

ここで考慮して頂きたいのは
① time要素を残すのか、
② div要素を残すのか
です。

time要素を残した場合、初回投稿日は不明になります。
div要素を残した場合、修正があったのかどうか、あったのならばそれはいつなのか、の情報が不明になります。
あるいは
③ 初回投稿日を残してtime要素に書き換えるか。

Magazineテンプレートでは「構造化マークアップ」というのを導入しており、これによって記事のステイタスがgoogleに正確に伝わるようになっています。③を選択した場合はこの構造化マークアップの内容と食い違いが出ます。また、検索結果に表示される日付は恐らく更新した日時になります(googleのクロール状況にもよります)

上記を考慮し、①②③のいずれを選択するか教えてください。それぞれに作業が異なります。
あとは
④構造化マークアップを取り除く
という方法も追加しておきます。この場合は「構造化マークアップ削除 + div要素を残す」ということになります。ご検討をお願いします。
最も良い方法は「そのままにしておく」ことです ^^;

To vanillaice (Akira)さん

vanillaice (Akira)様

大変お世話になっております。諸々、親切に教えていただきありがとうございます。

僕としては、記事を書いた日（初回投稿日）の日付のみが表示されるようにしたいと考えております。もしくは、難しいかもしれませんが、Yahoo!ニュースが記事の一番右下に表示させている（https://news.yahoo.co.jp/articles/71d82629c130a6881c30fa4127508753155513a9）ように、最終更新日はなるべく目立たないところに表示させたいと思っております。

これは、サイトの運営上「いつ修正があったか」という情報を表示させておく必要性がないためです。

ですので、日付の表示は「初回投稿日のみ」で、最終更新日の日付は表示しない（表示さえされていなければ大丈夫です）ようにできる、もしくは、最終更新日はなるべく目立たないところに表示させる、最善の方法をご教授いただきたいです。

わがままで申し訳ありません…お忙しいところ恐縮ですが、教えていただけると幸いです。ｍ（＿　＿）ｍ

https://krownews.jp/

To KrowNewsさん

お疲れ様です。

そうですね。記事内容の特性を考えると修正日時は必要ないかもしれません。ただ例えば同じ件で重要な追加事項があったとして追記した場合に上手く働かない可能性はあります。

おすすめは「更新日を削除 + 投稿日のマークアップをtime要素に変更 + 構造化マークアップを投稿日に変更」ですかね。

<time class=single-row
で検索するとhtml内に見つかります。この文字列を含み直近の
</time>
までを削除。

続きまして、削除したtime要素のすぐ上には
<div class=single-row>
<svg class=svg-inline viewBox="0 0 20 20" role=img><use xlink:href=#inline-clock></use></svg> <%topentry_year>年<%topentry_month>月<%topentry_day>日
</div>

というのがありますので、こちらをtime要素に変更し以下の通り。

<time class=single-row datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<svg class=svg-inline viewBox="0 0 20 20" role=img><use xlink:href=#inline-clock></use></svg> <%topentry_year>年<%topentry_month>月<%topentry_day>日
</time>

続きまして
dateModified
で検索するとhtmlの下の方に見つけられますので、この文字列を
datePublished
に変更、それに続く内容が
"<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00"
となっていますので、modified_ を全て削除して以下の通り

"<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"

以上です。よろしくお願いお願いします。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To vanillaice (Akira)さん

vanillaice (Akira)

お世話になっております。無事変更できました！
諸々、要望を聞いていただきありがとうございました。ｍ（＿　＿）ｍ
大変参考になりました、感謝の気持ちでいっぱいです。
また何かありましたら質問させていただきます。ｍ（＿　＿）ｍ

To タイトル文字サイズの件 内緒さん

恐れ入りますが、以下のページにある注意事項を読まれまして再質問をお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-785.html

タイトル文字

Akiraさん、
早速のお返事を有難うございます。
ちょっとかってが分からなかったようで、
なるほど、各テンプレート専用記事での受付というのがあるのですね。
見逃しておりました。どうも有難うございます。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Magazine 構造化マークアップの件 内緒さん

こんばんは ('0')/

えっとですね、再DLを行って、新しくDLした方のマークアップをコピペした方が良いです(現時点で内容が正しくありません)
<script type=application/ld+json>
で検索し、直近の下の方にある</script>までが対象です。

そうですね。構造化マークアップについては十分な知識があればカスタマイズして頂いて構いませんが、そうでなければそのまま利用されるのが一番です。
そして大きなカスタマイズを行うときは必ず複製を取るようにしてください。カスタマイズ前のものを参照できるようにしておけばすぐに内容を戻せます。いずれにしろ配布中であれば公式ページから再DLできますので、それでもOKですが、私の都合で配布を終了することもありますので、そうなるともう原本を入手することができなくなってしまいます。

------ 別件

htmlソースの中に
“
の記号が点在しています。以前も同じ件で修正をした気がしますので、記号を間違えやすい傾向にあるのではないかと思います。
"
と
“
は全く別の記号なので注意してくださいね。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To 記号エラーの件 内緒さん

まず、ページが該当しているかどうかもわからないはずなので、とっても大変ですが1ページづつバリデートにかけてください。
バリデートツールは以下の記事を参考にブックマーク登録を行います。

参考記事: ブログ作成に役立つブックマークレット(W3C validationの章)
https://vanillaice000.blog.fc2.com/blog-entry-781.html

登録したら、ページを開いた状態でブックマークをクリックし、検証。
FC2ブログで避けられない警告と、アフィリエイトの中におかしなscriptタグがあってそれらもエラーですが、今回は無視して赤字のエラーに集中してください。
ページによって本件とは別のエラーが出ている可能性もありますが、本件該当エラーは
Bad value
または
" in an unquoted attribute value
という文言で始まっているものが対象です。

とにかくページ内にエラーがあるのか無いのか知るところからなので、まずはブックマーク登録を。

-----
修正方法については、本来はテキストエディター(htmlエディター)をインストールして行うのが確実です。特にカスマイズをよく行うという方には必須のツールです。インストールが可能ならば以下の記事を参考に入手してください。

参考記事: テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
https://vanillaice000.blog.fc2.com/blog-entry-790.html

バージョン3で説明していますが現時点で最新バージョンは4なので最新をDLされると良いですね。
インストールが難しい、面倒 等という場合はさきほどのバリデート結果を頼りにブラウザ上で作業してください。エラー付近のテキスト内容をコピーして文字列検索しあたりをつける、とかそういう感じになりますかね (∵`)
たぶん目が疲れちゃうのでエディター入手した方が良いと思う ^^;

-----
一応アフィリエイト(ではないかもしれないけど)のエラーは
<script async>
というものです。script要素にasync属性を付けられるのはsrc属性を含んでいるときだけなのでエラーです。

×
<script async>
document.getElementBy......etc
</script>

✔
<script src="/xxx/yyy.js" async></script>

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To エラーの件 内緒さん

こんばんは ('0')/

scriptのエラーは今回「無視してください」とお伝えしたので、一応エラー内容の説明をしただけです。
JS実行後にsrc属性があるかどうかは関係なく、そのJSを実行する際にその実行に対してasync(非同期処理)するかどうか、なので、結論としてはasyncにはなっていません。けれども実害はほぼ無いですし(asyncと書いてあるけど実際にはasyncできない、というだけです)、提供元が問題無いと言うのですからそのままで。

To vanillaice (Akira)さん

お世話になっております。KrowNews（https://krownews.jp/）です。


新しく広告を貼るために運営者情報(問い合わせメールアドレス等)・利用規約・プライバシーポリシーの設置が必要でして、新規記事として投稿する以外で何か設置する方法ってないでしょうか…？

新規記事として投稿すると、一番目立つところに出てしまってGoogleニュースにも送られてしまうので、他には過去記事を改変するぐらいしか思いつかなく…ちょっと知恵をお借りしたいですｍ（＿　＿）ｍ。

To KrowNewsさん

こんにちは ('0')/

htmlファイルを作成してはいかがでしょうか。documentを書かなければいけませんし、多少のデザイン構築も必要ですが、RSSに含まれることはなくなります。
FC2ブログには固定ページ機能がありませんので、それしか無いと思います (∵`)

念の為

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="著者名">
<meta name="description" content="ページ概要文">
<title>ページタイトル</title>
<style>ここにCSS</style>
</head>
<body>
ここに内容
</body>
</html>

上記内容で作成し .html で保存、FC2ブログアップローダーでアップロード、リンクをそのアドレスに飛ばす。
サイトマップに載っていない、ディレクトリが合わない(//blog-imgs-サーバー番号.fc2.com/〜.html のURLになります)、などの点は目をつぶるしかありません。
問い合わせについてはメールプラグインの利用をおすすめします。

To vanillaice (Akira)さん

お世話になっております。

KrowNews（https://krownews.jp/）です。アドバイスありがとうございましたｍ（＿　＿）ｍ。
なんとか設置することができました。大変感謝しておりますｍ（＿　＿）ｍ。
また何かあった際は質問させていただきますｍ（＿　＿）ｍ。

To KrowNewsさん

こんにちは ('0')/

この方法で大丈夫だったでしょうか。FC2ブログが固定ページ機能を提供してくれると良いんですけどね。
お疲れ様でした :)

個別記事の読み込み速度改善について

お世話になっております。KrowNews（https://krownews.jp/）です。

現在、個別記事のページ読み込み速度改善に取り組んでおりまして、全ての記事の画像を１枚１枚軽量化したり、ページ内のリンク数をできるだけ減らしたりなど、ひとまず自分でできそうなことはやってあります。

そこで質問なのですが、Akira様の書かれている「スピード強化について」の項目の「Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません」という部分について、個別記事にユーザーが任意掲載する画像に遅延読み込みを適用するにはどうしたら良いでしょうか?（※現在弊サイトでは、個別記事本文の頭に画像を置いております）

グーグルサーチコンソールではPCのURLは問題なく全て「良好」判定なのですが、モバイルのURLがLCP「2.5秒超」で「改善が必要」と判定されてしまっているのです。色々改善してLCPは2.6秒まで下がったのですが、ここからがなかなか下がりません…。PageSpeed Insightsで記事ごとにチェックすると、LCP1.9秒とか出たりするんですが…。

お手隙の際で構いませんので、ご回答いただけると幸いです。ｍ（＿　＿）ｍ

To KrowNewsさん

こんにちは ('0')/
一番簡単なのはimg要素にloading属性をつけることです。

例)
<img src="xxx.jpg" width="1000" height="1000" alt="xxx">
↓
<img src="xxx.jpg" width="1000" height="1000" alt="xxx" loading="lazy">

こちらはブラウザの機能によるlazyloadなので、テンプレート変更後も有効です。(ただしふわっと表示させたり、等はできません)

KrowNewsさんの場合最も必要な対策はアフィリエイト関連JSです。これらにテコ入れしないと改善はほとんど見込めないと思います (∵`)
例えばオフスクリーン(below the fold)で指摘されている画像は全て第三スクリプト(関連記事)によるものですし、「使用していないjs」についても全てテンプレートや個人で書いた記事とは無関係のものです。
特に関連記事は掲載数が多ければ多いほど減点されますのでスコアの上げようがないというか (´・ω・｀)

できる対策としては
・全ての操作可能なimgに loading="lazy" 付与
・全ての操作可能なimgに width, height属性の明示
・重要な画像には alt属性の値に意味の通る文言あるいは文章をしっかり書く
ぐらいでしょうか。

Akiraさま

お世話になります。諸々教えていただきありがとうございます。ｍ（＿　＿）ｍ
まずは教えていただいたできる対策をやり、後ほどレコメンドウィジェットの提供企業にも相談してみようと思います。
大変感謝しております。また何かあった際は質問させていただきます。ｍ（＿　＿）ｍ

Akira様

お世話になっております。KrowNews（https://krownews.jp/）です。
LCP改善の件ですが、とりあえずGoogleSearchConsole上では、PCと同様にモバイルのURLも全て「LCP2.5秒超、改善が必要なURL」→「良好なURL」に判定が変わりました。

https://imgur.com/a/VUCoBVv（※GoogleSearchConsoleの画面のスクショです）

ご教授いただいた画像の遅延読み込み等を実施後に、先日LCPが2.5秒まで下がり、数日経過した昨日、この判定に変わりました。教えていただきありがとうございました。ｍ（＿　＿）ｍ

To KrowNewsさん

こんにちは ('0')/
多少でも改善されたのなら良かったです。お疲れ様でした :)

関連記事リスト(第三サービス)の日付がJSエラーですが大丈夫でしょうか(こちらはテンプレートとは無関係なのでサポート外です)

あと、バナー(ヘッダーのロゴ画像)なんですが、W200 H48のものをそのまま表示しているので「Serves images with low resolution(画像の解像度が低すぎます)」という指摘をされています。

参考記事
スマートフォンで画像がぼやける際の対処と画像容量削減
https://vanillaice000.blog.fc2.com/blog-entry-376.html

私のパソコンは5Kの高dpiなのでぼやけて不鮮明な状態で見えています (∵`)
ここは変更された方が良いんじゃないかな、と思います。

Akira様

お世話になっております。KrowNews（https://krownews.jp/）です。
ヘッダーのロゴ画像の件、ご指摘ありがとうございます!
設定当初からなんだかぼやけてしまってるなあと思っていましたが、こういった知識には疎くて放置しておりました。
デザイナーからもらったオリジナルの画像を、参考記事の通りに設定し直したら鮮明に表示されました。ありがとうございます。大変感謝しております。ｍ（＿　＿）ｍ

「関連記事リスト(第三サービス)の日付がJSエラー」については、企業の方に申し伝えておきます。こちらもご指摘ありがとうございます。ｍ（＿　＿）ｍ

ユーザータグの不具合

Akira様

お世話になっております。関連記事リストのJSエラーについては、企業の方に申し伝えて現在「確認中」とのことです。

本題ですが、今日になってユーザータグが機能してくなってしまいました。昨日まで問題なかったのに、今日になって急にユーザータグを設定しているのに、ユーザータグのリンク先に記事が表示されなくなってしまいました。

例えば「綾野剛」というユーザータグを設定している記事はいっぱいあるのですが
https://krownews.jp/blog-entry-3264.html
https://krownews.jp/blog-entry-3260.html
https://krownews.jp/blog-entry-3212.html


記事が１つも表示され無くなってしまいました↓
https://krownews.jp/?tag=%E7%B6%BE%E9%87%8E%E5%89%9B

特にhtml等はいじってないのですが…。

FC2ブログのサポートにも問い合わせをしましたが、Akira様の知恵もお貸しいただけると幸いです…。

先ほど、不具合が治ったようです!
お騒がせしました。

To KrowNewsさん

お返事大変遅くなりごめんなさい。
解決済、ということで大丈夫でしょうか。FC2の一時的不具合だったのかもしれませんね。お疲れ様でした :)

いつも大変お世話になっております。KrowNewsでございます。

一点ご質問があります。スマホでのトップページ表示で、最新3件がタイル状で表示される部分について、2件しか表示されない現象が発生しています。元通りに直ったり、2件表示になったりを繰り返していたのですが、最近は2件表示で固定されるようになってしまいました。

おそらくグーグルアドセンスの影響だと思うのでこのままでも良いかなとは思っているのですが、もしFC2ブログ側で対処可能な方法をご存知でしたら、ご教授いただきたいです。お手隙の際にご回答いただけると幸いです。

参考:2件表示の現象のスクショ↓
https://blog-imgs-152.fc2.com/k/r/o/krownews/IMG_1393.jpg

To KrowNewsさん

Akira氏、只今療養中だそうです。
https://vanillaice000.blog.fc2.com/blog-entry-1116.html
暫くお待ちを。

To お節介爺さん

そうでしたか。お知らせありがとうございます。

別で質問したファビコンの件もそうだったのですが、質問をしてしばらくしたら2件表示現象が治っておりました。1日経過した現時点でも再発していないので大丈夫そうです。どなたか別の方が対応してくださったのでしょうか。とりあえず、問題は解決したのでご報告させていただきます。ありがとうございました。

お世話になっております。スマホでのトップページ表示で、タイル状表示の最新3件が2件表示になってしまう現象が今現在再び発生してしまいました。やはり直っても再発を繰り返しているようです。取り急ぎ、ご報告させていただきます。

To お節介爺さん

こんにちは ('0')/
ご協力とご配慮に感謝します。ありがとうございます :)

To KrowNewsさん

お返事遅くなり申し訳ございません。

ファビコンの件ですが、独自ドメインの方に発生しているようです。ファビコンのファイルを置く階層の推奨はトップレベルドメイン直下なんですが、FC2ブログでは画像のサーバーは別のドメインで用意されています。そして独自ドメインの場合はそもそもトップレベル自体違うので、そのあたりで上手く認識されないことがあるの「かも」しれません。
いずれにしろgoogleのクローラーは訪れるたびファビコンも確認してきますので、おかしいな、と感じたら再クロールを依頼されても良いかもです。

--------
タイル表示の件

こちらは広告に起因しています。自動挿入広告がアイテムの1〜3、特に2か3の位置を選出した場合に別のクラス名が充てられてしまうのが原因です。テンプレートを広告表示の都合に合わせることはできませんので、この件については何も対処できそうにないです。申し訳ない。

To vanillaice (Akira)さん

Akira様

お世話になっております。KrowNewsでございます。諸々承知しました。
ご回答ありがとうございます。

いつもお世話になっております。KrowNewsでございます。

ページのインデックス登録について質問がございます。
GoogleSearchConsoleで見るといくつかの理由で「ページがインデックスに登録されていない」ようでして、いかに記載しますので、それぞれ放置したままでも問題ないのか、修正した方が良い場合はその方法のご指導を賜りたいです。m(_ _;)m
修正の検証は何回か試しましたが、失敗してしまいます…。

・代替ページ（適切な canonical タグあり）
https://krownews.jp/?tag=沢尻エリカ&page=2
https://krownews.jp/?tag=松浦勝人&page=1
https://krownews.jp/?tag=広瀬すず&page=2
など計1174ページ

・noindex タグによって除外されました
https://krownews.jp/page-41.html
https://krownews.jp/page-46.html
https://krownews.jp/page-462.html
など計423ページ

・見つかりませんでした（404） ※削除した記事のURLだと思われます。
https://krownews.jp/blog-entry-1425.html
https://krownews.jp/blog-entry-1236.html
https://krownews.jp/blog-entry-1273.html
など計246ページ

・重複しています。ユーザーにより、正規ページとして選択されていません
https://krownews.jp/?mode=friends
https://krownews.jp/?mode=image&filename=20211212191517026.jpeg
計2ページ

・クロール済み - インデックス未登録
https://krownews.jp/img/20210917135736038_20220326010951cd0_20220327205341ee5.jpeg/
https://krownews.jp/?tag=小島みゆ&page=39
https://krownews.jp/?xml
など計142ページ

量が多くて恐縮ですが、お手隙の際にご回答いただけると幸いです。m(_ _;)m

To KrowNewsさん

こんばんは ('0')/

-----
> 代替ページ（適切な canonical タグあり
> noindex タグによって除外されました
> クロール済み - インデックス未登録

月日別ページなど他ページ種でも同じ内容の通知が来るはずなので、同時に解消するための操作をお伝えします。
サーチコンソールに「サイトマップ」を登録しているはずなので、その整合性を重視した対処です。

<!--not_index_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_permanent_area--><!--not_titlelist_area--><!--page_area--><meta name="robots" content="noindex, follow"><!--/page_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_index_area-->

で検索しこの内容を削除。

<!--not_search_area--><!--not_edit_area--><link rel="canonical" href="<!--index_area--><%url><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_link><!--/topentry--><!--/permanent_area--><!--date_area--><%url>blog-date-<%now_year><%now_month>.html<!--/date_area--><!--category_area--><%url>blog-category-<%cno>.html<!--/category_area--><!--tag_area--><%url>?tag=<%sub_title><!--/tag_area--><!--titlelist_area--><%url>archives.html<!--/titlelist_area--><!--not_index_area--><!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_permanent_area--><!--not_titlelist_area--><!--page_area--><%url>page-<%current_page_num>.html<!--/page_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area--><!--/not_index_area-->"><!--/not_edit_area--><!--/not_search_area-->

で検索しこの内容を削除。

この対処によって生じる可能性のある弊害
・ 低品質コンテンツ」やそれに類似するもの
・ 月日別ページにおいてFC2ブログのシステム上、まだ訪れない未来やブログ開設前の過去のページがインデックスされてしまうことがある
・ 動的ページで(ほぼ全てのページが動的です)、検索結果の掲載内容と実際のページ内容が異なる
(動的ページは記事を更新すると内容が変わるため, 例えば 9/1 のタグページ1ページ目はa, b, c, d, e の5記事だとする、9/2に記事 x を更新して同じタグが与えられるとタグページ1ページ目は x, a, b, c, d の5記事になり e 記事が2ページ目に移動する、しかし検索結果には e 記事のタイトルが記載されている など)

サーチコンソールはサイトマップと同じ状態にしないと必ず通知をしてきます。「通知を減らしたい」を目的とするならばこの対処しかありません(FC2ブログのサイトマップ内容を操作することができないため)
ですが実際のインデックスに於いては必ずしもサイトマップ通りが良いとは限りません。この点を踏まえて決定を行ってください。
私も同じ状態(代替ページ（適切な canonical タグあり）)になっていますが、この状態で良いと考えている(増え続けるページを全てインデックスさせる必要は無い, 代表となる最初の1ページだけで良いと考えている)ので対処はしていません。

-----
> 見つかりませんでした（404） ※削除した記事のURLだと思われます。

これは「(どこかにリンクが存在しているけれども)記事がありませんよ」という事実を伝えられているだけなので問題ありません(記事を復活させる以外どうしようもできません)

-----
> 重複しています。ユーザーにより、正規ページとして選択されていません

ともだち申請を受け付けている + アルバムを利用している
場合に起こります。これはFC2のシステムであり機能的な問題ですからテンプレートで解消することはできません。

-----
検索結果とコメント編集のみnoindex、canonical指定なし
という形に変更しますので、それに応じる弊害については理解しておかれると良いと思います。ただサイトマップと内容が同じ、という点で通知は減るかと思います。
・ 無視しても良い通知とそうでない通知がある
・ 全ての通知に対処が必要というわけではないし、記事あるいは自動で作成されるページ全てをインデックス対象にする必要もない

この2点について納得できない・精神衛生上良くないと判断する場合には今回お伝えした対処を実行してくださいね。

To vanillaice (Akira)さん

Akira様

お世話になります。KrowNewsでございます。
早々のご回答ありがとうございます。大変参考になりました。
弊害もあるということで、ひとまずは対処法は実行せずそのままの状態で行きたいと思います。
いつもありがとうございます。m(_ _;)m

To KrowNewsさん(終了のご報告)

こんにちは ('0')/

サーチコンソールに通知が来ると全てを「注意・警告」の類だとして対処法を求める方が多いのですが、通知の中で修正必要となるのは「カバレッジの問題」「理解不能な構造化データ」「モバイルユーザビリティの問題」など限られたものです。
これらの通知についても検証を行って解消、あるいは自然に解消される(クローラーも完璧ではないためアルゴリズム変更後などに誤認識が起こることもあります)などありますので、慌てずにまず該当のページに対して再検証・修正確認(通知の下に青いボックスで明示されています)を行ってください。

ページの除外については「インデックスしたいページが除外されている」場合には対処が必要ですが、FC2ブログの性質上例えば「xxxタグの最初の1ページのみでなく3ページ目もインデックスしたい(2, 4ページ目以降は除外)」など詳細な指定はできません。やるとすれば「xxxタグの全ページをインデックス対象にする」という対処になります。
いずれにしろ「クロールしたけれど除外指定されているページがありますよ」という通知をしているだけで「インデックスさせるよう変更しなさい」と言われているわけではありません。

サーチコンソールで最も注意すべきなのは「エクスペリエンス」項目に属している3項目「ページエクスペリエンス」「ウェブに関する主な指標」「モバイルユーザビリティ」で、これらでエラーを示すものがあれば対処必須です。

事実に関する通知をされているのか、修正を促す通知をされているのかは「問題が〜」などの文言で判断できます。
「ページがインデックスに登録されなかった理由」についてはその理由について述べられているだけなので、そのインデックスされなかったページを実際にはインデックスしたい、という明確な個人的要望が無い限り特に何もする必要はありません ('0')/
また、フィーチャーフォン関連についても現時点で何かする必要も無いと個人的には考えています(たぶん今後googleがうまいことやってくれると思っている(笑))

No title

Akira様

いつも大変お世話になっております。KrowNews(https://krownews.jp/)でございます。この部分のカスタマイズは受け付けておられないことは承知の上でご相談があります。
トップページの最新の3件のみタイル状のレイアウトになっている部分をなくして、最新の3件も4件目以降と同じ様に表示される様にしたく、カスタマイズの方法をご教授いただきたいです。ちょっと自分でもチャレンジしてみましたが私には無理そうです…。
ここで難しい様でしたら、ココナラを通して有料で構いませんのでお願いできないでしょうか。ご相談可能でしたら、以下のアドレスにお見積もり金額をお願いできればと存じます。ご検討のほど、よろしくお願い申し上げます。

[email protected]

To KrowNewsさん

こんにちは ('0')/
今回は削除のみでできますので料金は結構です。html, CSSの大幅な追加・修正ならお断りしています。

#index-grid-wrapper
セレクタ(#index-grid-wrapper::beforeも含む)のルールセット3つを全て削除。

続いて
.grid-item-index
セレクタを含むルールセットを全て削除。

一度お試しください。

To vanillaice (Akira)さん

Akira様

ご回答ありがとうございます。無事に思い通りにできました。本当にありがとうございます。m(_ _;)m

Akira様

いつも大変お世話になっております。KrowNews(https://krownews.jp/)でございます。昨日はありがとうございました。

別件で一点質問があります。Magazineはレポスポンシブ対応のテンプレートですが、記事中にhtmlで画像を設置した場合に、設置した画像をPC版のページでは非表示にして、スマホ版のページにのみに表示させるということは可能なのでしょうか。もしその手段があればご教授いただきたいです。m(_ _;)m

To KrowNewsさん

こんばんは ('0')/
まず、カスタマイズはOKということでお疲れさまでした。
個人で追加されている
.responsibe-adsense-wrap
のルールセットの終了のブレイスが無くなっているのと、次のルールセットのmedia query内にセレクタが存在しないのいずれもクリティカルエラーになっています。ご確認ください。

> 設置した画像をPC版のページでは非表示にして、スマホ版のページにのみに表示〜

スマートフォン版のカスタマイズについては私の制作ではないのでお答えできません。『版』ではなく『デバイスの見分け』という意味でしょうか。そうだと仮定して、

・user agent判別による(JS)
・デバイス横幅でわける(CSS)

の2つの方法がありますが、user agent判別については各ブラウザの方針でagent文字列の固定化・削減が行われている時期で、ちょうど2023年から影響が出始めると思います。chromeも今年の4月から5月にかけて最終調整が入るスケジュールになっているようなので、今行うと再度対応に追われる可能性があります。ブラウザまでの細かい分岐はしないでしょうから一応旧来の内容で使えると思いますが、以下の方法で希望がかなわない場合にお伝えすることにします。

デバイス幅で分けるにはスタイルシートに

@media screen and (min-width: 768px) {
セレクタ名 {
display: none;
}
}

で可能です。上記だとブレイクポイント(切り替え位置)は768pxです。768pxはiPadなどタブレットの標準サイズで、画面横幅が768px以上の場合は非表示、という意味です。
ブレイクポイントをどこに設定するかはご自身で決めてください。
セレクタが存在することが条件なので、対象画像の方にclassあるいはidがあることが大前提です。

テンプレートの『版』を意味する場合は、スマホ版テンプレートの方へ対象のimg要素を記すだけですが、それが『記事で使用する画像』であるならばテンプレートに記述するわけではないのでやはり上記のmedia queryを用いるしかないでしょうね。

To vanillaice (Akira)さん

Akira様

ご返信遅れて申し訳ありません。KrowNewsでございます。

まず「.responsibe-adsense-wrap」を設置している経緯についてですが、先々月、サーチコンソールでモバイルのCLSが「改善が必要」と出まして、原因がファーストビューの広告にあると見て、色々調べたところ、広告の高さを指定すれば改善できるという事でしたので、以下のコードを追加したところ、無事にCLSは「良好」に変わりました。

HTMLでは
<div class="responsibe-adsense-wrap">
広告タグ
</div>

CSSには
.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;

@media screen and ( max-width: 339px ) {
width: 300px;
min-height: 250px;
height: auto;
}
}

と、どこかのサイトに書いてあったものを真似して記述しております。

「個人で追加されている.responsibe-adsense-wrapのルールセットの終了のブレイスが無くなっているのと、次のルールセットのmedia query内にセレクタが存在しないのいずれもクリティカルエラーになっています。ご確認ください」
→お恥ずかしい限りですが、真似して記述しただけのため、どこを直すべきか私にはさっぱり分かりません…。可能な範囲でどこを直すべきかご教授いただきたいですが、ここで難しい様でしたら、ココナラを通して有料で構いませんのでお願いできないでしょうか。ご相談可能でしたら、以下のアドレスにお見積もり金額をお願いできればと存じます。

[email protected]

To vanillaice (Akira)さん

また「設置した画像をPC版のページでは非表示にして、スマホ版のページにのみに表示する」方法を質問させていただいた意図ですが、これは、SP(スマホ)面のみの配信という条件で出稿を受けていた広告のタグを設置するとPCの方に余白ができてしまい、PCの方だけ非表示にすることができれば、余白がなくなるかなと思い、上記の質問をさせていただいた次第です。

ただ、最終的には以下のサイトを参考にし、

【HTML/CSS】パソコンとスマホで表示内容を切り替える方法
https://codeclub965.com/?p=1525

スマホの方で広告を貼っている位置が、PCページではこれまで空白になってところに、グーグルアドセンスを表示させるという形に落ち着きました。外見状は私の思い通りにできておりますが、素人の私がやったものですから、Akira様の視点から見るとまだ問題があるかもしれません。

こちらの方も、もし問題があるようであれば、可能な範囲でどこを直すべきかご教授いただきたいですが、ここで難しい様でしたら、ココナラを通して有料で構いませんのでお願いできないでしょうか。ご検討のほど、よろしくお願い申し上げます。

To KrowNewsさん

こんにちは ('0')/

まず、専門用語については以下の記事でご確認くださいね。
参考記事: 質疑応答や検索に役立つ【覚えておきたいweb用語】(『ルールセット』の章)
https://vanillaice000.blog.fc2.com/blog-entry-461.html

> ルールセットの終了のブレイスが無くなっている〜

太字の部位が終了のブレイスです。
.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;
}

-----
> セレクタが存在しない〜

@media screen and ( max-width: 339px ) {
.xxx {
width: 300px;
min-height: 250px;
height: auto;
}
}

セレクタ名は私ではわかりませんので自身での確認を行ってください。例えば(一部省略)
<img class="xyz"
ならば
.xyz
ですし、
<img id="zzz"
ならば
#zzz
です(idの利用はページ内で単体であることが条件です, 対象が複数ある場合はclassを利用)

-----
この機会に有料請負についてですが、私自身が有料で何かを請け負うことはあります。
ありますが、
・wordpress(企業向け)
・shopify(企業向け)
・スマホアプリケーション(企業向け)
だけで、これらについては私の長男が運営している制作会社を通してのみ受けています。そして全て企業向けです。
FC2ブログの場合は無料のみ、個人的趣味としてやっていますので、料金を頂くことはありません。
私のテンプレートの件で有料案件として他サイトやサービスで発注が行われるというのはしのびないので、あまりにも無茶な内容でなければできる範囲でお答えするようにしています。
社内的な決め事であり、税金も関わってくるのでFC2ブログでは受けないようにしています。ごめんなさいね。

To KrowNewsさん

対象箇所の情報を頂いていませんのでお答えできることがありません (∵`)
先日の内容では
『記事内』の『画像』というこでしたので、これまでの応答内容となりました。本来のご質問は『広告を表示させるブロック』でしょうか。
正しい情報をお伝え頂かないと正しい回答もできませんので、今後はできるだけ詳細にお願いします。

この流れだと上でコメントした内容のセレクタ名は
.responsibe-adsense-wrap
でしょうかね。ただエラーの指摘はわたしが見つけたから伝えただけでこの箇所が質問対象なのかはわかりません。

どこを対象にしているのか不明ですが、参考にされた記事内容は結局は私が先回お伝えした『media queryによるデバイス横幅での分岐』と全く同じなので、それで上手く行ったのならば問題ないと思いますよ。
ただし出稿元の意図がわかりませんし(厳密にデバイス種で分けて欲しい意向の場合があります)、私の説明と同様に参考にされた記事の末尾にも注意が有る通り、デバイスの種を判別しているのではなく、画面のサイズで判断していますので、ここは出稿元の方にしっかり確認を取った方が良いと思います。デバイス別で分ける場合にはJSを用いることになります。

----- 追記 同日
今ざっと拝見しましたが、もし対象が .responsibe-adsense-wrap なのでしたら、google adsenseが非表示化されているようなのでポリシー違反になりますが大丈夫でしょうか。

To vanillaice (Akira)さん

Akira様

ご返信ありがとうございます。色々と分かりづらくて申し訳ありません。

まず、ファーストビューの広告の高さを指定している件についてですが、以下の記事

「Core Web Vitals対応：CLS主な原因である画像と広告の修正方法」
https://zenn.dev/tanakanoanchan/articles/core-web-vitals--fix-cls
のCLS対応〜広告（アドセンス）編〜を参考に

HTMLでは
<div class="responsibe-adsense-wrap">
広告タグ
</div>

CSSには
.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;

@media screen and ( max-width: 339px ) {
width: 300px;
min-height: 250px;
height: auto;
}
}

と記述しました。

したがいまして、Akira様からのご指摘を参考にすると、

<変更前>
.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;

@media screen and ( max-width: 339px ) {
width: 300px;
min-height: 250px;
height: auto;
}
}

↓

<変更後>

.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;
}

@media screen and ( max-width: 339px ) {
.responsibe-adsense-wrap {
width: 300px;
min-height: 250px;
height: auto;
}
}

という感じの変更であってますでしょうか…?

To vanillaice (Akira)さん

Akira様


『記事内』の『画像』をPCでだけ非表示にしたいと言っていた件ですが、PCで非表示にしたかったのは広告についてでした。ただ、広告は私が個人的に貼っているものですから、広告についての質問は答えていただけないかなと思い「記事内の画像」という言い方でお聞きして、それを広告に応用すればいいかと思い、このような言い方をしてしまいました。大変申し訳ありませんでした。

この広告は、スマホ面だけの配信という条件のもの(※以後アドポン広告と呼びます)で、そのままこのアドポン広告タグを貼ってもPCでは表示はされなかったのですが、ポッカリと余白が生じていたため、当初はこの余白をなくしたいと思い、PCでだけ非表示するという対応をすれば、余白もなくなるのではと思い、PCでだけ非表示にしたいという聞き方をさせていただきました。

ただ、今は考え方が変わり、PCだけ非表示にするのではなく、PCではグーグルアドセンスを表示し、スマホでは、アドポン広告を表示させる形に至りました。

つまり、先ほども示しました以下の記事の「パソコンとスマホで表示内容を切り替える方法」を参考に

【HTML/CSS】パソコンとスマホで表示内容を切り替える方法
https://codeclub965.com/?p=1525

タブレット以上の画面横幅(768px)ではグーグルアドセンスを表示させ、スマホではアドポン広告を表示させるようにしました。アドポン広告は現状では、ファーストビューのものを含めて4枚貼っております。

また、ファーストビューの1枚目のアドポン広告につきましては、スマホでのはCLS悪化対策で、高さを指定する必要があるため、上記でもお伝えしている「.responsibe-adsense-wrap」を追加して、ちょっとごちゃごちゃしているかもしれないです。

以下に、実際に記述しているコードを記しますので、ご確認いただけると幸いです。

■HTML


★アドポン広告1枚目

<div class="responsibe-adsense-wrap">
<div class="for-pc1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="7999243128"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp1">
<script src="//ad.adpon.jp/fr.js?fid=37cc5b2d-be1b-4967-9113-d1b1137b05dc"></script>
</div>
</div>


★アドポン広告2枚目

<div class="for-pc2">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 3 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="4059998116"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp2">
<script src="//ad.adpon.jp/fr.js?fid=748f959d-5021-4f6a-a70a-3601a0388d66"></script>
</div>

★アドポン広告3枚目

<div class="for-pc3">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 4 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="5176557090"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp3">
<script src="//ad.adpon.jp/fr.js?fid=ad4b7b0f-4631-44fc-9726-1f2f14ca1e47"></script>
</div>

★アドポン広告4枚目
<div class="for-pc4">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 6 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="3095320672"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp4">
<script src="//ad.adpon.jp/fr.js?fid=92e440dc-f2e5-4130-9da3-5e13757a0853"></script>
</div>


■CSS

.for-pc1 { display:block; }
.for-sp1 { display:none; }

@media only screen and (max-width : 767px){
.for-pc1 { display:none; }
.for-sp1 { display:block; }
}

.for-pc2 { display:block; }
.for-sp2 { display:none; }

@media only screen and (max-width : 767px){
.for-pc2 { display:none; }
.for-sp2 { display:block; }
}

.for-pc3 { display:block; }
.for-sp3 { display:none; }

@media only screen and (max-width : 767px){
.for-pc3 { display:none; }
.for-sp3 { display:block; }
}

.for-pc4 { display:block; }
.for-sp4 { display:none; }

@media only screen and (max-width : 767px){
.for-pc4 { display:none; }
.for-sp4 { display:block; }
}

外見状は私の思い通りになっておりますが、Akira様の視点から見て直すべき点があれば、可能な範囲で、ご指導賜りたいと存じます。m(_ _;)m

To KrowNewsさん

えっと、もう一度私からの質問というか、重要確認事項として

① デバイスの見分けではなく横幅での見分けで良いのですか？
② google adsenseはスマホでの display: none がポリシー違反になりますが良いのですか？

まず①についてですが、例えば『iPhone』か『iMac』か、これはiPhoneは明らかにスマートフォンですし、iMacはあきらかにパソコンです。これがデバイスの見分けです。
デバイス幅の振わけ(media query)というのは機種そのものを判別するのではなく、あくまでもそのデバイスの横画面サイズでの指定です。

例えばブレイクポイントを
@media screen and (min-width: 768px)
と設定したとしますよね。768pxというのは一般的なタブレットの横サイズです。
けれどもスマートフォンには『ランドスケープ』というのがあります。横倒しの状態のことです。
例えばiPhone X は、縦持ちだと横が375pxですが、ランドスケープにすると横は812pxあります。タブレットの標準768pxを超えているわけです。
するとこの場合は『縦持ちだと表示されるが横持ちだと表示されない』という状態になります。これで良いのか、という問いです。よければそのままでOKですし、ダメならばJSを使う必要があるよ、と。

② については自己責任ですが、基本的にdisplay: noneは許可されていないと思います。このあたり私は詳しくありませんので、ご自身でしっかり確認された方が良いと思います。レスポンシブタイプなら場合によっては許可されるとも聞いたことはあります。

----
この2点がクリアできているという前提で記して頂いたCSS内容を拝見すると、パソコンからの観点なので私が提示した内容とは逆になりますがこれは特に問題ないです。

@media screen and (min-width: 768px)
ならば
『768pxを含みそれを超えたら』
ですし
@media screen and (max-width: 768px)
ならば
『768pxを含みそれ以内ならば』
と逆になりますのでこの点に注意してください。そして従来の書き方(スタイルシート内の他ルールセットの書き方)と違えてしまうと自己管理ができませんので揃えておいた方が良いですよ。恐らくこうしたいのだろうという内容をお伝えします。

/* PCでの状態(for-spは非表示) */
.for-sp1,
.for-sp2,
.for-sp3,
.for-sp4 {
display:none;
}

/* 767pxまで(スマホを仮定)の表示(for-pcを非表示, for-spを表示) */
@media only screen and (max-width : 767px){
.for-pc1,
.for-pc2,
.for-pc3,
.for-pc4 {
display:none;
}
.for-sp1,
.for-sp2,
.for-sp3,
.for-sp4 {
display:block;
}
}

1, 2, とか番号振らなくても結局全部同じ指定ならfor-pcとfor-spだけで良いんじゃないですかね (∵`)
そしたら

.for-sp {
display: none;
}

@media only screen and (max-width : 767px) {
.for-sp {
display: block;
}
.for-pc {
display: none;
}
}

とすっきり書けますけれども。管理もしやすいですし。これがidならそれぞれ別名でないとダメですが、せっかくclass使うのだから揃えた方が。ここはお任せしますね。

あとhtmlの方は各広告の下に余白を取りたいのだと思いますが、htmlの <br> を使わずにCSSのmarginで処理した方が良いですよ。
.for-sp,
.for-pc {
margin-bottom: 30px;
}

など。数値は任意です。

To KrowNewsさん

コメントひとつ見落として回答順序が入れ替わってしまいました。ごめんなさい。

> という感じの変更であってますでしょうか〜

はい。それで合ってます。変更というよりもミスの修正です。htmlでもCSSでもルールに従って書かないと反映されませんので、先に掲載した用語に関する記事に掲載されているキャプチャとにらめっこして覚えてくださいね。
メディアクエリについて言及していませんが

@media screen and (min-width: 768px) {
}

これでセットになるので、最終はブレイスが必ず2つ続くことになります。ここはミスしやすいので注意が必要です。

To vanillaice (Akira)さん

Akira様

お忙しいところ、大変ご丁寧に返信いただき誠にありがとうございます。


>デバイスの見分けではなく横幅での見分けで良いのですか？
横倒し状態のことは想定しておりませんでした…。一応代理店側には「画面の横幅に応じて表示内容を変更するように設定している」と伝えた上で「タブレット以上はアドポン非表示という形で問題ございません」という回答をもらってるのですが、念のため確認させていただくことにします。ご指摘ありがとうございます。



>google adsenseはスマホでの display: none がポリシー違反になりますが良いのですか？
弊サイトでは、グーグルアドセンスは、レスポンシブ形式のディスプレイ広告のみを設置しておりまして、グーグルアドセンスのヘルプには

禁止されているコードの改変方法「display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除く）」、改変が許可される場合「レスポンシブ デザイン」

などと書かれているので、多分大丈夫かなと思っております…。

参考:グーグルアドセンスのヘルプ
https://support.google.com/adsense/answer/1354736?hl=ja#zippy=%2C%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3



>番号振らなくても結局全部同じ指定ならfor-pcとfor-spだけで良いんじゃないですかね
よく考えてみたら確かにそうですね。そのようにさせていただきます。あと、私の読解力不足でしたら申し訳ないのですが、

Akira様からいただいた上記の回答では

-----------------------------------------------------------------
.for-sp {
display: none;
}

@media only screen and (max-width : 767px) {
.for-sp {
display: block;
}
.for-pc {
display: none;
}
}
-----------------------------------------------------------------

となっておりますが、

-----------------------------------------------------------------
.for-pc { display:block; }　←参考にした記事にあったこの部分は削った方が良いという意味でしょうか…?
.for-sp { display:none; }

@media only screen and (max-width : 767px){
.for-pc { display:none; }
.for-sp { display:block; }
}
-----------------------------------------------------------------




>htmlの <br> を使わずにCSSのmarginで処理した方が良いですよ
こちらについては、今後検討させていただきます。



>はい。それで合ってます。

ありがとうございます。広告の高さ指定についてはその通りに修正させていただきます。

.responsibe-adsense-wrap {
width: auto;
min-height: 280px;
height: auto;

text-align: center;
}

@media screen and ( max-width: 339px ) {
.responsibe-adsense-wrap {
width: 300px;
min-height: 250px;
height: auto;
}
}

To KrowNewsさん

こんばんは ('0')/

> 念のため確認させていただくことにします〜

そうですね。media queryでカバーできない場合はJSでユーザエージェントを見分けるしかないのでご連絡ください。

-----
> この部分は削った方が良いという意味でしょうか…?〜

div要素のdisplay初期値はblockなので書く意味が無いです。心配なら書いても構いませんが、元々blockなものに対して『blockであれ』とかやる必要はない ^^;

で、やっぱり思ったんですが、この内容だと後々ご自身が混乱するのではなかろうか。
私のテンプレートは『spファースト』で書いています。
スマホでの構造を基準にしてPCでのサイズを決めていく、というやり方です。
今回のコードは逆で『pcファースト』の書き方です。
パソコンでの構造を基準にしてスマホでのサイズを決めていく、と真逆のアプローチです。

@media screen and (min-width: 768px)
はspファースト(768px以上は〜)

@media screen and (max-width: 767px)
はpcファースト(767px以内は〜)

なのでテンプレートのコーディング方針とここだけ逆の方法を取ることになります。別部位を参照してカスタマイズすることもあるでしょうし、逆を参照したら1pxずらし計算する必要が出てきますし、混乱のもとですね (´・ω・｀)

あと、スマートフォンでは基本がシングルカラムで縦配置になることが多いですよね。縦配置というのは簡単で、CSSで指定がなければ勝手に縦になります。横に並べようとするのでdisplay値の変更が必要になってくるわけです。それを念頭にpcファーストで書くと

.xxx {
display: flex;
}

@media screen and (max-width: 767px) {
.xxx {
display: block;
}
}

ですがspファーストなら

@media screen and (min-width: 768px) {
.xxx {
display: flex;
}
}

これだけで済みます。

pcファーストの方は
パソコンでdisplay値変更 → スマホで初期値に戻す

spファーストの方は
パソコンでdisplay値を変更する

と、初期値にわざわざ戻す手間が省けるわけです。今回はそれぞれ切り替えるので記述量が減るメリットはありませんが、テンプレートの方針に合わせた方が後々『理解しやすい内容』として残ります。
これを踏まえておすすめは以下の形です。
(不要な内容は削除、より適切な内容があるものについては変更しています)

/* 広告ブロックラッパー */
.responsibe-adsense-wrap {
width: 300px;
min-height: 250px;
}

@media screen and (min-width: 340px) {
.responsibe-adsense-wrap {
width: initial;
min-height: 280px;
text-align: center;
}
}

/* 広告表示スイッチ */
.for-pc {
display: none;
}

@media screen and (min-width: 768px) {
.for-pc {
display: block;
}
.for-sp {
display: none;
}
}

To vanillaice (Akira)さん

AKira様

休日にも関わらず、大変丁寧なご回答を誠にありがとうございます。



>media queryでカバーできない場合はJSでユーザエージェントを見分けるしかないのでご連絡ください。
ありがとうございます。承知いたしました。広告代理店側には、横倒し状態の場合についての質問を送りましたので、返信があり次第、改めてご連絡させていただきます。



>おすすめは以下の形です。
ありがとうございます。教えていただいた以下のとおりに変更させていただきました。

/* 広告ブロックラッパー */
.responsibe-adsense-wrap {
width: 300px;
min-height: 250px;
}

@media screen and (min-width: 340px) {
.responsibe-adsense-wrap {
width: initial;
min-height: 280px;
text-align: center;
}
}

/* 広告表示スイッチ */
.for-pc {
display: none;
}

@media screen and (min-width: 768px) {
.for-pc {
display: block;
}
.for-sp {
display: none;
}
}

To KrowNewsさん

こんばんは ('0')/

> 返信があり次第、改めて〜

「いいよ」と言ってくれると良いのですが(笑)

-----
> 以下のとおりに変更させていただきました〜

あくまでも構文的にはこれで、ということであって、オーバーフロー(はみ出し)が起こらないか等は注視していません。
例えば393pxまでのスマホでは width: 300px を指定していますが、最小機種の横幅は320pxしかないのでオーバーフローしてしまいそうな。何故width指定がいるのかちょっと私には「？？」という感じですけども、広告の仕様の都合があるでしょうからこちらに関してはご自身で入念にチェックしてくださいね。

To vanillaice (Akira)さん

Akira様

夜遅くにも関わらず、丁寧なご回答を誠にありがとうございます。

>最小機種の横幅は320pxしかないのでオーバーフローしてしまいそうな

私もあまり詳しくないのでよく分かっていないのですが、サーチコンソールのCLS改善のため、参考にした記事の通りにコードを追加して良いかを代理店に聞いた時に

「一見したところ、追加コードを追加いただいても、250 × 300 のサイズのままかわらないような設定に見えますので、追加コードを追加していただいても問題ございません」という回答をもらい、実践したところCLSは改善して目的は達成したので、とりあえずそのままにしております。

どこか直した方が良いのでしょうか…?

To KrowNewsさん

えっとですね、広告のサイズ設定や規約に関しては私ではわかりませんので、そこは尋ねないでください。すみません ^^;
あくまで論理的に考えた場合の懸念を伝えています。以降のサイズは全て『横幅』だと思って読み進めてください。

まず広告のラッパーに300pxと指定があります。デバイスは320pxと仮定します。
現状で表示されている広告を確認しますと、上下2つ表示されていますが、
上の広告はボックスに対して100%で表示されるようになっていますので、320pxなら20pxショートして左に寄っています。
下の広告はデバイス幅いっぱいに表示される設定なのか、320pxで表示されますので、ラッパーの300pxを20px超過(オーバーフロー)しています(画面を超過するわけではないので、画面がぐらつくことはありません)

width: 300px
を外すと双方が画面幅いっぱいに表示されるようになりますが、広告元が『300pxで表示させなければいけない』というのなら指定するしかないです。
広告が300pxを超えても良い(デバイス幅に合わせて良い)ならば width: 300px の指定は無意味です。
なので「自分で確認をしてください」とお伝えしました。私には規約がわからないので。

あと気になっているのは、for-spの広告ってそれ自体がデバイスを見分けている気がするのですが。だとすると .responsibe-adsense-wrap ではなく .for-sp と .for-pc にスタイル指定すればそれで良かっただけのような。
元々「sp用広告を非表示にすると空間ができてしまうのでadsenseを入れることにした」とのことでしたよね。何故空間が空くのかといえば .responsibe-adsense-wrap を作成してしまったせいなので。このラッパーが無かったら(そしてスタイルがfor-spに指定されていれば)空間はできません。

まぁでも現時点でやりたかったことが実現できているなら良し、と思います。

To vanillaice (Akira)さん

Akira様

私の読解力不足で大変失礼いたしました。諸々理解しました。



>広告が300pxを超えても良い(デバイス幅に合わせて良い)ならば width: 300px の指定は無意味です。
私もサイズに関する規約についても特に伝えられていなかったので、こちら代理店に確認してみます。



>このラッパーが無かったら(そしてスタイルがfor-spに指定されていれば)空間はできません。まぁでも現時点でやりたかったことが実現できているなら良し、と思います。
そうなんですね…。おっしゃる通り、現時点でやりたかったことは一応実現できておりますので、今後の流れ次第では変更もあるかもしれませんが(横倒し状態の件についてはまだ代理店からの返信なしです)、ひとまずはこのままで行くことにしたいと思います。

To vanillaice (Akira)さん

Akira様

いつも大変お世話になっております。KrowNewsでございます。
お忙しいところ、いつもご丁寧な回答を誠にありがとうございます。


■代理店から「結論『300pxで表示させなければいけない』という規約はございません。むしろ横幅が広がるのでしたら、その分クリック率が上がると思いますので、プラスの効果になると思われ、ぜひお願いしたいです」との回答がありました。

したがいまして、Akira様が昨日「広告が300pxを超えても良い(デバイス幅に合わせて良い)ならば width: 300px の指定は無意味です」がおっしゃっていた通り、width: 300pxを外したいと考えております。

教えていただいている以下のコードはどのように変更すれば良いでしょうか。

.responsibe-adsense-wrap {
width: 300px;
min-height: 250px;
}

@media screen and (min-width: 340px) {
.responsibe-adsense-wrap {
width: initial;
min-height: 280px;
text-align: center;
}
}


■横倒し状態の件につきましては、代理館から「こちらについては初めてこのようなご質問を受けました。内容は分かりましたが、弊社としては、どのような対応をするのがベストでしょうか...？実装工数もかかるため、現行のタグに何か弊社側で新たに仕様を追加するというのは難しいのですが、貴社の方で操作を加えていただく分には問題ございません」との回答が来ました。

お手隙の際で構いませんので、横画面サイズではなく、JSでユーザエージェントで見分ける方法をご指南いただけないでしょうか?

To KrowNewsさん

こんばんは ('0')/

横幅の指定を無くすなら

.responsibe-adsense-wrap {
min-height: 250px;
}

@media screen and (min-width: 340px) {
.responsibe-adsense-wrap {
min-height: 280px;
text-align: center;
}
}

これでOKです。

-----
デバイス見分けの件ですが、対象広告(adsenseではない方)が自主的に『スマホ』『タブレット』では表示される設定になっています。
例えばパソコンの768pxは display: none が無くとも表示されず、タブレットの768pxでは表示されます。
そういう仕組ですがタブレット非表示で構わない、ということで大丈夫でしょうか。これが最終確認です。

広告自体がデバイスを見分けている前提なので、その点も留意してください。
タブレットの方は念の為分けておきます。

======= </body>直前に記載(この行含まず)

<!-- pc広告非表示 スマホで非表示 -->
<script>
const forPc = document.querySelectorAll('.for-pc');
if(navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
forPc.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

<!-- スマホ広告 タブレットで非表示 -->
<script>
const forSP = document.querySelectorAll('.for-sp');
if(navigator.userAgent.match(/iPad|Android/)) {
forSP.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

====== ここまで(この行含まず)

htmlに上記2つのscript要素を記載した上で、先日お伝えした内容の
/* 広告表示スイッチ */
のコメント下のルールセットを全て削除し、新たに

.ad-hidden {
display: none;
}

を追加。以上です。一度お試しください。
この内容(UA見分け)は他にも応用が効きますので、メモしておくなどしてくださいね。

----- 追記 2023.3.10
誤字がありましたごめんなさい。
.add-hidden
ではなく
.ad-hidden
です。

To vanillaice (Akira)さん

Akira様

いつも大変お世話になっております。KrowNewsでございます。
2つとも対応させていただきました。誤字の件もご連絡ありがとうございます。.ad-hidden で試したところ、無事にできました。お忙しい中、ご指導ありがとうございます。

To vanillaice (Akira)さん

Akira様

お忙しいところいつもご指導いただき誠にありがとうございます。KrowNewsでございます。

二転三転して大変申し訳ないのですが、これまでアドポン広告を「スマホで表示、タブレットとPCでは非表示にして代わりにグーグルアドセンスを表示」ということで質問させていただいていたのですが、諸々事情が変わりまして、アドポン広告を「スマホとタブレットでは表示、PCではは非表示にして代わりにグーグルアドセンスを表示」というかたちにしたいと考えております。

そうするためには、

<!-- スマホ広告 タブレットで非表示 -->
<script>
const forSP = document.querySelectorAll('.for-sp');
if(navigator.userAgent.match(/iPad|Android/)) {
forSP.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

を削除して、

<!-- pc広告非表示 スマホで非表示 -->
<script>
const forPc = document.querySelectorAll('.for-pc');
if(navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
forPc.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

にタブレットの項目を追加すれば良いでしょうか。これが正しい場合はどのように追記したら良いでしょうか。お手隙の際に指導いただけると幸いです。m(＿＿)m

To vanillaice (Akira)さん

以下のサイト
【JavaScript】スマホとPCを判断する条件分岐｜iPhone・Androidなどをユーザーエージェントで判断
https://blog-and-destroy.com/8149

を参考にして、

<script>
const forPc = document.querySelectorAll('.for-pc');
if(navigator.userAgent.match(/iPhone|iPad|iPod|Android.+Mobile/)) {
forPc.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

としてみたところ、グーグルのデベロッパーツールやFireFoxのレスポンシブデザインモードで、iPadの表示を確認したところ、思い通りになっていることが確認できしました。見よう見まねでやってみましたが、このコードで合っていますでしょうか…?

To vanillaice (Akira)さん

Akira様

続けてで申し訳ありません。
上記のコードだと、Androidのタブレットだけ、アドポン広告と一緒にPC用のGoogleアドセンスがまだ表示されてしまうようです。
↑
グーグルクロームのデベロッパーツールを使って、Galaxy Tab S4の表示を見て確認しました。AndroidのタブレットでもPC用のGoogleアドセンスを表示させないようにする方法はありますでしょうか?

To KrowNewsさん

こんばんは ('0')/

android端末のUAは
【スマホ】Android + Mobile
【タブレット】Android
なので

<script>
const forPc = document.querySelectorAll('.for-pc');
if(navigator.userAgent.match(/iPhone|iPad|iPod|Android/)) {
forPc.forEach(element => {
element.classList.add('ad-hidden');
});
}else {}
</script>

これでOKです。android端末のスマホとタブレットを見分けたいときのみスマホに .+Mobile が必要です。

To vanillaice (Akira)さん

Akira様

お忙しい中、ご指導いただき誠にありがとうございます。無事対応できました。

To vanillaice (Akira)さん

Akira様

いつも大変お世話になっております。大変助かっております。お忙しいところご指導いただき、誠にありがとうございます。

今回質問させていただきたいことなのですが、

ヘッダーロゴの下にあるスマホ用のアドポン広告2つが、横画面いっぱいに表示されているところを、横に余白がある3枚目以降のアドポン広告と揃えたいなと思い、以下の通りにコードを追加してみました。

■HTML
<div class="responsibe-adsense-wrap">
<div class="for-pc">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="7999243128"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp">
<div class="side-margin">
<script src="//ad.adpon.jp/fr.js?fid=37cc5b2d-be1b-4967-9113-d1b1137b05dc"></script>
</div>
</div>
</div>
<br>
<div class="responsibe-adsense-wrap">
<div class="for-pc">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6643904316593199"
crossorigin="anonymous"></script>
<!-- ディスプレイ広告 2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6643904316593199"
data-ad-slot="6489638766"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="for-sp">
<div class="side-margin">
<script src="//ad.adpon.jp/fr.js?fid=748f959d-5021-4f6a-a70a-3601a0388d66"></script>
</div>
</div>
</div>


■CSS
.side-margin {
margin-right: 4%;
margin-left: 4%;
}

これだと、スマホでは1枚目と2枚目のアドポン広告には、3枚目以降のアドポン広告と大体同じ幅の余白がつけられたのですが、iPadなどのタブレットだと、逆に3枚目以降のアドポン広告よりも余白が大きくなってしまいました。

タブレットは余白指定のコードがなくても、1枚目と2枚目のアドポン広告には、3枚目以降のアドポン広告と同じ幅の余白があるため、余白指定のコードで余計に余白が追加されてしまうためだと思われます。

余白指定をスマホにだけ適用させる(タブレットでは適用させない)方法はありますでしょうか…?もしくは他に余白の幅を揃える方法があれば、ご指導賜りたく存じます。お手隙の際にご教授いただけると幸いです。m(＿＿)m

To vanillaice (Akira)さん

>htmlの <br> を使わずにCSSのmarginで処理した方が良いですよ

こちらCSSのmarginで処理するかたちに変更させていただきました。ご指導ありがとうございました。m(＿＿)m

To KrowNewsさん

こんばんは ('0')/
アフィリエイトは原則として個人管理・自己責任で行って頂いていますので、今回が最後ということでお願いします。
特に今回は個人的な視覚調整、つまりスタイリングなので、本来はご自身で行うべき内容です。

-----
まず、視覚の調整をするために入れ子を深くするのは避けたほうが良いです。先回よりもさらにラッパーが増えています。入れ子が深くなればなるほど管理しづらくなります。
そしてhtmlもCSSも、自己管理するためにはコメントアウトを上手く活用するようにしてください。何のために付けたラッパーなのか、なにを目的としたスタイリングなのか、など。
そうしておくと第三者に質問をする場合にもそれらの『意図』が伝わりやすくなるので、双方に余計な手間がかかりません。

入れ子を深くするのではなく、共存できるスタイルならばクラス属性を活用するようにします。

【1,2】
<div class="responsibe-adsense-wrap side-margin"><!-- CLS回避用ラッパー + 横幅調整 -->
<div class="for-pc"><!-- .for-pc スマホのみ非表示 -->
google adsense 内容
</div>
<div class="for-sp">
adpon 1 内容
</div>
</div>
<div class="responsibe-adsense-wrap side-margin"><!-- CLS回避用ラッパー + 横幅調整 -->
<div class="for-pc"><!-- .for-pc スマホのみ非表示 -->
google adsense 内容
</div>
<div class="for-sp">
adpon 2 内容
</div>
</div>


【3,4】
<div class="responsibe-adsense-wrap"><!-- CLS回避用ラッパー -->
<div class="for-pc"><!-- .for-pc スマホのみ非表示 -->
google adsense 内容
</div>
<div class="for-sp">
adpon 3 内容
</div>
</div>
<div class="responsibe-adsense-wrap"><!-- CLS回避用ラッパー -->
<div class="for-pc"><!-- .for-pc スマホのみ非表示 -->
google adsense 内容
</div>
<div class="for-sp">
adpon 4 内容
</div>
</div>


【CSS】
/* 広告CLS回避のためのmin-height指定 */
.responsibe-adsense-wrap {
min-height: 250px;
margin: 0 auto 20px;
}
@media screen and (min-width: 340px)
.responsibe-adsense-wrap {
min-height: 280px;
text-align: center;
}

/* 560px以上で広告横幅を90%に変更 */
@media screen and (min-width: 560px) {
.side-margin {
width: 90%;
}
}

/* for-pcをスマホ・タブレットで非表示化 */
.ad-hidden {
display: none;
}

あと、気になっていたので一応お伝えすると
responsibeはresponsiveの誤字だろうと思います。クラス名としては問題ありませんので無理に修正する必要はありませんが、用語としては誤字なのでご注意ください。

To vanillaice (Akira)さん

ありがとうございます。試してみます。