キャリコ

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 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

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

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

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

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

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

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

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

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …