ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

Stinger3で記事中に広告やTwitterを入れスマホで見ると半分に切れているのを直す方法!

      2014/11/29

medium_192635773

WordPressのテーマでStinger3を使用しているユーザーさんは今ではかなりいると思います。

ただ、このStinger3を使用するにあたって一番と言っていいほど注意することがあります!それが・・・記事中に広告やTwitterのツイートを埋め込むとなぜだか半分切れているという現象です!しかもスマホだけ!!

PCではまったくもって問題ないんですけど、ことスマホで見ると切れている・・・よく他のStingerテーマのブログやサイトをスマホでみると「あー切れてるなー」と思うことがしばしばです。

この現象を解決するためにインターネットではいろいろ解決策があるんですが、ボクの場合なぜだかどれも解決しなかったので別の方法をご紹介させていただきます。

ちなみに記事中への広告はQuick Adsenseを使用しています。そしてStinger3のバージョンは「20140327」です。

photo credit: Tjflex2 via photopin cc

スポンサーリンク

広告がスマホで半分切れている画面

見事にアドセンス広告もTwitterのツイートも半分に切れていますね・・・もはやクリック率が低いのが目に見えていますね。

Screenshot_2014-04-30-07-58-09-horz

 

切れている原因は?

広告やTwitterのツイートがスマホで半分切れている原因がコチラ

divタグのクラスのkizi内やkizi02内だとpaddingのせいでハミ出るので出す必要があります。

<引用元>「記事中」にアドセンスを入れましたが、スマホで見ると画像が半分位で切れてしまいます。

 

解決方法その1

つまり</div>+広告+<div class=”kizi”>が必要ということです。みなさん試してみて下さい

<引用元>上記と同じ

で、実際にQuick Adsenseにてやってみました。

・・・が、出来ませんでした!なんでだろ・・・?Pluginを使用すると反映されないのかな?一番信頼できるStinger3公式ページでのやり方で出来なかったのは・・・どうすればいいんだ

 

解決方法その2

Stinger3のsmart.cssに下記の記述があります。

 

「.kizi iframe」クラスの「height: auto;」が問題みたいで「height: 100%;」にするといいみたいです。

ここで「.kizi」クラスを反映させないために「.ad_in」クラスに変更しておくのがミソですね。

 

そしてアドセンス広告なりを挿入する際にこの新たに「.ad_in」を作成して囲みます。

<参考元>WordPressでアドセンスを記事内に表示させる3つの方法

 

で結果は・・・出来ませんでした・・・どう頑張っても出来ませんでした。無理無理。

それにこれらのやり方だとアドセンスなどの広告ではキレイに表示されてもツイートが半分に切れてしまいます。上記の解決方法のやり方だとツイート一つ一つに<div></div>囲まないといけないのでものすっごく面倒くさい!!

 

解決方法その3

そこでふと思ったのがPC表示ではまったく問題がないってことです。つまりPCでのstyle.cssにある記述をそのままスマホのsmart.cssに記述すればいいんじゃない?という浅はかな考え。

そこで実際にやってみました。style.cssに下記の記述があります。

 

smart.cssではこのような記述があります。

 

上のstyle.cssにあるコードを下のsmart.cssのコードと置き換えます。

そうすると

・・・・・・・

・・・・

なんということでしょう~
キレイに表示されているではありませんか!

Screenshot_2014-04-30-20-46-47-horz

Quick Adsenseを使用してのアドセンス広告は問題ないし、なによりツイートがしっかり表示されているのが嬉しいです!ブログやサイトに口コミを載せるときは基本的にツイートなのでこれで手間がかなり省けます!

 

まとめ

WordPressのテーマでStinger3を使用していてスマホでの広告・Twitterのツイートが半分に切れているとお困りなら今回のやり方を行ってみてください。

今のところ他の部位に問題がないので大丈夫そうですが、もしかしたらしっかりしたやり方?ではないかもしれません。そこら辺は詳しくないので・・・分かりませんがキレイに表示されたのでよしとします。

 - Adsense, Twitter, WordPress


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

131110_2301
プラグインなしでmoreタグ部分にアドセンス広告を挿入する方法

Google AdSenseの配置でクリックされやすい効果的な配置場所として「記 …

medium_5598172
WordPressでの記事の投稿方法を簡単にまとめました!

WordPressでの記事投稿方法をご説明していきます。 今まで無料ブログで記事 …

140319_2202
これだけ?.htaccessに3行コードを追加するだけでWordPressが高速化!

ボクのサイトは記事数がまだまだ100ページと少なく、画像もTinyPiNGやJP …

140419_1704
WordPressで記事ごとに広告表示・サイズを切り替える方法

前回コチラの記事で WordPressでカテゴリーごとに広告表示を切り替える条件 …

131223_2301
WordPressのRSS feedがエラー表示されているときの対処法!

当サイトではRSSフィードとIFTTT(イフト)を連携させてTwitterとfa …

medium_302498792
「記事中」のアドセンス広告をPCとスマホで切り替えるレスポンシブ対応法!

何度かこのブログでアドセンス広告をデバイスごとに切り替える方法やカテゴリーごと、 …

141122_2101
Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont …

140105_2301
【WordPress】YouTubeやデイリーモーションの画像を記事に貼り付ける方法!

WordPressにYouTubeやDailymotionなどの動画を記事に貼り …

140311_2101
【Quick Adsense】各種広告をサイトのあらゆるところに挿入可能なWordPressプラグイン

Quick AdsenseはGoogle AdSense広告をサイトの記事中やサ …

140105_2201
【WordPress】画像をアップロードし記事に貼り付ける方法!

WordPressに画像をアップロードして記事に貼り付ける方法をご紹介しておきま …