Smart Slider 3の使い方!カルーセルやレスポンシブ設定[WordPress]

スポンサーリンク
画像動画
スポンサーリンク

WordPressでスライダーならSmart Slider 3

WordPressでスライダーやカルーセルを使用するならSmart Slider 3がおすすめです。



無料版でサムネイル付きのスライダーを簡単に作成できます。



また、テキストの挿入や影の演出など多種多様な機能・設定が備わっているのが魅力です。

今回はスライダーの日本語化設定、スライダーの簡単な導入方法、重いと評判のSmart Slider 3の高速化設定をご紹介します!



スポンサーリンク

Smart Slider 3の使い方

まずはSmart Slider 3を日本語化しよう

Smart Slider 3をインストールした際に自動的に日本語化される場合もありますが、されなかった場合は日本語化設定する必要があります。


直感的に操作できるますし、英語も簡単なため日本語化しなくても十分に使えますが英語苦手な方向けにSmart Slider 3の日本語化記事を書いたので確認してみて下さい!


おすすめはサンプルスライダー(カルーセル)の導入

簡単に設定するのは事前に用意されているサンプルスライダーを使うのがおすすめです。

1からスライダーを作ることもできますがテキストを挿入したり、画像を挿入したりする方法を学ぶ必要があります。


サンプルスライダーを使えば一通りのテキストや画像設定ができた状態でスライダーが用意されています。

そのため、設定されているスライダーを上書き修正するだけで簡単にスライドが設定できます。

スライダーも画像スライダーだけでなく、動画スライダーやサムネイル付スライダーなど様々なものがあるのでサンプルスライダーの紹介記事を確認してみて下さいね!




Smart Slider 3をレスポンシブに対応させよう

Slider Size設定(スライダーサイズ)

Smart-Slider-3-responsive 画像動画

基本的にデフォルト設定でもレスポンシブ対応してくれます。


そこがSmart Slider 3の良いところです。
まずはスライダー導入したらスマホやPCでサイズ感を確認してみて下さい。

個別にスライダーのサイズも変更できて、setting -> Size -> Slider Sizeで変更可能です。

まずはWidthとHeightを変更して、次にLitmit Slide Widthを変更させましょう。

パソコンやタブレット、スマホで変更可能です。

Layout設定(レイアウト)

Smart-Slider-3-responsive-1 画像動画

あとは同じくサイズの設定setting -> Size -> Layoutで画面サイズをFull widthにしましょう。


デフォルトでは余白を設定してくれていると思いますが、画面にぴったり合わせてレスポンシブさせたい方にはおすすめです。


スポンサーリンク

重いSmart Slider 3を高速化設定でサイトを早く

サイトが遅くなるのは画像の影響が大きいと言われています。



Smart Slider 3に関わらず、スライダー系のプラグインは重いと言われています。


適切に高速化設定すれば重いと評判のSmart Slider 3も軽くすることができますので試してみて下さいね!

スライダーの画像最適化設定(Optimize Slide Images)

画像をまずは最適化しましょう!

Smart Slider 3では画像のクオリティーを変更するだけで簡単に最適化できます。


作品集などでない限り、そこまで画質の良いスライダーも必要ないと思いますので画像のクオリティ設定を変更してみて下さい。


スライダーの遅延読み込み設定

サイトを読み込みが始まるとhtmlやcss,javascriptなどリソースが次々に読み込まれます。

それと同時にスライダーも読み込むことでリソースの量がより大きくなってしまいます。

これがSmart Slider 3が重い、サイトが重くなると言われる理由です。

これを解決するにはスライダー自体を遅延読込みすることで高速化することができます。


高速化するだけでなく、GoogleのPageSpeed Insightsスコア上昇も臨めるため是非しておきたい設定です。


遅延読み込みの設定方法も記事にまとめたので確認してみて下さい。



サイト自体が重いと感じる際は高速化のプロにご相談下さい!

ココナラでサイト高速化のサービスを出品しているので、サイト自体が重いと感じた方は是非こちらのサイトからお問い合わせ下さい!

ココナラからの相談でも大丈夫です。


 

WordPressサイト高速化のノウハウはスキルのフリーマーケット「Coconala」での多数のクライアント様のWordPressサイト高速化設定した実績に基づいたものです

 

Google PageSpeed Insightsのスコア上昇へ貢献できるノウハウをブログ上で一部無料公開しております。

他にも様々な角度からサイト診断する必要がありますので、興味のある方は本ブログのお問い合わせフォームからでもお気軽にお問い合わせいただければと存じます。

スポンサーリンク

Smart Slider 3が表示されない不具合発生!?

Smart Slider 3がたまに表示されない不具合が発生するようです。

Javascriptの設定がどうも関連しているようです。



デフォルトの設定を変更するだけで非表示問題を事前に防止できる可能性があるため、最初に変更するのがおすすめです。


以上で、Smart Slider 3の設定ご紹介は終わりです!サイト高速化などに興味あるかたは他の記事も要チェックです。



タイトルとURLをコピーしました