「Stinger3」で記事下にレクタングルを2つ並べて表示させる方法。

公開日: : ブログ運営

本日もhebinumaをご覧いただき、ありがとうございます。

今回は備忘録のための記事です。釣りやファッションに流行りがあるのと同時に、ネット業界にも流行り廃りってのがあるんです。で、今回は最近流行ってる『PC表示での、記事下にレクタングル広告を2つ並べる方法』です。これによって収益アップしたって話をよく聞くんです。

【関連】「Stinger3」でスマホのサムネイルを角丸にする&影を付ける方法
【関連】「Stinger3」のフォントをメイリオに変更する方法

SPONSORED LINK

 

まず、ゴールとやることを確認

事前に今回のゴール(最終完成形)と、何をやる必要があるのか、確認しておきましょう!

ゴール

スクリーンショット 2014-08-19 20.32.17

ゴールはこれです。「Stinger3」におけるPC表示の、記事本文下にレクタングル広告(336×280px)を横に2つ並べます

やること

1.記事本文エリアの横幅を広げる
2、サイト全体の横幅を広げる
3、広告コードを挿入
4、デフォルト(Stinger3テンプレート)の広告コードを消す
5、cssを調整

です。

作業に入る前に、ゴールとやることの大筋がわかってるのとわかってないでは、全然違います。頭が整理された状態でスムーズに行けるはずです!

それでは実際に作業していきましょう

いつものように、万が一の時の為に、現在のソースはどこかにコピペしておきましょう。戻せなくなった時の保険です。

1.記事本文エリアの横幅を広げる

ワードプレスの管理画面を開き「外観」→「テーマ編集」→「style.css」と進み、ページ内で『main』のキーワード検索すると、以下のような箇所が出てきます。
※画像クリックすると拡大します
図1

ここの3か所の数字部分をイジってあげます。僕は今回このようにイジりました。
『width: 550px;』 → 『width: 680px;』
padding-right: 39px;』 → padding-right: 25px;』
padding-left: 39px;』
padding-right: 25px;』

2、サイト全体の横幅を広げる

次に、同じく「style.css」ページ内で、『#header-in, #wrap-in』と検索します。すると、以下のような箇所が出てきます。
図2

この「width: 980px;」を変更します。今回僕は、「width: 1110px;」にしてます。これで、サイドバーの方が圧迫されずにサイト全体としてもキレイに表示されているはずです。

3、広告コードを挿入

次に広告コード(アドセンスなど)を挿入します。
「外観」→「テーマ編集」→「single.php」と進み、『template_part(‘ad’)』と検索すると、以下のような箇所が出てきます。
図3

ここを削除し、以下のコードを挿入します。♪マークところをご自身の広告コードに差し替えてから、挿入してください。


<!– 本文記事下のアドセンス(スマホ/PC切り替え) –>
<?php if (wp_is_mobile()) :?>
 
♪♪♪♪ここにスマホ用のコードを挿入♪♪♪♪
 
<?php else: ?><div style="padding:20px 0px;">
<div id="ad-bottom-oya"><div id="ad-bottom-left">
 
♪♪♪♪ここにPC用(左、336×280px)のコードを挿入♪♪♪♪
 
</div><div id="ad-bottom-right">

♪♪♪♪ここにPC用(左、336×280px)のコードを挿入♪♪♪♪
 
</div></div></div><?php endif; ?>


4、デフォルト(Stinger3テンプレート)の広告コードを消す

このままだと、stinger3のデフォルト(最初っから入ってる)広告が表示されちゃうので、消します。
※アドセンスは、1ページに3枠までしか設置できません。4枠以上設置するとポリシー違反になりるので、注意が必要!

「single.php」ページ内の以下のソースを消します。


<div style="padding:20px 0px;">

<?php get_template_part(‘ad’);?>

</div>


5、cssを調整

ここまでの作業だと、広告が縦に2つ並んじゃうので、調整します。
「外観」→「テーマ編集」→「style.css」に進み、一番下までスクロールします。
図4

そして一番下に、以下を追加します。


/*———————————
本文記事下(ダブルレクタングル)アドセンス用
——————————–*/
div #ad-bottom-oya{
     padding:5px 0px 5px 0px;
     color: #FF0099;
     font-weight:bold;
     height:280px;
     margin-bottom: 30px;}
div #ad-bottom-left{
     float:left;}
 
div #ad-bottom-right{
     float:right;}


完成!!!!

ここまで来たら、自分のブログを見てみて下さい!PCの記事本文下にレクタングル広告が横に2つ並びになっていると思います。

色々な作業をしましたが、アドセンスを含み、広告は横幅を広げれば勝手に横並びになります。今後のために覚えておくと役に立つかもです。

今回はらふらくさんとSimpleStock3.1さんの記事が非常に参考になりました。有益な情報を、誠にありがとうございます!!

【関連】「Stinger3」でスマホのサムネイルを角丸にする&影を付ける方法
【関連】「Stinger3」のフォントをメイリオに変更する方法

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

■今週よく読まれている記事たち
hebinuma人気記事ランキングへ

■HEDGEHOG STUDIO公式サイトへ

■当サイトについて
なぜhebinumaを立ち上げたのか

◆こちらの記事もどうぞ

関連記事

WordPressのサイト名が勝手に大文字になっていた原因と解決策

流行りの「Spot.IM」というコミュニティ機能を追加。このブログ内でチャットができるようになった!…ということです。

ブログやってる皆さん、アクセスアップしたいならここ登録しておくといいですよ。

コミュニティ機能「Spot.IM」は外します。いつの日か復活させる時が来るかも。

no image

YouTube動画をgif化してブログ内に埋め込む方法(Chrome編)

「Stinger3」でスマホのサムネイルを角丸にする&影を付ける方法

「Pocket」をTwitter(ツイッター)でも使えるようにする方法

実家でもモリモリ仕事できるように、PC環境をレベル上げしてみた!やっぱデュアルディスプレイはめちゃ効率アップ!!

釣りもネット系も。僕が『ほぼ毎日チェックしているメディアたち』 。

no image

「Stinger3」の追尾型SNSボックスを消す方法

「Pocket」をiPhoneのsafari(サファリ)でも使えるようにする方法

これ考えた人天才すぎ!後で読むことのできる「Pocket」が超ウルトラ便利!!

Windows Live Writer(WLW)で「テーマ更新」する方法

【大量画像】今でも存在する「蛇沼公園」、ここが当サイト hebinuma の由来です

「Stinger3」のフォントをメイリオに変更する方法