WordPressで画像カルーセルを作成するにはどうすればよいですか？

公開: 2021-12-06

最終更新日-2022年3月8日

カルーセルという用語に気付いていないかもしれませんが、それでもデジタル市場で頻繁に見られます。画像カルーセルは、ほとんどの新時代のWebサイトで使用されています。企業が提供する製品やサービスに関する概要を含むスライド画像です。画像は自動的に回転し、ビューに出入りします。

画像カルーセルは、スライド画像によってビジネスが提供する製品やサービスに興味を持ってもらうため、Webサイトの訪問者を効果的に長く夢中にさせます。場合によっては、画像のスライドが自動化されておらず、訪問者は次のスライドを表示するために手動で画像を回転させる必要があります。

WordPressで画像カルーセルを作成する

ビジネストーンに応じて、画像カルーセルにはいくつかの大胆なステートメントを含めることができ、長い形式の説明なしでビジネスについて多くのことを明らかにすることができます。あなたがあなたのウェブサイトに画像カルーセルを組み込む方法を学ぶことを切望しているなら、あなたは正しい場所に来ました。

SmartSlider3プラグインをワードプレスにインストールするプロセスについて説明します。このジョブには他にもいくつかのツールがあり、インストールプロセスはSmartSlider3と同様の場合があります。

チュートリアルにジャンプする前に、1つの小さな警告があります。ウェブサイトで商品を販売している場合、コンバージョンに関する限り、画像カルーセルを選択するのは賢明な選択肢ではないかもしれません。しかし、写真を撮ったり、ウェブサイトをデザインしたりしていて、見た目に美しく見せたい場合は、ブログ全体を読んでください。

画像サイズの選択から始めます

スマートスライド3は、選択したプレゼンテーション形式に基づいてワードプレスで画像のサイズを変更します。したがって、画像が大きい場合、ツールは画像のサイズを縮小し、その逆も同様です。また、ご存知かもしれませんが、小さな画像を拡大すると、品質が低下し始めます。したがって、カルーセルの寸法よりも小さい画像を含めないようにしてください。

さらに、大きな画像はカルーセルで見栄えが良くなりますが、ダウンロード時間も長くなります。したがって、品質とサイズのバランスをとる必要があるため、スライダーでも見栄えがします。

1つの小さなヒント：画像カルーセルは水平方向にスライドするため、正方形の画像よりも幅の広い画像を選択する方が魅力的です。

SmartSlider3のインストール

Smart Slider 3のインストールプロセスは、市場で入手可能な他のツールとほとんど同じです。開始するには、まず、ワードプレスの管理ダッシュボードにログインします。左側には、さまざまなオプションから選択できるナビゲーションパネルが表示されます。オプションからプラグインを選択し、「新規追加」リンクをクリックします。

目の前に検索バーが表示されます。その中でSmartSlider3を検索します。プラグインがインストールされたら、アクティブ化オプションをクリックしてください。

開始画像カルーセルジャーニー

Smart Slider 3はメディアライブラリの画像を使用するため、Sliderの作成を開始する前に、必ずいくつかの画像をアップロードしてください。彼らのチュートリアルビデオを見て、画像の選択とプレゼンテーション形式への追加を開始する方法についてのより良い洞察を得ることができます。 Smart Slider 3を押して、ツールの操作方法に関する詳細な知識を提供する「LearnSmartSlider3」の紹介ビデオを入手してください。

ビデオの助けを借りるか、この記事を読んで始めることができます。

メニューから基本オプションを選択します。

一度に複数のカルーセルを処理するときにカルーセルを見つけやすくするために、スライダーに名前を付けます。
幅と寸法は、スライダーのサイズと形状に影響します。デバイスまたはブラウザの全幅を占めるように構成するピクセルの選択は無視してください。
デフォルトの幅と寸法を選択すると、カルーセルが現在の幅とサイズに設定されますが、「全幅」オプションを選択すると、寸法が無視され、カルーセルがウィンドウの幅全体に回転します。

画像を最適化した後、「作成」を押します。

スライダーへの画像の追加

カルーセルのデフォルトのサイズと幅を設定したら、次の明らかなステップは、カルーセルを魅力的な画像で埋めることです。これを行うには、以下の手順に従います。

SmartSlider3で[スライド画像を追加]をクリックします。
スライダーの画像を選択するオプションが表示されます。そのオプションをクリックします。
ワードプレスのライブラリから画像を選択してください。
カルーセルは、選択した画像を表示します。選択した画像に満足したら、「公開」セクションをクリックします。

コード内にスライダーを挿入する場合は、ツールからPHPコードをコピーするか、ポストエディターオプションを選択してください。

Webサイトの新しいブログを書き始めると、スマートスライダー3オプションがページに表示されます。従来のエディターを使用している場合は、スマートスライダーアイコンをクリックします。ここで、前に準備したカスタマイズされたスライダーを選択します。投稿を公開すると、スライダーがWebサイトにアップロードされ、訪問者が見ることができるようになります。

カルーセルは、スライダーの両側で前方または後方にリンクして、画像を手動でスライドさせます。

デフォルトでは、カルーセル画像は自動的にスライドしませんが、変更することができます。

カルーセル画像の自動サイクル

WordPress管理ダッシュボードで、Smart Slider 3リンクをクリックし、編集オプションを選択します。「自動再生」スタイルを選択し、「有効」を押します。スイッチ間のデフォルトの時間は8秒です。次に、パネルの右側にある[保存]ボタンから更新された設定を保存します。

カルーセルをウィジェットとして使用する

Smart Sliderは、WordPressSliderImageとしても使用できます。これらのスライダーは、サイドバーのようにウィジェットとしてどこにでも追加できます。

左側にナビゲーションパネルが表示されます。外観をクリックしてから、「ウィジェット」リンクをクリックします。
「利用可能なウィジェット」セクションが表示されたら、「スマートスライダー」ボタンをクリックします。
画像を表示するゾーンを選択し、「ウィジェットの追加」ボタンを選択します。

画像か画像なしが大きな問題です

ウェブサイトのデザインと開発は主観的なものであり、他の人が魅力的だと思うものもあれば、そうでないものもあります。更新と変更のいくつかのフェーズを経て、画像カルーセルは、企業がどこにでも組み込み始めたとき、かつてWebサイトで最も需要の高い要件でした。

上記の説明は、ウェブサイトに画像カルーセルを追加するための段階的なガイダンスを提供しています。プロセスは複雑ではなく、Webサイトの外観を向上させるために、関連する画像を選択するための忍耐力と専門知識が必要です。カルーセルは、クリエイティブなWebサイトには非常に魅力的ですが、eコマースWebサイトには役立ちません。

したがって、次にスライダーに鮮やかな画像を追加することを計画しているときは、それがWebサイトに付加価値をもたらすのか、それともコンバージョン率に大きな影響を与えるのかを評価することを検討してください。

参考文献

製品の画像サイズを最適化する方法は？
WooCommerceに最適な画像ズームプラグイン
画像を改善するためのスマートなヒント