あずきです🐥
WordPressブログにおける…
各種「広告コード」の基本的な貼り方（＝挿入手順）
について、ブログ初心者さん向けに1から解説していきます
大きく2つのパターンです
- 広告コードを「手動挿入」する手順（「クラシックエディタ」における解説です）
- 広告コードを「自動挿入」する手順（WordPressテーマ「AFFINGER5」における解説です）
さっそく見ていきましょー🐥
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
- ターゲットに合わせた圧倒的な最適化！
- SEO対策と広告収入UPの機能が標準装備！
- 面倒なカスタマイズも「クリック1つ」で簡単・時短！
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
【はじめに①】広告コードの取得はすでに済ませていますか？【各種ASPの登録＆提携審査 → プログラム提携＆広告コードの取得】
まず本題へ入る前に、これからWordPressブログに貼ろうと思っている広告について…
その「広告コード」自体はすでに取得している
という前提で解説していきます
もしも「え、広告コードなんて取得してないけど…」という場合は、下記の記事でわかりやすく解説しています
▼ 主要ASPの新規登録はこちら ▼
-
【ブログ】おすすめなASPサービス「8つ」と、新規登録の手順【アフィリエイト広告】
続きを見る
▼ 主要ASPごとの、広告コードの取得はこちら ▼
-
「Googleアドセンス」3つの広告タイプの使い分け ＆ 各広告リンクの取得方法【ディスプレイ広告・インフィード広告・記事内広告】
続きを見る
-
Amazonアソシエイトで、広告コードを取得する手順【ブログ／アフィリエイト】
続きを見る
-
楽天アフィリエイトで、広告リンクを作成する（コードの取得）手順【ブログ／アフィリエイト】
続きを見る
-
もしもアフィリエイトで、広告の「プログラム提携」と「コード取得」をする手順【ブログ／アフィリエイト】
続きを見る
-
afbで、広告の「プログラム提携」と「コード取得」をする手順【ブログ／アフィリエイト】
続きを見る
-
A8.netで、広告の「プログラム提携」と「コード取得」をする手順【ブログ】
続きを見る
-
バリューコマースで、広告の「プログラム提携」と「コード取得」をする手順【ブログ】
続きを見る
【はじめに②】WordPressブログへの広告の貼り方は、大きく2パターン【手動 or 自動】
もう1点、大事な補足です
そもそもWordPressブログへの各種広告コードの挿入方法というのは、大きく「2パターン」にわかれます
- パターン①：手動挿入
- パターン②：自動挿入
まず「手動挿入」というのは、広告を載せたい「1つ1つの記事ごと」に、手動でコードを貼っていく方法です
一方で「自動挿入」というのは、「全記事」の特定エリアに、コードが自動挿入されるよう設定していく方法になります
この2パターンの使い分けとしては…
- 「記事ごと」の好きな場所に、（その都度）別々の広告を貼りたい場合 ⇒ 手動挿入
- 「全記事」の特定エリアに、一括して同じ広告を貼りたい場合 ⇒ 自動挿入
こんなふうにイメージしておけば、とりあえずはOKです
例えば！
よくブログで見かける「各見出し前」や「記事おわり」のアドセンス広告とかだと、「自動挿入」が圧倒的に便利です
ということで、ここから本題です🐥
【本題】WordPressブログにおける、各種「広告コード」の基本的な貼り方【手動と自動で2パターン】
パターン①：広告コードを「手動」で挿入
注意
今回の解説は、WordPressの旧エディタ「クラシックエディタ」の場合における手順になります
新エディタ「グーテンベルグ」の場合は対象外になりますので、ご了承ください
「クラシックエディタとグーテンベルグってなに…？」という方はこちら ↓
-
WordPressの「グーテンベルグ＆クラシックエディタ」とは？どっちがおすすめ？【ブログ記事編集の新エディタ・旧エディタ】
続きを見る
それでは本題の手順です
「手動挿入」の場合は、結論から言ってしまうと…
- 記事の編集画面で、「テキスト」モードに切り替える
- 広告を載せたい箇所に、その広告コードを貼りつける
これだけです
実際に画像つきで見ていきますね🐥
今回は例として…
↑ このオレンジ枠の部分に、広告を貼ってみたいと思います
記事の編集画面を開いたら…
↑ 右上の、「テキスト」というタブをクリックしましょう
これで、編集モードが「ビジュアル」から「テキスト」へと切り替わります
「ビジュアルとテキストって何？」という方は、↓ をどうぞ♪
-
WordPressの「ビジュアルエディタ＆テキストエディタ」とは？【クラシックエディタにおけるブログ記事編集】
続きを見る
「テキスト」モードに切り替えたら…
↑ 広告を貼る予定の箇所を探して、その1つ上の行から…
↑ Enterキー で1行空け、そこに…
↑ 取得しておいた広告コードを、丸々貼りつけましょう
コードを貼りつけたら…
↑ 右上の「ビジュアル」タブをクリックで、編集モードを「ビジュアル」に戻してOKです
これでもう広告は貼れています🐥
さきほどの行を改めて「ビジュアル」モードで見てみると…
↑ バナー広告が反映されてます（便宜上モザイクをかけてます）
今回はバナー広告（＝「画像」タイプの広告）を例に解説しましたが、「テキスト」タイプの広告でもやり方はまったく同じです
注意ポイント
実際にブログ上に反映されるまでには、多少時間がかかります
「キャッシュ削除」と「パーマリンク設定の再保存」をしたうえで、数十分ほど置いてからチェックしてみましょう
簡単でしたね♪
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
広告コードを「自動」で挿入
ブログ広告は、「自動挿入」の機能を使いこなすことで、「手動挿入」の100倍は平気で楽になります
ただこの自動挿入の機能は、使用する「WordPressテーマ」によって…
- 機能そのものの有無
- 具体的な機能の中身
が変わってきます
このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における、広告コードの「自動挿入」機能については、下記の通り🐥
設置場所として代表的な、「3つ」の機能をご紹介します
全記事の、「各見出し前」へアドセンス広告を自動設置する手順です ↓
-
AFFINGER5で、アドセンス広告を「n番目の見出し前」に自動で挿入する手順【ブログ】
続きを見る
全記事の、「記事おわり」へアドセンス広告を自動設置する手順です ↓
-
AFFINGER5で、アドセンス広告を「記事おわり」に自動で挿入する手順【PC並列／スマホ単体】
続きを見る
「記事一覧」エリアへ、アドセンス広告を自動設置する手順です ↓
-
AFFINGER5で、アドセンスの「インフィード広告」を記事一覧に挿入する手順【ブログ】
続きを見る
ちなみに、上記の方法以外にも…
- アドセンス広告に限らず
- かつ、「好きなエリア」へのコード挿入を簡単に行えて
- かつ、挿入後の「差し替え」や「削除」も飛躍的にラクになる
そんな、超おすすめな機能もあります
ズバリ…
- タグ管理
という機能
ブログで広告を貼るようになったら、個人的には「タグ管理を使わないのは本当に考えられない」と断言できるくらい…
そのくらい便利な機能です
くわしくはこちら ↓
-
【超時短】ブログの「タグ管理」機能とは？仕組み＆使い方から、メリット＆デメリットまで【WordPress】
続きを見る
-
AFFINGER5の超時短ツール「STINGERタグ管理プラグイン3」の導入方法【ダウンロード＆解凍／インストール＆有効化】
続きを見る
おしまい♪
あずき（Twitter：@azuki_rinrin）
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
- ターゲットに合わせた圧倒的な最適化！
- SEO対策と広告収入UPの機能が標準装備！
- 面倒なカスタマイズも「クリック1つ」で簡単・時短！
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^