おすすめテーマ

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

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

Diverのヘッダー部分の「ピックアップスライダー」を設定していきたいと思います。

Diverのファーストビューには、ピックアップスライダー、画像、動画などを表示させることができます。

この中で一番おすすめなのがピックアップスライダー。

ピックアップスライダーに、一番見て欲しい記事を拡大表示で設定すれば、

記事に設定したアイキャッチ画像が並んで、迫力あるファーストビューができあがります。

Diverピックアップスライダー

では、以下の手順でピックアップスライダーを設定していきましょう。

1.ピックアップスライダー用のタグを作る
2.表示させたい記事にタグを付ける
3.オプションで拡大表示する

いずれも簡単なので、すぐに作ることができますよ。

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

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

ピックアップスライダー用のタグを作成

まずは、何はともあれ、ブログの記事を用意しましょう。

記事数は10くらいあれば、とりあえずは見栄えがいいトップページができます。

記事を作るにはワードプレスのメニューから、

投稿→新規追加

とクリックし、文章を入力していきます。

記事にはアイキャッチ画像を設定して起きます。

アイキャッチ画像の大きさは、横850px、縦500pxを使っています。

これより大きい画像であればいいでしょう。

Diver記事作成

記事が用意できたら、記事スライダーに表示させるためのタグを設定していきます。

Diverの場合は、デフォルトでタグに「pickup」と入力すると、記事スライダーに表示される仕組みになっています。

投稿→タグ

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

Diverタグ

名前欄に「おすすめ」、スラッグに「pickup」と入力します。

最後に「新規タグを追加」ボタンを押せば、タグの設定は完了です。

簡単ですね^^

タグを付ける

続いて、表示させたい記事に、先ほどのタグを付けていきます。

ワードプレスのメニューから、

投稿→投稿一覧

とクリックして、スライダーに表示させたい記事を選択します。

Diverでタグを設定

上の画像のように、画面右側に「タグ」欄があるので、そこに「おすすめ」と入力します。

入力したら「追加」ボタンをクリックし、最後に記事を更新しておきます。

同様に、表示させたい記事すべてに「おすすめ」と入力して保存します。

ピックアップスライダーを拡大表示

最後にピックアップスライダーを拡大表示させてみましょう。

記事スライダー拡大表示

ワードプレスのメニューから、

Diverオプション→ファーストビュー

とクリックします。

上の画像のように、ファーストビューは「ピックアップスライダー」を選択し、

その下にある、「ピックアップスライダーを拡大表示する」にチェックを入れます。

これで記事スライダーの設定が終わりました。

ブログを表示してみると、トップページに大きなスライダーが表示されていますよ。

最後に

今回は、ピックアップスライダーを拡大表示する方法を紹介しました。

メリットは、おすすめ記事を一番目立つところに表示することができることです。

大きめの画像をアイキャッチに設定することで、ファーストビューが華やかになります。

とは言っても、ブログによっては、スライダーを小さくしたり、画像にしたり、動画にする方が雰囲気が合う場合もあるでしょう。

自分好みの設定を探してみると、それも楽しいものです。

Diverはヘッダー部分もいろいろ変えることができるので面白いですね。

★次の記事(第2回)はこちら↓

★Diverの使用サイト例です↓
WordPressテーマDiverを使ったサイト事例。アフィリエイトテーマの参考に>>

Diverの詳細はこちら>>

 

関連記事

  1. クール版

    WordPressテーマ「賢威」を5段階評価してみた【有名なアフィリエ…

  2. BRIDGE

    TCD「BRIDGE」はランキング機能が素晴らしいアフィリエイト向けテ…

  3. 【AFFINGER5使い方講座】WINGのアニメーション機能の使い方を…

  4. Diverのテーマ

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

  5. BRIDGEの注意点

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

  6. ザ・トール

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

コメント

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

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

CAPTCHA


PAGE TOP