解説していこうと思います
ブログの画面をカスタマイズできる機能のことだよ
ワードプレステーマ「Diver」を使用しているブログの見た目や機能を
直感的な操作で変更できる、ウィジェットの使い方についての解説です。
１．ウィジェットの基本的な使い方
まずはウィジェットの基本的な使い方について解説します。
ウィジェット編集画面は、管理画面左側メニューから 外観 ＞ ウィジェット と選択することで開くことができます。
そして、実際のウィジェット編集画面がこちら。
左側の、利用できるウィジェット から、右側の、ウィジェットエリア に使いたい機能を
ドラッグ＆ドロップすることで、簡単に機能を追加することができるようになっています。
上の画像は、Diver を使用している時のもので
使っているテーマやプラグインによって、使えるウィジェットの機能は変わってきます。
※画面をクリックすると再生が始まります
２ Diver ウィジェットエリアの解説
ウィジェット画面右側、ウィジェットエリアの各所の解説をしていきます。
2-1 メインサイドバー
画面右側（設定で左側にすることも可能）の縦長ブロックのエリアです。
2-2 追従サイドバー
画面を下にスクロールした時に、追従してくるサイドバーの事です。
わー研。では、目次を追従サイドバーに設定しています。
2-3 メインエリア上部
”すべてのページの” ヘッダー下のエリアです。
2-4 メインエリア下部
”すべてのページの” フッターのすぐ上のエリアです。
2-5 トップページ上部
”トップページのみ” のページ上部エリアです。
2-6 トップページ下部
”トップページのみ” のページ下部エリアです。
2-7 投稿ページ上部
”投稿ページのみ” のページ上部エリアです。
2-8 投稿内上部
投稿ページの、アイキャッチ画像とSNSボタンのすぐ下のエリアです。
2-9 PC：投稿内下部
投稿ページ下部コンテンツ下、SNSボタンのすぐ上のエリアです。（PCのみ表示）
2-10 SP：投稿内下部
投稿ページ下部コンテンツ下、SNSボタンのすぐ上のエリアです。（スマホのみ表示）
2-11 h2直前ウィジェット
投稿ページ内の、1つ目の h2（見出し2）のすぐ上のエリアです。
2-12 ループの途中
トップページの、記事一覧の間のエリアです。
2-13 関連記事エリア
投稿ページ下、関連記事のすぐ下のエリアです。
2-14 おすすめ記事エリア
投稿ページ最下部、おすすめ記事の下、フッター上のエリアです。
2-15 ビッグフッター(左)(中左)(中右)(右)
サイト最下部のフッターエリアです。
外観 ＞ カスタマイズ ＞ レイアウト設定 のフッター設定で、ビッグフッターのカラム数を「3カラム」または「4カラム」にしないと表示されません。
2-16 ヘッダーロゴの右
サイト上部ヘッダーロゴの右側のエリアです。基本的には、電話番号やボタンなどを配置します。
外観 ＞ メイン設定 のナビゲーション設定を「メニュー独立」にしないと表示されません。
2-17 ドロワーメニュー
スマホ表示したときに左上に表示される、メニューの中のエリアです。
↓ ↓ ↓
2-18 検索ボックス
スマホ表示した時に右上に表示される、検索ボックスの中のエリアです。
↓ ↓ ↓
2-19 タブウィジェットエリア
タブウィジェットを使用するときに使います。
タブウィジェットの詳しい使いかたについては、以下のページを参照してください。
参考リンク【Diver】タブウィジェットの使い方＆エリアの数を変更する方法
３．Diver で利用できるウィジェットの解説
利用できるウィジェットの中から、Diver 固有の8種類のウィジェットを解説します。
3-1 【Diver】PC・SP切り替え
カスタム HTML ウィジェットの「PC・SP切り替え」が可能なバージョンです。
テキストや HTML を入力して、PCとSP(スマホ)に出し分けすることが可能です。
実際に使ってみると、かなり重宝する機能だということがわかると思います
3-2 【Diver】プロフィール
ブログ運営者のプロフィール欄を設定できます。
「アイコン画像」「運営者の名前」「自己紹介文」を設定できるほか、TwitterなどのSNSボタンを設置することも可能。
わー研。のサイドバーでご確認ください
3-3 【Diver】広告エリア
広告コードを入力して表示させることができます。
コードを1つだけ設置すると、シングルレクタングル(中央に表示)、2つ設置するとダブルレクタングル(横並び)で表示されます。
3-4 【Diver】記事一覧グリッド
記事一覧を、グリッド(タイルのように)表示させることができます。
表示件数や、サムネイルの表示非表示など、細かくカスタマイズすることが可能。
表示させるのが一般的な使い方です
3-5 【Diver】記事一覧リスト
記事一覧をリスト(縦一列並び/デフォルト)表示できます。
設定のやり方については、記事一覧グリッドと全く同じになります。
3-6 【Diver】人気記事
Googleアナリティクスから取得した情報で、人気記事をランキング表示させることができます。
表示をさせる方法については、以下のページで詳しく解説しているので参照してください。
3-7 【Diver】絞り込み検索
Diver で比較的最近追加された、超便利な機能です。
このウィジェットを設置すると キーワード と カテゴリー と タグ を組み合わせて、絞り込み検索ができるようになります。
もちろん、それぞれ単体での検索も可能。
3-8 【Diver】タブウィジェット
設定したタブウィジェットを表示させるときに使います。
タブウィジェットの使い方については、以下の記事で詳しく解説しています。
参考リンク【Diver】タブウィジェットの使い方＆エリアの数を変更する方法
４．ウィジェットの外し方＆保存方法
使わなくなったウィジェットは、左のエリアのどこでもいいので、ドラッグ＆ドロップすれば外すことができます。
ウィジェットに設置した HTML や、設定を保存しておきたい時は
画面下部にある、使用停止中のウィジェット にドラッグ＆ドロップすると、表示させずに保存しておくことも可能です。
さいごに
今回は、ワードプレステーマ Diver の
ウィジェットエリアの使い方について解説しました。
項目が多いので最初は戸惑うかも知れませんが
操作も簡単なので、使っていくうちにすぐに慣れていくと思います。
このページのまとめをしておきましょう。
- ワードプレスのウィジェット機能の使い方
- Diver のウィジェットエリアの場所について
- Diver の利用できるウィジェット機能について
- 使わないウィジェットの設定を保存しておくこともできる
機能が多いから最初は戸惑ってしまいますね
使いながら少しずつ慣れていこうね！
注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】
