set-double-rectangle_ecmg

マーケティング

移動したいデスカ?TCDテーマMAGでダブルレクタングル広告を本文直下に設置する2つの方法

TCDテーマ「MAG」では、デフォルトで記事下に広告を設置することができますが・・

set-double-rectangle_01

この場所じゃなくて・・本文直下にもってきたいんス

という希望者がけっこういるようです。ナルホド。こういうことですね。

set-double-rectangle_02

たしかに、広告を表示する場所によって収益性は変わります。メインカラムに限っても「コンテンツの出口にまず、何を持ってくるのか?」順番や選択肢の数はとても重要です。

そこで今回は、【広告を本文直下に横並びに設置する方法】を2種類紹介します。そう、いわゆる「ダブルレクタングル」という配置。なんて格闘技色の高いネーミングなんでしょう。

1つ目の方法はカンタン。2つ目は自由度の高まる方法です。こちらは独自に行うカスタマイズなので、自己責任の上で挑戦してみてください。いや、作業はカンタンなんですけどね。

【MAG】メインカラムの広告設置可能場所

まず、「MAGのメインカラムでは、全部でどんな場所に設置できるのか?」をチラリと見て復習しておきましょう。頭がゴチャッとならないように。

set-double-rectangle_03

これらは全て「TCDテーマオプション」から設定できます。各場所ごとに表示・非表示が選べるのはもちろん、2つ並べずに1個だけ中寄せ表示する、なんてことも可能。ご存知のとおり。

【関連記事】

ウィジェットへの設置は自由にできるので、上図では省略。メインカラムにしぼっています。

ウィジェット設置関連

【方法1】記事中広告機能を利用する

set-double-rectangle_ins1

TCDテーマオプションの「記事ページ」タブ内、「記事ページの広告設定3」に広告コードを入れます。あとはそこに書いてあるショートコードを記事本文の最後に貼り付けるだけ。

set-double-rectangle_04

set-double-rectangle_05

投稿ページ内のクイックタグ、「広告」ボタンをポチッと押すだけでも挿入可能。楽勝です。

set-double-rectangle_06

【関連記事】

set-double-rectangle_02

うまく表示されてます。この方法が一番簡単。それに、記事ごとに広告を表示させるかどうかを選べる、というメリットもあります。ショートコードを貼るかどうかだけ、ですから。

最後に、スマホ表示での注意点について触れています。あわせて確認してください。

【方法2】新しい広告枠をもう一つ作る

set-double-rectangle_ins2

【方法1】はカンタン。でも記事中にも広告表示をしたくなったとき、どうなるでしょう?想像してください。もし本来の使い方をしたくなったとき・・・貼り付けたショートコードの挿入場所を全て!地道に!変える必要が出てきます。

もちろんその時は、本文下のダブルレクタングルを諦めることにもなる。だから理想は、デフォルトで用意されている設置枠とは別に、新しい広告枠を本文直下に作ることができればベスト

そしてこの【方法2】を知ることのメリットは、実は他にもあって・・・スマートフォンでの広告表示の自由度を格段に上げることもできます。まーとにかくいってみましょう。

カスタマイズに必須。「子テーマ」を10分でつくる

今回のようにテーマファイルを直接いじる場合、まずは子テーマの導入をオススメします。10分で戻ってきてください。

子テーマの「style.css」に追記

下の記述を追記します。

/* 広告枠追加 */
#single_banner_area_o { margin:0 50px 30px; }
#single_banner_area_o .single_banner_left { float:left; }
#single_banner_area_o .single_banner_right { float:right; }
#single_banner_area_o img { max-width:100%; height:auto; display:block; }
#single_banner_area_o.one_banner .single_banner_left { float:none; margin:0 auto; }
#single_banner_area_o.one_banner img { margin:0 auto; }
@media screen and (max-width: 670px) {
  #single_banner_area_o { margin:0 0 30px 0; text-align:center; }
  #single_banner_area_o .single_banner_left { float:none; padding:0 0 15px 0; }
  #single_banner_area_o .single_banner_right { float:none; padding:0 0 5px 0; }
  #single_banner_area_o img { max-width:100%; height:auto; display:inline; }
}

2カラムレイアウト使用時に最適化しています。

set-double-rectangle_14

子テーマの「single.php」に追記

下の記述を追記します。

 <div id="single_banner_area_o" class="clearfix">
  <div class="single_banner single_banner_left">
   <div class="align1 mb10 text70">スポンサーリンク</div>
   <div>ここに広告コード</div>
  </div>
  <div class="single_banner single_banner_right">
   <div class="align1 mb10 text70">スポンサーリンク</div>
   <div>ここに広告コード</div>
  </div>
 </div>

ハイライト行の「ここに広告コード」の部分に、任意のコードを貼り付けるだけ。ハイライト行の上にある「スポンサーリンク」行は、AdSenseでなければ不要なので消してしまってください。もちろん、用途に適した好きな文言に置き換えてもOK。

「スポンサーリンク」行に指定しているスタイル【align1 mb10 text70】はTCDテーマにデフォルトで実装されているものです。
これらは、フォントサイズや広告との距離、中寄せ表示など、個人的な好みで付けているだけ。好みに数値を変えたり、不要であれば消してください。

で、追記場所は。

<?php if ($options['show_bookmark']) { ?>
・
・(省略)
・
<?php }; ?>

この記述の上。これでデフォルトのSNSボタン上に表示されます。

set-double-rectangle_02

これだけ。楽勝。

【注意点】スマートフォン表示を最適化する

で。1つ注意点があります。【方法1】【方法2】、どちらをチョイスした人にも伝えておきたいこと。今回の画像例では、設置した広告の大きさは2つとも【レクタングル(大)】でした。大きさは「336×280」。これを画面サイズが小さめのスマートフォンで表示させると・・

set-double-rectangle_07

おぅふ・・・はみ出してます。こりゃマズい。そういえば、テーマオプション内にも推奨サイズが記載されていました。

set-double-rectangle_08

書かれているにはワケがある!ということですね。なので、広告サイズを通常の【レクタングル】に変更する必要があります。サイズは「300×250」。推奨サイズのものです。

Before | After

set-double-rectangle_09

set-double-rectangle_10

小さめサイズのスマートフォンでも。

Before | After

set-double-rectangle_07

set-double-rectangle_11

一般的なサイズのスマートフォンでも。

set-double-rectangle_12

おっけい!

本文下に広告を並べて配置して、無事スマートフォン表示も最適化されました。で、ここからは感覚に個人差のあるだろうお話に入ります。

スマホでもPCでも、もっと自由に配置したい人へ

スマートフォンで、上にちょっとスクロールしてみよう。

set-double-rectangle_12

set-double-rectangle_13

・・うーん。広告だらけの瞬間。

記事下に配置した2つの広告が、そのまま縦に並んでいるわけですね。気にならない人はこれで完成。でも中には、こんなふうに思う人もいるんじゃないでしょうか。

1. スマホでは、本文下の広告を非表示にしたい!

2. スマホでは、もっと他の場所にも設置したい!

3. スマホでは、本文下の広告を1つにしたい!

4. スマホでは、広告サイズをもっと小さいものにしたい!

5. やっぱりPCでは【レクタングル(大)】を並べたい!

1番と2番の問題は、こちらの記事で解決できます。

しかし上の記事だけでは半解決。なぜなら、2番の「もっと他の場所にも設置したい!」には、TCDのオリジナルウィジェット「スマホ用」を使って対応していたから。「スマホ用」ウィジェットは実際便利なんですが、実は設置される場所が決められているんです

set-double-rectangle_ins3

さて、じゃあぜーんぶ解決しましょう。もちろん、今回の作業と、上の関連記事での作業も活かすことになりますユーザビリティー、収益性、デザイン性、全てをまとめて自由に。これからいっそう大切になっていくのはマチガイナイ。もう一歩、こだわるあなたはこちらへ。

カスタマイズまとめ

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方
  2. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  3. Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャー…
  4. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  5. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…

関連記事

  1. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  2. switch-by-the-device_ecmg
  3. retina-weight-saving_ecmg
  4. jpg-gif-png_ecmg
  5. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

  6. theme-manual-update-ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist-tips_ecmg
  2. valuable-content-from-image_ec
  3. retina_ecmg
  4. tcd-theme-user-review_ecmg
  5. tcd-theme-selection_ecmg-ps
  6. extension-tools-for-bloggers_ec

タスク管理で、自己管理。

todoist

人気記事

  1. media-setting_ec
  2. jpg-gif-png_ecmg
  3. todoist-basic_ec-ps
  4. child-theme_ecmg
  5. chrome-full-screen-capture-ecmg
  6. child-theme-mechanism_ecmg-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. sns-count-cache_ecmg2
  2. annotation-image-ecmg
  3. simple-image-sizes_ec-ps
  4. customized-theme-update_ecmg-1-ps
  5. compress-jpeg-png-images-ecmg
  6. firefox-full-screen-capture-ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. screenpresso-capture-ecmg
  2. todoist-design_ec
  3. retina-text-widget-ecmg
  4. screenpresso-initial-setting_ec
  5. facebook-app-id-app-secret-ecmg2
  6. LightShot-Screenpresso_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-basic_ec-ps
  2. jpg-gif-png_ecmg
  3. quicktag_ecmg
  4. gif-animation_ec
  5. spark-tutorial-ecmg
  6. intuitive-custom-post-order_ec

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. tcd-theme-user-review_ecmg
  2. adjust-the-button_ecmg
  3. todoist-tips_ecmg
  4. tcd-mag_ecmg-ps
  5. extension-tools-for-bloggers_ec
  6. tcd-theme-selection_ecmg-ps

人気記事

  1. chrome-full-screen-capture-ecmg
  2. screenpresso-initial-setting_ec
  3. child-theme_ecmg
  4. compress-jpeg-png-images-ecmg
  5. todoist-basic_ec-ps
  6. chrome-font_ecmg-1
  7. child-theme-mechanism_ecmg-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  2. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  5. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
PAGE TOP