THE THOR ザ・トール カルーセルのカスタマイズ

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

 

カルーセルはTHE THORの機能の中でも良く使われている機能です。カルーセルはトップページに表示される記事のスライドショーのこと。

 

人気のカルーセルですがコンテンツの表示のされかたに不満があります。何もない空間からいきなり現れているように見えるのは自分だけかな？

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

 

※PC表示で横幅を大きくすると表示が乱れたので修正しました。（一定の幅以上は大きくなりません）

※ピックアップ3に影響が出るのを改善しました。

 

カルーセルのカスタマイズを【追記】しました

当サイトにて採用しているカルーセルの仕様についてご質問をいただきましたのでカスタマイズの内容を追記しました。追記内容は以下の通りです。

 

• カルーセルの上下の隙間を調整
• カルーセルに表示されるタイトルの消去
• カルーセルの矢印を消去
• ピックアップ3の幅は変更しない

 

※元記事ではカルーセルの左右に1pxの隙間を入れていますが追記では隙間を無しにしています。

※追記のCSSは元記事と重複している部分があります。必要な部分を適時ご利用ください。

 

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

 

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

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

 

 

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

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

 

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

 

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

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

 

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

 

カスタマイズ後は以下の通りです。

カルーセル の隙間を調整する【追記】

 

冒頭に紹介したとおり、質問をいただいたカルーセルの隙間を調整するcssを追記いたします。

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

/* カルーセルタイトル消去 */
.heading.heading-carousel{
	display:none;
}

/* カルーセルナビ消去 */
.swiper-carousel .swiper-pagination-bullets{
	display: none;
}

 

※元記事ではカルーセルの左右に1pxの隙間を入れていますが現在は隙間を無しにしています。

※上記CSSは元記事と重複している部分があります。

 

上下の隙間はmargin-topとpadding-topで調整しています。タイトルやナビについては必要に応じて適用してください。

 

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

 

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

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

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

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

 

[wpap service=”with” type=”detail” id=”B07KS4RXG8″ title=”Wordpressのオリジナルテーマを1日で作る本” search=”Wordpress css html”]

 

あとがき

 

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