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. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  2. FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面…
  3. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  4. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…

関連記事

  1. meta-seo-inspector_ecmg

    マーケティング

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

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

  2. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  3. tcd-theme-selection_ecmg-ps
  4. child-theme-mechanism_ecmg-ps

    ワードプレス

    WordPressで子テーマを作る際に知っておくべき仕組みと注意点

    知っとかないと、きっと困る。WordPressでカスタマイズをする…

  5. annotation-image-ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

  6. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

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

特集記事

  1. display-speed_ec
  2. valuable-content-from-image_ec
  3. tcd-theme-selection_ecmg-ps
  4. todoist_ec
  5. improvement-flow_ecmg
  6. todoist-extension_ecmg

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

todoist

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. screenpresso-initial-setting_ec
  3. child-theme_ecmg
  4. media-setting_ec
  5. todoist-basic_ec-ps
  6. compress-jpeg-png-images-ecmg

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

tcd-mag

ピックアップ記事

  1. chrome-font_ecmg-1
  2. facebook-page-plugin_ecmg-ps
  3. firefox-full-screen-capture-ecmg
  4. todoist-class_ecrt
  5. media-setting_ec
  6. todoist-constitution_ec

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

retina-os-solution

掘り出し記事

  1. favicon-generator_ecmg
  2. pushbullet_ec
  3. mailbox-goodbye-newapp_ec
  4. retina-os-solution_ecmg
  5. todoist-re-schedule_ec
  6. analytics-ip-filter-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. gif-animation_ec
  2. customized-theme-update_ecmg-1-ps
  3. sns-count-cache_ecmg2
  4. widgetoon-js-count-jsoon_ecmg
  5. chrome-font_ecmg-1
  6. tcd-css-customize_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. adjust-the-button_ecmg
  3. extension-tools-for-bloggers_ec
  4. valuable-content-from-image_ec
  5. tcd-theme-selection_ecmg-ps
  6. tcd-theme-user-review_ecmg

人気記事

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

最近の記事

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

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

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

    ワードプレス

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

    ワードプレス

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