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. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  2. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  3. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  4. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  5. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…

関連記事

  1. mergely-ecmg

    ワードプレス

    「違い」を調べる神ツール。テキストファイルの差分比較、合併ができるMergelyの使い方

    神のツールを手に入れた男。遠い昔の話。正直者の男の目の前に、ある2…

  2. tcd-theme-selection_ecmg-ps
  3. gif-animation_ec

    WEBデザイン

    ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

    色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画…

  4. facebook-app-id-app-secret-ecmg2

    マーケティング

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

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

  5. retina-logo_ec

    ワードプレス

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

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

  6. feedly-count-problem_ecmg

    ワードプレス

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

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

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

特集記事

  1. retina_ecmg
  2. valuable-content-from-image_ec
  3. todoist-extension_ecmg
  4. adjust-the-button_ecmg
  5. todoist_ec
  6. improvement-flow_ecmg

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

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. child-theme-mechanism_ecmg-ps
  3. chrome-font_ecmg-1
  4. jpg-gif-png_ecmg
  5. chrome-full-screen-capture-ecmg
  6. media-setting_ec

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

tcd-mag

ピックアップ記事

  1. annotation-image-ecmg
  2. facebook-page-plugin_ecmg-ps
  3. child-theme-mechanism_ecmg-ps
  4. firefox-full-screen-capture-ecmg
  5. original-share-button_ecmg-ps
  6. todoist-routine_ecrt

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

retina-os-solution

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. feedly-count-problem_ecmg
  3. screenpresso-capture-ecmg
  4. backup-all-in-auto_ec
  5. pushbullet_ec
  6. todoist-re-schedule_ec

ゆっくり、フシギな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. chrome-full-screen-capture-ecmg
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. simple-image-sizes_ec-ps
  5. todoist-class_ecrt
  6. gif-animation_ec

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. todoist-tips_ecmg
  2. todoist-extension_ecmg
  3. retina_ecmg
  4. improvement-flow_ecmg
  5. extension-tools-for-bloggers_ec
  6. tcd-theme-user-review_ecmg

人気記事

  1. child-theme_ecmg
  2. compress-jpeg-png-images-ecmg
  3. chrome-font_ecmg-1
  4. todoist-basic_ec-ps
  5. media-setting_ec
  6. child-theme-mechanism_ecmg-ps
  7. jpg-gif-png_ecmg

最近の記事

  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. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  3. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  4. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. tcd-mag_ecmg-ps

    ワードプレス

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