2018年09月13日WordPressアドセンス最近はテーマの機能により、テーマを編集しないでもアドセンスを記事下に横並び表示できるテーマが多いです。前に賢威8にテーマを変更しましたが、賢威8にはそのような機能はなく、自分でテーマを編集する必要があります。そこで変更前のテーマの賢威7で使っていたコードで賢威8でもアドセンスを横並び表示させていました。表示がずれてしまいます。そこで、フレックスボックスを使ってアドセンスを横並び表示させることに挑戦してみました。記事下のアドセンスの表示が整わない..。賢威7でアドセンスを記事下に横並び表示させていたコードを賢威8でもしばらく使っていました。賢威7と賢威8は記事幅が異なるためか、うまく中央に表示されません。考えるとカラムを1カラムにすると記事幅が変わるため、1カラムにすると表示が崩れていました。たつじんwもともと問題があったんじゃ...。思い、CSSを1時間いじっていみましたが、うまく表示が整いません。そこで、「フレックスボックス」を使って横並び表示させることに挑戦してみることにしました。フレックスボックスでできることフレックスボックスの親要素を「フレックスコンテナ」、子要素を「フレックスアイテム」といいます。flex;」を適用すると、デフォルトでは子要素の「フレックスコンテナ」が横並びに表示されます。フレックスボックスは「フレックスアイテム」を横1列に並べるだけでなく、縦に並べたり、複数行に並べたり、高さを揃えたり、並び順を変更することもできます。「float」ではなく、「フレックスボックス」を使えばアドセンスの横並び表示を簡単に実装できそうな気がします。※ただ、「フレックスボックス」はIE9とIE10にはサポートされていません。IE9とIE10のブラウザからの閲覧が多いサイトの場合は、フレックスボックスを使わない方がいいかもしれません。フレックスボックスでアドセンスを記事下に横並び表示させるアドセンスを横並び表示させたいとろこに以下のコードを追加しました。賢威8では「template-part」フォルダにある「content-post.php」が投稿ページのファイルです。-->の上に以下のコードを追加しました。-->このコードでは「条件分岐タグ」でPC表示とスマホ表示を切り替えています。PC表示ではアドセンスが横並び表示されますが、スマホ表示では1つのアドセンス広告が表示されます。タブレットもスマホに含まれるので、タブレットでは横並び表示されません。タブレットがスマホに含まれる「wp_is_mobile」の条件分岐タグを使ったのには理由があります。広告をページに同時に掲載することも許可されません。以前は「広告の配置に関するポリシー」に上記のように記述されていて、スマホ表示で1つの画面にアドセンス広告を2つ表示させるのは規約違反でした。現在はこの記述は削除され、スマホ表示でも1つの画面にアドセンス広告が2つ表示されてもポリシー違反にはならなくなりました。スマホの画面が大きくなってることも関係しているのかもしれません。スマホの画面でレクタングルが2つ並ぶのは好ましくない気がします。訪問者からすると、広告がわずらわしいと思うだけです。そのため、条件分岐タグを使ってスマホとPCの表示を切り替え、スマホでは1つの広告だけ表示されるようにしました。スマホ用の広告は「レスポンシブ広告」にしましたが、タブレット表示を考えると「記事中広告」の方がいいかもしれません。タブレットがスマホに含まれることについて「wp_is_mobile」ではなく、「is_mobile」に変更してfunction.phpにスマホの定義を記述すればタブレットはスマホに含まれなくなります。最初は「is_mobile」にしてタブレットでもPCと同じように、アドセンスを横並び表示させようとしました。タブレットでも表示を確認したところ、レクタングル大(336×280)を横並び表示させると記事の枠からはみ出てしまいました。今回はタブレットをスマホ表示にするために、あえて「wp_is_mobile」の条件分岐タグを使うことにしました。タブレット表示でレスポンシブ広告を使うと(468×80)のバナーが表示されることが多いです。タブレットもスマホに含めてしまう場合は、スマホ用のアドセンスに「レスポンシブ広告」は使わない方がいいかもしれません。レクタングル大を使わずレクタングル(300×250)を使う場合や、タブレットで表示を確認して記事幅に収まるなら「is_mobile」に変更してもいいかもしれません。$_SERVER['HTTP_USER_AGENT']);}functions.phpに上記のコードでスマホの定義をすると、タブレットはスマホに含まれなくなります。「wp_is_mobile」を「is_mobile」の条件分岐タグに変更すれば、タブレットもPCと同じ表示になります。*/}上記コードをスタイルシートに追加しました。賢威8の場合は「bese.css」に追加します。表示の確認ちゃんと横並びアドセンスが中央に表示されるようになりました。1カラムにして確認しても表示が崩れることなく、中央に表示されました。これで1カラムにしても安心です。デザインレシピ集」という、ウェブデザインの本を読みました。この本に「フレックスボックス」を使ったデザインについての記述が沢山ありました。たつじんwこんなに色々できるのか!と思い、いつかフレックスボックスを使ってアドセンスの横並び表示を実装しようと思っていました。テーマを変えて横並び表示の表示が崩れたことにより、手元に置いてあったこの本がついに役立つ時が来ました(笑)。技術評論社Amazonで探す楽天市場で探すYahoo!で探す今回のことを機に、もっとウェブデザインについて勉強したいと思います。今日のたつじんへの一歩たつじんw今回のコードを書くのに、約5時間かかっています。知識のある人はこの程度ならすぐに書けると思うので、ウェブデザインの知識がある人は凄いと思います。SEOについてもそんなに詳しくないし、「自分にはなにがあるんだろう?」と思ってしまいます(笑)。スポンサーリンクこの記事を書いている人たつじんwたつじんwになるために勉強したことをこのブログに書いています。最近はWordPressとiPhoneの記事が多いです。必須サイト上に表示された文字を入力してください。TOPWordPressフレックスボックスを使ってアドセンスを記事下に横並び表示させる方法プロフィールWordPressとiPhoneが好きな標準的ではない男子(おっさん笑)です。たつじんwプロジェクトシェアお問合わせTOPへホーム。