ブログの作り方

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

Diverの記事一覧グリッドで、サイドバーにピックアップ記事を作る方法

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

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

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

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

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

Diverで記事一覧グリッド

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

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

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

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

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

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

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

外観→ウィジェット

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

Diver記事一覧グリッド

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

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

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

記事一覧グリッドを設定

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

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

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

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

Diver記事一覧グリッド設定

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

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

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

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

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

Diverの詳細はこちら>>

 

関連記事

  1. カスタムCSS欄

    TCD「MAG」のカスタムCSSを使ってみた。ボタンのデザインを簡単に…

  2. Diverの入力補助機能

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

  3. スワローでブログ作成1

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

  4. Switchで企業サイト作成

    「Switch」で企業サイトを作る手順2。初心者でもこの完成度

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

    Diverのヘッダー部分を設定。ピックアップスライダーを拡大表示しよう…

  6. ONEでCTA設置

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

コメント

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

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

CAPTCHA


PAGE TOP

ブログの作り方

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

SANGOメニューボックス

ブログの作り方

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

ONEでブログを作る

ブログの作り方

Diverのヘッダー部分を設定。ピックアップスライダーを拡大表示しよう

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

ブログの作り方

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

スワローでブログ作成1

ブログの作り方

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

TCDのSwitchでサイト作成

ブログの作り方

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

Bloomでブログを作る