THE THOR カルーセルをカスタマイズ

カルーセルスライダーをカスタマイズしました。

カルーセルはTHE THORの機能の中でも良く使われている機能だと思います。


人気のカルーセルですがコンテンツの表示のされかたに不満があります。

何もない空間からいきなり現れているように見えるのは自分だけかな?

というわけで、端からコンテンツが表示されるよう変更しました。

※PC表示で横幅を大きくすると表示が乱れたので修正しました。



カルーセル カスタマイズ 端からコンテンツの登場

カルーセル カスタマイズ THE THOR

今回も追加CSSを利用します。

外観 → カスタマイズ → 追加CSS

カルーセルのコンテンツは左右15pxの位置から出現するので、これを画面端に変更します。

カルーセルスライダー THE THOR

 

追加するコードは以下の通り。

/* ヘッダーのコンテナ左右マージン */
/* カルーセル */
.l-headerBottom .container {
margin-left: auto;
margin-right: auto;
padding-left: 1px;
padding-right: 1px;
}

左右1pxの場所から出現して消えていくようになります。

数値を0にすれば画面端ぴったりになります。しかしピッタリだとこれまた違和感があり、まるで失敗したかのように見えたので1pxあけることにしました。この辺は好みだと思うので色々試してみてください。

上記コードでは.l-headerBottom .containerのマージンを全て変更してしまうので他に影響がないかしっかり確認してください。

※カスタマイズは自己責任でお願いします。

以上です。

カルーセル 隙間をなくす THOR




THE THOR カルーセルスライダーの基本的な設定

おまけで基本設定の場所を紹介。

外観 → カスタマイズ → TOPページ設定[THE] → カルーセルスライダー設定

出来ることは設定画面に親切に書いてあるので問題ないでしょう。

ほとんど邪魔にならずコンテンツ紹介をしつつ画面に動きが出て便利なカルーセルスライダー。使ったことのない人は使ってみてください。

ピックアップ記事やメインビジュアルなどとの棲み分けが難しいですね。

Wordpressのオリジナルテーマを1日で作る本

Wordpressのオリジナルテーマを1日で作る本

淵上喜弘
発売日: 2018/11/21
Amazonの情報を掲載しています

あとがき

THE THORの余白はPCとスマホで同じ場合が多くあるように思います。THE THOR のデザインが全体的にスッキリしていないのはそのせいかもしれません。好みの問題ですけどね。

今後カルーセルをカスタマイズする場合はこちらに追記をしていきたいと思います。