ブログの作り方

Diverでブログを作ろう

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

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

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

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

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

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

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

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

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

★Diverのおすすめ度です↓
検索上位表示と収益化「Diver」のテーマを5段階評価してみた>>

記事一覧グリッド

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

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」の機能がすごいことになっている!>>

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

★Diverの入力補助機能はこちら↓
Diverの入力補助が超多機能。ボタンやバッジ作成機能を紹介します>>

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

Diverの詳細はこちら>>

 

関連記事

  1. MAGの広告スペース

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

  2. 画像編集サイトfotojet

    オンラインで画像編集できる無料サイト。指定サイズで切り抜き最適化する方…

  3. BRIDGEの注意点

    TCDのテーマ「BRIDGE」の設定をするときに気をつけたこと

  4. BRIDGEのカスタム投稿タイプ

    TCD「BRIDGE」のランキング機能の使い方を紹介します

  5. ONEでブログを作る

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

  6. ONEのCTAを設置

    「ONE」で記事下CTAを設置しよう。表示回数やクリック数等が測定でき…

コメント

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

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

CAPTCHA


PAGE TOP

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE