おすすめテーマ

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

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

Diverの「記事一覧グリッド」ウィジェットを使って、サイドバーにピックアップ記事を作っていきます。

サイドバーで記事一覧グリッドを使うと、記事が2列表示で表示されます。

この表示はスマホで見やすいですね。

さらに先頭記事を拡大表示すると、先頭の記事だけ大きくなって1列表示、残りの記事が2列表示になります。

サイドバーに変化が出て、「ちょっと他のブログと違うな」という感じがしますよ。

Diverで記事一覧グリッド

では、設定の仕方を説明していきます。

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

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

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

記事一覧グリッドを配置する

まずは、「記事一覧グリッド」ウィジェットを、Diverのサイドバーに配置しましょう。

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

外観→ウィジェット

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

Diver記事一覧グリッド

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

前回の記事で作成した、【Diver】プロフィールの下にしておきましょう。

これで、記事一覧グリッドをサイドバーに配置することができました。

記事一覧グリッドを設定

続いて、記事一覧グリッドの設定をしていきます。

先頭の記事を拡大表示させ、残りの記事を2列表示にしてみます。

先頭を拡大表示させるときは、記事数は奇数にするとピッタリ収まります。

今回は5つの記事を表示させます。このくらいがちょうど良いと思いますよ。

Diver記事一覧グリッド設定

では、設定する項目を見ていきましょう。

  • タイトル
    「ピックアップ記事」と入力します。
    他のタイトルが良ければ、変えても全然OKです。

  • 最大表示数
    先頭を拡大表示する場合は奇数、拡大表示しない場合は偶数にします。
    今回は5件としました。

  • ソート順
    並び順は、「投稿日順、更新日順、ランダム」から選ぶことができます。
    今回はランダムとしましたが、どれを選んでも大丈夫です。

  • カテゴリー
    カテゴリーは「全カテゴリー」とします。
    特定のカテゴリーにすることもできます。

  • サムネイルを表示する
    これは必ずチェックしておいてください。
    チェックしていないと、アイキャッチ画像が表示されません。

  • 抜粋を表示する
    この項目はチェックをはずします。
    サイドバーでは表示されません。

  • 投稿日を表示する
    この項目もチェックをはずします。
    サイドバーはシンプルにした方が良いと感じました。

  • カテゴリーを表示する
    この項目もチェックをはずします。
    サイドバーだとサムネイルが小さいので、カテゴリーは表示しない方がスッキリします。

  • 先頭を拡大表示する
    チェックします。
    先頭だけ横幅2倍で目立たせることができます。
    こういう表示ができるテーマは少ないので、是非使ってみてください。

ここまで設定できたら、最後に「保存」ボタンを押せば完了です。

最後に

サイドバーに、2列でピックアップ記事を表示させてみました。

先頭を拡大表示することで、少しインパクトが大きくなった感じがします。

Diverには、【Diver】記事一覧リストというウィジェットもあるのですが…

サイドバーには、グリッド表示が合います。

これをスマホ表示にすると、記事が2列に並んで、1画面で表示される記事数が増えるのが良いところです。

記事一覧ウィジェットは使い勝手が良いので、どんどん使ってみてくださいね。

★次回(第5回)の記事はこちら↓
Diverでサイドバーに人気記事ランキング。おすすめの設定方法を紹介>>

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

Diverの詳細はこちら>>

 

関連記事

  1. Diverでヘッダースライダー作成

    【Diverの使い方講座】ヘッダー部分のピックアップスライダーを設定

  2. Diverタブウィジェット

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

  3. Diverのテーマ

    WordPressテーマDiverの機能一覧。アフィリエイトに便利な機…

  4. WING(AFFINGER5)使用例

    AFFINGER5(WING)を使ったサイト事例。アフィリエイトブログ…

  5. Diverのテーマ

    WordPressテーマDiverを使ったサイト事例。アフィリエイトテ…

  6. Diverの入力補助機能

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

コメント

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

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

CAPTCHA


PAGE TOP

おすすめテーマ

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

ONEでCTA設置

おすすめテーマ

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

おすすめテーマ

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

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

おすすめテーマ

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

おすすめテーマ

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

おすすめテーマ

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

TCDテーマ「SKIN」

おすすめテーマ

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

おすすめテーマ

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