おすすめテーマ

Diverで記事一覧グリッド

【Diverの使い方講座】記事一覧グリッドを使ったおすすめ記事の作り方

Diverの「記事一覧グリッド」というウィジェットを使うと、グリッド状に記事を並べることができます。

この記事一覧グリッドを使って、「おすすめ記事」のコンテンツを作ってみようと思います。

おすすめ記事は目立つ場所に設置した方が良いので、ピックアップスライダーのすぐ下にします。

Diver記事一覧グリッド

上の画像のように、Diverの記事一覧グリッドは記事が横に3つ並びます。

記事一覧グリッドは、表示する記事の数を指定できるので、今回は6つの記事を表示することにしたいと思います。

では、順に設定方法を説明しますね。

★前回(第1回)の記事はこちら↓
Diverのヘッダー部分を設定。ピックアップスライダーを拡大表示しよう>>

★アフィリエイトのおすすめテーマです↓
アフィリエイトにおすすめのWordPressテーマ。複数サイト対応状況も調査>>

当サイトで作っているブログは、最終的にこんな感じになります。
新しいタブで開きます。(クリックで拡大できます)↓
完成したブログはこちら(画像)>>

記事一覧グリッドを設定

記事一覧グリッドは、ウィジェットの中にあります。

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

外観→ウィジェット

とクリックします。

Diver記事一覧グリッド1

【Diver】記事一覧グリッドを、「トップページ上部」という所にドラッグします。

ウィジェットには、【Diver】記事一覧グリッドと【Diver】記事一覧リストがありますが、

名前が長いので、両方とも【Diver】記事一覧…と省略されています^_^;

ウィジェットの下の説明に、「すべての投稿から一覧グリッド表示が可能です。」と書かれている方がグリッドの方です。

Diver記事一覧グリッド2

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

  • タイトル
    「おすすめ記事」としておきます。

  • 最大表示件数
    ここは6件にしておきます。好みによっては、3件でもいいかもしれません。

  • ソート順
    ここはランダムにしておきます。訪問者が訪れる度に違う記事が表示されるので新鮮味があります。

  • カテゴリー
    全カテゴリーにしておきます。

  • サムネイルを表示する
    チェックしてください。ここにチェックを入れていないと記事に設定したアイキャッチ画像が表示されません。

  • 抜粋を表示する
    チェックします。文字数はデフォルトの80文字で良いと思います。

  • 投稿日を表示する
    ここは好みによります。私は表示しない方を選びました。

  • カテゴリーを表示する
    チェックします。

  • 先頭記事を拡大する
    チェックは外します。サイドバーでは先頭記事は拡大されますが、トップページ上部では拡大されません。
    チェックはしてもしてなくても変わらないので、外しておきましょう。

これで、記事一覧グリッドの設定ができました。

タイトルのスタイルを変える

続いて、記事一覧グリッドの上にある「おすすめ記事」の形と色を変更しておきましょう。

デフォルトでは、形状は「ボックス」、文字色は「黒」、背景色は「白」になっています。

タイトルのスタイルを変更

今回は、形状を「吹き出し」にして、色も変えてみたいと思います。

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

外観→カスタマイズ

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

Diver記事一覧グリッドメニュー

上の画像のような画面になるので、「デザイン設定②」をクリックします。

少し下にスクロールすると、「メインタイトルのスタイル」という項目が見つかります。

Diverカスタマイズ画面

この中の、「文字色、背景色、スタイル」を変更します。

  • 文字色
    背景に色を付けるので、今回は白にしました。

  • 背景色
    ブログ全体の色が青なので、少し薄い青にしてみました。
    ブログのテーマカラーを決めておいて、同系色にするとバランスが良くなります。

  • スタイル
    吹き出しの形状にしてみました。吹き出しのとがった部分で、どの部分のタイトルか分かりやすいと思います。
    おすすめの形状は、「ボックス、吹き出し、ステッチ」です。
    ステッチはいくつかのブログで見かけましたが、なかなか良い感じですよ。
    Diverのタイトル(ステッチ)

これで、タイトルのスタイルも変更することができました。

最後に

Diverの「記事一覧グリッド」を使って、おすすめ記事を作る方法を説明しました。

記事一覧グリッドは、見た目が良いので、是非使って欲しい機能です。

ウィジェットには、「記事一覧リスト」もありますが、記事一覧グリッドの方が断然おすすめです。

特に、拡大表示のピックアップスライダーを使ったときは、その下に記事一覧グリッドは良いとおもいますよ。

良かったら試してみてくださいね。

★次回(第3回)の記事はこちら↓
Diverでプロフィールを作成。詳細ボタンやSNSサイトアイコンを設定>>

★Diverをおすすめする理由はこちら↓
アフィリエイトに最適のテーマ「Diver」を5段階評価してみた>>

Diverの詳細はこちら>>

 

関連記事

  1. Diverのテーマ

    アフィリエイトに最適のテーマ「Diver」を、おすすめ度で5段階評価し…

  2. BRIDGEの注意点

    WordPressテーマBRIDGEの、ランキング表示項目や文字サイズ…

  3. ザ・トール

    ザ・トールのWordPressテーマを5段階評価してみた【アフィリエイ…

  4. Diverタブウィジェット

    【Diverの使い方講座】サイドバーにタブ切換の記事一覧を作成します

  5. reviewer

    WordPressテーマREVIEWERを使ったサイト事例。ランキング…

  6. Diverでサイドバーにピックアップ記事

    【Diverの使い方講座】記事一覧グリッドでピックアップ記事を作る方法…

コメント

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

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

CAPTCHA


PAGE TOP

おすすめテーマ

トップページに動画再生可能な、おすすめのWordPressテーマを集めました

おすすめテーマ

美容室・サロン向けの高級感あるWordPressテーマを比較してみました

TCDテーマ「SKIN」

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマを集めました

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…

おすすめテーマ

ブログにおすすめのWordPressテーマ。クオリティーの高い有料テーマに厳選し…

ONEでCTA設置

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

2019年、WordPressテーマの目的別おすすめベスト3を発表!

目的別テーマのおすすめベスト3

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。すべて複数サイトで使い回しO…