ダブルレクタングルの実装についてです。 ダブルレクタングルとは、Google Adsenseの「レクタングル(大)」を、横に並べる表示方法です。 こんな感じ 今回は、PCはダブルレクタングル、モバイル表示時はレクタングル1つにする表示方法を、CSSのみで作ったのでご紹介します。 なぜPCとスマホで表示数を変えるのか？ どんな表示になるの？ 作り方 Adsenseの追加 CSSの設定 あとがき なぜPCとスマホで表示数を変えるのか？ 今回作成したものは、PCは2つ、スマホは1つと数を変えています。 これはレスポンシブ表示に設定している場合、モバイル向け表示のときに、画面上に2つ広告が表示されるのはポリシー違反とのこと。 なので表示状態に応じて、広告の表示数を変える設計にしました。 どんな表示になるの？ ・ダブルレクタングルのとき(PC表示) ・シングルレクタングルのとき(モバイル表示) 作り

いろいろなサイトで見かけるレクタングルを横に2つ設置してるやつ。 巷ではダブルレクタングルと呼ぶらしく、効果抜群らしいです。 私のサイトでも設置してみようと思ったわけなんですが、アドセンスのコードを連続で書いただけでは横ではなく縦に並んでしまいました（汗。 中々簡単にはいかないものですねぇ… 少し試行錯誤してみたらうまく表示できたので、今回はその方法をご紹介していこうと思います。 ※私の知人はアドセンスのコードを連続で書いただけで横並びになったみたいなんで、そのまま書いただけでは横並びにならないよって人の参考になればと思います。 ダブルレクタングルの設置方法 ブログの幅を調節 ブログ本文の幅がレクタングルを2つ並べたサイズよりも小さかったら表示できないので、まずはブログ幅の調節をします。 はてなブログの幅変更に関しては下の記事を参考にしていただけると幸いです。 グーグルアドセンスのレクタン

今回はAdSenseの話になるのですが、私個人としてはレクタングル広告が好きです。更にいうとサイドバーと記事下に2つのレクタングル広告が並んでいるスタイルが好きなんですね。しかしブログにレスポンシブデザインを適用していたり、AdSenseでレスポンシブの広告ユニットを使用していると、思いもよらずに違う形の広告が表示されたりもします。もちろんそれがレスポンシブの良さなのですが。でもやはりレクタングルにこだわりたい！と言う方へ。今回の記事を書いていきます。 レスポンシブデザインを適用している、はてなブログユーザーはもちろん、ブログやサイトにレスポンシブデザインを使用している全てのユーザー向けの記事になります。 【追記】６月１３日 スマホ表示の時にレクタングル広告が縦に2つ並んでしまう事への対処法を書きました。 広告ユニットの種類など レクタングルのみレスポンシブに対応させる方法 コードを書き換

Get adsense approval / Akshay Hallur @soraです。 ＰＣ画面にアドセンス広告を横に2つ並べて記事直下に配置すると収益が増えるそうです。 試しにやってみたら本当に効果があったので紹介したいと思います。 参考にした記事 今回は、ちむちむ (id:kinyanpu) さんの記事を参考にさせて貰いました。 ちむちむさん、ありがとうございます。 kinyanpu.hatenablog.com 設置イメージ 僕のブログの場合は次のような感じになってます。 以前は記事上、記事中、記事下（ＳＮＳシェアボタンの下）の３箇所に配置してましたが広告は記事直下の１箇所だけにしました。 理由はせっかく書いた記事なのに最後まで読まないで広告に飛ばれるのが嫌なのと記事途中に広告があると目障りだと感じたからです。 記事を全部読み終わった直後に広告があった方が効果的だと考えた訳です。

はてなブログでads.txt ファイルの警告が出た時の対処法 昨日、何気なくGoogleAdSense(グーグルアドセンス)の管理画面を見てみると、 要注意 - ads.txt ファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。 という警告が出ていました。 ads.txt ファイルって何？収益に重大な影響が出る？ これは大変だということではてなブログでの対応を含めいろいろと調べてみました。 はてなブログでads.txtファイルの警告が出た時の対処法 はてなブログのお問い合わせ回答全文 どうなる？これからのアドセンス はてなブログでads.txtファイルの警告が出た時の対処法 結果から言うと何もしなくて良いようです。 何もしないというよりは何もできないというのが正しいですけどね。 www.ziyukenkyulab.com この問題では

アンダーラインを蛍光ペン風にする方法 みなさん、こんばんは。 他のブログを見ていて「これいいなぁ」「どうやってるのかなぁ」と思うことの一つにアンダーラインが蛍光ペン風になっている点があげられます。 太字や通常のアンダーラインより文章を目立たせることができて便利そうですよね。 今日ははてなブログでアンダーラインを蛍光ペン風にする方法を書いていきたいと思います。 無料版はてなブログでできる文字装飾 はてなブログでアンダーラインを蛍光ペン風にする方法 設定方法(下準備) 実際の操作方法 色の太さ・色・色の濃さ変え方 まとめ 無料版はてなブログでできる文字装飾 文字装飾 はてなブログの「編集みたまま」でできる文字装飾は全部で6つ。 太字・斜体・打消・アンダーライン・文字の大きさ・文字色の6つです。 太字やアンダーラインは結構使いますよね。 斜体や打消は個人的にはあまり使ってません。 はてなブログで