Diverでサイドバーのレイアウトを変更する|初心者向けマニュアル
Diverでサイドバーのレイアウトを変更する|初心者向けマニュアル

Diverでサイドバーのレイアウトを変更する方法を解説します。

Diverではサイドバーの表示・非表示、表示位置の切り替えなどが簡単に設定できるようになっています。

記事一覧などのコンテンツをさまざまな形式で表示することもできるので、設定方法をマスターして、よりオリジナリティの高いサイトにカスタマイズしましょう。

サイドバーの表示位置を設定する

Diverではサイドバーの表示位置を選択できるようになっています。

トップページ、個別ページ(投稿と固定ページ)それぞれで設定可能です。

サイト全体

サイト全体のサイドバーの表示位置を設定します。

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックしましょう。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

カスタマイズページが開くので、画面左メニュー内の『レイアウト設定』をクリックします。

『レイアウト設定』をクリック

『レイアウト設定』をクリック

「サイドバー表示位置設定」の「全体のサイドバーの位置を変更できます。」のラジオボタンで好きな位置を選択しましょう。

サイドバー表示位置設定

サイドバー表示位置設定

非表示(none)』を選べば、サイドバーの表示を消すこともできます。

個別ページ(投稿、固定ページ)

個別ページのサイドバーの表示位置を設定します。

設定する場所はサイト全体と同じで、レイアウト設定の「サイドバー表示位置設定」で行います。

「個別ページのサイドバーの位置を変更できます。」のラジオボタンから好きな位置を選択しましょう。

サイドバー表示位置設定

サイドバー表示位置設定

ここで設定した内容は、投稿および固定ページの両方に反映されます。

記事ごとにサイドバーを非表示にする

個別の記事ごとにサイドバーの表示・非表示を設定することができます。

 「個別ページ(投稿、固定ページ)」で『非表示』を選択している場合は、個別記事の設定に関わらず非表示になります。

個別の記事ごとのサイドバー表示設定は、各記事の編集画面にある「ページ設定」から行います。

サイドバー非表示』にチェックを入れると、その記事にサイドバーは表示されません。

個別の記事ごとのサイドバー表示設定

個別の記事ごとのサイドバー表示設定

ウィジェットでサイドバーをアレンジする

Diverには便利なウィジェットがいくつか用意されています。

ここでは代表的な下の3つについて説明します。

  • タブウィジェット
  • 記事一覧グリッド
  • 記事一覧リスト

タブウィジェット

タブウィジェットは、ユーザーがタブを自由に切り替えられるウィジェットです。

Diver タブウィジェット

Diver タブウィジェット

ページの読み込みなしにコンテンツを切り替えられるので、より使いやすいページをユーザーに提供できます。

タブウィジェット数の設定

タブウィジェットの数を設定します。

デフォルトではタブウィジェットを1つだけ設置できるようになっていますが、数を増やすことも可能です。

WordPressのダッシュボード左メニューから、『Diverオプション基本設定』という順にクリックしましょう。

『Diverオプション→基本設定』という順にクリック

『Diverオプション→基本設定』という順にクリック

「基本設定」の画面に切り替わります。

「メイン設定」の「タブウィジェット数」で表示数を設定することができます。

表示したいタブウィジェットの数を入力して、設定を保存しましょう。

タブウィジェット数の設定

タブウィジェット数の設定

タブウィジェットを作成

タブウィジェットを作成します。

カスタマイズページを開き、『ウィジェット』をクリックしましょう。

『ウィジェット』をクリック

『ウィジェット』をクリック

タブウィジェットエリア』をクリックします。

『タブウィジェットエリア』をクリック

『タブウィジェットエリア』をクリック

テキストウィジェットなどを配置し、タブの中身を作成しましょう。

タブの中身を作成する

タブの中身を作成する

タブウィジェットを表示

タブウィジェットの中身が作成できたら、最後に表示設定を行います。

WordPressのダッシュボード左メニューから、『外観ウィジェット』という順にクリックしましょう。

『外観→ウィジェット』という順にクリック

『外観→ウィジェット』という順にクリック

「ウィジェット」の設定画面に切り替わります。

「利用できるウィジェット」の中に、「【Diver】タブウィジェット」があります。

これを表示したい場所に追加しましょう。

「【Diver】タブウィジェット」を表示したい位置に追加

「【Diver】タブウィジェット」を表示したい位置に追加

これでタブウィジェットの設置は完了です。

記事一覧グリッド

記事一覧グリッドは、サイドバーに記事一覧をグリッド形式で表示できる機能です。

Diver 記事一覧グリッド

Diver 記事一覧グリッド

「ウィジェット」の設定画面の「利用できるウィジェット」にある「【Diver】記事一覧グリッド」を表示したい場所へ追加します。

追加すると、タイトルや表示する記事数、並び順などを設定することができるようになります。

「【Diver】記事一覧グリッド」の設定メニュー

「【Diver】記事一覧グリッド」の設定メニュー

 特定のカテゴリーのみ表示することも可能です。

自分好みに設定し、保存すれば完了です。

記事一覧リスト

記事一覧リストもサイドバーに記事一覧を表示する機能ですが、グリッドではなく、記事がリスト形式で順番に表示されます。

Diver 記事一覧リスト

Diver 記事一覧リスト

「ウィジェット」の設定画面の「利用できるウィジェット」にある「【Diver】記事一覧リスト」を表示したい場所へ追加しましょう。

記事一覧グリッド同様、表示に関する設定を行い、最後に保存すれば完了です。

「【Diver】記事一覧リスト」の設定メニュー

「【Diver】記事一覧リスト」の設定メニュー

まとめ

今回は、Diverでサイドバーのレイアウトを変更する方法を解説しました。 表示形式も細かく設定できるので、サイトに合わせて色々カスタマイズを試してみてください。

スポンサーリンク

スポンサーリンク

おすすめの記事