Diverのボタン全般の設置や便利な使い方!

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

Diverは簡単な操作とシンプルなカスタマイズのおかげでたとえ初心者であっても比較的なじみやすいWordpressテーマです。

投稿ページや固定ぺージにある入力補助には23ものパーツ挿入ができる「入力補助」がありますが、その中でよく使うものとしてボタン設置があります。

このページではDiverの入力補助のボタン設置とその他のボタンの設定方法をお伝えしていきます。

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

 

  • Diverのボタンを確認
  • Diverのボタン設定 1.「投稿ページ&固定ページのボタン」
  • Diverのボタン設定 2.「ヘッダーボタン」
  • Diverのボタン設定 3.「ファーストビューのボタン」
  • Diverのボタン設定 4.「SNSのボタン」

 

Diverのボタンを確認(入力補助含む)

Diverの入力補助のボタンに加え、その他のボタンでカスタマイズできるものを見ていきましょう。

  • 投稿ページ&固定ページのボタン
  • ヘッダーボタン
  • ファーストビューのボタン
  • SNSのボタン

 

投稿ページ&固定ページのボタン

記事を作っていくとボタン挿入をする場面が出てきますよね。そんな時に入力補助で簡単にボタン挿入ができます。

記事を書くごとに設定しても良いのですが、色や形が決まっている場合にはあらかじめ設定しておくこともできます。

  • 初期設定色
  • カスタム背景色
  • カスタム文字色
  • カスタム枠線色
  • オプション
  • 大きさ

 

入力補助自体がかなり使いやすく簡単なのであらかじめ設定が必要ないかもしれませんが、それでも自分が使いたいカラーなどは最初から設定しておくと手間が省けます。

 

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

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

 


このマニュアルの通りに作ればCTAやタブなどの設定も併せてできるようになります。上記5種以外にアフィリエイト用100種類デザインマニュアルが付いてきます!

⇒ デザインの確認はコチラをご覧ください。
(さらにアフィリ用デザイン100個追加!)

特典付きでDiverを購入する

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

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

ヘッダーボタン

ブログの上部にブロックボタンを配置することができます。このボタンは、スマホでも表示可能でアイコンを表示するので見やすく思わずクリックしたくなるようなボタンです。

 

上部を見てもらうと、小さなメニューもありますしグローバルメニューもあります。上記画像ではさらに、ヘッダーボタンを設置してありますがモノクロだったらそれほどうるさい感じがしませんよね。

Diverの良いところはこんなにたくさん入り口があっても収まる部分だと思います。

 

ファーストビューのボタン

Diverでいうヘッダー「ファーストビュー」の中にあるボタンのことです。なにかサービスを設置してもいいですし、関連の記事にリンクしてもよいでしょう。

出典:Diverデザイン特典

上記のヘッダーなら、「詳細はコチラ」と書いてあるピンクのボタンです。おすすめとしては、背景の色と混じりあってしまわない色。反対色に近い方が目立ちます。

 

背景とボタンの色の関係

他のテーマでもボタンのあるものは、少し目立たせるために反対の色を使うのが良いでしょう。ただし、ボタンに落ち着いた色や寒色系は行動に移しにくいイメージがあるので以下のような暖色系がベスト。

  • オレンジ
  • ピンク
  • パープル(ラベンダーに近い)

上記の画像でも、背景が黒なので鮮やかなピンクを使っています。

 

DiverのSNSのボタン

SNSのボタンは、デフォルトで表示されていますが、SNSと連携するとなるとWordpressテーマで設定が必要となってきます。

 

 

デフォルトではたくさんのボタンが設置されていますが、全部のSNSが必要ではないと思います。そこで、自分が使っているSNSを表示させる方法などもお伝えしていきます。

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

⇒ Diverの公式ページを確認する。
※今なら、6大購入特典をお付けしています!

Diverのボタン設定(入力補助含む) 1.「投稿ページ&固定ページのボタン」

投稿ページと固定ページにボタンを挿入するのは「入力補助」で行います。通常のボタン設置とあらかじめ設定しておく方法をお伝えします。

 

入力補助のボタン挿入(基本)

まずは、投稿ページや固定ページで入力補助を使い1から設定していく方法をお伝えします。記事などを作成する投稿ページのエディター内の入力補助をクリックします。

すると、各パーツの名前を書いたブロックがでてききますので「ボタン」をクリックすると以下のようなスペースが展開します。

  • ボタン生成タイプ・・・通常or広告タグから作成
  • リンクオプション・・・別タグで開くor nofollw
  • ボタンテキスト・・・ボタン上のテキスト
  • リンク先URL・・・ボタンを押して飛ぶリンク先
  • ボタンタイプ・・・ボタンの形指定
  • 色・・・ボタンの色
  • ボタンアイコン・・・テキストの中に入れるアイコン指定
  • 大きさ

 

だいたい上記の設定をすれば立派なボタンができあがり「ボタンを挿入」するをクリックすると画面に配置されます。

 

Diverのボタン設定 1-2 「入力補助カスタム設定」

入力補助を使う場合、全部の項目を埋めるのが大変だという場合に、あらかじめ色などを設定しておくこともできます。

▼ Diver管理画面 ⇒ 入力補助設定 

この画面では、入力補助の項目で設定をすることができるようになっています。

ボタンの部分を見てもらうと、初期設定の色や、カスタムの背景色、文字色など設定する部分があります。

カスタム背景色とカスタム枠色はデフォルトの場合、ブルーですが最初から設定しておきたい色があればここで設定します。

(※今回はわかりやすくするために赤にしてみました。)

上部の「カスタム」にチェックを入れ「変更を保存」をクリックします。

投稿ページの入力補助でボタンを作ってみる

上記設定が終わったら、投稿ページの入力補助のボタンの部分を開けてみると以下のようになっています。

ここには、いろんな種類のボタン例が出てきています。この中から好きなボタンを選びます。

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

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

 

Diverのボタン設定(入力補助含む) 2.「ヘッダーボタン」

ヘッダーの上部にヘッダーボタンを設置することができます。Diverはそれぞれがシンプルに作られていますので、こういったボタンを設置してもゴチャゴチャしません。

ヘッダーボタンの作り方

ヘッダーボタンはDiverの管理画面で作ります。

▼ Diverオプション ⇒ ヘッダーボタン

ヘッダーボタンは4つまで作ることが可能です。

  • アイコン
  • タイトル
  • リンク先URL

 

上記の4か所を設定します。そのままスクロールすると「オプション」がありますので、区切り線とかアイコンのサイズ、スマホに表示するかとかチェックを入れます。

 

Diverのボタン設定(入力補助含む) 3.「ファーストビューのボタン」

ファーストビューにもボタンが設置されています。ここは、何度かこのブログでもお伝えしていますが、とても簡単に設置できるので試してみてください。

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

コンテンツ設定の部分をスクロールしていくとボタン設置の項目がでてきます。

  • ボタンタイトル
  • ボタンリンク先
  • ボタン背景カラー
  • ボタンテキストカラー

これらを設定すると、ヘッダー画像(ファーストビュー)にボタンが現れます。

⇒ Diverのトップページ設定

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

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

 

Diverのボタン設定(入力補助含む) 4.「SNSのボタン」

ブログとSNSはとても相性が良い関係です。もしあなたがTwitterなどをしているのならブログと連動させておきましょう。

SNSからの流入も期待できますし、SNSのフォロワーも期待できます。

まずは、SNSの基本設定から行います。

SNSの基本設定

まずは、SNSとブログを紐づけていきます。

▼ Diverオプション ⇒ SNS設定

  • FacebookプロフィールURL
  • FacebookページURL
  • FacebookアプリID
  • ツイッタープロフィールURL
  • ツイッターアカウント名
  • ツイッタープロフィールURL

 

上記項目の必要部分を入力します。

SNSボタンの設定

さらに、同じ画面を下にスクロールするとボタンの表示設定が行えます。大きめにするのかどのSNSボタンを設置するのかなどここでは指示します。

  • 投稿上部・・・大きい・小さい・非表示
  • 投稿下部・・・大きい・小さい・非表示
  • 追従SNSボックス

それぞれ、どの位置にどんなボタンを設置するのかここで設定をしておきます。

⇒ DiverのSNSの設定方法

Diverのボタン設定(入力補助含む)  まとめ

Diverには、入力補助で挿入するボタン以外にも複数のボタンがあります。それぞれうまく目立たせることでユーザーにクリックしてもらうようにしてみましょう。

元々シンプルな作りなので、全部のせでも特に違和感なく使えますし、ボタンを作っておいて形だけ後で設定することも可能です。

 

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

関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。Diver(Wordpressテーマ)の最大の特徴は、初心者でも見栄えのよいデザインができる記事装飾の「入力補助」や、簡単操作で上品なヘッダー画像になる機能です。D[…]

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

1. 検索上位を目指せる

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

 

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

 

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

 

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

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

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

 

出典:Diver

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

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

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

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

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

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

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

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

 

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

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

 

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

⇒ 最新SEO対策済み!wordpressテーマ「Diver」はコチラ

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