注目度の高い記事
超便利!Diver のウィジェット機能の使い方を図解つきで徹底解説

 

山本
今回は、Diver のウィジェット欄の使い方について
解説していこうと思います

わかば
ウィジェットって言葉は、スマホの機能で聞いた事がありますねー

山本
そうそう。まさにスマホと同じ感覚で簡単に
ブログの画面をカスタマイズできる機能のことだよ

 

ワードプレステーマ「Diver」を使用しているブログの見た目や機能を

直感的な操作で変更できる、ウィジェットの使い方についての解説です。

1.ウィジェットの基本的な使い方

まずはウィジェットの基本的な使い方について解説します。

 

ウィジェット編集画面は、管理画面左側メニューから 外観 > ウィジェット と選択することで開くことができます。

外観 > ウィジェット へと進む

 

そして、実際のウィジェット編集画面がこちら。

左側の、利用できるウィジェット から、右側の、ウィジェットエリア に使いたい機能を

ドラッグ&ドロップすることで、簡単に機能を追加することができるようになっています。

ワードプレスのウィジェット画面

 

上の画像は、Diver を使用している時のもので

使っているテーマやプラグインによって、使えるウィジェットの機能は変わってきます。

 

山本
ウィジェットを実際に操作している映像がこちらです

※画面をクリックすると再生が始まります

わかば
へー簡単に操作できますね

 

2 Diver ウィジェットエリアの解説

ウィジェット画面右側、ウィジェットエリアの各所の解説をしていきます。

Diver ウィジェットエリア

 

2-1 メインサイドバー

画面右側(設定で左側にすることも可能)の縦長ブロックのエリアです。

メインサイドバー

 

2-2 追従サイドバー

画面を下にスクロールした時に、追従してくるサイドバーの事です。

わー研。では、目次を追従サイドバーに設定しています。

追従サイドバー

 

2-3 メインエリア上部

”すべてのページの” ヘッダー下のエリアです。

メインエリア上部

 

2-4 メインエリア下部

”すべてのページの” フッターのすぐ上のエリアです。

メインエリア下部

 

2-5 トップページ上部

”トップページのみ” のページ上部エリアです。

トップページ上部

 

2-6 トップページ下部

”トップページのみ” のページ下部エリアです。

トップページ下部

 

2-7 投稿ページ上部

”投稿ページのみ” のページ上部エリアです。

投稿ページ上部

 

2-8 投稿内上部

投稿ページの、アイキャッチ画像とSNSボタンのすぐ下のエリアです。

投稿内上部

 

2-9 PC:投稿内下部

投稿ページ下部コンテンツ下、SNSボタンのすぐ上のエリアです。(PCのみ表示)

PC:投稿内下部

 

2-10 SP:投稿内下部

投稿ページ下部コンテンツ下、SNSボタンのすぐ上のエリアです。(スマホのみ表示)

SP:投稿内下部

 

2-11 h2直前ウィジェット

投稿ページ内の、1つ目の h2(見出し2)のすぐ上のエリアです。

h2直前ウィジェット

 

2-12 ループの途中

トップページの、記事一覧の間のエリアです。

ループの途中

 

2-13 関連記事エリア

投稿ページ下、関連記事のすぐ下のエリアです。

関連記事エリア

 

2-14 おすすめ記事エリア

投稿ページ最下部、おすすめ記事の下、フッター上のエリアです。

おすすめ記事エリア

 

2-15 ビッグフッター(左)(中左)(中右)(右)

サイト最下部のフッターエリアです。

外観 > カスタマイズ > レイアウト設定 のフッター設定で、ビッグフッターのカラム数を「3カラム」または「4カラム」にしないと表示されません。

ビッグフッターエリア

 

2-16 ヘッダーロゴの右

サイト上部ヘッダーロゴの右側のエリアです。基本的には、電話番号やボタンなどを配置します。

外観 > メイン設定 のナビゲーション設定を「メニュー独立」にしないと表示されません。

ヘッダーロゴの右

 

2-17 ドロワーメニュー

スマホ表示したときに左上に表示される、メニューの中のエリアです。

ドロワーメニュー

↓   ↓   ↓

ドロワーメニューを開いたとき

 

2-18 検索ボックス

スマホ表示した時に右上に表示される、検索ボックスの中のエリアです。

検索ボックス

↓   ↓   ↓

検索ボックスを開いたとき

 

2-19 タブウィジェットエリア

タブウィジェットを使用するときに使います。

タブウィジェットの詳しい使いかたについては、以下のページを参照してください。

参考リンク【Diver】タブウィジェットの使い方&エリアの数を変更する方法

 

3.Diver で利用できるウィジェットの解説

利用できるウィジェットの中から、Diver 固有の8種類のウィジェットを解説します。

Diver 利用できるウィジェット

 

3-1 【Diver】PC・SP切り替え

カスタム HTML ウィジェットの「PC・SP切り替え」が可能なバージョンです。

テキストや HTML を入力して、PCとSP(スマホ)に出し分けすることが可能です。

山本
PC・SP切り替えは、Diver 固有のウィジェットなんですが
実際に使ってみると、かなり重宝する機能だということがわかると思います

【Diver】PC・SP切り替え

 

3-2 【Diver】プロフィール

ブログ運営者のプロフィール欄を設定できます。

「アイコン画像」「運営者の名前」「自己紹介文」を設定できるほか、TwitterなどのSNSボタンを設置することも可能。

山本
実際に設置したプロフィールは
わー研。のサイドバーでご確認ください

【Diver】プロフィール

 

3-3 【Diver】広告エリア

広告コードを入力して表示させることができます。

コードを1つだけ設置すると、シングルレクタングル(中央に表示)、2つ設置するとダブルレクタングル(横並び)で表示されます。

山本
主にアドセンス用のウィジェットになります

【Diver】広告エリア

 

3-4 【Diver】記事一覧グリッド

記事一覧を、グリッド(タイルのように)表示させることができます。

表示件数や、サムネイルの表示非表示など、細かくカスタマイズすることが可能。

山本
スマホのドロワーメニューや、サイドバーなどに
表示させるのが一般的な使い方です

【Diver】記事一覧グリッド

 

3-5 【Diver】記事一覧リスト

記事一覧をリスト(縦一列並び/デフォルト)表示できます。

設定のやり方については、記事一覧グリッドと全く同じになります。

【Diver】記事一覧リスト

 

3-6 【Diver】人気記事

Googleアナリティクスから取得した情報で、人気記事をランキング表示させることができます。

表示をさせる方法については、以下のページで詳しく解説しているので参照してください。

参考リンクDiver で人気記事ランキングを表示させる方法

【Diver】人気記事

 

3-7 【Diver】絞り込み検索

Diver で比較的最近追加された、超便利な機能です。

【Diver】絞り込み検索

 

このウィジェットを設置すると キーワードカテゴリータグ を組み合わせて、絞り込み検索ができるようになります。

もちろん、それぞれ単体での検索も可能。

Diver の絞り込み検索画面

 

3-8 【Diver】タブウィジェット

設定したタブウィジェットを表示させるときに使います。

タブウィジェットの使い方に関しては、別ページで詳しく解説します。(準備中)

【Diver】タブウィジェット

 

4.ウィジェットの外し方&保存方法

使わなくなったウィジェットは、左のエリアのどこでもいいので、ドラッグ&ドロップすれば外すことができます。

必要ないウィジェットは左のエリアにドロップする

 

ウィジェットに設置した HTML や、設定を保存しておきたい時は

画面下部にある、使用停止中のウィジェット にドラッグ&ドロップすると、表示させずに保存しておくことも可能です。

使用停止中のウィジェット

 

さいごに

今回は、ワードプレステーマ Diver の

ウィジェットエリアの使い方について解説しました。

 

項目が多いので最初は戸惑うかも知れませんが

操作も簡単なので、使っていくうちにすぐに慣れていくと思います。

 

このページのまとめをしておきましょう。

  • ワードプレスのウィジェット機能の使い方
  • Diver のウィジェットエリアの場所について
  • Diver の利用できるウィジェット機能について
  • 使わないウィジェットの設定を保存しておくこともできる

 

わかば
使い方自体は簡単なんですけど
機能が多いから最初は戸惑ってしまいますね

山本
かゆい所に手が届く便利な機能ばかりだから
使いながら少しずつ慣れていこうね!

 

※テーマ選びにかかる無駄なお金と時間を短縮

ワードプレステーマは無料・有料のものをあわせると数えきれないほどあります。僕もこれまで色々な有料テーマを使ってきましたが、結局一番使いやすく見た目も良かったのが、この Diver でした。以下のリンク先では、Diver 開発者の高木さんが作成したデモサイトが公開されているので、気になった方は、そちらもあわせてチェックしてみてください。

≫Diver デモサイト

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で使用可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事