Diverで作成したアフリエイト広告が人気な理由、画像付き解説
当サイトがDiverで作成した広告を紹介する。
共通コンテンツからアイコンボックスで作成していきます。
classic EditorにはないDiverアイコンボックスがあります、Gutenbergに新し追加されています。
目立つ広告、見られる広告、気になる広告が簡単に、Diver使用している方は作成できちゃう。
wordpressテーマDiverはご存知でしょうか、SEOにも強くwordpressテーマでは人気テーマの1つです。
その中でアフリエイトに適しているwordpressテーマDiver。
テーマの中に共通コンテンツ機能が装備されていて、記事やコンテンツを作成すると一度に複数のコンテンツに表示されるんです。
設定も簡単でショートコードをコンテンツ内に記述するだけ！
今回は共通コンテンツを使用してアフリエイト広告を作成
Diverで作成したアフリエイト広告が人気な理由
いきなりですが、作成した結果です。
PC画面
3位スバルの公式サイトへのボタンの位置がズレていますが気にしないで！
最終的には並んで見えます、記事下にある所で確認して見てください。
あまり見かけない広告だと思いませんか？
広告はランキング形式にDiverで作成
PCではグリッドレイアウトなしとグリッドレイアウト2分割を使用。
スマホ画像
グリッドレイアウトの設定で2列目表示も可能です。
スマホ表示もPC同様に表示可能ですが画像が2分割され縮小されるので見にくいので、
スマホで見ると縦に配列しています。
Diver広告が人気な理由
Diver広告が人気な理由、1
Diver広告が人気な理由
- 他のサイトでは見かけない形式が作成できる
- 一度作成すると複数のコンテンツに設置可能
- 広告ON・OFFが簡単
Diver広告が人気な理由、2
スマホで記事を確認して見ると一部、
他社の広告も同じレイアウトをマネて広告表示されてています。
他社広告1
当サイト
他社広告2
広告レイアウトが参考にされている ＝ マネされるほど ＝ 人気の理由
画像付き解説
Diverの機能は多機能で初心者は少し難易度が高いと言われていますが、そうでもないです。
簡単にサクッとやって行きましょう。
この記事を見てマネて慣れてしまえば次回は素早くできる様になります。
共通コンテンツ
共通コンテンツとは
予め共通コンテンツで作成し
投稿画面にショートコードを追加することで指定した共通コンテンツを表示可能です。いくつでも必要な投稿画面に！
簡単説明
1つのコンテンツを使い回しができるって事！
作成概要
エディタの変更と画像の用意を除いて、4手順になります。
- 1、Classic EditorからGutenbergに変更する。 （HTMLが理解している方はどちらでもOK）
- 2、使用する画像を用意
- 3-1、入力補助からアイコンボックス
- 3-2、入力補助から囲い枠を選択
- 4、説明文を書き込み
- 5、広告URLリンク作成
1Classic EditorからGutenbergに変更する
GutenbergエディターはWordpress5.0以降にリリースされDiverでも対応しています。 今回のDiver広告作成はGutenbergを使います。 Classic EditorからGutenbergに変更 Gutenbergを使用している方はそのままでOKGutenbergからClassic Editorに変更する方法
- Diverダッシュボードから新規プラグイン追加
- キーワード検索でclassic Editor
- classic Editorを有効
- 有効にするだけで設定は不要です。
1Gutenbergとclassic Editorの比較
Gutenberg
![]()
classic Editor
![]()
Gutenbergのメリット
Gutenbergは形式はブロックタイプで1ブロックで1つになり、1ブロックごと上下に移動したり編集が可能な所
Gutenbergしかない機能もあり、セッション・アイコンボックス
Gutenbergのデメリット
Diverで使い慣れている機能（入力補助など）が少し手間がかかる
Diver作成者の高木さんもclassic Editorを推薦しています。
2使用する画像を用意
あなたが使用したい画像を用意していきます。 例えばアフリエイト広告や自分で作成した画像 ASPで素材がありますので、その広告画像を使うのが良いでしょう。
サンプル画像
3入力補助から囲い枠
3-1 Gutenbergでアイコンボックスを選択 3-2 Gutenbergでも囲い枠の入力補助があります。
Gutenberg
![]()
classic Editor
![]()
Gutenbergは
▿を選択して入力補助を探さないとダメ
この辺が扱いにくい点ですね。
4,5説明文を書き込み、広告URLリンク作成
Gutenbergとclassic Editorのどちらでもいいと思います。 今回はGutenberg！！
アイコンボックスはGutenbergにあります。
広告ですので説明文は簡単にわかりやすく。
作成手順
作成手順、1
1、Gutenbergエディタに変更してください
3、DIVERダッシュボードから共通コンテンツ
4、準備完了です。
5、作成開始
作成手順、2
3-3の画像を参照してください。
1、共通コンテンツ、新規追加
2、タイトル入力
3、プラスマークを押す
4、入力補助を押す
5、アイコンボックスを選択
6、グリーンのアイコンボックスが表示されます。
6番のグリーンアイコンボックスが表示されました。
右サイドバーに各種設定があります。
アイコンから画像にする方法
最初はアイコンボックスに画像が設定出来ず、出来ないのか？と思いました。
しかしDiver公式サイトでは画像が表示されると解説されています。
Diverにお問い合わせしようかと思いながら、作成画面を適当に押すと、
発見しました。
1番のところを押す、サイドバーを見て見ると、
2番を見てください、
レイアウト設定に画像とアイコンが表示されます。
画像が設定できそうです。（アイコンボックスの余白ならどこでも良い見たい）
GutenbergからClassic Editorに変更
使い慣れているClassic Editorで編集して行きましょう。
ブルー枠の必要箇所にDiverボタンなどを設定していきます。
アレンジは自由にできます、Diverはおすすめの機能の1つアイコンボックスを使って見てください。
共通コンテンツ、ショートコード
ダッシュボード → 共通コンテンツを開く
新規追加で先ほど作成したので新しいショートコードがあると思います。
探す時に迷うし時間がかかるので、
これから共通コンテンツを多数使うので分かりやすいショートコード名が良いです。
例えば、
Diverの広告-画像
サーバーの広告-リンク
完成したら共通コンテンツのショートコードを投稿画面の入れたい記事の間でも良いですし。
記事上や記事下、ウイジェットに追加してもOK
HTMLコード
<div class="wp-block-dvaux-iconbox dvaux_iconbox" style="background-color: #70b8f1;">
<!-- wp:image {"id":3615,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://kikankou-matome.work/wp-content/uploads/2020/04/Diver広告アフリエイト画像-1.jpg" alt="" class="wp-image-3615" /></figure>
<!-- /wp:image -->
<div class="dvaux_iconbox_meta" style="color: #000;">
<div class="title">タイトルを追加</div>
<div class="title"><span class="badge bborder red">1位</span></div>
<div class="textcontent">文章を追加</div>
<div class="textcontent">テキスト</div>
<div class="textcontent">テキスト</div>
<div class="textcontent">
テキスト
<div class="button oborder radius block green"><a href="https://betterbest.work/wordpress-preferences-divers/" class="small" target="_blank" rel="nofollow noopener">Diver説明</a></div>
</div>
</div>
</div>アイコンボックス応用
アイコンボックスを2つや3つ並べたい
入力補助からグリッドレイアウト2分割、3分割アイコンボックス1
![]()
アイコンボックス2
![]()
アイコンボックス3
![]()
アイコンボックスを2分割
アイコンボックス2分割-1
![]()
アイコンボックス2分割-2
![]()
ワードプレステーマDiverのアイコンボックスの使い方と応用編でした。
アイコンボックスで作成した見本が見たい方は記事下を参考にしてください。
グリッドレイアウト10種類
※レイアウトオプション
画面サイズが小さい時に、とありますが！
チェックをなしにすると、PC：スマホ表示が同一表示されるます。
PC画面の見たとうり。
チェックを入れると、画面サイズに合わせて
3分割でも画面に合わせて横3：縦3に自動変更されます。
最終的に変更をプレビューでPCとスマホレイアウトを確認してください。
まとめ
WordPress(ワードプレス)、Diverは少し迷う点があると思いますが初心者でも問題なく楽しくデザインやレイアウト、装飾ができます。
デザイン以外でもSEOは優れている！
文字数：1658
当サイト記事、Diver初期設定はGoogl検索1位。（2020/04/15現時点です）
購入して初めて、Diverの良さが実感できと思います。
Diverについてもっと知りたい方は関連記事がありますので読んで見てください。
