AFFINGER6は全体の色とレイアウトを一括で変更が可能です。色も原色ではなく少し色味を落としてあり、他の色との相性も良いものが多いので使いやすいです。

そのままでも充分使えますが、他のブログとの差をつけるためにアレンジをしてみましょう。

AFFINGER6の全体カラーの設定方法とそこからのアレンジをお伝えします。

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

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

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6のブログ（カラー）パターン

AFFINGERでのデザイン一括変更は、管理画面の全体設定でできるようになっています。同じ画面で、レイアウトも一緒に変更ができます。

内容を見ていただくと、赤や青、緑などの後ろにエレガントやナチュラルという色のイメージが書かれています。

この色の微妙の違いがブログにちょうど良い雰囲気を作ってくれます。

用意された色の微妙な違い

AFFINGERの一括色変更では、12色の色があります。大体は、特徴的な色とその色を優しい感じにした色が用意されています。

以下はオレンジ色の2色です。

オレンジ（元気）

オレンジ（やさしい）

微妙に色が違うのがわかりますかね？

おなじ色でも（やさしい）や（元気）というイメージカラーが用意されていますので、ちょっと色がきついなと思った場合微妙な調整が可能となります。

AFFINGER6の色合いはとても合わせやすいので、ぜひ使ってみてください。

その他、Diverなども、合わせやすい色を集めた基本色一括変更がありますが、AFFINGERのように微妙に近いイメージカラーはありません。

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

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

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

AFFINGER6で色を一括変更してみる

まずは、AFFINGERの管理画面で色の一括変更をしてみましょう。ワンクリックでできるので初心者でも問題なく設定できます。

▼　AFFINGER管理画面　⇒　全体設定

カラーパターンの好きな色を選んでチェックをし、最後に下にスクロールして「SAVE」をクリックすると、ブログの色が一括して変更されます。

AFFINGER6の全体カラー変更で反映しない時

AFFINGER6の全体カラーが反映しない場合には、いったんリセットをしてみましょう。（カラーパターン＆デザインパターン設定の一番最後に赤で書かれている部分です。）

管理画面に書かれているのですが、カスタマイザーで操作するので、迷ってしまうと思いますので、少しここで説明しておきます。

▼　外観　⇒　カスタマイズ　⇒　全体カラー設定

下にスクロールしていくと、カスタマイザーをリセットするというタイトルが出てきます。「リセット」ボタンを押し、公開をクリックします。

この操作をすると、全体がグレーになりますので、再度色を設定してみてください。

全体カラー設定後にヘッダーをグラデーションにする

AFFINGERの全体カラーとレイアウトを変更したら、次はアレンジをしていきます。ここからは、公式マニュアルにもありませんので、ぜひ設定してみてください。

特に難しい設定等は必要ありません。

グラデーションカラーにする手順

初心者の方にもわかりやすいように、色の導入からの手順を書き記しておきます。

1. 全体色一括変更（管理画面）
2. グラデーションカラーに変更（カスタマイザー）

見ていただくと手順としては2つだけで完成します。グラデーションカラーは、合わせる2色が難しいので、その調整に時間がかかるかもしれません。

↓　2色の配色は以下の記事が参考になります。

関連記事【配色】２色～４色の組み合わせでかっこいい色合い！おしゃれで綺麗に見えるコツと実例。

2023.05.28

ヘッダーの【縦】グラデーションの作り方

まずは、上下にグラデーションを作ります。ヘッダー全体に厚みが出てくるようなイメージとなります。

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　ヘッダーエリア

下にスクロールしていくと背景色と背景色（グラデーション上部）が出てきますのでここで色変更をしていきます。

全体カラーを設定してあると画像のように最初からブログの色が入っています。ここでヘッダーの色合いを変更していきます。

グラデーション上部の背景色を変更する

どちらの色を変更してもグラデーションとなります。背景色を変更すると、グローバルメニューのすぐ上の色が変更されます。

こちらも好みなので、設定してみて調整しながら作ってください。

• 全体カラー・・・緑（やさしい）
• 背景色（グラデーション上部）・・・黄緑

上部に少し違う色を入れると上部ヘッダーがちょっとふっくらしたイメージになります。（色にもよりますが、明るめの色を入れた場合）

ヘッダーの【横】グラデーションの作り方

次にグラデーションを強調するなら横で色を変更するとわかりやすいです。設定も簡単なので、調整しながら設定してみてください。

背景色と背景色（グラデーション上部）となっているところのすぐ下に「グラデーションを横向きにする」とあります。

この部分にチェックを入れ「公開」をクリックしてください。

AFFINGER6のグローバルメニューの部分をグラデーションにする

AFFINGERにある、TinyおよびTiny2という着せ替えは、ヘッダー部分とグローバルメニューが交互にグラデーションとなっています。

淡い色を2色使ってとても上品なデザインです。これと同じように、ヘッダーとグローバルメニューを交互にグラデーションにすることも可能です。

グローバルメニューの【縦】グラデーションの作り方

グローバルメニュー自体が細いので、縦グラデーションにすると真ん中のメニューが浮き上がります。

▼　外観　⇒　カスタマイズ　⇒　ー各メニュー設定　⇒　PCヘッダーメニュー

背景色（グラデーション上部）を変更し「公開」をクリックすると以下のようになります。この部分では、ボーダーやテキストカラーも変更できますので、調整していきましょう。

ボーダーとは、それぞれを区別する上下、左右の線の色のことをいいます。

グローバルメニューの【横】グラデーションの作り方

同じようにグラデーションの横のものを作ってみます。

▼　外観　⇒　カスタマイズ　⇒　ー各メニュー設定　⇒　PCヘッダーメニュー

AFFINGERの着せ替え「Tiny」のように横グラデーションを交互に見えるように設定してみます。

背景色の色を変更します。カラーピッカーの下にある「グラデーションを横向きにする」にチェックを入れて「公開」をクリックします。

するとグラデーションが上から交互になりました。

フッターエリアのグラデーション

最後にフッター部分もグラデーションにしてみましょう。色をあわせて統一感を出すと綺麗に見えます。

フッターの【縦】グラデーションの作り方

まずは、ヘッダーと同じように、縦のグラデーションを作ってみます。

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　フッターエリア

背景色（グラデーション上部）の部分の色を変更し、「公開」をクリックします。

するとフワッとしたフッターができました。

フッターの【横】グラデーションの作り方

次に、フッターを横のグラデーションにしてみます。

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　フッターエリア

フッターのカスタマイズ部分も同じく、カラーピッカーの下にある「グラデーションを横向きにする」にチェックを入れて「公開」をクリックします。

AFFINGER6ヘッダーアレンジ　「おまけ」

グラデーションばかりは飽きると思う方は、ヘッダーに透過画像をプラスするという手もあります。

AFFINGER5では配布されていたドットやタイルのPNG画像（透過）を使うとちょっと面白いデザインになります。（ない場合には、イラストACなどからダウンロードしてみてください）

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　ヘッダーエリア

カラーピッカーの下に画像を追加するボタンがありますので、PNG画像を追加します。

すると、ドット模様がグラデーションの上に重なります。

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

AFFINGER6は人気のWordpressテーマでAFFINGER5の後継版として注目されています。

そのままシンプルにも使えますし、設定で作りこむこともできます。

AFFINGER6を使っているブログ紹介とインストールしてブログにするまでの工程の流れをご説明していきたいと思います。

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

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

AFFINGER６を使用したブログサイトを見てみる！

AFFINGER6のテーマを使っている人は多いです。シンプルなのでなんにでも使えますし、少し工夫すれば凝ったデザインも可能です。

わんわん英会話

作者：わんわんさん

かわいいワンちゃんが主役でのんびり系の英会話ブログかと思いきや、かなり具体的でわかり易い英会話のブログとなっています。

説明が細かくて丁寧になっていて、キャラクターを追っていくといつの間にか頭に入っている・・・、そんなブログです。

⇒　わんわん英会話

モノグロ/monogrow

作者：Huubさん

「ときめくモノと共に暮らし成長する」をモットーに日常用品や、家電インテリア、ファッション、ガジェットなど多岐にわたり記事を書いておられるカッコいいブログです。

色合いもホッコリする2色使いで、なんだか居心地がよく私もこんなカッコいいブログを作ってみたいな～と感じます。

⇒　モノグロ/monogrow

にゃん吉のお金ラボ

作者：にゃん吉さん

節約や、お金、生活の知恵などをコンパクトにまとめてあるサイトです。主婦ならではの視点から生活の無駄を考えているブログ。

ご本人もFPや簿記をお持ちで、誰にでもできる節約を公開しておられます。

⇒　にゃん吉のお金ラボ

↓　タブ式カテゴリー一覧の作り方はコチラ！

関連記事AFFINGER6トップページのカスタマイズ方法！デザインアレンジ5選！

2022.09.25

ままのこ

作者：りのさん

妊娠・育児・ダイエット・歯科矯正・レシピなど、2児の母であるりのさんがブログでつづっています。

⇒　ままのこ

↓　ボックスメニューの作り方はコチラ！

関連記事AFFINGER６の機能の検証！使いこなす活用方法も！

2022.07.24

東京らーめんブログ

作者：ウェブエックス株式会社

ラーメン・つけ麺からカップ麺、袋麺まで幅広く取材をして記事にしておられるらーめん愛溢れるブログです。

たくさんの写真を配置し、とても見やすいブログです。ラーメン好きな方やどこに行こうか迷っている人など参考になります。

⇒　東京ラーメンブログ

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

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

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

AFFINGER６をブログ（サイト）に使ってみた独自レビュー

私は複数のブログを運営していますが、AFFINGER6を導入しているブログもあります。自分が使ってみて思うのは、「作りこみ」が楽しいこと。

デザインに凝りたい人にとっては充分すぎる機能があります。

• 投稿ページのかわいい文字装飾
• 豊富なスライドショー
• プロフィール機能が可愛い
• バナー作成機能
• センスの良いデザイン済データーがある
• 気の利いたブログカード
• 使いやすいランキング

AFFINGERのデメリットとメリット

AFFINGER6はうまく使いこなせればカッコいいブログになりますがデメリットとなる部分もあります。

• AFFINGER6のメリット・・・できることが多い、作りこめる
• AFFINGER6のデメリット・・・操作が3か所なので慣れるのに時間がかかる・手作り感がでる

使い方については、デフォルトの無料テーマなどを使っておられる場合、カスタマイザーのみで作ることが多いです。（シドニーなど）

AFFINGER6の設定はCocoonの設定と似ていて「専用管理部分」「カスタマイザー」「ウィジェット」で操作するために私自身も慣れるまで時間がかかりました。

ただ、慣れてしまえばできることが多いので作りこみができます。

その他、デザインに関してはデザイン済データーなども可愛くセンスが良いのですが、種類が少ないので、他のブログとデザインがかぶる場合があることがデメリットといえます。

⇒　AFFINGER6（アフィンガー）のメリットとデメリット！

AFFINGERを使ったブログサイトの完成図

最初にお伝えしたブログも、基本のデーターをうまく入力することができれば簡単にアレンジができます。

そこで、まずはAFFINGER6の基本中の基本、2通りのデザインインストールのやり方をお伝えします。

まずは、AFFINGER6（アフィンガー）を使ったブログの完成図をご覧ください。1つは用意されたデザイン済データを使い、もうひとつは基本のカラーパターンで仕上げています。

• デザイン済データ
• 基本形のカラーパターン

もし、デザイン等が好みに合わない時にはその他の部分を少しづつ調整していけば手間が省けると思います。

基本のカラーパターン完成図

カラーパターンとデザインパターンを駆使すれば多くのデザインが完成します。ファイルのインストールなど難しい場合にはこの機能だけでも十分で、ワンクリックでシンプルなブログサイトになりますので試してみてください。

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

AFFINGER６のブログサイト作成　工程一覧

手順を追って説明をしていきますが、もしわかっていることがあればその部分は飛ばして読んでいただけるように工程一覧を作ってあります。

もし、作り方に自信がない方やつまづきそうな方は全体に目を通していただいた方が良いと思います。

⇒　AFFINGER6のカスタマイズまとめ

（すでにWordpressを導入できている状態からのスタート）

1. AFFINGER6（アフィンガー）のインストール
2. 初期設定
3. プラグインインストール
4. デザイン済データ導入
5. カラーパターン変更

1～3は共通項目、4番と5番はデザインの部分となりますので完成図を見て好きな方どちらかを選んでください。

↓　購入からダウンロードまでの記事です。

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

AFFINGER６のブログサイト作成　工程　1.　「インストール」

まずは、ダウンロードしたAFFINGER6（アフィンガー）のファイルをWordpressに導入します。Wordpressにログインしてください。

新規追加でZIPファイルを指定

WordPressにログインをしてダッシュボードの管理画面からテーマのダウンロードする場所に移動します。

▼　外観　⇒　テーマ　⇒　新規追加　⇒　テーマのアップロード

「ファイルを選択」をクリックし、ダウンロードしたAFFINGER6（アフィンガー）のZIPファイル（affinger6.zip）を選びます。

テーマのアップロードと有効化

ボタンの右側にaffinger6.zipと出てきますので、「今すぐインストール」をクリックします。

インストールできたら「有効化」をクリックします。

affinger6.zipと同じやり方で子テーマのaffinger6-child.zipを導入します。

AFFINGER６のブログサイト作成　工程　2.　「初期設定」

ここからはAFFINGER6（アフィンガー）の初期設定をしていきます。特に難しくはありませんのでサクっと設定を済ませておいてください。

1. マニュアルの確認と初期化
2. 一般設定
3. 表示設定
4. パーマリンク設定

1.　マニュアルの確認と初期化

AFFINGER6（アフィンガー）がインストールできたらマニュアルが配布されます。マニュアルは「AFFINGER管理画面」の「はじめに」というボタン部分から入れます。

ページの真ん中に青いボタン「保存」とありますので初めに1回クリックします。このことをすることによって初期化されます。

• マニュアルの「保存」ボタンを押す

2.　一般設定

一般設定は、他のテーマでも基本的にやることです。

▼　設定　⇒　一般

サイトタイトルとキャッチフレーズを設定して「変更を保存」をクリック。

3.　表示設定

表示設定も基本的にやっておく設定です。

▼　設定　⇒　表示設定

1ページに表示する最大投稿数と「抜粋のみを表示（AFFINGER推奨）」をチェックして「変更を保存」をクリック。

4.　パーマリンク設定

AFFINGER6ではパーマリンクは投稿名が推奨です。

▼　設定　⇒　パーマリンク設定

投稿名の部分にチェックを入れ「変更を保存」とクリック。

↓　Wordpressテーマ「AFFINGER6」の導入からブログ作成まで。

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

AFFINGER６のブログサイト作成　工程　3.　「プラグインインストール」

AFFINGER6（アフィンガー）の公式で推奨されているのが「Classic Editor（プラグイン）」です。その他、デザイン済みデータを導入するために「Customizer Export/Import」などが必要となります。

推奨プラグイン

• Classic Editor・・・旧エディターに戻すもの
• EWWW Image Optimizer・・・画像を自動で圧縮するもの
• TinyMCE Advanced・・・エディタを拡張するもの
• DuplicatePost・・・投稿や固定記事を複製できる
• Google XML Sitemaps・・・Googleのクローラー用サイトマップを作成

公式からはその他キャッシュ系のプラグインなども推奨されていますので必要に応じて追加していってください。

デザイン済みデータを導入する場合に必要になるプラグイン

• Customizer Export/Import・・・DATファイルを導入する
• Widget Importer & Exporter・・・ウィジェットファイルを導入する

プラグインのインストール方法（共通）

プラグインのインストールは共通です。

▼　外観　⇒　プラグイン　⇒　新規追加

右上の検索窓に該当のプラグインの名前を入力するとプラグインのインストール画面が出てきます。

今すぐインストールを押すと画面が変わります。「有効化」という文字があるのでそちらをクリックするとインストール完了です。

AFFINGER６のブログサイト作成　工程　4.　「デザイン済データ導入」

デザイン済データを導入するためには、前の章のプラグイン「Customizer Export/Import」「Widget Importer & Exporter」の2つのインストールが必要です。

デザイン済データではなく基本系で色の変更のみで使いたい場合には次の章をご覧ください。

AFFINGER6（アフィンガー）のデザイン済データ

AFFINGER6（アフィンガー）のスタンダード版では、今現在7種類のデザイン済データが用意されています。

• 一般ブログ向けポップなデザイン・・・Tidy2、Study Bear
• シンプルデザイン・・・MUKU・cloud

出典：AFFINGER6「Tidy2」

出典：AFFINGER6「cloud」

出典：AFFINGER6「MUKU」

出典：AFFINGER6「Study Bear」

デザイン済データの導入方法

好きなデザインが決まったらダウンロードしていきます。

出典：AFFINGER5

ZIPファイルがダウンロードできますので、展開していきます。（このままではインストールできませんのでご注意ください）

ZIPファイルを開く

ダウンロードしたファイルを開きます。（ファイルの上でダブルクリックをします。）

4項目出てきますので、「ウィジェット用」と「カスタマイザー用」という部分をクリックして開いてください。

• ウィジェット用・・・WIEファイル
• カスタマイザー用・・・DATファイル

上記2つのファイルが出てきますので、わかるところにコピペで保存しておいてください。

カスタマイザー用ファイルのインストール

▼　外観　⇒　カスタマイズ　⇒　エクスポート/インポート

「ファイル選択」をクリックし、カスタマイザー用のファイルを選びます。

「インポート」をクリックするとデザインがブログに反映します。

ウィジェット用ファイルのインストール

次に、ウィジェット用のファイルをインストールします。

▼　ダッシュボード　⇒　ツール　⇒　Widget Importer & Exporter　

「ファイルを選択」をクリックし保存したWIEファイルを選びます。

「ウィジェットをインポート」をクリックします。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

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

AFFINGER６のブログサイト作成　工程　5.　「カラーパターン変更」

デザイン済データの工程をせずにデフォルトのデザインの色変更のみでも立派なブログになります。もしカスタマイズに自信がなければ、最初はカラーパターンとデザインパターンのみ変更して使いだすと良いでしょう。

AFFINGER6（アフィンガー）をインストール直後のデザイン

（以下の画像は、「ヘッダー画像」と「プロフィール」のみ設定はしてあります。）

• プロフィールの設定はコチラ
• ヘッダー画像の設定はコチラ

トップのヘッダー部分はデフォルトではグレーとなっています。

▼　AFFINGER管理画面　⇒　デザイン

デザイン例

• 色・・・緑（やさしい）
• デザイン・・・ブログ（初心者）

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

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

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

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

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有料テーマ を使うべき理由