Penci Slider
こんにちはchessinuです。
今回はWordPressで人気の海外製テーマ「Soledad」に付属しているPenci Sliderというプラグインについて紹介します。
Penci Slider プラグインって何？
Penci Slider プラグインはFeatured Slider Styleの
[Penci Slider Style 1]
と
[Penci Slider Style 2]
を使用する場合にスライダーの内容を編集するためのプラグインで、とても簡単にお洒落なスライダーが作成できます。
使用手順
Penci Sliderを使用するための大まかな流れです。
プラグインをインストール＆有効化
「Soledad」テーマを最初にインストールした時に、テーマ付属のプラグインのインストール作業も同時に行ったかと思います。
まだプラグインをインストールしていない方は以下の様にインストールしておいてください。
「外観」→「Install Plugins」→「Install」
次にインストールしたプラグインを有効化します。
「プラグイン」→「インストール済みプラグイン」→「有効化」
スライダーを編集する
では実際にスライダーを編集していきます。
プラグインを有効化するとPenci Sliderという項目ができるので
「Penci Slider」→「新規追加」へ進みます。
するとこのような「Add New Slider」という画面が出てくるので、こちらからスライダーの編集を行っていきます。
各項目についての解説
分かりにくい箇所があるかも知れないのでそれぞれの項目について解説していきます。
なお今回は[Penci Slider Style1]に設定してスライダーを一緒に作成していきます。
Slide Image
・画像幅 : 1600px~2000px
・高さ : 最低650px以上
制作側の説明によると、上記のような条件の画像だと綺麗に綺麗に反映されるようです。
ここではこの画像(1920×1277)を使用して作ります。
Slide Title
スライドした時に表示されるタイトル名を記入します。
ここでは「ハート型のゆで卵の作り方」とします。
Slide Title Color
スライドした時に表示されるタイトル名の色を設定します。
ここでは「 #E6E6FA( lavender)」にします。
Slide Caption
スライドした時に表示される説明文を記入します。
ここでは「誰でも簡単に作れます！！」
Slide Caption Color
スライドした時に表示される説明文の色を設定します。
ここでは「#eae6e5」にします。
Button Text
ボタンに表示されるテキストを記入します。
ここでは「READ MORE」とします。
Button Background Color
ボタンの背景色を設定します
ここでは「#bfffc4」にします。
Button Color
ボタンの色を設定します。
ここでは「#00960a」にします。
Button Link
ボタンを押した時に表示されるリンク先を設定します。
ここでは「https://www.～/boiled-egg/」にします。
Slide Alignment
設定した要素の配置パターンを以下の3つの中から選択します。
ここでは「Right」にします。
Left
Center
Right
Elements Animation
設定した要素のフェードインパターンを以下の4つの中から選択します。
ここでは「fade in down」にします。
- fade in Up
下から上にフェードインしてきます。 - fade in Down
上から下にフェードインしてきます。 - fade in Left
左側からフェードインしてきます。 - fade in Right
右側からフェードインしてきます。
実際に完成したスライダーを紹介
この様な感じで設定した要素が表示されます。(画質が粗くてすいません笑)
今回はスライド画像を1つしか作りませんでしたが、同じ手順で他にも作ってみてください。
補足事項
機能に関する補足事項です。
詳細設定
カスタマイザーの[Featured Slider Options]という項目で、スライダー表示に関する様々な設定が行えるのでこちらの方も利用してみてください。
スライド画像の順番を替える
スライドする画像の順番を並び替える方法について紹介します。
「Penci Slider」→「All Slides」へ行き設定します。
上から順番に表示されるので、お好きな順番にドラッグして並び替えてください。
終わりに
このように簡単にお洒落なスライダーが作れるのでぜひ試しにこのプラグインを使ってみてください。
以上でこの記事は終わりとなります。
それではまた別の記事でお会いしましょう！
この記事が気に入りましたら、下のアイコンをクリックしてSNSシェアの方をお願いします！
【おすすめ記事】