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. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  2. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. 簡単で効果的なストレス解消方法。「リセットボタン」で本当のリラックスを呼びだそう…
  5. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  2. description-video_ec
  3. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  4. retina-text-widget_ecrt
  5. tcd-theme-options_ecmg

    ワードプレス

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

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

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

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. todoist-tips_ecmg
  2. todoist-extension_ecmg
  3. adjust-the-button_ecmg
  4. retina_ecmg
  5. todoist_ec
  6. business-books_ecmg
  7. display-speed_ec
  8. tcd-mag_ecmg
  9. extension-tools-for-bloggers_ec
  10. valuable-content-from-image_ec

ピックアップ記事

  1. media-setting_ec
  2. sns-count-cache_ecmg
  3. tcd-theme-widget_ecmg
  4. dash_ecmg
  5. child-theme_ecmg
  6. todoist-constitution_ec
  7. todoist-routine_ecrt
  8. reset-button_ecrt
  9. quicktag_ecmg
  10. chrome-font_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、”モヤ…
  2. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…
  3. Screenpresso(スクリーンプレッソ)を使うなら、や…
  4. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  5. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  2. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  3. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  4. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

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

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
PAGE TOP