ブロックエディタ対応の優良テーマ『SWELL』。
私自身とても気に入っていて愛用しているのですが、タイトル上に広告を入れる機能が標準装備されていないのです。（2022年5月現在）
そのため、ここに広告を入れるためにはテーマエディターを直接編集する必要があります。
今回は、そんなタイトル上の広告設置方法についてです。
また、PC表示とスマホ表示で異なる広告を表示させる「分岐配信」の設定方法についても併せてご紹介します。
初心者の方にとっては少し難易度が高めな内容になりますが、この記事を見ながら一つ一つ進めていってくださいね。
目次
SWELLのタイトル上とは？
今回広告を設置するのは、個別記事のタイトル上の部分です。
他のテーマでは「ウィジェット」から設定できるものもありますが、2022年5月時点SWELLでは設置することができません。
この点は今後の改良に期待しつつ、以下ではテーマエディターを直接編集して広告を設置する方法をご紹介いたします。
テーマエディターを直接編集するリスク
実際のやり方をご説明する前に、一つ注意点があります。
それは、
テーマエディターの編集は、一つ間違えるとブログが真っ白になる
リスクがあること。
特に、一日数千～数万PVを集めるような大きなブログの場合、そのような事態になれば、復旧までの機会損失が甚大なものになってしまいます。
また、復旧が遅れてしまうと、最悪の場合SEO（検索順位）への影響も懸念されます。
そのため、作業は慎重に行うようにしていきましょう。
可能でしたら、事前にバックアップをとっておくか、もしくはテスト環境で予め動作チェックをしてから進めていくとより安心でしょう。
SWELLでタイトル上に広告を設置する方法
今後テーマが更新された場合、テーマファイルの場所や広告タグの挿入箇所が変更になる可能性があります。
前置きが長くなりましたが、ここからは実際のやり方を説明していきます。
「外観」▶「テーマエディター」
SWELLがテーマ選択されていることを確認し、「parts」▶「single」▶「post_head.php」をクリック。
広告を入れる箇所は、以下の画像のところになります。
※行数はバージョンによって異なることがあります。前後の記述を確認し↓
$modified : $date;?>
<div class=”p-articleHead c-postTitle”>
この間の部分です。
広告を入れる箇所を改行し、
広告タグを貼り付けましょう。
これで広告の設置は完了ですが、このままだとタグのサイズによっては広告が画面左側に寄ってしまいます。
そのため、センタータグを入れるようにしていきましょう。
入れるタグ：<center></center>
このようにすると、タイトル上中央にきれいに表示されますが、ただタイトルの文字と広告がピッタリくっついてしまっているのも気になります↓
そこで、改行タグを入れて調整しておきましょう。
入れるタグ：<br></br>
最後に忘れずに「ファイルを更新」ボタンを押せば・・・
このように、きれいな形で記事タイトル上に広告が設置されます！
この時点で、万が一「画面が真っ白に！」ということになってしまえば、別タブで開いているテーマファイルを上書きして元に戻しましょう。
以上で、タイトル上に広告が設置できました！
PCとスマホで別々の広告を分岐配信するには？
ここからは、もう一歩踏み込んでPCとスマホ表示で、異なる広告を設置したい場合のやり方です。
PCで記事を見た場合はタイトル上にAの広告を表示させ、スマホで見た場合は同じ箇所にBの広告を表示させる方法ですね。
このような配信方法は、「分岐配信」と言われています。
やり方はとっても簡単で、分岐配信を指定したコードを使用するだけです！
以下のコードをそのままコピーしてください。
<br><center><?php if ( wp_is_mobile() ) : ?> // スマホで表示させたい内容 <?php else: ?> // PCで表示させたい内容 <?php endif; ?></center></br>
これをそのまま、先ほどの箇所に貼り付けます。
そして、
- // スマホで表示させたい内容 の箇所に、スマホ用の広告タグを
- // PCで表示させたい内容 の箇所に、PC用の広告タグを
それぞれ貼り付けます。
例えばスマホの場合、「// スマホで表示させたい内容」を丸々削除して、スマホ用のタグに置き換えるイメージです↓
同じように、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でタイトル上の広告を設定する方法についてでした。
初心者の方にとっては少しややこしかったかもしれませんが、一つ一つ手順を確認していけばOK！
ただ、テーマエディターの更新はリスクがあることも事実です。
そのため、必ず別タブでも同じ画面を開いておいて、設定がうまくいかなければすぐに元に戻せるようにしておきましょう。
それでも、万が一ブログの表示がおかしくなってしまった場合は、サーバー側から復元することも可能です。
ただし、復元は「１日前」「一週間前」といった”日単位”で戻すことになるため、直近で更新した記事は消えてしまいます。
別タブで開いておけばこのような方法を使うことはありませんが、最悪の場合はこのような方法があることも知っておくと安心でしょう。
【期間限定】ブログで月100万を叶えたノウハウを受取る
他にも…
◆ 本当に稼げる他社広告5選
◆ 図解付き！ブログの開設マニュアル
これらを無料でプレゼント中！
つい数年前まで普通のOLだった私が、たった一つのブログを始めたことで人生が変わりました。
初心者から始めたブログで、4ヶ月で月100万円の収入を叶え、今では時間や場所に縛られない自由なフリーランスとして働いています。
- 好きな場所、好きな時に働きたい
- 自宅やカフェで、PC一台で仕事をすることに憧れがある
- 文章を書く仕事で、月20万円以上を稼ぎたい
- お金を気にせずに旅行したり、経済的な不安から解放されたい
そんなあなたらしい人生を叶えるために、未経験からブログで収入を得る方法を解説したマニュアルを無料で配布しています。
初めて挑戦される方でも、安心してブログを開設できるよう、図解付きの手順書も併せてプレゼント中！
メルマガ登録者さん限定で、期間限定で配布していますが、いつ有料化するかわかりませんので、今のうちにお受け取りください。
ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、プレゼントが手に入ります。
