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

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

 

 

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

 

 

 

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

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

 

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

 

 

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

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

 

  • カルーセルの上下の隙間を調整
  • カルーセルに表示されるタイトルの消去
  • カルーセルの矢印を消去

 

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

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

 

 




 

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

カルーセル カスタマイズ 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




 

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

 

冒頭に紹介したとおり、質問をいただいたカルーセルの隙間を調整する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-toppadding-topで調整しています。タイトルやナビについては必要に応じて適用してください。

 

 

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

 

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

 

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

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

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

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

 

 

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

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

淵上喜弘
451円(01/21 10:40時点)
発売日: 2018/11/21
Amazonの情報を掲載しています

 

あとがき

 

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