元サラリーマンブロガーなつのプロフィール

期間限定 割引セール! 「THE THOR」

8大特典&割引セール

 

WordPressテーマの「THE THOR」が2020年10月31日まで期間限定2000円割引きセール中です!迷っている方はこの機会にお見逃しなく!

 

★ 当ブログTHE THOR「8大特典」
★ 期間限定割引2000円引き!

 

当ブログの8大特典を確認する

Diverのオリジナルデザイン作成と設定方法!

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

Diverのデザインは基本的にはシンプルですが、どの有料テーマよりも使い勝手が良い入力補助という機能がついています。

この入力補助という機能が最大のポイントで、見出し囲い枠をはじめトグルまでこの場所で挿入が可能な上、ブロックアイコンで自分がやりたいことが一目でわかるという初心者にとってはすごく使いやすいテーマです。

ただ、AFFINGER5みたいな凝ったデザインとまではいかないので、どちらにするか迷うこともあるかもしれません。

なつ
Diverオリジナルのヘッダーの作り方はこのブログでもご紹介しています。

そこで、Diverのオリジナルデザインの作り方をおつたえしていきます。

 


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

Diverの機能紹介!ダイバーが初心者向きな理由!(WordPressテーマ)


Diver基本のデフォルトデザイン(Wordpressテーマ)

Diverですぐにブログを作ろうとすれば、5色の色パターンを導入すればそのまんま使えます。ただし、若干「?」となる色合いもあるので、その中で変更するか1から設定することになります。

 

基本色のパターンの問題点

基本色のパターンだけでも十分使えるんですが、よく見ていただくとサイドバーの色がすべて青なんですよね。

出典:Diverのデモサイト例記事

もし、全体的な色合いが気に入っているのなら、この部分の変更だけをしても十分カッコよくなりますが、基本的に普通のイメージがあるのでここではDiver固有のヘッダーを使って全体像をカスタマイズする方法をお伝えします。

以下のようなヘッダーのグラデーションアレンジもできるので是非見ていってください。

  • 左側の画像・・・PNG画像(フリー)

 

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

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

Diver(WordPressテーマ)の6大特典!初心者でも稼げる!ひとあじ違うテンプレートアイテムが魅力!


 

Diverのオリジナルデザイン全体像 (Wordpressテーマ)

Diverには、5種類の基本色パターンがあるとお伝えしましたが、若干おとなしすぎるイメージがあります。

そこで、Light(白基本のシンプルデザイン)と目を引く色パターンを作ってみます。

なつ特製アレンジデザイン

Light × マゼンタピンク
Light × ブルーグリーン
Light × カナリアイエロー
Light × ポピーレッド
Light × オレンジ
Light × チョコレート

基本的には作り方は同じにしてありますので、以下の色合いの設定をここで説明していきます。

 

Diverオリジナルデザインに使用する画像

ファーストビュー(ヘッダー)のデザインにちょっと季節感のあるもの数種類とスイーツ関連を選びました。

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

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

 

画像は、イラストACからダウンロードしています。

ヘッダーの背景があるので画像をダウンロードするには、PNG画像で引き込んでください。

補足
イラストACは、簡単な登録が必要になりますが、無料ですし使いやすい画像がたくさんあるのでおすすめです。

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

Diverデザインのマニュアル特典
Diverのオリジナルデザインです!当ブログよりDiverを購入くださった方に特典として差し上げます。

このマニュアルの通りに作ればCTAやタブなどの設定も併せてできるようになります。全部で5種ですが、基本色を変更すれば20種類以上のデザインが楽しめます。
⇒ デザインを確認するならコチラをご覧ください。

//たった30記事で稼いだ実録記事(2,980円相当)付き!\\

Diverのオリジナルデザイン 1. 「Light × マゼンタピンク」

Diverの基本色パターンredは合わせやすい色合いです。赤とサーモンピンクに近いのでかわいいのですが、見た目に若干ぼんやりしています。

そこで、少しピンクを強くして印象に残るようにします。

 

 

ワンポイントの画像がガラスのようなイラストにしています。この作成については、1つの画像を引きこむのみで完成していますので、超カンタンに出来上がります。

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 背景色・・・#e4007f
  • スタイル・・・リボン2

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・ストライプ(縦)
  • 背景カラー・・・#e8d3d1
  • 背景カラーサブ・・・#ebe1a9

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。(今回はお花になっている部分)画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色
  • 説明文
  • 説明文文字色
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#e95295
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

 

  • テキスト
  • 背景色・・・#e5abbe
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ文字色
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。


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

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

Diverのオリジナルデザイン 2. 「Light × ブルーグリーン」

 

  • 画像・・・kabu (S-cait)

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 背景色・・・#008899
  • スタイル・・・ボックス

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・グラデーション
  • 背景カラー・・・#6d95a3
  • 背景カラーサブ・・・#f8e58c

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色
  • 説明文
  • 説明文文字色
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#f0908d
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

 

  • テキスト
  • 背景色・・・#544a47
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ文字色
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。


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

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

Diverのオリジナルデザイン 3. 「Light × カナリアイエロー」

黄色は育児などに向いています。イラストを変更するとイメージも変わりますので、自分のブログに合わせてアレンジしてみてください。

 

 

画像・・・そらのとり

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 基本色・・・#edcdad
  • 文字色・・・#8c8c8c
  • 背景色・・・#fff462
  • スタイル・・・ステッチ

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・ドット
  • 背景カラー・・・#d8e698
  • 背景カラーサブ・・・#fef263

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色
  • 説明文
  • 説明文文字色
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#f39800
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

  • テキスト
  • 背景色・・・#c7dc68
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ背景色・・・#ec6d51
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。

 

Diverのオリジナルデザイン 4. Light × ポピーレッド

Diverでもredという赤系の色があります。シンプルにしたい人はそのままでもOKですが、少し画像とカスタマイズを加えるとかなり雰囲気が変わるのでおススメです。

 

画像・・・普通人

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 背景色・・・#ea5550
  • スタイル・・・タグ

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・タイル
  • 背景カラー・・・#f2a0a1
  • 背景カラーサブ・・・#e0c38c

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色
  • 説明文
  • 説明文文字色
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#ea5550
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

  • テキスト
  • 背景色・・・#544a47
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ背景色・・・#ec6d51
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。

 

Diverのオリジナルデザイン 5. Light × オレンジ

見る人にとって元気が出る色はオレンジです。ビタミンを想像させるオレンジは健康なイメージがありますよね。

食べ物をテーマにしたブログなどと相性が良いので、ぜひ活用してみてください。

 

画像・・・普通人

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 背景色・・・#f39800
  • スタイル・・・ステッチ

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・ストライプ
  • 背景カラー・・・#f6ad49
  • 背景カラーサブ・・・#e0ebaf

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色・・・#66483d
  • 説明文
  • 説明文文字色・・・#8f8667
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#ea5550
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

  • テキスト
  • 背景色・・・#7b8d42
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ背景色・・・#ebd842
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。

 

Diverのオリジナルデザイン 6. 「Light × チョコレート」

茶色とはまた違ったチョコレートっぽい色は、実はピンク系と相性が良いです。茶色は基本的にはなんの色でも合わせやすいですが、間違えると見た目には変でなくともダサく見えます。

合わせる色に迷ったら、ピンクにするとちょっとおしゃれになりますし、ライン等は黒っぽい色を持ってくると無難です。

画像・・・普通人

 

作成手順

  1. 基本色設定で「Light」に変更
  2. サイドバーのタイトル色と形を変更
  3. ファーストビューで色を設定
  4. コンテンツ設定
  5. ヘッダーメッセージ設定

 

1. 基本色設定で「Light」に変更

▼ 外観 ⇒ カスタマイズ ⇒ 基本カラー変更

テーマカラーの「light」にチェックを入れると、白基調のシンプルデザインになります。

 

2. サイドバーのタイトル色と形を変更

▼ 外観 ⇒ カスタマイズ ⇒ デザイン設定②

ウィジェットタイトルのスタイルの背景色とスタイルを変更します。

  • 背景色・・・#6c3524
  • スタイル・・・ステッチ

 

3. ファーストビューで色を設定

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

  • ファーストビュー・・・シンプル
  • 背景スタイル・・・ストライプ
  • 背景カラー・・・#6b3f31
  • 背景カラーサブ・・・#98605e

 

4. コンテンツ設定

コンテンツはヘッダー左側のワンポイントの画像のことです。画像を指定し、タイトルや説明などをここで入力します。

同じようにボタンを付ける場合には、URLやボタンタイトルを入れます。

  • タイトル
  • タイトル文字色・・・#66483d
  • 説明文
  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー・・・#e95388
  • ボタンテキストカラー

 

5. ヘッダーメッセージ設定

今回は、ファーストビューの下にお知らせを付けています。その部分の設定もしておきます。

▼ Diverオプション ⇒ 基本設定

  • テキスト
  • 背景色・・・#3f312b
  • 文字色
  • バッジ・・・バッジの文字(お知らせなど)
  • バッジ背景色・・・#f6ad49
  • リンク先・・・飛ばしたいURL

 

すべて入力が終われば「変更を保存」をクリックします。

↓ 高機能で使いやすいDiverを当ブログからお買い上げの方に特典をプレゼントしています。

Diver(WordPressテーマ)の6大特典!初心者でも稼げる!ひとあじ違うテンプレートアイテムが魅力!

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

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

 

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

 

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 

出典:Diver

↓ 芸大卒のなつが作ったDiverオリジナルデザインです。

出典:なつオリジナルデザイン

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

初心者に特におすすめのWordPressテーマ

⇒ Wordpressテーマ「Diver」はコチラ

 

  • 高機能で最新SEO対策済みのテーマ
  • 基本色変更がワンクリックで完了
  • 初心者にも使いやすい入力補助
  • ペラサイトなどもラクラク作成
  • カッコいいヘッダー背景が標準装備
  • グラデーションもかんたん

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です