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

Diverのデザインサンプル例!公式サイトとオリジナルも! (WordPressテーマ)

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

Diverは有料テーマの中でも初心者をターゲットにしているテンプレートです。ペラサイトにも使いやすいですし、とにかくシンプルに使いやすいのが最大の特徴。

テーマはインストールからカスタマイズまで細かい作業が必要になりますがDiverの場合には必要最低限の設定のみでそこそこのブログになります。

Diverでどんなサイトになるのかデザインのサンプル例をいくつか作ってみました。

この記事で得ることができる情報

  • 1. Diverの公式デザインサンプル例
  • 2. Diverのデザインサンプル2つと作り方
  • 3. 基本色の一括変更
  • .4. ヘッダーの設定方法
  • 5. Diverオプションでのヘッダー画像設定

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

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


Diverのデザインサンプル例  (公式Wordpressテーマ)

Diverの公式サイトでも、こんなデザインが作れるというサンプルが見ることができます。元々シンプルなパーツを組み合わせて作るタイプなので派手な色や画像もきれいに収まります。

出典:Diver

上の6つのデザインは、トップページの画像を変更するだけで作ってあります。このブログでもご紹介したのですが、トップページだけチョイチョイと触っただけで以下のようなグラデーションデザインも出来上がります。

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

フリーの画像+Diverに標準装備された背景を使っただけでここまでになるので、難しい操作なし単純作業で結構カッコよくなります。

デザイン性を売りにしている他のテーマでは、TOPページを作るのも時間がかかるのですが、Diverの場合にはおそらく初心者でもすぐに構成できるはずです。

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

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

Diver(WordPressテーマ)の6大特典!初心者でもワードプレスブログで稼げる!


 

Diverのデザインサンプル例 (オリジナルWordpressテーマ)

このブログのコンセプトは初心者にも簡単にできるようなデザインを推奨しています。Wordpressは、便利で汎用性もありますが、どうしても細かい操作が必要になるので、省けるところは省いて人より目立つデザインを作っていきます。

 

サンプル作成共通の操作

Diverは基本の色を一括で変更できる機能があります。色も5色+カスタマイズとなっていますが、こどれかの色に変更してしまい使えるような形にしてから変更をしていきます。

色変更を一括でする理由は、効率を考えるためです。サイドバーのウィジェットタイトルの部分やトップページに配置できるメニューなども簡単とはいえ設定するのは手間になります。

そこで一括で全体配置をしてから数か所変更していくという方法をとります。

基本色を変更すると大きくは上部ヘッダーの色とスライダーの画像枠の色(白か黒)に変更されます。ダークのみ画像枠とサイドバーウィジェットの色が黒になります。

 

Diverのデザインサンプル初級 例1. 「ヘッダーにスライダー挿入」 (Wordpressテーマ)

Diverのテーマの管理画面のちょっとした操作でイメージが変わりますので、いろんなパターンを作っていきます。

スライドショー(大)

トップページのファーストビューがスライドショーを配置しているレイアウトです。投稿記事でタグをつけた画像がファーストビューに出てきます。

それぞれのアイキャッチを目立たせたい場合などに便利です。

 

スライドショー(小)

こちらは、スライドショーの高さを低くすることでたくさんのアイキャッチが表示されています。5記事の表示になっていますので、このブログにはどんな記事があるのかなどアピールできます。

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

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

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

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

Diverのデザインサンプル初級 例2. 「ヘッダーに静止画挿入」 (Wordpressテーマ)

ヘッダーに静止画を配置したサンプルです。高さを300pxにするとパソコンの画面が表示されたときスライダーも見えるサイズとなります。

 

Diverデザインサンプル作成方法 例1 STEP1 (Wordpressテーマ)

トップページをスライドショーにする作り方をお伝えしていきます。基本色を変更しDiverの独自管理画面を変更するだけなので簡単です。

※アイキャッチがスライドショーに出てくるので投稿記事があることが前提です。

投稿ページのタブに入力(スライドショー)

アイキャッチが元になるのでどのアイキャッチをスライドショーに表示させるのか最初に設定をしておきましょう。

新規のタグを追加

▼ 投稿 ⇒ タグ

新しくタグを作ります。名前は自由で構いませんので入力し新規タグを追加をクリックします。pickupなどわかりやすいものが良いでしょう。

投稿ページのタグつけ

投稿ページの右に「タグ」の追加欄があります。

この部分に新規タグの文言(ここでは「pickup」)を入力し「追加」をクリックするとこのページにタグが追加されます。

Diverデザインサンプル作成方法 例1 STEP2「Diverの基本色を変更」

Diverの機能である基本色を変更します。今回は「light(白基調)」を選びます。

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

 

lightのラジオマークを選んだら公開をクリックします。

色については好みがありますので、テストで反映させながら設定していってください。全体に黒でシックにしたり赤や緑など最初から一括で変更できるようになっています。

 

Diverデザインサンプル作成方法 例1 STEP3 「Diverオプションで変更」

ここからは、Diverの独自の管理画面で変更をしていきます。項目がたくさんありますがかなりシンプルにできていますので安心してください。

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

ファーストビューの項目の「ピックアップスライダー」のラジオマークにチェックを入れスライダーサイズを指定します。

「小」・「中」・「大」がありますので自分の好みの大きさを選んでください。

設定し終わったら変更を保存をクリックします。

お知らせ部分の設定

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

ヘッダーメッセージの部分の以下の項目を入力します。

  • テキスト
  • 背景色・・・#3f312b
  • バッジ
  • バッジ背景色・・・#f6ad49
  • リンク先・・・URL

 

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


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

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

Diverデザインサンプル作成方法 例2 STEP1(Wordpressテーマ)

Diverのファーストビューに静止画を入れる方法をお伝えします。高さサイズも調整できますので効果的な画像を配置してみてください。

例2のデザインは、ヘッダー部分に静止画を挿入してブログを作る方法です。ご自身の好きな画像をダウンロードしておき挿入します。

もし、画像等がどこでダウンロードしてよいかわからない場合にはフリーの画像25選の記事で探してみてください。

 

Diverデザインサンプル作成方法 例2 STEP3「Diverの基本色を変更」

こちらも基本色はlightとなります。

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

lightにマークを付け公開をクリックします。

 

Diverの場合には、カスタマイズの場所さえつかんでおけば結構あっけなくデザイン変更できますので、特にカスタマイズで頭を悩ませる初心者の方などには最適です。

Diverデザインサンプル作成方法 例2 STEP3 「Diverオプションで変更」

ファーストビューの設定をします。

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

ファーストビューの項目で「画像」にマークを付けます。画像を指定してから表示の領域は自動もできますし、今回はカスタムで高さを300pxにしています。

画像をリピートするのかなど細かな調整をした後に変更を保存をクリック。

お知らせ部分の設定

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

ヘッダーメッセージの部分の以下の項目を入力します。

  • テキスト
  • 背景色・・・#b98c46
  • バッジ
  • バッジ背景色・・・#f2a0a1
  • リンク先・・・URL

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

Diverデザインサンプル例のまとめ  (Wordpressテーマ)

Diverは記事を書くときにも入力補助が活躍しますが、デザイン変更でもかなりのシンプル操作で次々と作っていけます。

今回お伝えしてきたものも2つの場所でチョイチョイと触っただけで3つのサンプルができました。その他標準装備の背景を使ったトップページを使った作り方もありますのでデザインをもっと自分らしく簡単に作りたい人にはぴったりです。

 

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

シェアしてね!

コメントを残す

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