ブログの作り方

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

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

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

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

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

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

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

Diverで記事一覧グリッド

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

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

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

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

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

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

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

外観→ウィジェット

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

Diver記事一覧グリッド

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

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

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

記事一覧グリッドを設定

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

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

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

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

Diver記事一覧グリッド設定

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

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

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

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

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

Diverの詳細はこちら>>

 

関連記事

  1. 画像編集サイトfotojet

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

  2. TCDのSwitchでサイト作成

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

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

    スワローでブログを作る手順3。スライダーを設置してみよう

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

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

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

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

  6. ONEでブログを作る

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

コメント

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

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

CAPTCHA


PAGE TOP

ブログの作り方

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

Bloomでブログを作る

ブログの作り方

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

スワローでブログ作成1

ブログの作り方

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

TCDのSwitchでサイト作成

ブログの作り方

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

ONEでブログを作る

ブログの作り方

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

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

ブログの作り方

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

SANGOメニューボックス