2016/08/05STINGER5を導入し、PCの広告表示をダブルレクタングルにしました。※導入したサイトはこちらのブログです。下記は補足説明は極力省きます。詳細については後述の参考ブログをご覧下さい。それでも、独自のやり方を採用した部分もあり、その手順を備忘録として記録です。記事部分の横幅を広げる記事下に配置したいアドセンス広告336pixelのバナーを横に並べて配置するために、私は記事の横幅を800pixelに変更。記事幅の設定変更は、style.cssをいじります。該当箇所は、style.cssの966行目にありました。1100px;」に変更します。auto;}STINGER5の記事幅は、全体の幅980pixelから右メニュー300pixelを差し引いた680pixelがデフォルト設定になっています。この設定をしているのが、上記#wrapperです。記事の幅は#wrapperによって決められており、ここを広げてあげることで、記事の幅も広がります。記事部分を800pixelにするために、全体を1100pixelに変更したのが上記手順です。バナーを綺麗に横に並べる記事の横幅を広げただけではアドセンスバナーは横に並列表示できません。バナーを横に並べるために、先ほどスタイルシートをさらに以下のコードを追記します。※以下のCSSは、レイアウトが崩れないように、2014年12月01日に修正変更しています。0px;}STINGER5のスタイルシートはデバイス(ディスプレイの横幅)によって4つの領域が区切られており、追記すべき場所を間違えるとレスポンシブデザインでなくなるようです。この詳細については、@jimonさんのブログ「Stinger5カスタマイズ!記事部分の幅を自由に変える方法。うっかりするとレスポンシブが崩れるよ!」を参照させていただきました。{なので、先ほどのコードは997行目よりも前に追記しました。single.phpの変更つぎに、single.phpのコードを変更します。記事の幅を広げるだけではアドセンスのバナーが並列表示されません。?></div>としました。まとめこの作業を進めるにあたり@jimonさんのブログ「Stinger5カスタマイズ!記事部分の幅を自由に変える方法。うっかりするとレスポンシブが崩れるよ!」をかなり参考にさせていただきました。この場を借りてナイス記事に改めて感謝いたします。補足説明を省略しましたので、はて?と思われる部分はあるかと思います。そこはあくまでも備忘録なので、そこはご理解を。自力ではとてもカスタマイズできないことであっても、ブログの力によって私のような素人でもこんなにカンタンにカスタマイズできるのですから便利な世の中になったものです。cc追記レクタングルのレイアウトが崩れてしまうので、「STINGER5でダブルレクタングル導入時のレイアウト崩れを修正する方法」を追記しました。これに伴い、本記事のソースも変更修正しました。追記2アドセンスの表示する上にラベル表示(スポンサーリンク)をするために、以下のソースを追加しました。center;">スポンサーリンク<p>');</script>GoogleAdSenseGoogleAdSenseTwitterShareGoogle+PocketB!HatenaLINE-stinger-adsenseauthor関連記事affinger4で子テーマを使用してサムネイル(アイキャッチ)画像を美しい写真に変更してランダム表示させる方法WordPressのテーマをaffinger4に変更したところ、アイキャッチのサムネイル画像を登録していない記事が「no-img」となってしまいました。最近、スマホユーザーからのアクセスが多くなっています。アクセスしてくれる人の80%以上がスマホ。PLUSに変更しました。PLUSになってから、カスタマイズのしやすさがグンとアップしていて使い勝手も素晴らしいですね。...Twitter(ツイッター)のツイートボタンの表示レイアウトが崩れてしまう現象を修正する方法ブログで表示しているTwitterのツイートボタンのレイアウト表示が崩れる現象が発生しました。レイアウトの崩れが発生するのはiOSのGoogleChromeのみ。...PREVStinger5でno-imageサムネイル画像を美しい写真に変更してランダム表示させる方法NEXT記事カテゴリによってアフィリエイト用バナーを自動的に切り替えて表示させる方法Twitter@saketoorockさんをフォロー2019/11/13リンナイのガス給湯器の台所リモコンMC-60v3が故障。