最近だとスマホの記事にアクセスすると一番トップ(タイトル上)に広告が出るページもあると思います。
※あれってPCだと出なかったりする人もいます。
ちなみにタイトルの上にメルマガバナーを設置している人もいらっしゃると思います。
ズミのブログで言えばこの部分
ちなみにこの理由はSANGOを作成されたサルカワさんが
ファーストビュー（記事タイトル上の領域）に本文とは関係のないコンテンツが入っていると離脱率が高まることが分かっているため、あえてその位置にウィジェットは用意しておりません。
というように語っておられました。
ということは自力でテーマエディター((style.css)など)をいじっていかないといけません。
そのため今回はSANGOで記事タイトル上に画像や広告を入れる方法を説明させていただきます。
※もっと簡単な方法があればこっそり教えていただけますでしょうか？
Contents
SANGOの記事タイトル上に広告や画像を入れる方法を解説～下準備編～
では、SANGOの記事タイトル上に広告や画像を入れる方法を解説していきたいと思います。
SANGOの子テーマに反映させるためのファイルを入れよう
まずは、SANGOの子テーマに親テーマから該当部分のファイルをコピーしないといけません。
何もいじっていない場合、上記のように子テーマのテーマファイルは２つしかありません。
では行きましょうか。
↓ここから解説
1-1 SANGOの子テーマに反映させるためのフォルダを作ろう
自分が覚えやすいところ(デスクトップとかでOK)に『parts』というフォルダを作ってください。
その中に再度新しいフォルダを作ってその名前は『single』にしてください。
これで準備はOKです。
1-2 SANGO親テーマから該当ファイルをPCへダウンロード
次はSANGOをいれているサーバーにアクセスしていきましょう。
その際利用するのはFTPソフトです。
私は「FFTP」というソフトを使っていますが、人によっては「FileZilla」などを使っている人もいると思います。
まずは自分がブログを入れているサーバーにアクセスしてください。
この辺りは下記を参考にしていただければFFTPの場合はわかりやすいかと思います。
※https://watabonslab.com/moved-from-x-server-to-wpx-cloud/
次は『themes』をダブルクリックしてください。
次は『sango-theme』をダブルクリックしてください。
次は『parts』をダブルクリックしてください。
次は『single』をダブルクリックしてください。
次に『entry-header.php』をクリックして左上の『↓』をクリックしてください。
その際、ダウンロードが開始されるので先ほどデスクトップ上に作った『single』フォルダの中に入れましょう。
※フォルダの指定はC:\Program Files\ffftpの左側に表示されているフォルダで実施出来ます。
これでダウンロードは完了しました。
1-3 SANGOの子テーマにダウンロードしたデータをアップロード
次は先ほどダウンロードしたentry-header.phpをフォルダごとSANGOの子テーマに入れていきます。
やり方は逆ですね。
子テーマが入っている部分を開く際には右側の窓の『一つ上のフォルダへ』を３回ぐらいクリックしてください。
下記の部分まで戻ってきたら、次は『sango-theme-child』をダブルクリックしてください。
この状態でサーバーの子テーマにファイルを導入することが出来るようになりました。
次は左側の窓で先ほど『entry-header.php』を入れた『parts』のフォルダを選択し、『↑』矢印をクリックしてください。
これによって左側のフォルダから右側のフォルダにデータをアップロードしています。
で、ダウンロード出来れば。
以下のように右側(子テーマのファイルの中)に反映されます。
これでステップ１は終了です。
SANGOの記事タイトル上に広告や画像を入れる方法を解説～WordPress～
次は先ほどSANGOの子テーマに入れたentry-header.phpをいじっていきましょう。
２-1 WordPressでSANGOの子テーマにアクセス
WordPressのダッシュボードに行き『外観』→『テーマエディター』を選択してください。
FTPソフトでのダウンロードが上手くいっていると下記のようにさっきまでは表示されなかった『parts』が表示されるようになっています。
次に『parts』→『single』→『entry-header.php』と順にクリックしてください。
そうすると画面が切り替わり、
左上が『SANGO Child: entry-header.php (parts/single/entry-header.php)』に切り替わります。
で、表示された内容をいじっていくという感じなんですが、
ここで1点注意。
デザインが壊れたりする可能性があるのでここで一旦メモ帳などに保存をしておきましょう！
2-2 SANGOの子テーマ(entry-header.php)に画像のHTMLコードを挿入
挿入したい部分はブログの
ここに入れるには選択したファイル内容の
breadcrumb(); //パンくず
?＞
の上の部分(下の画像部分)に挿入したいHtmlコードを入れていきます。
今回はわかりやすいように画像を入れてみましょう。
※あらかじめ画像をメディアに入れてURLを取得しておいてください。
先ほどの部分に画像のHtmlコードを挿入し、これでファイルを更新します。
下記のようの『ファイルの編集に成功しました。』と表示されれば成功です。
先ほどのブログの画面にいってページを更新してみましょう。
挿入した画像がしっかり入っていれば完了です。
2-3 記事タイトル上にバナーを設置したい場合
画像ではなくバナーを設定したい場合はというとｍ
breadcrumb(); //パンくず
?＞
の上に入れるのをバーナーのHtmlコードにすればズミのサイトのようにタイトル上にバーナーを設置出来ます。
バーナーを入れたのが下記になります。
2-4 記事タイトル上にアドセンス広告を入れたい場合
広告を入れたい場合は先ほどと同じで
breadcrumb(); //パンくず
?＞
ここの上にアドセンス広告のhtmlコードをいれれば広告を入れることが出来ます。
また、PCに表示させず、スマホ画面にだけ広告を貼りたいという人は
// スマホで表示させたい内容
＜!–?php else: ?–>
// PCで表示させたい内容
＜!–?php endif; ?–>
アドセンスコードの代わりに上記のコードを入れてください。
実際は
レスポンシブ対応のアドセンス広告のHtmlコード
＜?php else: ?>
＜?php endif; ?>
※一番左側の『<』をあえて大文字にしております。コピペする場合、貼り付ける前でもあとでもいいので『＜』を小文字の『<』に直してください。
というようにPCで表示させたい内容は空白で大丈夫です。
そうすることによってスマホ表示だと広告が表示され、PCでは広告が表示されなくなります。
また、アドセンス広告を設置することによって月収50万円も夢ではありません。
そういったアドセンス広告でのマネタイズ方法をズミのメルマガで紹介していますので、ぜひご覧になってください。
それでは、最後までお読みいただきありがとうございました。
＼10年後の安心を手に入れたいあなたへ／
コメントを投稿するにはログインしてください。