自分で選んだ投稿をスライダー形式にしたいけど、SWELLでできるのかな？
リッチカラムと投稿リストを使えばできます！
本記事では、WordPressテーマ「SWELL」のリッチカラムと投稿リストというブロック機能を使って、自分で選んだ投稿をスライダーにする手順を紹介します。Topページなどに注目してほしい投稿を設置することで、視覚的にアピールすることができますね！
記事の幅調整に少しコードを書く必要がありますが、コピペで簡単にできるので、初心者の方でも安心してください！
完成すると、こんな感じのスライダーを設置することができます。
スライダーの設置方法
まずは、スライダーを設置したい場所にリッチカラムを追加します。
赤枠部分に「/リッチカラム」と入力するか、もしくは右下の「+」ボタンを押すとリッチカラムを追加することができます。
スラッシュ(/)の後にブロック名を入力することで、ブロック機能を瞬時に追加できるのでおススメです！
例＞画像を挿入したいときは「/画像」と入力します。
次に投稿リストを追加します。
赤枠部分に「/投稿リスト」と入力します。
投稿リストを追加した時点ではこのような状態になります。
ここから管理画面右にあるブロックの設定を使い、見た目を整えていきます。
ブロックの設定画面を開き、表示する投稿数を「1」にします。
次に「公開日を表示する」をオフにし、カテゴリーを「表示しない」にします。
※スッキリした見た目にするため今回はオフにしますが、必要でしたら表示をオンにしてください。
続いて、任意の投稿を表示させる手順です。
Pickup画面を開き、表示させたい投稿のIDを入力します。
投稿IDはどこで分かるの？
投稿IDは投稿一覧で確認することができますよ！
ダッシュボードで投稿＞投稿一覧を開くと、投稿IDを確認することができます。
表示したい投稿を繰り返し追加していくと、このような状態になります。
ここから、スライダーの設定をしていきます。
リッチカラムを選択した状態でブロックの設定画面にて、「横スクロールで表示する」をオンにします。
これでスクロールできるようになりました！
ただこのままでは画像の幅がせまくて見えにくいため、最後にサイズをカスタマイズしましょう。
スライダーのカスタマイズ方法
リッチカラムを選択した状態でブロックの設定画面を開き、横幅の設定をします。
今回はPCとタブレットは300px、スマホは200pxにしてみました。
サイズ感が分からない時は、右上にあるパソコンのアイコンからプレビューを見ることができます。
下書きを保存した後、確認しながら調整してみてください。
そうすると、このようになります。
まだ画像の幅が狭いため、最後にCSSで調整していきましょう。あと少しです！
まずはCSSが反映されるように、リッチカラムにクラス名を指定します。
クラス名は必ず一意のものにしてください。
同じクラス名があると、後で競合してデザインが崩れる可能性があります。
例＞トップページのスライダーなら「top_slider」と入力
次に、CSSを記述します。
ダッシュボードを開き、カスタマイズ＞追加CSSを開きます。
そして下記コードをコピーして貼り付けてください。
.slider .swell-block-columns__inner .swell-block-column .p-postListWrap .p-postList .p-postList__item {
width: 100%;
}貼り付けたら、「公開」ボタンを押します。
プレビュー画面を再読み込みすれば、反映されますので確認してみてください！
まとめ
この記事では、SWELLの「リッチカラム」と「投稿リスト」を使ったスライダーの設置とカスタマイズ方法について詳しく解説しました。いかがでしたでしょうか。
コピペで完成するので、初心者の方でも「これなら作れそう」と思えたのではないでしょうか。
クラス名が重複しないように注意しながら、SWELLでより魅力的なWebサイトを作ってみてください！
コメント