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

当ブログおすすめのテーマ!


\\//

✔徹底的に表示速度にこだわった完璧なSEO対策のテーマ!

高機能なのに初めてブログを作る人でもカスタマイズがしやすいテーマ。
ブログ作成の欲しい機能がギュッと詰まった今一番人気のテンプレートです。
今なら5大特典「たった30記事で15万円稼いだ方法」やオリジナルデザインマニュアルその他豪華特典付き!
 
詳しい内容は下記のボタンでご確認ください!

Diverのデモサイト例とその作り方!超簡単に自分のオリジナルを作ろう!【ワードプレステーマ】

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

Diverは「入力補助」という初心者向けの機能が特徴です。デザインについては基本形はかなりシンプルなのでデフォルトの画面を見ると若干寂しい感じもします。

その分、背景や色づかいを自分なりにカスタマイズしやすいという点もあります。

ワードプレステーマのDiverのデモサイト例やその作り方をここでお伝えしていきます。

 

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

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

Diver(ワードプレステーマ)の機能紹介!初心者に向いている理由!

Diverの公式のデモサイト例【ワードプレステーマ】

Diverの公式デモサイト例は、よくも悪くも「普通」です。ただし、できることが多く調整することによって初心者でも作りこめるという特徴を持っていますので、デモサイトだけ見て判断するのはもったいないです。

出典:Diver公式

時期的にみると上の6つは発売当初のころのデモサイトで、下の6つは追加されたもののようです。デザインがガラッと変わっていますよね。

 

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

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

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

 

ワードプレステーマDiverのデフォルトのデモサイトはこんな感じ

Diverをインストールし、ほぼ変更しない状態なら以下のような青が基調の色合いになります。TOPページに画像等も設定していない状態ではかなりシンプルですよね。

記事一覧ページ

タイル調などにもできますが、テキストもちゃんと入れたい場合には以下のような構成でも問題ありません。
若干色味が地味ですが・・・

個別ページ

個別ページのアイキャッチがさりげなく3Dのような見え方になっています。クールな感じがします。

 

Diverの基本テーマカラー

まだ、ブログのデザインまでできない初心者や作りこむのが面倒な場合、色味の変更がワンクリックでできるようになっています。

色合いは5種類+カスタム
light
dark
blue
red
green
カスタム

light

dark

blue

red

green

 

darkは、背景やテキスト部分などガッツリ黒になるので、アフィリエイトには向きませんが、インパクトが欲しい時にはいいかも。greenは背景が赤系なので若干変わった色合いです。


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

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

当ブログでのDiverのデモサイト例 【ワードプレステーマ】

ここでは、簡単にできるワードプレステーマ「Diver」のアレンジ方法をお伝えしていきます。THE THORはスペースを広くとっているので背景などがあるととてもかわいい雰囲気になるのですが、Diverは要素が整然と詰まっているので、あまり派手な背景は必要ありません。

デフォルトのgreenのヘッダー等を変更

基本テーマカラーのgreenのヘッダー画像を少し触ってみました。Diverにはヘッダーの背景に使用できるドットやストライプが用意されています。

そのうちのドットで色を追加しています。

 

↓クリックでヘッダーが拡大します

ヘッダーについては、Diverのデフォルトの背景に色を重ねたものです。画像はフリー画像をpngで取りこんだものです。

変更箇所

  • コンテンツ追加
  • 背景設定
  • スライダー設定
  • ウィジェットタイトルのスタイル変更

どの基本カラーでも応用できるので、ヘッダー画像の作り方とスライダーの設置方法を中心に説明していきます。

Diverのカスタマイズで使うのは2か所

一般の外観から入るカスタマイズだけではないので、若干難しく感じるかもしれませんが、Diverのオプションで超シンプルに変更ができますので安心してください。

↓ フリー(無料)の画像を探すなら以下の記事が役にたちます。

ブログで使えるイラスト25選!フリー(無料)素材でサイトをパワーアップ!

 

Diverのデモサイトの前の設定 「基本カラー」

まずは、基本カラーの出し方を説明していきます。最初から用意されたカラーを使うと便利ですし難しい設定は不要となります。

とりあえずはサクッと見た目の良いブログを作ってしまいたい人は、基本カラーのみ設定してしまってカスタマイズはブログが育ってからでも良いと思います。

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

基本カラーの好きな色(今回はgreenを元にしてデモを作っています)を選んで「公開」をクリック。


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

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

Diverのデモサイト例のカスタマイズ 1. 「コンテンツ追加」

Diverの場合には、ヘッダー画像の部分はファーストビューと言います。Diver特有の管理画面で設定をするのですが、とても簡単に画像や動画が設置できるようになっています。

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

コンテンツの中で、ワンポイントの画像を追加しています。

 

背景設定

変更できるもの

  • 表示位置・・・メニュー下や最上部など位置設定
  • 表示オプション・・・どのページに表示するか
  • ファーストビュー・・・画像・動画などを選ぶ
  • 背景スタイル・・・背景の模様など
  • 背景スタイルオプション・・・ストライプなど縦・横など
  • 背景カラー・・・メインの色
  • 背景カラーサブ・・・サブの色(水玉の部分など)

 

今回、設定したもの

この中で設定したのは3か所だけです

  1. ファーストビュー・・・「シンプル」をチェック
  2. 背景スタイル・・・「ドット」を選ぶ
  3. 背景カラーサブ・・・#aacf53 に設定

 

「変更を保存」を最後にクリック。

コンテンツ設定

次に、ファーストビューの上の画像やテキストの設定をします。

変更できるもの

  • ファーストビューコンテンツ・・・なし、カスタムなど
  • 画像・・・画像を入れたい場合
  • タイトル・・・ブログのタイトル
  • タイトル文字色・・・タイトルの文字色
  • 説明文・・・ブログの説明文
  • 説明文文字色 ・・・説明文の文字色
  • ボタンタイトル・・・ボタンの上のテキスト
  • ボタンリンク先・・・ボタンを押すと飛ぶURL
  • ボタン背景カラー・・・ボタンの色
  • ボタンテキストカラー・・・ボタン上の文字の色

 

今回、設定したもの

  1. 画像・・・フリーのpng画像
  2. タイトル
  3. 説明文・・・ブログの説明文
  4. ボタンタイトル・・・「詳細はコチラ」
  5. ボタンリンク先・・・誘導したいURL
  6. ボタン背景カラー・・・#d9333f

 

「変更を保存」を最後にクリック。


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

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

Diverのデモサイト例のカスタマイズ 2. 「スライダー設定」

Diverでは、最初はスライダーが設定されていません。スライダーに入れたい記事の指定し、どの位置に配置するのかカスタマイズが必要です。

タグに「pickup」と入力

まずは、スライダーに入れたい記事のタグに「pickup」と入力します。

入力する場所は、投稿ページの右側にあります。

スライダーの配置位置の設定(投稿ページ)

上の設定をしておけばTOPページには表示されますが、投稿ページにもスライダー配置したい場合には位置を設定します。

▼ 外観 ⇒ カスタマイズ ⇒ 投稿ページ設定

pickup記事表示の位置を以下から選ぶ。

  • 記事上(top)
  • 記事下(bottom)
  • 非表示(hidden)

 

Diverのデモサイト例のカスタマイズ 3. 「ウィジェットタイトルのスタイル変更」

基本カラーを見ていただくと、サイドバーのタイトル部分の色が紺色になっています。すこし違和感りますので同系色に統一します。

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

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

背景色・・・#7b8d42

Diverのデモサイト例のカスタマイズ 4. 「背景設定(シンプル)」

今回はファーストビューの部分は「シンプル」にしましたが、Diverにもともとデフォルトで入っている模様があるので、シンプルながら面白いヘッダーを作ることができます。

たとえば「ドット」以外で作るとどんな感じになるか見ていきましょう。

ストライプ

縦ストライプと横ストライプ、斜めストライプを選べます。


縦ストライプ


横ストライプ

 

グラデーション

グラデーションは結構大胆な色を選んでも結構うまくいくと思います。

タイル

市松模様になるのですが、反対色を選ぶと面白いです。

 

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

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

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

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

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

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

 

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

 

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

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

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

 

1. 検索上位を目指せる

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

 

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

 

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

 

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

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

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

 

出典:Diver

 

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

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

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

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

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

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

 

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

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

  おススメ!WordPressテーマ

wordpressテーマ「Diver」

 

  • 高機能の最新テーマで大人気
  • 着せ替え機能でいろんな用途に使える
  • 初心者にも使いやすい工夫がいっぱい

 

コメントを残す

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