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個だけ中寄せ表示する、なんてことも可能。ご存知のとおり。

 【関連記事】

理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

ウィジェットへの設置は自由にできるので、上図では省略。メインカラムにしぼっています。
サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

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

set-double-rectangle_ins1

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

set-double-rectangle_04

set-double-rectangle_05

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

set-double-rectangle_06

 【関連記事】

WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

set-double-rectangle_02

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

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

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

set-double-rectangle_ins2

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

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

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

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

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

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

子テーマの「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番の問題は、こちらの記事で解決できます。

忘れたくないユーザビリティー。収益化と両立しよう。TCDテーマでスマホとパソコンの広告表示を切り替える

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

set-double-rectangle_ins3

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

MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に増やす、減らす、好きな場所へ移動する!

 カスタマイズまとめ

魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう
  4. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  5. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…

関連記事

  1. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

    いまだから、考えるべきこと。音楽制作をしていると、"自分の発するも…

  2. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  3. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  4. favicon-generator_ec
  5. customized-theme-update_ecmg-1-ps

    ワードプレス

    子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と注意点

    もう、逃げなくてもえーんやで。ついにやってきた、WordPre…

  6. analytics-ip-filter_ecmg

    マーケティング

    自分のアクセス痕は残さない。アナリティクスのフィルタで自宅のIPアドレスを除外する方法

    自分の足あとを、残してはならない。サイト運営をしているなら、Goo…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. valuable-content-from-image_ec
  3. theme-change_ecrt
  4. business-books_ecmg
  5. tcd-theme-selection_ecmg-ps
  6. todoist-extension_ecmg

ピックアップ記事

  1. todoist-productivity_ecmg
  2. widgetoon-js-count-jsoon_ecmg
  3. quicktag_ecmg
  4. facebook-page-plugin_ecmg-ps
  5. sns-count-cache_ecmg
  6. gif-animation_ec

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

todoist

掘り出し記事

  1. analytics-ip-filter_ecmg
  2. todoist-share_ec
  3. backup-all-in-auto_ec
  4. pushbullet_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-constitution_ec
  2. todoist-class_ecrt
  3. annotation-image_ecmg
  4. tcd-css-customize_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. spark-tutorial-ecmg
  2. modern-dilemma-ecmg
  3. paradigm-shift-ecmg
  4. irreplaceable-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. blog-contents_ecrt
  2. irreplaceable-ecmg
  3. modern-dilemma-ecmg
  4. reset-button_ecrt
  1. retina_ecmg

    ワードプレス

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP