chat-blog

僕の独り言が誰か一人の役に立つことを祈って

*

【wordpress】stinger5でアドセンスの広告を横並びで表示させる方法

   

なんか最近wordpressの記事が多すぎるので別のネタを考え中なチャットです。

PR

僕のブログでは元々記事の下の部分の表示されてたgoogleアドセンスの広告が縦に並んでたんですけど、
ぱっと見右側に隙間ができてしまっているのが嫌で横並びしてみました。

やることサマリ

  • stingerでもともと設定しているブログの横幅を広げます。(980px→1080px)
  • 横並びになるようsingel.phpを修正します。
  • 位置を調整します。
  • 横幅広げたことでヘッダー画像の大きさがそのままなので合わせて広げてあげる

では行きます。

※この記事の下に参考にしたURLを貼っておきますので詳しくじっくり理解したいという方はそっち見たほうがいいです。

あと編集する前にしっかり、

こんな具合にバックアップはしっかり取ってくださいね。絶対だぞ!

wordpressの画面から編集する場合も、ctrl + a で全選択してコピーしてメモ帳かなんかにバックアップ取るように。

 

横幅を広げる(style.css)

style.cssの一番下に下記のコードを追記

この後にもう一度 style.cssを編集することになるのですが便宜上分けたほうがわかりやすいので。
※#wrapperはstyle.cssの上の行にも記載されていますが、cssは下に書かれているものが優先されるので大丈夫です。

この状態でページを更新すると横幅が広がっているはずです。

アドセンス広告が横並びにする(single.php)

single.phpのコードをごそっと消してベロっと追記するので注意してください。

を探して消して、

上記コードを貼り付けてください。
※対応するdivの個数とかしっかり確認するように。

 

位置を調整します(style.css)

先ほど編集したstyle.cssをまた編集します。
さっき追記しましたがまた最下行に下記を追加します。

これで保存してページを開くといい感じに横並びになってるはずです。

 ヘッダー画像を広げる(function.php)

※こいつの編集ミスると画面が真っ白になるなど、重大な障害を発生させますのでくれぐれも慎重に。そしてバックアップ取ってください。

こいつの中に、

という記述があるので★の行を、

1080に変えてあげましょう。

これで以上です。

ここ最近の記事に比べるとかなりハードですが、(僕はこの記事残すはとても疲れました笑) こうやって地道にカスタマイズしていくのはなかなか楽しいです。

参考にしたサイト様

http://affiliate150.com/stinger5-side-by-side

※アフィリエイトの為の記事を専門にかかれてますがwordpressのカスタマイズについてすごく参考になる情報ばかりで神サイトとして崇めてます。

今日の一言

なんか前に食べログ的な記事書いたけど1回で終わってしまった1回坊主チャットより。

前書いた食べログ

スポンサーリンク

スポンサードリンク

スポンサードリンク

最後まで見ていただきありがとうございます。
今後とも頑張って更新していきますのでもしよろしければ
下記お一つでもシェアしていただけると幸甚です。
Facebookでシェア Twitterでシェア はてなブックマーク LINEで送る

 - wordpress

  関連記事

800__viewsample3s
stinger5でヘッダーメニューをドロップダウンにカスタマイズする方法

ブログのヘッダー部分のナビゲーションバーで、マウスオーバーと同時に、 デロロロっ …

スクリーンショット_2016-02-20_13_13_40
stinger5でサイドバーのnew post(最新の投稿)で特定のカテゴリーを非表示にする方法

topページから消すのはプラグインを入れて楽にできたのですが、 サイドバーのne …

スクリーンショット_2015-09-05_12_13_53 2
【wordpress】SNSシェアボタンをいわゆるバイラルメディア風にカスタマイズしてみた

今我が家の洗面所では洗面器の交換のために業者さんが来てくれていますが、僕はブログ …

502_01
またもこのブログ(word press)で「bad gateway 502エラー」がでました。

今日は19:30頃には会社をでて(僕の会社は10時出社の19時定時)、 早めに家 …

スクリーンショット_2015-08-29_20_44_27
wordpressのトップページで最近の投稿(new post)を表示させない方法

まいど。月曜から二日酔いに苛まれつつも頑張って仕事行った自分をちょこっとだけ褒め …

スクリーンショット_2015-09-01_8_36_58
wordpressのコメント欄を移動、もしくは削除する方法

最近は朝に更新するように心がけているのですが起きたら起きたで、 艦隊これくしょん …

no image
wordpressで502 Bad gatewayがでてダッシュボードにログインできなくなった時の備忘録

久しぶりにブログを更新しようと思ったら管理者画面に入れなくなって完全に詰んでたへ …

amazon_aso
amazonアソシエイトの審査に承認させる3つのこと

こんにちは、チャットです。 先日ようやく、amazonアソシエイトの承認をもらい …

route53
Route53とムームードメインを使って独自ドメイン取得したよ!

毎度、チャットです。 ブログが出来上がって「さあこれから更新だ」ってなって、 「 …

profile
STINGERで、トップページの記事一覧から特定のカテゴリを非表示にする方法【wordpress】

皆からするとどうでもいい僕のゲームの日記の記事をトップページから消す方法について …

※コメントですが僕が確認してからとなるのでだいたい3日後の反映となります。

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">