キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

      2014/12/06

1

絶賛求職中のキャリコ( @calicocatxyz )です。

就職難なんて言葉どこいった?ってくらい仕事が溢れてる世の中で、どんな仕事をしようか贅沢に悩んでいます。安定を求めて今までやったことのある仕事にするのか、刺激を求めて新しい職種にチャレンジするのか難しいところですね。ここ5年くらい仕事はしてなかったから仕事で収入を得るというのが楽しみです♪

収入といえばアドセンスもそうですが、今回はクリック率云々よりも単にデザイン的な問題から記事下のアドセンスをダブルレクタングルにしたので、レスポンシブでキレイに表示させる方法をラテに紹介してもらいます。それじゃあラテ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

今までは 336×280 のアドセンスを縦に2つ並べてたんだけど、余白がもったいないと感じたから横並びにしたにゃ。それと PC の場合 280px 分スクロールさせるというのは、訪問者にとっては手間だと思っての決断だったにゃ。ではでは綺麗に並べる方法スタートにゃ!

Ads by Google

アドセンスを横並びにさせる

記事部分の横幅を広げる

STINGER5 の横幅は #wrapper で 980px に設定されていて、記事領域には横幅の設定がされてないにゃ。だからこの #wrapper の値を大きくしてあげると記事領域が広くなるにゃ。

実際の記事領域は 980px から記事領域とサイドバーの間にある 20px の余白と、サイドバーの300px を引いた 660px ということになるけど、左右に 40px ずつの padding が設定してあるから、実際には580px が記事領域ということになるにゃ。

STINGER5 の横幅

2

どのくらい広くすればいいのかというとキャリコの場合アドセンスの横幅が 336px で横に並べると合計 672px、アドセンスの間に 8px の隙間を入れたいから記事領域は 680px あればピッタリという計算にゃ。

今回このように変更

3

まずは横幅を変更するということでスタイルシートは「 レイアウト スマートフォン 」の直後にある #wrapper の値を 1080px に変更するにゃ。これだけで記事領域を広くすることが出来るにゃ。

CSS で横並びにさせる

記事領域を広くしたからアドセンスを横並びにするスペースが確保できたにゃ。そこに float で回り込ませて横並びにするために、HTML と CSS は下記のようにしたにゃ。

HTML

↓このように変更

CSS

アドセンスのダブルレクタングルは意外とデザインが崩れてるブログを見かけるにゃ。綺麗にカラム落ちしてなかったり、カラム落ちしても左右に寄っていたり… PC の解析度を変えてみると次のブロック要素に重なってるなんていう残念なブログもあったにゃ。

Googleアドセンス収入の目安とアクセス数(PV)の関係

どれぐらいのアクセスでいくらのアドセンスが稼げるのか?という記事は今まで沢山見て …

enjiout.com

ENJI さんも「 端に寄っている、切れているなんてもっての他 」と言ってるし、アドセンスが見やすいように気を配ることが凄く大事とも言ってるにゃ。

今回紹介した方法なら表示崩れもなくて綺麗に表示させることが出来るにゃ。コピペでも簡単に導入することが出来るから、記事下のアドセンスを横並びにしたいって人は参考にしてみるといいにゃ。

まとめ

記事下の余白がずっと気になってたから、アドセンスを横並びにして解決したら、意外とすっきりまとまって見た目はよくなったと思うにゃ。記事領域が少し窮屈に感じてたのもあったし、2つの問題がクリア出来て満足にゃ。

記事領域を広げたことによりフォントサイズを変えたりとか、細かい部分も修正したりなんかしてるけど、その辺はまた機会があったときにでも紹介するにゃ。

今日はここまで、じゃあにゃ~

関連するリンク

収益力向上に役立つアドセンスの最適化は公式ブログに全部書いてあった

ロシア経由で帰国するのを諦めたキャリコ( @calicocatxyz )です。 …

calico.xyz

アドセンスの最適なレイアウトはサイトのジャンル別でヘルプページに全部書いてあった

どうも、キャリコ( @calicocatxyz )です。 アドセンスで結果が出て …

calico.xyz

Google アドセンスが公式ブログでオススメするスマホ向けサイトに最も合った設定の仕方

またまたアドセンスの記事ですみません、キャリコ( @calicocatxyz ) …

calico.xyz

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5 ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

1
ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …