ブログの作り方

Diverでブログを作ろう

Diverでブログを作る手順2。ランキングやタブウィジェットの使い方

WordPressテーマ「Diver」でブログを作る方法を説明しています。

前回の記事で、プロフィール、記事スライダー、ピックアップカテゴリーを設定しました。

今回は、以下のコンテンツを作ってみようと思います。

1.記事一覧グリッドを使った「最近の記事」
最近の記事をサイドバーに2列で表示することができます。

2.ランキングウィジェットを使った「人気記事」
「WordPress Popular Posts」を使いますが、Diverの独自設定があります。

3.タブウィジェットを使った「おすすめ記事」
おすすめ記事をタブごとにランダム表示させることができます。

この3つを設定すると、ブログとしての見た目がグッと良くなりますよ^^

★前回の記事はこちら↓
Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよう>>

★アフィリエイト部門の1位にさせていただきました↓
2019年、WordPressテーマの部門別お勧めベスト3を発表!>>

記事一覧グリッド

まずは、記事一覧グリッドのウィジェットを使って、サイドバーに「最近の記事」を表示させてみましょう。

Diverの記事一覧グリッドは、記事一覧を2列表示させることができます。

スマホ表示にしたときにピッタリサイズで見やすいのでおすすめです。

さらにこのウィジェットでは、一番最初の記事を拡大表示させることができます。

他のテーマではあまり見かけない機能なので、積極的に使ってみることにします。

では、ワードプレスメニューの中の、

外観→ウィジェット

とクリックしてください。

Diver記事一覧グリッド

上の画像のように、「【Diver】記事一覧グリッド」というウィジェットを「メインサイドバー」にドラッグします。

ウィジェットの位置は、【Diver】プロフィールの下にしておきましょう。

記事一覧グリッドの設定

記事一覧グリッドの設定は、上の画像のようにします。

タイトルは「最近の記事」としておきます。

最大表示数は、一番上の記事を拡大表示すると2枠使うので、記事数は奇数にしておきます。

ここでは「5」件にしました。

その下はデフォルトのままでOKです。一番下の「先頭記事を拡大する」にチェックがあるか確認しておいてくださいね。

最後に「保存」ボタンを押せば設定完了です。

ランキングウィジェット

続いてランキングウィジェットを設定します。

Diverのランキングウィジェットは、有名なプラグインの「WordPress Popular Posts」を使います。

ワードプレスメニューの中の、

プラグイン→新規追加

とクリックし、検索して「Wordpress Popular Posts」をインストールします。

インストールしたら、もちろん有効化しておいてください。

インストールが終わったら、「Wordpress Popular Posts」を設定していきます。

ワードプレスメニューの中の、

外観→ウィジェット

とクリックします。

ランキングプラグイン

「Wordpress Popular Posts」がインストールされていると、ウィジェットが表示されるはずです。

上の画像のように、メインサイドバーにドラッグしましょう。

プラグインの設定1

では、ウィジェットの設定をしていきます。まずは前半部分から。

上の画像のように、タイトルを「人気記事ランキング」と入力します。

今回は、最大表示件数は6件としました。

その下の「フィルター」の部分はデフォルトのままでOKです。

プラグインの設定2

続いて後半部分の設定をしましょう。

上の画像のように、「アイキャッチ画像を表示」にチェックを入れます。

「サイズを手動で設定」は、110×110くらいがちょうど良いんじゃないかと思います。

これで保存すれば設定完了です。

さて、これで完成でもいいのですが、実はDiverには「Wordpress Popular Posts」専用の設定項目があります。

ワードプレスメニューの中の、

外観→カスタマイズ→デザイン設定①

とクリックしてください。

Diverのプラグイン設定

デザイン設定①を下にずーっとスクロールすると、「ランキングウィジェット順位」という項目があります。

このプルダウンメニューをクリックすると、

  • 非表示
  • 四角
  • 三角
  • 大きい数字

という項目が選択できるので、「三角」を選んでおきます。

ランキングウィジェット

これで「Wordpress Popular Posts」の順位部分のデザインが変わりました。

ちゃんと順位の部分が三角になっていて、斜めに数字が入っています。

他のブログでは見かけないデザインのランキングになりますね^^

タブウィジェットを設置

最後に、記事スライダーの下に、タブ切換のおすすめ記事を表示させてみようと思います。

タブ切換を使うためには、ウィジェットの「タブウィジェットエリア-1」を使いますよ。

では、ワードプレスメニューの中の、

外観→ウィジェット

とクリックします。

Diverウィジェット欄

上の画像のように、【Diver】記事一覧グリッドを「タブウィジェットエリア-1」にドラッグします。

Diver記事一覧グリッド

では、ドラッグした記事一覧グリッドを上のように設定しましょう。

  • タイトル欄
    今回は「カテゴリー1」としました。実際は好きな名前にしてください。

  • ソート順欄
    「ランダム」にしておきます。こうすると、ページが更新される度に記事が変わります。

  • カテゴリー欄
    表示させたいカテゴリーを選択します。今回は「カテゴリー1」にしました。

  • 「サムネイルを表示する」
    チェックを入れます。画像がある方が見た目が良いです。

  • 「カテゴリーを表示する」
    チェックをはずします。タブにカテゴリー別で表示するので、カテゴリーを表示する意味はありません。

  • 「先頭記事を拡大する」
    チェックをはずします。デフォルトで「先頭記事を拡大する」にチェックが入っていますが、はずしておかないと一番左の記事だけ文字が太字になります。

これで「カテゴリー1」のウィジェットの設定は終わりです。

これと同様に、カテゴリー2・3・4の設定をしていきます。

タブウィジェット

上の画像のように、4つの記事一覧グリッドを作成してください。

タイトル欄とカテゴリー欄以外はすべて同じで大丈夫です。

4つのウィジェットを作ったら、【Diver】タブウィジェットを、「トップページ上部」にドラッグします。

タブウィジェットを配置

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

Diverのトップページまとめ

以上の設定で、トップページのデザインはだいたい終わりです。

まとめると、こんな感じになりますね↓
Diver完成イメージ

Diverの公式デモサイトとは、大きく違うイメージになりましたね。

Diverは、デザインの自由度もありますから面白いです^^

アフィリエイトの機能はもちろんいいのですが、良いデザインのブログもできますね。

デザインは自分の好みなので、いろいろ試行錯誤してみてくださいね。

★Diverをおすすめする理由を書きました↓
検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた>>

当サイトのリンクから購入すると特典が付きます。詳しくはこちら

Diverの詳細はこちら>>

 

関連記事

  1. Diverの入力補助機能

    Diverの入力補助が超多機能。ボタンやバッジ作成機能を紹介します

  2. TCDのSwitchでサイト作成

    TCDの「Switch」で企業サイトを作る手順1。設定の仕方を説明

  3. ONEでCTA設置

    「ONE」でブログを作る手順2。カテゴリーメガメニューとCTAを設定

  4. MAGの広告スペース

    TCDテーマ「MAG」の広告設置方法。広告ウィジェット編

  5. MAGのブログのイメージ

    TCDの「MAG」でブログを作る手順。簡単に美しいブログが完成します

  6. MAGテーマオプション1

    TCDテーマ「MAG」の広告設置方法。TCDテーマオプション編

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

ブログの作り方

「SANGO」のテーマでメニューボックスを設置してみよう

SANGOメニューボックス

ブログの作り方

スワローでブログを作る手順1。基本設定と人気記事を作成

スワローでブログ作成1

ブログの作り方

TCDの「Switch」で企業サイトを作る手順1。設定の仕方を説明

TCDのSwitchでサイト作成

ブログの作り方

Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよう

Diverでブログを作る

ブログの作り方

Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

Bloomでブログを作る

ブログの作り方

TCDの「ONE」でブログを作る手順。トップ画面と記事の設定をします

ONEでブログを作る