wordpress

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

投稿日:


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

スポンサーリンク

僕のブログでは元々記事の下の部分の表示されてた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回坊主チャットより。

前書いた食べログ


スポンサードリンク

スポンサードリンク

-wordpress
-

Copyright© chat-blog , 2017 AllRights Reserved.