他社広告運用

【SWELL】タイトル上に広告を設置する方法!PCとスマホで分岐配信するには?

SWELLでタイトル上に広告を設置する方法

ブロックエディタ対応の優良テーマ『SWELL』。

私自身とても気に入っていて愛用しているのですが、タイトル上に広告を入れる機能が標準装備されていないのです。(2022年5月現在)

そのため、ここに広告を入れるためにはテーマエディターを直接編集する必要があります。

今回は、そんなタイトル上の広告設置方法についてです。

また、PC表示とスマホ表示で異なる広告を表示させる「分岐配信」の設定方法についても併せてご紹介します。

初心者の方にとっては少し難易度が高めな内容になりますが、この記事を見ながら一つ一つ進めていってくださいね。

\アドセンス以外のクリック型広告を紹介/他社広告 >>無料で受け取る

SWELLのタイトル上とは?

今回広告を設置するのは、個別記事のタイトル上の部分です。

SWELLでタイトル上に広告を設置する方法6

 

他のテーマでは「ウィジェット」から設定できるものもありますが、2022年5月時点SWELLでは設置することができません。

この点は今後の改良に期待しつつ、以下ではテーマエディターを直接編集して広告を設置する方法をご紹介いたします。

テーマエディターを直接編集するリスク

リスク

実際のやり方をご説明する前に、一つ注意点があります。

それは、

テーマエディターの編集は、一つ間違えるとブログが真っ白になる

リスクがあること。

ユミ
ユミ
私も何度かやらかしました・・・

 

特に、一日数千~数万PVを集めるような大きなブログの場合、そのような事態になれば、復旧までの機会損失が甚大なものになってしまいます。

また、復旧が遅れてしまうと、最悪の場合SEO(検索順位)への影響も懸念されます。

そのため、作業は慎重に行うようにしていきましょう。

初心者の方は、この記事に書いてある内容”以外”のことは、決して行わないようにしてください。

可能でしたら、事前にバックアップをとっておくか、もしくはテスト環境で予め動作チェックをしてから進めていくとより安心でしょう。

 

SWELLでタイトル上に広告を設置する方法

本記事での設定方法は、2022年5月現在のものです。

今後テーマが更新された場合、テーマファイルの場所や広告タグの挿入箇所が変更になる可能性があります。

 

 

前置きが長くなりましたが、ここからは実際のやり方を説明していきます。

「外観」▶「テーマエディター」

SWELLでタイトル上に広告を設置する

 

SWELLがテーマ選択されていることを確認し、「parts」▶「single」▶「post_head.php」をクリック。

SWELLでタイトル上に広告を設置する方法2

 

広告を入れる箇所は、以下の画像のところになります。

SWELLでタイトル上に広告を設置する方法3

※行数はバージョンによって異なることがあります。前後の記述を確認し↓

$modified : $date;?>

<div class=”p-articleHead c-postTitle”>

この間の部分です。

 

テーマエディターを触る前に、ブラウザの別タブで同じく「post_head.php」を開いておくことを推奨します。

ユミ
ユミ
このようにすることで、万が一更新時にエラーが起きても、別タブの方から上書きすれば元の状態に戻すことができます。

 

広告を入れる箇所を改行し、

SWELLでタイトル上に広告を設置する方法4

 

広告タグを貼り付けましょう。

SWELLでタイトル上に広告を設置する方法5

 

これで広告の設置は完了ですが、このままだとタグのサイズによっては広告が画面左側に寄ってしまいます。

そのため、センタータグを入れるようにしていきましょう。

入れるタグ:<center></center>

SWELLでタイトル上に広告を設置する方法8

 

このようにすると、タイトル上中央にきれいに表示されますが、ただタイトルの文字と広告がピッタリくっついてしまっているのも気になります↓

SWELLでタイトル上に広告を設置する方法9
ユミ
ユミ
このままでも悪くはないけど、ちょっと気持ち悪い…

 

そこで、改行タグを入れて調整しておきましょう。

入れるタグ:<br></br>

SWELLでタイトル上に広告を設置する方法10

 

最後に忘れずに「ファイルを更新」ボタンを押せば・・・

SWELLでタイトル上に広告を設置する方法7

 

このように、きれいな形で記事タイトル上に広告が設置されます!

SWELLタイトル上広告

 

この時点で、万が一「画面が真っ白に!」ということになってしまえば、別タブで開いているテーマファイルを上書きして元に戻しましょう。

ユミ
ユミ
別タブで開いていると、すぐに前の状態に復元できるので安心ですね。

以上で、タイトル上に広告が設置できました!

PCとスマホで別々の広告を分岐配信するには?

ここからは、もう一歩踏み込んでPCとスマホ表示で、異なる広告を設置したい場合のやり方です。

PCで記事を見た場合はタイトル上にAの広告を表示させ、スマホで見た場合は同じ箇所にBの広告を表示させる方法ですね。

このような配信方法は、「分岐配信」と言われています。

やり方はとっても簡単で、分岐配信を指定したコードを使用するだけです!

以下のコードをそのままコピーしてください。

<br><center><?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?></center></br>
ユミ
ユミ
センタータグと改行タグも設定済みです!

 

これをそのまま、先ほどの箇所に貼り付けます。

SWELLでタイトル上に広告を設置する方法11

そして、

  • // スマホで表示させたい内容 の箇所に、スマホ用の広告タグを
  • // PCで表示させたい内容 の箇所に、PC用の広告タグを

 

それぞれ貼り付けます。

 

例えばスマホの場合、「// スマホで表示させたい内容」を丸々削除して、スマホ用のタグに置き換えるイメージです↓

SWELLでタイトル上に広告を設置する方法12

 

同じように、PCにも表示させたい広告タグを設置します。

最後に、忘れずに「ファイルを更新」ボタンを押してきましょう。

ユミ
ユミ
これで、分岐配信の設定は完了です!

 

スマホのみ、PCのみにそれぞれ表示させたい場合は、それぞれ以下のコードを使用されるといいでしょう。

◆スマホのみに広告を表示させる

<br><center><?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php endif; ?></center></br>

 

◆PCのみに広告を表示させる

<br><center><?php if ( !wp_is_mobile() ) : ?>
 // PC で表示させたい内容
<?php endif; ?></br></center>
 

(注)テーマの更新がかかったら設定がリセットされます

ここまで、SWELLでの広告タグの設定方法を解説してきましたが、最後に一つ注意点があります。

それは、

テーマの更新がかかると、上の設定がリセットされてしまう

ということ。

 

上の方法は、直接親テーマを触りにいっているので、テーマそのものに更新がかかると設定内容が反映されない(=初期化されてしまう)のです。

そのため、子テーマ側で設定しておく方法もあります。

【SWELL】子テーマの作り方!親テーマのファイルをコピーする方法も
【SWELL】子テーマの作り方!親テーマのファイルをコピーする方法もWordPressのテーマのほとんどは、「親テーマ」「子テーマ」セットで機能させることができます。 初心者の方にとってはこれらの概念は...
  • 親テーマ…テーマの元となる部分(定期的に更新される)
  • 子テーマ…カスタマイズ用のテーマ。親テーマを更新しても子テーマの設定が上書きされる仕様となっているため、カスタマイズした設定は残ります。

 

ブログの外観は、

親テーマ + 子テーマ

で決まります。

親テーマの内容の上に、子テーマが上書きされる仕組みになっているんですね。

だから、子テーマ側で上の設定をしておけば、親の方に更新がかかっても子が上書きされ、設定が保持されます。

※子テーマのダウンロードは、SWELLの公式サイトから可能です。

子テーマのダウンロードはこちら

あとがき

今回は、SWELLでタイトル上の広告を設定する方法についてでした。

初心者の方にとっては少しややこしかったかもしれませんが、一つ一つ手順を確認していけばOK!

ただ、テーマエディターの更新はリスクがあることも事実です。

そのため、必ず別タブでも同じ画面を開いておいて、設定がうまくいかなければすぐに元に戻せるようにしておきましょう。

それでも、万が一ブログの表示がおかしくなってしまった場合は、サーバー側から復元することも可能です。

エックスサーバー&wpX Speedそれぞれの復元方法を解説!プラグインやWordPressの更新後、不具合が出てしまったという方も少なくないのではないでしょうか? 不具合の原因が判明していれば、...

 

ただし、復元は「1日前」「一週間前」といった”日単位”で戻すことになるため、直近で更新した記事は消えてしまいます。

ユミ
ユミ
だから、これを使うのは本当に最終手段ですね…

別タブで開いておけばこのような方法を使うことはありませんが、最悪の場合はこのような方法があることも知っておくと安心でしょう。

 


メルマガのバックナンバーを読む>>



【期間限定】ブログで月100万を叶えたノウハウを受取る

他にも…
◆ 本当に稼げる他社広告5選
◆ 図解付き!ブログの
開設マニュアル


これらを無料でプレゼント中!

つい数年前まで普通のOLだった私が、たった一つのブログを始めたことで人生が変わりました。

初心者から始めたブログで、4ヶ月で月100万円の収入を叶え、今では時間や場所に縛られない自由なフリーランスとして働いています。

  • 好きな場所、好きな時に働きたい
  • 自宅やカフェで、PC一台で仕事をすることに憧れがある
  • 文章を書く仕事で、月20万円以上を稼ぎたい
  • お金を気にせずに旅行したり、経済的な不安から解放されたい

そんなあなたらしい人生を叶えるために、未経験からブログで収入を得る方法を解説したマニュアルを無料で配布しています。

初めて挑戦される方でも、安心してブログを開設できるよう、図解付きの手順書も併せてプレゼント中!

メルマガ登録者さん限定で、期間限定で配布していますが、いつ有料化するかわかりませんので、今のうちにお受け取りください。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、プレゼントが手に入ります。


今すぐ無料プレゼントを受け取る

ABOUT ME
ユミ
初心者向けのブログ術&アドセンスの収益化をメインに発信中/2019年に複数のクリック型広告を組み合わせる「他社広告戦略」を開発/これまでに約50種類の広告を試し、同じアクセス数でもブログの収益性を2倍以上に改善した事例多数/月収10~420万円の収入を得るコンサル生さんを輩出中/ブログで収入を得たい初心者の方へ、無料のメールマガジンを配信しています
未経験からブログで月収10万円を叶える方法▶
見てみる
未経験からブログで月収10万円を叶える方法▶
見てみる