15以上の優れたWordPressスライダーの例（ショーケース）
公開: 2018-09-21WordPressスライダーのインスピレーションをお探しですか？ スライダーを使用すると、Webサイトの所有者は、魅力的でインタラクティブなスライドショーで最も重要なコンテンツを紹介できるため、ユーザーはハイライトを確認してすぐにアクションを実行できます。 非常に多くのサイトができる限りのスライダーを使用しているのも不思議ではありません。
- コンテンツを効率的かつスタイリッシュに配信する
- 小さなスペースにたくさんの情報を詰め込む
- あなたのウェブサイトに相互作用を追加します
- プロモーションや重要なページに訪問者を誘導する
この記事では、15以上の優れたWordPressスライダーの例を紹介します。 また、自分のWebサイト用にゴージャスなスライダーをすばやく作成する方法も紹介します。
スライダーインスピレーションショーケース
ここにあなたのインスピレーションのためのスライダーの最良の例のいくつかがあります。 これらのスライダーを選択するために使用した基準は、1）創造性と2）使いやすさでした。 一部のデザインには両方があり、一部には1つの側面しかありません。
CNBCプライム
CNBCのスライダーは読みやすく、使いやすいです。 番組のタイトルは太めのフォントを使用しているので読みやすいです。 テキストに色を付けると、背景に対しても目立つようになります。
CBS
CBSのスライダーは、読みやすく使いやすいように、大きなフォントと多くの空白を含む魅力的な画像を使用しています。 大きな箇条書きは、クリックすると何が起こるかを非常に明確にします。
ユニバーサルオーランド
ユニバーサルのスライダーには、1つの単純な目的があります。それは、遊園地を訪れるように誘惑することです。 CTAはいくつかの魅力的な提案をしますが、写真はすべての話をします。
Savilleの鳩小屋
Saville'sは、鳩小屋の品質と職人技を強調する写真と組み合わせたエレガントなセリフフォントを使用しています。 彼らはまた鳩の彼らの広範な知識を説明するので、あなたはあなたがあなたの羽の生えた友人のために絶対に最高の家を買っていると確信することができます。
マグノリアベーカリー
マグノリアベーカリーは、画像のみのスライダーの優れた例です。 あなたがおいしいペストリーを持っているとき、誰がチットチャットを必要としますか？ これらの3つのミニスライダーは、このWebページでは見栄えがします。
フレミングゴージ
フレミングゴージはユタ州の人気のアトラクションです。 彼らのギャラリーの見出しはそれをすべて述べています：あなたはフレーミングゴージリゾートでそれを荒くすることなく景色の広大さを楽しむことができます。
運転間隔のテーマ
ヘッドウェイテーマは、スライダーをクリエイティブに使用します。 通常のページ上部のスライダーの代わりに、スライダーをさらに下に配置し、テーマを使用するWebサイトを紹介するために使用します。 頭がいい！
スミソニアンフリーアサックラーギャラリー
Smithsonian Freer Sacklerは、シンプルなナビゲーションスライダーを使用して、Webサイトの主要なページに移動します。 画像に引き寄せられる空白に囲まれたスライダーのシンプルでクリーンな外観は、アートギャラリーに最適です。
ロンリープラネット
ロンリープラネットのスライダーは、回転するフルスクリーン画像と人目を引くアニメーションで派手になります。 これはゴージャスなスライダーの1つであるだけでなく、気になる場所に簡単に移動できます。
イーストベイ
Converseのスライダーは、製品の本来あるべき場所にすべての焦点を合わせます。 このスライダーのディテールとテクスチャーは非常にはっきりしているので、ほとんど手を伸ばして生地に触れることができます。
Sheetz
Sheetzのスライダーは、明るく楽しい色を使用しており、カーソルを合わせるとスライドするインタラクティブな進むボタンがあります。 このようなスライダーはただ遊んで欲しいと頼みます。
Xbox
Xboxのスライダーは、すっきりとした製品画像、いくつかの単語、および多くの空白を使用してシンプルになります。 これは間違いなく少ないほど多い場合です。
ティムホートンズ
ティムホートンズのスライダーは、職場での素晴らしい料理の写真の典型的な例です。 食欲をそそる、それをいくつかのお得な情報と組み合わせて、ブーム！ 抵抗するのが非常に難しいスライダーがあります。
ソニークラックル
Crackleは、回転するスライダーに注目を集めるシンプルな白とオレンジの配色にこだわっています。 各スライドの小さな宣伝文句は、チューブをオンにしていくつかのテレビ番組をキャッチしたいという衝動を与えます。
スミソニアン協会
スミソニアンのスライダーは大きくて目立つ矢印を使用しているため、見逃した前のスライドに戻ることができます。 この場合、各スライドで読むべきテキストが非常に多いため、これは重要です。
ルーバー
ルーブル美術館のスライダーはまさにあなたが期待するものです：歴史的でエレガントです。 これは、十分な空白、セリフフォント、および画像のシンプルでありながら劇的な黒へのフェードのおかげです。 このスライダーのもう1つの優れた点は、右下隅にある再生/一時停止ボタンです。
独自のWordPressスライダーを作成する方法
「これらのスライダーは素晴らしいですが、どうすれば自分のWebサイト用にスライダーを作成できますか？」と疑問に思われるかもしれません。
ありがたいことに、WordPress用のSoliloquyプラグインのおかげで、実際には非常に簡単です。
まず、SoliloquySliderプラグインをインストールしてアクティブ化する必要があります。 詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。
次に、最初のスライダーを作成します。 Soliloquy»AddNewに移動して、スライダーを追加します。 画像をアップロードする必要がある場合は、コンピュータからファイルを選択できます。 すでに画像をWebサイトにアップロードしている場合は、他のソースからファイルを選択してください。
下にスクロールし続けます。 スライダー用に選択した画像が表示されます。 ここから、鉛筆アイコンをクリックして画像を編集したり、赤いXをクリックしてスライダーから画像を削除したりできます。
左側の[構成]タブを選択して、スライダーに関するその他の詳細を構成することもできます。 画像サイズ、スライダーのテーマ、スライドのトランジションの速度を設定できます。 テキストキャプションの位置もここで変更できます。 これらの設定を確認してください。
設定に満足したら、[モバイル]タブを確認します。 これにより、モバイルデバイスでWebサイトがどのように表示されるかをテストし、必要に応じてモバイル解像度設定を調整できます。
（また、スライダーのインポートまたはエクスポートについては、[その他]タブを参照してください。）
ページまたは投稿にスライダーを追加する
スライダーの作成が完了しました。 次に、選択した投稿またはページに追加します。 投稿またはページを編集し、[スライダーの追加]ボタンをクリックして、スライダーを選択します。 変更を保存するには、投稿/ページを公開または更新することを忘れないでください。
これで、スライダーがWebサイトで公開されます。
それでおしまい！ これで、独自のWordPressスライダーができました。 この記事が15以上の優れたWordPressスライダーの例に触発され、最初のスライダーの作成に役立つことを願っています。
スライダーを設計するときに使用できるすべての高度な機能を確認することもできます。 スライダーをカスタマイズする可能性は事実上無限です。今日からSoliliquyを始めましょう！ これは、独り言スライダーでできることのほんの一例です。
- WordPressで全幅画像スライダーを作成する
- WordPressでスライダー時間を変更する
- WordPressでレスポンシブビデオスライダーを作成する
この記事が気に入ったら、FacebookとTwitterでフォローして、無料のWordPressチュートリアルを入手してください。