【図解】WordPressでアフィリエイト広告を設置する方法と位置調整。Gutenbergでの広告の貼り方やリンクが貼れない場合の対処方法も紹介

WordPressで広告を設置する方法とリンクが貼れない場合の対処方法WordPressの始め方や使い方まとめ

今回はWordPressの広告を貼る方法や位置調整(中央寄せや左寄せ、余白など)を色々紹介してみたいと思います。

また広告やリンクが貼れない、コードが表示されてしまって上手く表示できないなどの対処方法も紹介していきます。

基本的にアドセンス広告とは少し違う部分があるので、WordPressに「アドセンス広告」を貼る場合はこちらの記事をどうぞ。

関連WordPressにアドセンス広告を設置する方法【図解】

※広告探しに個人的におすすめのASPはこちらの記事をどうぞ!

初心者におすすめのアフィリエイトASPと選び方
アフィリエイトを始めるにあたって必要になるのが広告なんですが、その広告を扱うためにはASPへの無料会員登録が必要になります。 今回はアフィリエイトに必要な仲介役ASPと評判の良いおすすめのASPを紹介していきます。 アフィリ...
スポンサーリンク

WordPressのエディタによってHTMLや画像、広告の挿入方法が違うので先に確認を

まず、WordPress 5.0から新エディタ「Gutenberg(グーテンベルク)」が採用されてデフォルトのエディタになりました。

Gutenbergはブロックという単位で文章を作っていきます。見出し、段落、リスト、画像、引用など全部ブロック単位で記事を作成していく感じですね。

グーテンベルクでの記事編集

旧エディタは「ビジュアルエディタ」と「テキストエディタ(HTML)」を切り替えて使うタイプでした。

ビジュアルエディタとテキストエディタ

旧エディタの方が使い慣れている方は「Classic Editor」というプラグインを使えばこの旧エディタを使うことができます。

旧エディタで広告を貼る手順

旧エディタで広告を貼るのは簡単です。

テキストエディタに切り替えて広告のコードを貼るだけです

WordPressに広告を貼る方法7

テキストエディタに切り替えずにビジュアルエディタまま広告コードを貼り付けるとごちゃごちゃコードはそのまま表示されて広告が表示されません。

試しにビジュアルエディタでコードを貼り付けてプレビューで見るとコードがそのまま表示されてます。

WordPressで広告リンクが貼れない場合の対処方法1

WordPressで広告リンクが貼れない場合の対処方法2

という事で広告のコードなどごちゃごちゃしたコード(HTML)を貼る時は「テキストエディタ」に切り替えて貼り付けて下さい

もしくはビジュアルエディタでもコード挿入ができるプラグインなどを利用すればエディタを切り替えずに広告を貼ることも可能です。

WordPressのデフォルトのエディタ「Gutenberg(グーテンベルク)」で広告を貼る手順

Gutenberg(グーテンベルク)で広告を貼る場合は記事作成中に「+」を押して「フォーマット」⇒「カスタムHTML」を選択します。

WordPressに広告を貼る方法1

入力欄が出てくるのでそこに広告のコードを入れます(バナー用でもテキスト用でもOKです)。

WordPressに広告を貼る方法2

貼り付けたら「プレビュー」などでちゃんと表示されるか確認してみて下さい。

WordPressに広告を貼る方法6

ちなみにGutenbergには「再利用ブロックに追加」しておけば名前をつけて同じ広告を次回簡単に呼び出して使うことができます。

WordPressに広告を貼る方法4

次回再利用したい場合に「+」を押して「再利用可能」という欄から再利用ブロックを追加するだけでいつでも呼び出しできます。

WordPressに広告を貼る方法5

広告の位置や余白を調整したい場合

画像広告(バナー)の位置調整(左寄せ、中央寄せや余白の調整)がしたいという場合には広告の設置場所に名前をつけておいて、CSS(スタイルシート)で位置調整をします。

試しに「content-ad」という名前で広告を設置する場合はこんな感じで広告を設置します。

■記事投稿(テキストエディタやカスタムHTML)で挿入。

<div class="content-ad">
ここに広告のコード
</div>

という感じで設置をしておけば広告の設置場所に「content-ad」という名前をつけた事になります(英数字の半角で好きな名前でOKです)。

名前をつけた部分はスタイルシートで位置調整する事ができます(バナー設置する場合など)。

■子テーマのスタイルシート(CSS)に記述。

WordPressの管理画面から「外観」⇒「テーマエディタ」⇒「スタイルシート (style.css)」内に追加していきます(一番下に追加でOK)。

先程「content-ad」というクラス名をつけたので

.content-ad {
  text-align:center;
  margin: 20px 0px 20px 0px;
}

みたいな感じですね。CSSで記述する場合は「.クラス名{ }」って感じで真似して書いてみて下さい。

  • text-align:center(中央寄せ)
  • text-align:left(左寄せ)
  • margin(上、右、下、左に余白)

marginは時計周りに余白を調整できます。上記の例だと上と下に20px余白を作るという位置調整ですね、上下のコンテンツと間が狭い場合にはここの数値を大きくすればOKです。

WordPressの条件分岐を勉強したらデバイス別の位置調整も可能です。

広告を横並びで2つ並べたい場合(レクタングル)

WordPressで広告の横並びダブルレクタングル
↑こんな感じで横並びにしたい場合。

記事中の広告を横並びにする場合もそれぞれの場所にクラス名を付けて位置調整をします(スマホでは縦並びになります)。

広告だけでなくて画像とか別の物でも可能ですが、コンテンツ部分(記事本文)の横幅が十分でないと横並びにはなりませんので注意。

横幅が分からない?とりあえずやってみると良いです。

■記事投稿(テキストエディタもしくはカスタムHTML)で挿入。

<div class="ad-box-main">
<div class="ad-box-left">
広告のコード(左)
</div>
<div class="ad-box-right">
広告のコード(右)
</div>
</div>

■スタイルシート(CSS)

/* 横並び広告全体部分 */
.ad-box-main {
  display: flex; /* 横並びにするコード */
  justify-content: space-around ; /* 広告スペース内の自動位置調整 */
  margin-top:20px; /* 広告の上に余白 */
  margin-bottom:20px; /* 広告の下に余白 */
}

※サイトの横幅が足りない場合は横並びなりません。

CSSが反映されない場合は再読み込み(CtrlとF5を一緒に押す)、キャッシュの削除も試してみて下さい。

自分のブラウザで反映されないけど、別のブウウザで表示してみて上手く反映されていればキャッシュ(以前のデータ)がブラウザに残っているだけです。

WordPressのサイドバーに広告を設置する場合

サイドバーのサイズは横幅が320pxくらいのテーマがほとんどなので横幅300pxの広告がおすすめ。

WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーに「テキスト」を追加します。

WordPressにアドセンス広告を設置する方法-8

「テキストエディタ」を選択しておいて以下のように広告のコードを入れます。

後から位置調整できるように「side-ad」という名前を付けてます。

<div class="side-ad">
ここに広告のコード
</div>

WordPressのサイドバー広告を設置する手順

サイドバーの広告は上下の余白と中央寄せだけでOKです。CSSの一番下に追加していきます。

■スタイルシート(CSS)に追加

/* サイドバー広告位置調整 */
.side-ad {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align:center;
}

記事タイトル周辺や記事下など好きな場所に広告表示したい場合

自分の好きな位置に広告を貼りたいという場合もあると思いますが、サイトの構成自体がテーマによって全て違います。

そのため、広告のコードの挿入が簡単なテーマを利用することをおすすめします。

例えば無料テーマのCocoonだとウィジェットのページから好きなページに広告を挿入できます。

WordPressに広告を貼る方法8

それぞれの広告がどの記事・カテゴリーで表示・非表示など細かい設定まで簡単にできてしまうのでHTMLとかCSSとか苦手な方は無料テーマCocoonがおすすめです。

↓広告探しに個人的におすすめのASPはこちらの記事をどうぞ!

初心者におすすめのアフィリエイトASPと選び方
アフィリエイトを始めるにあたって必要になるのが広告なんですが、その広告を扱うためにはASPへの無料会員登録が必要になります。 今回はアフィリエイトに必要な仲介役ASPと評判の良いおすすめのASPを紹介していきます。 アフィリ...

以上WordPressに広告を設置する方法やリンクが貼れない場合の対処方法でした。

コメント

タイトルとURLをコピーしました