Diverのヘッダー部分のことをファーストビューといいます。このファーストビュー部分で、ヘッダー画像をアレンジすることができます。

慣れるといろんなヘッダー加工ができますので、ぜひ覚えてみてください。特に、デザインに苦労されている方もこのページでひと通り作れば感覚的にわかると思います。

Diverのファーストビューの設定とアレンジです。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

Diverのファーストビューって何？

ワードプレステーマには各パーツは、それぞれ独自の名称があります。Diverでは、ヘッダーの画像部分をファーストビューと呼びます。

例えば、THE THORなら「メインビジュアル」などと書いてありますが、難しく考える必要はありません。

名前が変わっているだけなので、安心してください。

Diverのファーストビューの優れているところ

今現在いろんなWordpressテーマ（テンプレート）がありますが、Diverは、簡単な設定でそこそこ上級者のようなヘッダー画像が作れます。

上記の画像でも左部分のワンポイント画像（PNG画像）と右のテキストとボタンを調整しているだけです。

Diverのファーストビューの位置を確認

ブログのトップページなどに配置するヘッダー画像部分を管理画面のファーストビュー設定で調整していきます。

ファーストビューの構成

ファーストビューの作り方で一番シンプルなのが左にワンポイント画像　+　右にタイトルとボタン　+　背景　です。

画像さえ可愛いものを配置できれば大体センスよくなります（笑）

出典：当ブログ「Diver特典」　デザイン100

上記のように、ブタの貯金箱のワンポイント画像を入れ、タイトルとボタン配置、さらに背景に2色を使ってドット背景にしています。

この背景が面白くて、色を変えていろんな構成にできます。

背景違い

例えば以下のような画像も構成は同じで背景違いです。（背景はタイル）

↓クリックで拡大します。

出典：当ブログ「Diver特典」　デザイン100

背景に画像を配置した例

ほぼ構成は同じですが、背景にさらに画像を重ねるとこんな感じになります。ギャンブル系のブログ設定なので、ブログの全体を「dark（黒）」にしています。

↓クリックで拡大します。

出典：当ブログ「Diver特典」　デザイン100

操作自体は簡単、初心者でも面白いヘッダーが出来上がります。

Diver管理画面で操作

Diverには、専用管理画面（Diverオプション）があります。インストールをするとダッシュボードに管理画面が現れます。その中に「ファーストビュー」のタブががありますのでそこで操作をします。

ファーストビューのページでできることは大きく2つ。

1. 背景設定
2. コンテンツ設定

背景設定

ファーストビューの背景設定では、ヘッダー部分の上下どの位置に配置するのか、どのページに表示させるのか、どんな画像にするのかなど設定します。

ここで、ヘッダーの背景も設定をします。

コンテンツ設定

ここでは、ファーストビュー内に画像を入れるのかや、タイトル、ボタン、テキスト色などの設定をしていきます。

ここに、PNG画像を設置します。

ファーストビューの画像のダウンロード方法

フリー画像のダウンロード方法をここで説明します。それぞれのサイトでやり方は異なりますが、今回は、フリーサイトからのダウンロードをお伝えします。

（イラストACなどは、種類が多いですが最初に登録が必要となります。登録などが面倒な方は、「フラットアイコン」さんなどは登録なしでダウンロードできます）

ファーストビューに適した画像とは

ファーストビューに合う画像はフリーでもたくさんありますが、それぞれの画像が綺麗なものをチョイスしていっても、それぞれが合わないと微妙なヘッダーになります。

デザインを作る人の好みもあると思いますが、実際私がおすすめする画像の選び方をお伝えします。

ワンポイント画像のおすすめ

Diverで一番簡単にヘッダーが作れる方法ですが、左側にワンポイントのPNG画像、背景に2色設定するとそれらしく収まります。

ワンポイント画像に適しているのは、あなたのブログの趣旨がわかるもの。例えば、ペットフードのアフィリエイトブログなら犬や猫の画像など。

デザインは、ハッキリした色合いにすると目立ちます。

上記の画像のワンポイント画像は、ブルドックですが、丸い背景があるので少しセンス良く配置されていますよね。

背景2色のおすすめ

ワンポイント画像が設定できたら次はその背景です。色合わせに苦労する方も多いですが、コツがあります。

ワンポイント画像を設定したら、その中の色に注目してください。

↓　クリックで拡大します。

出典：当ブログ「Diver特典」　デザイン100

上記画像なら、紫が入ったブルーと黄色です。青の同系色を背景とブログ全体に（濃淡をつけています）あと、ネクタイの色と近い色をボタンにあしらっています。

背景は同じ色ばかりでは面白くないので、グレーと合わせます。（グレー・茶色・ベージュなどはだいたいどんな色とも相性が良いです）

もし色に自信がなかったら同系色の濃淡でもしっくりします。

画像のダウンロード方法

この章では、実際の画像のダウンロード方法をお伝えします。今回は登録なしでダウンロードできる「時短だ」と「パターン背景」とで作ってみます。

• 時短だ

時短だ（ワンポイント画像用）

「時短だ」のページを開きます。アイコンで好きなカテゴリーを選びクリックします。（今回は動物で選びます）

いろんな動物がでてきますので好きなものを選びます。

今回は、ライオンのエンブレムを選んでみます。

下のパターンから好きな構図を選び、さらに左側で色を調整していきます。カラー部分にカーソルをもっていくと、画像の中のどの部分の色か表示されますので好きな色に変更していきましょう。

カラーピッカーで微妙な色合いもできます。

左側のダウンロードでまず「PNG」をクリックするとパソコンにダウンロードされます。

設定例

↓クリックで拡大します。

背景に画像もOK

基本的に、Diverのファーストビューの背景は、2色設定するとかなり面白くなりますが、自分で背景の画像を設定することもできます。

もし、ワンポイント画像がイラストならば、実写の画像を配置しても面白いです。

Diverのファーストビューの作り方

ワンポイント画像がダウンロードできたらファーストビューの設定をしていきましょう。操作場所さえわかれば数分でできあがります。

▼　Diverオプション　⇒　ファーストビュー

背景の作り方

ヘッダーを表示する位置とどのぺージに表示するか決めたら、ファーストビューの部分のシンプルを選びます。

ここを選ぶことで、デフォルトの背景（シンプル・グラデーション・ドット・ストライプ）が使えます。

背景カラーはまず1色を適当に選び、相性を見ながら変更していきましょう。

ワンポイント画像を入れる

同じ画面の下にスクロールしていくと、画像を入れる部分があります。

• ファーストビューコンテンツ・・・テンプレート

画像を挿入できたら、タイトルや説明文、ボタン・ボタンのURLなど必要項目を入力してください。これだけで以下のような画像になります。

ドット背景の場合

デフォルトのドットが比較的細かいのでどんな色でもだいたいはしっくりします。ドットの色と背景の色を変更しても面白いです。

タイル背景の場合

この画像の場合タイルの方がぐっとよくなりますね。色もテキストが見やすいようにあまり濃い色はもってきていません。

ただし、テキスト色も変更できるので白抜きにして紺などの背景にしても面白いです。

ストライプ背景の場合

ストライプはテキストの色を調整しながら設定すると綺麗に見えます。

グラデーション背景の場合

グラデーションは意外な色を持ってきても結構きれいに見えます。Diverの面白いところは、遊び心を取り入れてもだいたいきれいに設定できるということです。

初心者だからこそWordpress有料テーマ を使うべき理由

Diverは、初心者の方にも超簡単にブログ作りができる工夫があります。それが入力補助で「ボタン」「ランキング」「口コミ」「囲い枠」「バッジ」などいろんな要素がブロック要素として用意されています。

作業自体が短縮されるため、Diverはペラサイトにも最適テーマです。とにかく簡単でカッコいいブログができるDiverの入力補助についてお伝えしていきます。

出典：Diver（旧エディターの入力補助）

出典：Gutenberg（新エディター）の入力補助

上記、旧エディターの入力補助とブロックエディターの入力補助の構成です。新しいエディターでも旧エディター用の入力補助は使えますのでご安心ください。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

Diverの特徴「入力補助機能」

いろんなWordpressテーマを使ってきましたが、Diverは一番「シンプルな使い勝手」にこだわったテンプレートだと思います。

↓クリックで拡大します。
出典：Diver

Diverは、パッと見た目にはレイアウトが整然とアイコンの並んだシャープなテーマというイメージです。動画も配置可能なヘッダー部分、タイトル、誘導ボタン、タブアイコン、スライダー、お知らせ機能など多くのパーツをトップページに組み込めます。

Diverに限らず高機能なテーマは、やはり設定に悩むことも多くなりますが、Diverは「入力補助」という視覚に訴えたブロック風カスタマイザーが用意されているということ。

Diveは、投稿画面上でササッとパーツが作れるのですごく便利です！

旧エディターの入力補助では（クラッシックエディター）でできる操作は23個です。Gutenbergになってからは、ブロックエディターのツールボックスにいろんな要素が出てくるようになりましたので、パーツなど組み込むのは比較的簡単になりました。

Diverを導入すると、新しい「入力補助」がでてきますのでツールボックスと併用して使うと便利です。

↑　Diver入力補助の旧画面

※　ブロックエディターでの入力補助は後からでてきます。

入力補助でできること一覧（旧）

旧エディターの入力補助でできることを並べてみました。2021年の時点では以下のような並びになっています。（アイコン等があるので変更があってもわかりやすいです。）

旧エディターの入力補助

一覧表で見ると、記事作成に必要な基礎の機能、そしてDiverのオリジナル機能がバランス良く配置されているのがわかります。

Diverはその都度アップロードで新しい機能がでてきますので売りっぱなしではなくサポートも期待できます。

↓芸大卒のなつがDiverのオリジナルデザインを作りました！

Gutenberg（新エディター）のDiverの入力補助について

2022年現在は、プラグインのclassiceditorで旧エディターがまだ表示されている状態です。ブロックエディターとの過渡期にあります。しかし、サポート等もいずれなくなりますのでGutenbergでの入力補助で慣れておいてください。

Diverの入力補助、新旧画面の切り替え方

入力補助は、今現在、新旧双方が使えるようになっています。Gutenbergの画面では、新入力補助が出てきますので、その他の項目の含まれている旧画面を出す方法をお伝えします。

旧入力補助の出し方

ブロックエディター（Gutenberg）の中で、クラッシックというアイコンをクリックします。

するとクラッシックの画面が表示されます。

Diverの入力補助の　「旧項目」　（Wordpressテーマ）

Diverの入力補助でどんなことができるのか画像付きでお伝えしていきます。色やスタイルは見ながら好きに設定できますので、参考にしてみてください。

見出し

h2やh3など見出しの大きさを変化させるときにわかりやすくかつオシャレに設定できます。色のバリエーションも広いので加工してもよし決まった色にしておくのも良いです。

• スタイル・・・11種類
• 色・・・8色+カスタム

見出しを作るときのポイントですが、h2やh3など大きさが変わると見出しのスタイルを変化させた方が見やすいです。

ただし、色は同じにしておくと見やすいと思います。

ボタン

入力補助では定型のスタイルのボタンがあり、影を付けたり角丸にしたりと投稿ページ上でできます。大きさも調整できますので使い勝手が良いです。

• ボタンのスタイル・・・13種類
• 色・・・8色+カスタム
• 背景色
• 枠色
• タイトル色
• アイコン設定
• 大きさ調整

バッジ

テキストの前などに目立つように配置する小さなボタンが「バッチ」として配置できます。こちらも色とりどりにできますので、「注目！」とか「おすすめ！」とかタイトルを入れて配置してみてください。

• バッジのスタイル・・・7種類
• 色・・・8色+カスタム
• アイコン設定

囲い枠

ブログ記事を作るときに必ず囲い枠は必要になってきます。長い文章になると特に上手に区別して配置することでユーザーがよりわかりやすい文章となります。

• 囲い枠のスタイル・・・7種類
• 色・・・8色+カスタム
• アイコン設定
• 見出し背景色
• 見出しテキスト色
• 枠線色
• 背景色
• テキスト色
• 装飾

アイコン

文章の前などに配置するちょうどいい大きさのアイコンを導入できます。色も同時に設定できますので、見ながら設定をしてください。

• アイコン選択
• アイコンの色変更
• 大きさ

矢印などは、色を変化させて使っても良いです。

棒グラフ

なにかの比較をする場合「視覚」に訴えると理解度が高まります。Excelでも入れれなくはないですが、この棒グラフはデザインが可愛いのでちょっとしたことでも使いやすいです。

• 棒グラフの長さ
• グラフの色

吹き出し

吹き出しといっても画像のない方の吹き出しです。画像がないのでちょっと使いづらいかもしれないですが、シンプルに使いたい時には最適です。

• 角丸％

口コミ

口コミをワンセットで設定できます。星評価までここで表示できるのはあまりないので、活用してください。

• 画像設定
• タイトル設定
• 星評価設定
• 名前設定

会話

「吹き出し」機能をもう少し進化させたもので、色設定や画像設定が可能です。設置すると記事がパッと明るくなりますので、こちらの方が使いやすいです。

吹き出し部分に色をつけるとい以下のようになります。色を工夫するとパッと目を引く吹き出しになります。

• 画像設定
• 背景色設定
• 色設定・・・8色+カスタム
• テキスト色設定
• 心の声・普通の声
• 矢印の方向

ランキング

アフィリエイトの記事を書く際、ランキングは必要になってきます。ある商品とある商品の比較をし、最終的にランキングで配置してユーザーの目を引きましょう。

順位を入力すると上記のような王冠も出てきますので、画像やタイトル、広告など設定するだけでOK。

• 順位
• 商品名
• 小見出し
• 紹介画像
• 購入ボタン
• 背景色
• テキスト色
• 枠色
• 枠太さ

トグル

1部をクリックすると箱が開き中から文章が出てくるというボックスの設定です。文章でゴチャゴチャしてる場合や、説明書きが長くなってしまう時などこのボックスが役に立ちます。

↓↓↓

レビュー表

簡単に言えば「テーブル」が成型されたものが出てきます。テキストを入力するだけで出てくるので難しい操作は必要ありません。

レビュー

呼び名はレビューですが、これは星評価です。ちょっとした文章に星評価を付けたい場合には、簡単に挿入できます。

Q＆A

質問と回答があると文章の幅も広がります。自分自身でテキストで作れないこともないのですが、見た目にスッキリしたものなので使い勝手が良いです。

記事一覧

これはサムネイルのない記事一覧となっています。サムネイルがあるとどうしてもスペースをとってしまうのでこちらも活用できます。

Diverの入力補助機能の操作について　（Wordpressテーマ）

入力補助でできることが多いとわかってもその操作方法に不安を持つ方もおられるかもしれません。たくさんの機能がある＝操作方法が複雑と思うのが普通です。

Diverの入力補助については、ブロック分けしている項目をクリックし展開して使うのですが、かなりシンプルに作ってあるので「どこ」に「なに」を入力するかというのがハッキリしていてすごくわかりやすいです。

たとえば下の画像は、囲い枠を作るための入力補助ですが、どんな囲い枠を作るかなど例を見て作れるのでイメージもしやすいです。

↓　クリックで拡大します。

CSSなどを追加で導入すると、パーツが出来上がってイメージが違う時がありますが、そういった心配もありません。

見たままの形や色で出てくるので、イメージ通りのパーツとなります。

Diverの入力補助で「ボタン」を最速で作ってみる。（Wordpressテーマ）

この章では、Diverの入力補助を使ってボタンを作ってみます。まずは、以下のボタンを作るのにどれだけの時間がかかったか少し想像してみてください。

実はボタン3個作るのに5分もかかっていないです！

「アフィリエイトのテキスト広告」をそのまま入力補助にぶち込んで、ボタンの色と形を選び、ラジオマークでチョイチョイとクリックしただけなのですぐに挿入できます。

もし、普通にボタンを作ろうとすれば、テキストを入力し、必要ならアイコンを前部に配置します。HTMLを書き換えることもありますし。成形したりなど結構な手間がかかるのですが、Diverの入力補助なら楽にすぐカッコいいパーツが出来上がります。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。
※今なら、6大購入特典をお付けしています！

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

Diverの入力補助機能はなぜ初心者向けなのか。

実は、Diverは初心者だけではなく中級者以上でも使い勝手の良いテーマですがやはり入力補助があることで文章の加工や装飾の時間が短縮される分、圧倒的に初心者にも向いています。

見出しなどひとつとっても、CSSを追加しHTMLを文章内に配置して・・・と手間がかかりますが、「入力補助」は、実際パーツを作る時に視覚的に確認しながらラジオマークひとつで作りあげることができます。

入力補助の特徴

イメージ的には以下のようなことができます。

• ブロックとアイコンで操作するので簡単
• パーツごとの色や形を確認しながら作れる
• できることが一か所にまとまってる
• 初心者でも迷わずなにをすれば良いかわかる
• 難しいCSSを使わなくてよい

本来なら、パーツなどはCSSの追加をしてつくるのですが、ほんの1文字間違えただけでも反映しなかったり一歩間違えば消えてしまうこともあります。

そんなリスクを最大限に減らすことが可能なので、初心者のうちは安心して記事の装飾ができますし、中級者以上でもデザイン性の高いボタンなどが簡単に出来上がるのでかなり重宝するのは間違いありません！

次に、Diverの入力補助の各パーツの使い方をお伝えします。

Diverの入力補助機能はペラサイトに最適！（Wordpressテーマ）

ペラサイトを作ったことはありますか？ペラサイトとは、アフィリエイトのひとつの手法で1～10ページくらいで1つの商品を紹介しているサイトです。（ページ数に規定はありません）

アフィリエイトでまだ稼げていない人が数多くサイトを作ってユーザーの反応を確認したり、大規模サイトを作る準備として市場調査する目的でも使われます。

ペラサイトは「シリウス」というテンプレが有名ですが、いろんなテーマを使った経験上、Diverが1番使いやすいと感じました。

ブログ作りでは、アドレスを取りプラグインとWordpressテーマを導入してからの設定が大変だったりします。

1. アドレス取得
2. WordPressテーマ＆プラグインインストール
3. テーマの初期設定
4. TOPページ作成
5. ヘッダー画像設定
6. 記事作成

⇒　Diverインストール

だいたい上記のような流れになるのですが、テーマの初期設定、デザインの調整など小難しい設定があれば手が止まってしまいます。

出典：Diver特典アレンジ100（アフィリエイト用）

上記のヘッダー画像は、ワンポイントの画像のみインストールしてボタンの色と背景だけ変わっているのはわかりますか？

これは、Diver特有のシステムで背景にグラデーションやドットに変更できるデザインです。これを駆使するとあっという間にいろんなデザインができあがります。

Diverの基本構成は、シンプルで例えば、デザインを後回しにしたい時とりあえず「基本色」と「ヘッダー画像1つ」を配置しておくだけで立派なブログとして記事を書き始められます。

関連記事ペラサイトをWordPressで作るならこのテーマ！シリウス以外ならコレ！

2022.12.12

Diverの入力補助の使い方　【参考】

入力補助が投稿の入り口なのですが、実際使うとなると難しいのではと思う方もいるのではないでしょうか？

Diverで圧倒的に違うのは、本来ならCSSを追加したり、あらかじめ装備していてもスタイル等で呼び込むものが多いのですが各パーツを記事に呼び込むのはすごく簡単。

入力補助のバージョンアップした機能と使い方をみていきましょう。

見出しのカスタマイズ

入力補助の見出しのカスタマイズは見出しのタイプやスタイルなど自分自身で好みの見出しを作れるようになっています。

バッジのカスタマイズ

バッジは聞きなれない言葉ですが、文章の前や後につける目立つ目印のようなものです。Diverではこういった小さなパーツが得意なので可愛いバッジが出来上がります。

バッジとは以下のような文章につけるボタン装飾のことです。

囲い枠のカスタマイズ

囲い枠も、タブの位置や囲い枠の色の調整ができたら便利だなとCSSを触りながら思うことが多いのですが、Diverなら入力補助からカンタンに変更できます。

ボタンのカスタマイズ

ブログ以外のサイトなどに誘導するとき、アフィリエイトに誘導するときなど綺麗なボタンがあればとても有効です。

デザインリストのカスタマイズ

デザインリストというと、箇条書きなどにつかう文章の前のポイントの設定です。この記事内でも使っていますが以下のようなピンクの丸印と文章とのデザインです。

上のようにポイントにもできますし、数字でカウントもできます。

↓クリックで拡大します。

これまで、「見出し」「バッチ」「囲い枠」「ボタン」「デザインリスト」と見てきましたが、イメージがわきましたでしょうか？

ちょっと余談ですが・・・。

ブログを作る時には囲い枠をちょっと変更したり、ボタンを追加したりしたくなるんですよね・・・。そんな時、CSSを追加したりするわけですが、内部を触るので急にブログの具合が悪くなったりすることがあります。

理由もなく消えたりして「ギョッ」としたことは100回以上はあります(;´･ω･)

なので、Diverのような「入力補助」は、初心者でなくてもすごく便利ですし、余計なトラブルで時間を取られないのはスゴイことだと思います。

Diverの入力補助と魅力あふれるパーツ！

Diverは、他のブログと違うちょっと気の利いたパーツがそろっています。SEO対策やレイアウトなどは有料テーマならほぼ基本として導入されていますが、Diverには少し上行くパーツがあります。

初心者がブログを作る時、あったら便利な機能とパーツを説明してきます。

1.　アイキャッチにYoutube動画

Diverでは、新しい機能のアップデートもあります。最新の機能として出てきたのがアイキャッチにYoutube動画を配置できるというもの。

このアイキャッチは、記事一覧に配置しても動画として出てくるので他のブログとの差別化をはかれます。

出典：Diver

このアイキャッチは、記事一覧にも反映されるので他のブログと差を付けたい人にも最適です。

2.　豊富なヘッダーメニュー

Diverにはメニューの種類が複数あります。上部ヘッダーが消えたら現れる「固定ヘッダー」右上に小さく配置された「ミニメニュー」上部に配置する「ナビゲーションメニュー」などがあります。

ナビゲーションメニューの配置方法もロゴの隣にもってきたり、メニューだけで独立させたりと自分の好みにできます。

固定ヘッダー

ミニヘッダー

ナビゲーションメニュー

3.　動く蛍光ライン

蛍光ライン自体はほとんどのブロガーが導入していますが、動く蛍光ラインはまだ一部だけです。記事を開くと自分がラインをひいたようにススーっと伸びるので目をひきます。

この機能がDiverには最初から装備されています。

4.　横棒グラフ

記事の中にグラフを入れたい時がありますが、プラグインを導入してグラフを作るのは面倒です。Diverでは、横棒グラフの機能があるので、比較したいときに最適です。

出典：Diver

5.　自由自在な記事一覧

記事一覧の表示やカード部分の変更は他のテーマでもできますが、Diverは記事一覧ページも詳細に編集が可能になっています。

• タイトル編集
• 並び替え
• カテゴリーの優先順位

6.　レビュー・口コミ

アフィリエイトや何か売りたいものがある時にレビューや口コミを入れると効果的です。Diverのレビューは他のテーマとちょっと違っていて、セリフの中に星評価もバランス良く配置できるので、ネットショップのような本格的なレビューっぽくなります。

出典：Diver

8.　人気記事のパーツデザイン

人気記事をランキングしてサイドバーに配置されているブログが多いですよね。人気記事のパーツデザインはほとんどが1種類ですが、Diverの場合には複数のデザインがあります。

出典：Diver

ちょっとしたことなんですが、こういった小さなデザインなどが印象に残ることがあります。

8.　ラベル

記事の目立つところに「NEW」ラベルがあると読者の回遊率が変わるともいわれています。ブログ内でいかに記事を目立たせるかを考えるとラベルの存在は大きいです。

Diverでは、ラベルの詳細な設定ができるようになっています。

出典：Diver

その他、新入力補助でセンスの良い使い方

新しい入力補助で「セクション」と「アイコンボックス」を使って、他のテーマにはないデザインを作ることができます。

例えば以下のようなCTAにもなります。（セクション・アイコンボックス・ボタン使用）

これらの作り方は以下の記事を参考にしてみてください。

関連記事Diverのセクションの使い方！アイコンボックスと使う小技も！【ワードプレステーマ】

2023.05.18

Diverの「入力補助機能」の5段階評価

Diverの便利な「入力補助機能」のシステムの5段階評価をしてみます。

Diverのオリジナルの入力補助機能は、CSSを触るのにまだ自信がない初心者にはとてもよい機能です。デザイン性を「3」にしたのは、綺麗でカッコいいパーツばかりなのですが、自由度がない部分で「3」にしました。

ただ、初心者の方でもブログを続けていればいずれはCSSも触る時期がやってきます。Diverのパーツは基本カッコイイものが多いのでブログ作りに慣れるまでは「入力補助機能」で面倒な作業をできるだけ楽にしましょう。

↓　WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

初心者だからこそWordpress有料テーマ を使うべき理由

ワードプレスのエディターがGutenbergになってから少したちます。それぞれのWordpressテーマでもブロックエディター仕様になってきています。

Diverも今後「ReDiver」という名前になり、機能を調整してから新しく販売される予定のようですが、Gutenberg対応の入力補助にあるちょっと目新しい機能がありましたので使い方をお伝えします。

Diverの入力補助の「セクション」と「アイコンボックス」の合わせ技でカッコいいスペースの作り方をお伝えします。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

Diverのセクションって何？

「セクション」とはあまり聞きなれない言葉ですよね。以下の画像のようなブログ内でのおしゃれな背景のことをさします。

（背景の薄緑の部分です。）

見出しでもなく、囲い枠でもなく、ブログページ全体に背景を付け、斜め切りにしたり吹き出しにして視線を促したりできるので斬新なデザインです。

アイコンボックスとは

アイコンボックスとは、配置する枠のことを言います。上部に好きなアイコンを設定できることから、アイコンボックスと言います。

横に3つ並べることができるので、記事内でなにか比較したい時や要素がたくさんあるものを区別する箱としても使えます。

セクションのデザイン例

セクション+アイコンボックスでいくつか例を作ってみました。アレンジ次第でいろんな形ができますので、試しながら作ってみましょう。

• 背景・・・セクション（薄緑）
• アイコンボックス・・・3個

• 背景・・・丸み（グレー）
• アイコンボックス・・・3個

• 背景・・・吹き出し（グレー）
• アイコンボックス・・・3個

その他、背景に好きな画像を追加したり、セクションの枠の上下に形の違うセクションを追加して挟んでも見栄えが良くなります。

セクションの使い方

アイコンボックスと組み合わせるとデザイン性の高い枠ができますので、例えばおすすめの商品（もしくは書籍など）がある場合、横並びにして説明を加えるなど使っても見やすいです。

ランキングにするとアフィリエイト感が出てしまう時に、比較という形で説明するのもよいですね。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」

⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

Diverのセクション+アイコンボックス作り方

実はこの作り方は少しだけコツが必要ですので、手順をまず確認してから作ってみてください。

1. セクションを配置する
2. カラムを選ぶ（3分割）
3. それぞれのカラムにアイコンボックスを追加する
4. アイコン等の調整
5. セクションの調整

大きくは上記の3手順です。アイコンボックスは、ひとつずつ配置されますので、セクションの中にカラムを入れておかないと横並びになりません。

1.　セクションを配置する

まずは、ブロック項目を下にスクロールし入力補助の中のセクションをクリックします。するとページの中にセクションが配置されます。

2.　カラムを選ぶ

セクションが配置されたら「+」マークをクリックしカラムを選びます。カラムはたくさんの種類がありますので好きなものを選んでください。

このページでの例としては、3等分のものを選んでいます。

3.　それぞれのカラムにアイコンボックスを追加する

セクションの中にカラムを配置し、そのカラムの中にアイコンボックスを追加していきます。カラムの「+」マークをクリックしアイコンボックスを選んで配置します。

それぞれのカラムにカーソルをもっていくとプラスがでてきますので、アイコンボックスをクリックします。

3つとも配置してください。

4.　アイコン等の調整

初期のアイコンのままでも良いのですが、Diverのアイコンもたくさん種類が用意されていますので、イメージ通りのアイコンを配置しましょう。

アイコンの背景の色調整

アイコンのある枠の背景の色を変更しましょう。デフォルトでは緑が出てきますが、それぞれ色変更ができます。

アイコン部分をクリックすると右側に背景色のカラーピッカーが出てきますので、色を選ぶかカラーパレットを開き、好きな色番号を入れてください。

アイコンの文字色調整

アイコンの色も調整できるようになっています。デフォルトでは白が出てきますが、色変更が可能です。

アイコン部分をクリックすると右側にアイコンの色調整ができるようになっています。背景と同じやり方でカラーを選んでください。

5.　セクションの調整

セクションにはいろんな形があります。斬新に斜め切りにしてもいいですし、ホンワカさせるために下に丸みを選んでも面白いです。

スタイルは以下の5つが選べます。

• スタイルなし
• 吹き出し
• 斜め1
• 斜め2
• 丸み

↓芸大卒のなつがDiverのオリジナルデザインを作りました！

Diverのセクション背景を好きな画像にする

セクションは、背景色だけではありません。メディアにある画像を背景にすることが可能です。（以下の画像は、和風な感じのものを選んでいます）

少し、色味が抑えられているのでアイコンボックスが浮き出るようになり見やすいですね。小さな柄でも面白いので、ドットにしたりしてもよく見えそうです。

上記の画像は背景のスクリーンをグレーにしたので少しくすんだ感じですが、スクリーンの色を白に変更し調整すると以下のような感じになります。

背景に画像配置

配置したセクションを選んでクリックすると、背景の色の調整や背景画像の配置できる部分がでてきます。

背景画像をクリックし、画像選択という文字をクリックするとメディアが開きます。好きな画像を取りこんだり、元ある画像を配置してみてください。

尚、小さ目の画像の場合、全部カバーできません。アイキャッチサイズ（500～600px）なら小さいので、横1000以上のものを選んだ方がよさそうです。

Diverのセクションの合わせ技　part2

セクションを2～3個続けて配置してさらに見やすくもできます。最初の基本形ができると、追加>追加で作れるのでとても簡単です。

さて、Diverの公式でも作っていた、セクション3つの合わせ技です。追加するタイミングで若干難しく感じるかもしれませんので、ここでひとつひとつ説明していきます。

Diverのセクション3個で作る（CTAっぽいもの）

セクションひとつだけでも目立ちますが、複数つなげてCTAっぽくするという手もあります。ここませ説明してきたものの上下にさらにセクションを足すと以下のようになります。

• セクション・・・3個
• アイコンボックス・・・3個
• 誘導ボタン・・・1個

一番中心の背景にはドットの画像を使っています。

Diverのセクション合わせ技の作り方

それほど難しくはありませんが、項目が多いので以下の流れで作ってみてください。

1. セクションを配置する
2. カラムを選ぶ（3分割）
3. それぞれのカラムにアイコンボックスを追加する
4. アイコン・セクションの調整
5. 下ボタンの配置

①②③までは同じなので、作り方は前の章をご覧ください。

4.　アイコン・セクションの調整

アイコンとセクションの調整もほぼ同じです。ここでは真ん中のセクションの背景に画像を使っています。

上部にセクションをプラス

セクションの上部にもうひとつセクションをプラスします。投稿の中のプラスでも左側でもOK

すると、セクションがプラスされますので、右側に出てきたスタイルと色の調整をします。

今回は、吹き出しにしてみます。

同じく色の調整もここでやっておきます。

下にセクションをプラス

さらに、ボタンも配置するセクションを追加します。やり方は上のセクションと同じ。スペースを空けてセクションボタンを押すと配置されます。

配置されたら同じように右側で形と色を調整します。

今回は、丸みというデザインです。

5.　下ボタンの配置

一番したのセクションの中央に誘導ボタンを配置しています。こちらもDiverの入力補助のボタンを設置しています。

ボタンの配置

下のセクションが配置され色とデザインも調整したら次はボタンを足します。

ボタンが配置されたら、右側でボタンのデザイン、色等を選べますので調整してみましょう。今回は、ボタン（大）で色は赤にしています。

初心者だからこそWordpress有料テーマ を使うべき理由

有料テーマもSEO対策だけではなくて個性的なデザインや付属品なども充実してきました。ここ数年売り出されたWordpressテーマはデザインにもかなり凝っているものが多いです。

独自のパーツがかわいいAFFINGER6とカッコよいサイトが簡単操作でできあがるDiver。どちらも優秀なWordpressテーマです！

2つともデザイン面も優れていて機能も新しいので人気ですが、それぞれよくできているからこそ購入するのは迷ってしまいます。

そこで今話題のWordpressテーマ2つ、AFFINGER6（アフィンガー）とDiverの比較をしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

⇒　NEW　Diverの特典もよかったらどうぞ。

AFFINGER6（アフィンガー）とDiverの比較一覧表

AFFINGER6（アフィンガー）とDiverは、デフォルトのデザインは双方基本形はシンプルでどんなジャンルのブログにもマッチするという特徴があります。

AFFINGER6（アフィンガー）とDiverは細かい部分の違いはありますが、デザインなどは非常に似ています。特にDiverには初心者や設定に不安のある人に優しい機能が充実しています。

	AFINGER6	Diver
値段	14,800円（税込）	17,980円
おすすめ用途	全ての用途	全ての用途
デザイン	カラー＆レイアウト一括変更 デザイン済みデータ（着せ替え）	基本色一括変更 棒グラフ風ライン アイキャッチにYoutube
ヘッダー	ワイドヘッダー 記事スライドショー	ワンポイント画像+背景 ヘッダー画像に動画
アイコン	あり	あり
初心者向け機能	基本カラー・レイアウト一変更	入力補助機能 基本カラー変更 ファーストビュー簡単設置
ショートコード	あり	あり
スライドショー	記事内・サイドバー等にも設置可	ピックアップスライダー
ランディングページ	あり	あり
広告設置	簡単設置	簡単設定 記事一覧のインフィード広告
ウィジェット機能	○	○
ランキング作成	管理画面で簡単設置	○
SEO対策	○	○
AMP	○	○
複数ブログに使用	OK	－
サポート	マニュアル	マニュアル あり
公式ページ	AFFINGER6	Diver

デザインなど詳細に変更したり個性的なアレンジをしたい場合にはAFFINGER6（アフィンガー）がおすすめです。

段落のタイトル部分にすら画像をはめ込んだりできるので作りこむと面白いです。

↓クリックで拡大します。

出典：AFFINGER

一方、Diverはデザイン性に加え初心者向けの入力補助がありますし、トップページなども簡単に独特のアレンジができますので初心者で操作に自信のない方にはDiverは使いやすいです。

↓クリックで拡大します。出典：Diver

そして、2つのテーマで共通して面白いのは、Youtube動画の取り入れ方。これは人気のJINやSANGOには備わっていません。

DiverではアイキャッチやにYoutube動画を取り入れることができますし、AFFINGER6は、ヘッダー画像に加え背景にYoutube動画を取り入れることができます。

より初心者に向いているのは

DiverもAFFINGERも初心者が使えますが、どちらが初心者向けかというとDiverです。ブログを構成するのが簡単ですし、設定項目は多くないのですが出来上がりのデザインがカッコよく収まるので、特に全く初めての初心者の方にはおすすめです。

AFFINGER6は慣れが必要で、項目の基本設定と調整する場所が違うので、最初悩んでしまうと思います。

ただ、ネットリテラシーが高く、操作が苦にならない方はデザインが可愛いAFFINGER6もアリです。

デザインにグラデーションが使える

ブログを作る時にざっくりと色合いなど調整すると思います。単色にしても画像をプラスすると面白くなりますが、2色にして「グラデーション」もこの2つのテーマでは使えます。

上記のAFFINGER6は、着せ替えのヘッダー部分にグラデーションを使ってあります。そしてDiverではヘッダー画像の背景としてグラデーションを設定しています。

どちらも自分の好きな色を設定できるようになっています。

AFFINGER6（アフィンガー）とDiverの人気度比較！

AFFINGER6（アフィンガー）もDiverもインフォトップという販売サイトから売り出されています。インフォトップではテーマも数多く売られていてアフィリエイトのシリウスなども売れ筋となっています。

インフォトップの人気の目安

現在でも、AFFINGER6をはじめ、THE THORとDiverはワードプレステーマとしてはどれもランキング上位に来るテンプレなのでどれを選んでも間違いはないです。

24時間のランキング（2019年10月）

30日間のランキング

↑　※当ブログではTHE・THOR、AFFINGER6、Diverの各テーマに豪華特典が付いています！

このブログでも双方扱っていますが、どちらも売れ方は同じです。

AFFINGER6（アフィンガー）とDiverのデザイン面の違い！

AFFINGER6とDiverのデザインを比較する前に、実際双方使っている私が感じたデザイン面での違いをお伝えしようと思います。

基本的には、デザイン面はどちらも優れていて機能的なのは間違いありません。作りこむことで、ユーザーにとっても見やすいブログとなります。

作りこむならAFFINGER6、簡潔で即作りたいならDiver

色やレイアウト一括変更の数で言うと、AFFINGER6の方が多いですが、Diverにはトップページ画像を簡単に作れる機能が備わっています。

色に関しては、AFFINGER6はSNSボタンや背景など原色ではなく少し彩度を低くした色合いがあるので合わせやすいです。

デザインは最終的には「好み」で決めてしまって問題ないと思います。

それぞれの大きな特徴と違い

見た感じだけではわかりづらいので、デザイン面での大きな違いを確認しておきましょう。

AFFINGER6（アフィンガー）とDiverのデザインの比較解説

AFFINGER6（アフィンガー）とDiverのレイアウトは特にそこまで大きな違いはありません。ただ、ヘッダーまわりのカスタマイズなどはDiverの方が細かく設定できます。

双方とも、ビジネスにも使える上質なデザインです。より高級感を求めるならDiverの方がスッキリしている気がしますが後はやはり好みの差かなとも思います。

ここからはAFFINGER6（アフィンガー）とDiverのデザインの違いを見ていきます。

AFFINGER6（アフィンガー）とDiverデザイン比較

それぞれのデモ画面を並べてみましょう。もちろんどちらもカスタマイズでイメージは変更可能ですが、背景の色や画像を変更することでどちらもイメージが変わります。

↓　クリックで拡大します

出典：AFFINGER（アフィンガー）

↓　クリックで拡大します

出典：Diver

AFFINGER6（アフィンガー）とDiverの全体像は上記のようになります。両方とも、違ったパターンのレイアウトがありますので、あとはデザインが好みなのかそして、機能面でほしいものがあるかが決め手となります。

↓自分に合ったテーマを見つけるために優秀なテーマを調査した記事です！

関連記事【2023年最新】WordPress日本語おすすめテーマまとめ！初心者向け有料＆無料も！

AFFINGER6（アフィンガー）の特徴的な機能（Diverとの違い比較）

AFFINGER6（アフィンガー）の機能は独特です。元になるのは、スティンガーという無料テーマなのですが、他とは少し違う目線で作られていて、ブロガーにとっては「これがあったらいいな～」を実現しています。

1. デザインレイアウトパターン
2. スライダー機能
3. ランキング作成機能
4. 動くアイコンのボックス
5. ヘッダーカード
6. 専用管理機能

1.　デザインレイアウトパターン

「グラデーション」「ビジネス」「キュート」「フラット」というイメージ違いのデザインで色は12種類の配色パターンがありますので、全部は48種類のレイアウトが作れます。

出典：AFFINGER

2.　スライダー機能

AFFINGER6（アフィンガー）ではヘッダースライダーだけではなく、サイドバーなどにも使えるスライダー機能があります。

ヘッダー記事スライダーと、カテゴリ一覧ショートコードをスライダーに変換できるという機能が新しく追加されています。

出典：AFFINGER

さらに、ヘッダー画像を記事のアイキャッチと説明文を表示させスライドショーにすることも可能です。

3.　ランキング作成機能

AFFINGER6（アフィンガー）のランキングは記事にマッチするシンプルなものが作れます。ですので、1ページ丸々アフィページではなく、一般の記事からさりげなくアフィリ広告に転換できます。

出典：AFFINGER6

4.　動くアイコンのボックス

追加されたボックスが特徴的なのですが、ボックスのタブ部分に貼り付けられたアイコンが少しだけ動くというユニークなものです。

出典：AFFINGER

5.　ヘッダーカード

ヘッダーカードを設置できるようにしたことで、カテゴリーをよりわかりやすく読者に明示することができます。

読んでいる人のためにも適切なカテゴリー分けは必要です。

出典：AFFINGER（アフィンガー）

上記のようなカクカクした感じと、角を角丸にして柔らかな雰囲気にも対応できるようになっています。

6.  専用管理機能

細かな設定が行えるように、AFFINGER6（アフィンガー）ではカスタマイズをするための専用管理機能があります。

• 投稿画面に関するカスタマイズ
• サムネイルの形やデザイン変更
• ヘッダー画像のアニメーション設置
• メニュー
• SNSボタン
• SEOに関する項目
• YouTube動画を全画面背景に出来る機能

Diverの特徴的な機能

Diverは、詳細な部分に手を加えることができたり他にはないショートコードがあったりとブログを作る上で気の利いたシステムを持っています。

1. 豊富なヘッダーメニュー
2. 入力補助機能
3. SEO対策
4. アイキャッチにYoutube動画
5. ファーストビュー設定
6. 広告設置が簡単
7. 細かなアクセサリー

1.　豊富なヘッダーメニュー

Diverはヘッダーメニューが豊富です。ブログの記事を増やしていくと雑然としてしまいます。そこで綺麗に整頓されたブログにするために活躍するのがヘッダメニューです。

Diverではいろんなヘッダーがあるので多くの内容を整然と並べかえることができます。

1. ロゴと並列のメニュー
2. ミニヘッダー
3. 固定ヘッダー

1.　ロゴと並列のメニュー

出典：Diver

一般でいう、ナビゲーションメニューがロゴと同じ位置にあります。テーマによってはカテゴリーをたくさん設置できないものもがありますが、Diverでは多く設置しても違和感がありません。

2.　ミニヘッダー

出典：Diver

右上に小さく出てくるミニヘッダー、ヘッダーなどの関係で広く設置できない時に役立ちます。

3.　固定ヘッダー

出典：Diver

画面を開くと上部に出てくる半透明のヘッダーの設置もできます。

2.　入力補助機能

Diverでのイチオシの機能が入力補助機能です。ワードプレスに慣れてない人や初心者でも視覚で確認しながらすすめることができるので便利です。

入力補助機能とはブロック分けされたカスタマイザーのこと。

出典：Diver

まだワードプレスに慣れないうちは、この画面で設定していけますし、もちろん中級者や上級者になっても使い勝手が良い機能です。

↓　WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

3.　SEO対策

基本的な内部SEO対策済みですが、nofollowやnoindex設定など個別投稿ページで指定することができます。メタディスクリプションといってそのページの概要などもカテゴリー一覧にて設定ができるようになっています。

出典：Diver

4.　アイキャッチにYoutube動画

最近、追加された機能がこのアイキャッチにYoutube動画をはめ込む機能。よく文章内にYoutube動画を入れますがアイキャッチに動画があることで記事一覧でも確認できます。

この動画は、アーカイブにも反映されますので、他のブログとの差をつけたい人にはピッタリです。

出典：Diver

5.　ファーストビュー設定

トップページに来る画面の設定が簡単にできます。トップページはブログの顔となる部分なのでキチンと作る必要があります。

画像での設定もできますし、プラグインを使用してスライダーも設置できます。さらに、シンプルにしたいならあらかじめ画像が用意されていますのでわざわざネットから画像を取り込む必要もありません。

ファーストビューを上手に使うとこんなヘッダー画像もできます。

↓　クリックで拡大します。

↓クリックで拡大します。

ファーストビューが超カンタンだから、作るのがすごく楽しいです！

6.　SEO対策済み

内部SEO対策の他、GoogleとTwitterが共同で開発しているモバイルの端末での高速表示のAMP対応済みです。

その他、レスポンシブにも対応しています。

6.　広告設置が簡単

Diverでは、アドセンスの広告も簡単に設置するウィジェットがあります。そして、もうひとつ特徴的なのは関連記事のようなインフィード広告を設置できることです。

出典：Diver

アドセンスの上級者に許される関連記事のような機能を持たせることもできますし、この配置は思わずクリックしてしまう工夫ですね。

7.　細かなアクセサリー

Diverは入力補助が優れているとご紹介しましたが、もうひとつの魅力は文章作成時につかう装飾などの使い勝手が良いことでしょう。記事のカードにかかる「NEW」というリボンも複数の標準装備されています。

出典：Diver

その他、人気記事のランキングにもちょっとしたデザイン違いが用意されていて使い分けることができます。

出典：Diver

↓　WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

AFFINGER6（アフィンガー）とDiverの違い　まとめ

AFFINGER6（アフィンガー）とDiverの特徴は個性的な機能を持っているという点では似ています。どちらも印象が似ているので使いやすい方を選ぶのが良いでしょう。AFFINGER6の方が少しだけ中級者用ではありますが、初心者でもやり方に慣れれば作りこみができます。

AFFINGER6（アフィンガー）とDiverの共通した機能

• SEO対策
• 1～2カラム
• 囲い枠やライン、見出しが豊富
• レスポンシブデザイン
• レイアウトパターンが複数ある
• 広告設置が簡単
• 動画を活用できる

内部SEO対策やアレンジなど基本的な部分は双方押さえていますし初心者にとっても使いやすいという部分では似ています。

AFFINGER6（アフィンガー）とDiverの違い

機能ごとに違いを考えてみましょう。

• 豊富なスライダー機能（AFFINGER6）
• デザインレイアウトパターン（AFFINGER6）
• 画像や文章が動くアニメーション機能（AFFINGER6）
• アイキャッチ・サムネイルをポラロイド写真風にできる（AFFINGER6）
• 着せ替え（AFFINGER6）
• 入力補助機能（Diver)
• アイキャッチに動画設定（AFFINGER6・Diver）
• 動くマーカー（Diver)
• ヘッダー簡単作成（Diver）

大きく分けると以上のような違いがあります。

↓　最新版、有料テーマで人気ものを調査しています。よかったら参考にしてみてください！

関連記事【2023年最新】WordPress有料テーマおすすめ8選比較まとめ！ カッコイイブログに変えるテンプレ！

【比較結果】AFFINGER6とDiverのどっちが向いてる？

さて、AFFINGER6（アフィンガー）とDiverのどっちがあなたに向いているのでしょう？好みにもよりますがデザインや機能から以下のようなブログやサイトに向いています。

AFFINGER6（アフィンガー）に向いているブログは

AFFINGER6は、デザイン面でも充実しているのでだいたいどんなサイトでも使えます。

• アフィリエイトブログ
• アドセンスブログ
• 育児ブログ
• マガジンサイト
• 旅行、グルメブログ
• ビジネスブログ

AFFINGER6（アフィンガー）とDiverはデザインも機能も比較的似ています。どちらか迷っている場合には、デザイン重視でも問題ないかと思います。

Diverには初心者向けの入力補助というものがあり視覚的にもわかりやすい配慮がありますし、AFFINGER6は、管理する場所が3つで最初は小難しいイメージもありますが慣れれば手の込んだカスタマイズが可能になりますので魅力です。

↓　AFFINGER6のカスタマイズが不安な方はこの記事を参考にしてください。

記事を取得できませんでした。記事IDをご確認ください。

Diverに向いているのは

Diverは操作がしやすいので初心者だったり、操作が不安だったりする場合にはコチラがおすすめ。

• マガジンサイト
• アフィリエイト
• アドセンス
• 旅行ブログ
• キュレーションサイト
• 初心者のブログ
• ビジネス

Diverには基本のSEO対策もされているので問題なく使えますし、クチコミやランキングもあるので一通りのことができます。

細かいアクセサリーはDiverの特徴ですが、AFFINGER6（アフィンガー）にもありますので一概にどちら寄りとも言い難いです。

しかし、2つのテーマを比べるとDiverはより初心者向け施策をしていますし、AFFINGER6（アフィンガー）はブログ作成に便利なアイテムやスライダー機能に優れています。

ワードプレスの初心者はDiver、ある程度使える人はAFFINGER6（アフィンガー）にすると良いと思います。

なつの5段階評価

ワードプレスに多少でも慣れているならAFFINGER6（アフィンガー）より初心者向けが良いならDiverを選ぶと良いと思います。

総合的にみればどちらもデザインは美しく汎用性が富んでいるので、ブログのデザインを作りこみたいならAFFINGER6（アフィンガー）も面白いと思います。

• AFFINGER6・・・手の込んだデザインにしたい場合　⇒AFFINGER6特典
• Diver・・・カスタマイズに時間をかけずカッコよくしたい場合⇒Diver特典

 AFFINGER6（アフィンガー）の5段階評価

Diverの5段階評価

AFFINGER6（アフィンガー）もDiverもどちらを選んでも良いブログになりますので最終的には見た目でピンとくる方のデザインを選ぶと良いと思います。

なつの特典比較　（AFFINGER6とDiverのオリジナルデザイン）

実は、このブログからAFFINGER6もしくはDiverをお買い上げいただいた方にオリジナルデザインのマニュアルをプレゼントしています！

このマニュアルを見ながら作れば、時間のかかる設定やデザイン変更もできるようになりますし、楽しみながら作れます。

AFFINGER6のデザイン特典

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

Diverのデザイン特典

初心者だからこそWordpress有料テーマ を使うべき理由

DiverとSTORK19は初心者が使うのに最適なWordpressテーマです。STORK19は超シンプルでわかりやすいですし、Diverは多くの機能を持っているけれども、操作が比較的簡単で、記事作成についても装飾がサクっとできる工夫があります。

DiverとSTORK19の違いと機能面の比較などお伝えしていきます。

　初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの評判】実際使ってみた口コミとレビュー。SNSでの噂も調べてみた。

DiverとSTORK１９の比較一覧表

DiverとSTORK19の2つのテーマは実はTOPページ見た目が少し似た構成もできます。レイアウトとしては以下の画像のように誘導ボタン等も配置できます。

これは、無料テーマのSydneyっぽいのですが、これだけではなく作りによってはアレンジも可能。

出典：Diver

出典：STORK

STORK19は、ここから引き算の構成ですが、Diverの場合にはよく見ていただくと、メニュー構成も3つありますし「お知らせ」の配置などちょっと複雑なものもできます。

Diverの構成でアレンジすると以下のようになります。

出典：Diverアフィリエイトデザイン特典

↓芸大卒のなつがDiverのオリジナルデザインを作りました！

デザイン面での違い

デザイン面では、STORK19はデザイン面でも操作面でもシンプルです。Diverは、基本はシンプルですが、スライドやメニューなど追加していけばニュースサイトなど情報量が多いサイトにも使えます。

STORK19を販売しているOPENCAGEのテーマは見た目もわかりやすいものが多いですが、どちらかというと個人のブログに向いています。

記事を取得できませんでした。記事IDをご確認ください。

デザイン変更は簡単？

Diverは基本色の一括変更や独自管理画面での操作などとても簡単にできるようになっていて初心者でも使えるように意識しています。

Diverに関しては、複雑なことでも簡単にできるような工夫があります。一方STORK19は操作もデザインも最初からシンプルなので使い勝手が良いですが、記事数が多くなる大規模サイトにはあまり向きません。

ただ、ビジネスやコーポレートサイトなどもDiverの基礎で作れますが、STORK19はビジネス向けではなく個人のブログもしくは趣味ブログに向いています。

	Diver	STORK19
値段	17,980円	10,800円（税込）
おすすめ用途	ビジネス・趣味ブログ	趣味ブログ
デザイン	12種類	1種類
ヘッダー	ワイドヘッダー	お知らせ
アイコンなど付属機能	見出し 囲み枠 バッジ ボタン 横棒グラフ ランキング レビュー表 QRコード	吹き出し 囲み枠 ボタン スライダー SNSボタン
初心者向け	入力補助機能	×
ショートコード	あり	あり
スライドショー	あり	あり
ランディングページ	あり	あり
広告設置	簡単設定 記事一覧のインフィード広告	簡単設置
ウィジェット機能	○	○
ランキング作成	○	×
プラグイン不要	―	必要
SEO対策	○	○
AMP	○	×
複数ブログに使用	OK	×
サポート	―	―

Diverのデモページでは、機能をすべて詰め込んでありますが、自分でデザイン変更は可能でポイントを数か所変えるだけでもかなりイメージが変わります。

出典：Diver例（Webカラー記事）

1. ワンポイント画像設置
2. 背景を2色設定
3. お知らせを設定

Diverはざっくり変更でここまでイメージが変わります。

STORK19は、デザインは1つだけで、ヘッダー部分にURL誘導ボタンを配置しスライダーを配置するというのが定番パターン。

この2つのデザインは対照的ですが、Diverのトップページなら引き算をすれば収まりますし、STORK19は変更はできませんが、定番として色の変更だけと決めてしまえばそれなりに使いやすいです。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」

⇒　Diverの公式ページを確認する。

※今なら、6大購入特典をお付けしています！

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

DiverとSTORK１９のデザインの比較解説

Diverのデザインは、TOP一面にあるメニューやタブや記事のアーカイブなどバランスよく配置しています。かなりの情報量、カテゴリーが整理されていますので、ビジネスなどにも向きます。

一方、STORK19はさほどTOPページで情報を組み込むことができませんが、おすすめする一番のものがどれかがわかりやすいので、初めて来たユーザーにもわかりやすいという利点もあります。

ブログを長く運営していくとどうしてもカテゴリーが増えていきますし、情報量も多くなります。さらにおすすめしたい記事や商品も増えてきますので、長く使うならDiverの方が良いですし、小～中規模のブログならSTORK19の方が使いやすいです。

DiverとSTORK１９のデザイン比較

それぞれのデモ画面を並べてみます。

↓　クリックすると拡大します。

出典：Diver

↓　クリックすると拡大します。

出典：STORK

並べてみるとSTORK19の方が余白があって見やすいんですよね。ただしこれはデモ画面なので、Diverも簡単なデザイン変更をすれば同じようなデザインもありますので安心してください。

デザインの変更があるのはやっぱり優位ですし、STORK19は1回限りしか使えないのでDiverの方がコスパは高いです。

Diverの特徴的な機能

Diverは、まだ他のサイトでも多くは見かけませんが、知る人ぞ知る優良テーマです。公式のデモデザインを見るとわかりますがカスタマイズ性が優れているのでイメージを変えやすいという利点があります。

デザインだけ見ると、複雑に見えていますが、「入力補助」という初心者にとっては使いやすい機能がついています。

この「入力補助」抜きではDiverは語れないくらい特徴的な機能ですのでこれから説明をしていきます。

1. 入力補助
2. 基本色一括変更
3. Youtube動画をアイキャッチにできる
4. 動く蛍光ライン
5. AMP対応
6. バージョンアップが多い
7. レイアウトが細かく設定できる
8. ファーストビュー

1.　入力補助

Diverの入力補助とは、独自のカスタマイザーのことで、アイコンで表示されているので、自分が何がしたいのか言葉にできない時も視覚的に判別できるようになっています。

他のテーマなども独自のカスタマイザーがあるものの、やはり言葉だけでマニュアルを見ながらとなりますので初心者にはハードルが高いのですが、Diverのこういった施策は初心者や早く使いこなしたい人にとってはとても良いシステムです。

出典：Diver

↓　入力補助の使いやすさは以下の記事で詳しく書いています！

記事を取得できませんでした。記事IDをご確認ください。

2.　基本色一括変更

Diverはワンクリックで基本色変更ができます。もしあなたがまだWordpressに慣れていないならまずはこの部分を触るだけでガラッとイメージが変わりますし標準装備の背景パターンも簡単に設置できるので、手間がかかりません。

Diverのデザインパターン

出典：Diver

3.　Youtube動画をアイキャッチにできる

全ての動画というわけではありませんが、アイキャッチをYoutube動画にすることができます。うまくいけばアーカイブでも動画となりますので、ユーザーにアピールしたり印象に残るブログになります。

出典：Diver

4.　動くマーカー

最近、ブログを開くと大事な部分にアンダーラインが流れていくのを見たことはありませんか？静止しているものよりも、目につきますよね。

まるで、自分がマーカーを引いている感覚になりますが、これもDiverには機能としてついています。

5.　AMP対応

AMPとはWebサイトをモバイル端末でより速く表示させるための技術のことを言います。GoogleとTwitterが一緒に開発をしているので今後も注目されていくシステム。

DiverはそんなAMPにも対応しています。

6.　バージョンアップが多い

Diverは、バージョンアップが比較的に多く、上記のアイキャッチをYoutube動画にすることも追加されました。TCDのようにあまり変わらないものよりも新しい技術をその都度追加したり、最新技術を使えるので長く使えます。

7.　メニューバーが豊富

Diverは、情報量の多いブログが向いているという理由のひとつに大小のメニューがあり上手に使えばとてもわかりやすいブログになるということです。

• 固定メニュー
• ミニメニュー
• ロゴと並列のメニュー

固定メニュー

出典：Diver

ミニメニュー

出典：Diver

ロゴと並列のメニュー

出典：Diver

8.　ファーストビュー設定

ヘッダー部分にいくつかの画像が用意されています。見た目には地味なのですがモダンなので使い勝手が良いです。

いろんな要素をレイアウトで配置していくのでこういった地味に見えるパターンを使うと全体的にカッコイイデザインにもなりますので、画像をダウンロードするのも大変だという初心者も使いやすいと思います。

出典：Diver

STORK１９の特徴的な機能

STORK19は、とにかくシンプルで使いやすさを追求しているテーマです。STORK19を販売しているOPENCAGEのテーマは全てシンプル。

その中でもSTORK19とSWALLOWが有名ブロガーさんが監修して作っています。

• モバイルファースト
• ショートコードで見出しやボタンを簡単挿入
• ウィジェットエリア
• SNSボタン
• ランディングページ
• スライドショーを簡単設置

もし操作に不安があるのなら、このテーマが一番使いやすいのではないかと思いますが、1回購入で1回しか使えないこと、基本的な機能だけなのでやはり高機能に目移りする部分もあります。

ただ、初心者の方やWordpressを始めて使う方には、ここまでシンプルなら使いこなしやすいでしょうし、まずWordpressに慣れたい人などには良いと思います。

1. 美しいデザイン
2. ショートコードで簡単に囲い枠やボタンができる
3. バイラルメディア風のアイキャッチ
4. スライドショーが簡単に設置
5. 広告の設置が簡単

1.　美しいデザイン

STORK19はTOPページが美しく仕上がります。テーマの中ではかなりシンプルなのですが、中央のURLへの誘導ボタンや、タイトル文字、お知らせなど自由自在に設置できます。

いっぱいいっぱい機能があってパズルのようになるものより、配置できるものが決まっていると一定以上の美しさになりますので、STORK19のアレンジは簡単です。

出典：STORK

2.　ショートコードで簡単に囲い枠やボタンができる

公式で配布されるショートコードでは、囲い枠やボタン、吹き出しなどブログに必要なパーツはほとんど用意されています。

こちらも多すぎず少なすぎずで迷わず使いやすいです。

3.　バイラルメディア風のアイキャッチ

STORK19では個別ページごとにカラムの変更ができます。（1～2カラム）1カラムの中でもばいらバイラルメディア風にできることから、サイドバーを非表示にしてシンプルにし、最後まで読んでもらえるような構成となっています。

4.　スライドショーを簡単に設置

TOPページに表示できるスライドショーがSTORK19の場合にはとても簡単に設置できるようになっています。タグ部分に文字を入れるだけでその記事がスライドショーに加わります。

シンプルなデザインですので動きが加わってもうるさくありません。

5.　広告の設置が簡単

STORK19では広告の設置場所が設けられていますので、ウィジェットで簡単に設置することができます。アフィリエイトなどでは目につくところに広告の設置ができますのでとても便利です。

DiverとSTORK１９の比較まとめ

デザインについてはDiverとSTORK19は少し似ているところがあります。しかし機能については違いがはっきりしていますので、何を優先するかで自分に合ったものはどちらなのかがわかります。

その他、共通した機能と違う機能をまとめました。

DiverとSTORK１９の共通した機能

• SEO対策
• レスポンシブデザイン
• 広告設置が簡単
• TOPページにURLの誘導ボタンが設置できる
• ウィジェットが充実
• ランディングページ作成機能

機能については、広告設置やレスポンシブデザインなど基本的な部分はDiverもSTORK19も一緒です。

DiverとSTORK１９の違い

DiverとSTORK19の機能面では似た部分もありますが、一番の違いはDiverの持つ基本色一括変更機能と複数ブログに使用できるかどうかです。

Diverは、高機能な分操作が難しくなりがちな部分を「入力補助」という独自のシステムで補っていますが、STORK19は元々シンプルにすることによって初心者でも使えるようになっています。

• 基本色一括変更機能（Diver)
• 入力補助機能（Diver）
• 豊富なメニューバー（Diver）
• アイキャッチにYoutube動画（Diver)
• 動くアンダーライン（Diver）
• ランディング作成機能（Diver・STORK19）
• 使いやすいショートコード（STORK19）
• お知らせ部分の挿入（Diver・STORK19)

【結果】DiverとSTORK１９のどっちが向いてる？

さて、DiverとSTORK19のどっちがあなたに向いているのでしょう？好みにもよりますがデザインや機能から以下のようなブログやサイトに向いています。

Diverに向いているブログは

• アフィリエイトブログ
• アドセンスブログ
• 語学ブログ
• マガジンサイト
• ニュースサイト
• 芸能ブログ
• ビジネスブログ
• スポーツブログ

Diverの用途は広いです。ビジネスにも個人用にも使えますし、デザインが簡単操作で変わりますので、デザインを変更していけばかなり多くのブログやいろんな用途も可能です。

STORK１９に向いているのは

• ドラマ・映画ブログ
• 情報量が中くらいのブログ
• 漫画のブログ
• 芸能ブログ
• グルメブログ

STORK19はシンプルなので、背景などを変更すればビジネスにも使えると思いますが、シンプルなので個人のトレンドブログなどが良いと思います。

なつの5段階評価（2テーマ比較）

ビジネスをはじめどんな内容にも合うテーマならDiver、シンプルなもので操作が簡単なものならSTORK19を選ぶと良いと思います。

複数ブログを作ったり、長く使いたいならDiverが良いでしょう。STORK19は1回しか使えないのでDiverとはコスパが段違いに悪いです。

 Diverの5段階評価

STORK１９の5段階評価

個人ブログならSTORK19、ビジネスをはじめ個人のブログ全般にはDiverが向いています。DiverとSTORK19を比べたなら、コスパの面を考えるとDiverに軍配が上がります。

↓　WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。

関連記事【Diverの６大特典】初心者でも楽々デザイン作成！評判の良いおすすめWordPressテーマ

初心者だからこそWordpress有料テーマ を使うべき理由