THE THOR ウィジェット [THE] タブコンテンツ をレスポンシブにカスタマイズ

THE THOR の足りない部分に「ちょい足し」するカスタマイズ

『ウィジェット [THE] タブコンテンツ をレスポンシブ』にする方法

 

[widget id=”fit_tabcontentsitem_class-18″]

タブコンテンツは最大で5つのタブを表示することができます。PC表示では問題ありません。ところがスマホ表示になると各タブタイトルが小さくなりすぎて非常に見づらくなります。

 

タブを2列表示に変更してスマホでも見やすいタブコンテンツにカスタマイズしましょう。

 

THE THOR ウィジェット [THE] タブコンテンツ をレスポンシブにカスタマイズ

 

今回もコピペで簡単にカスタマイズします。「追加CSS」に以下のコードをコピペすれば完成です。

コピペするコード

/* ウィジェット[THE]タブコンテンツをレスポンシブに */
@media only screen and (max-width: 768px){
	.widgetTab__menu{
	flex-wrap:wrap;
	}
	.widgetTab__item{
	max-width:50%;
	min-width:33.33%;
	}
}

 

はい、完成です。

 

カスタマイズの応用

すこーしだけ解説しておくので自由にカスタマイズしてみてください。

注目はmax-widthの部分とmin-width

この部分でタブの横幅を決めています。サンプルでは最大50％、最小33.33％の横幅になるように設定。

50％ならタブは2個並び、33.33％なら3個並びます。これで隙間なくタブを並べることができます。

またmax-widthとmin-widthを同じ数値にすると強制的にサイズを固定することができます。タブサイズが違うのが気に入らない場合は、両方の数値を33.33％にすれば常に三分の一サイズのタブが並ぶことになります。ただし5個なので最後の1個分のスペースは空欄となります。

色々試してみてください。

WordPressをCSSでカスタマイズするのは通常のサイト製作と比較して非常にハードルが低く、書籍などで少し学ぶと誰でも楽しく大きなカスタマイズができます。THE THOR のカスタマイズから楽しく手軽にCSSを学んでみてはいかがでしょうか？

[wpap service=”with” type=”detail” id=”B08S2T8HZV” title=”ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座”]

 

各タブ数のサンプル

上記に示したタブ5個表示以外のサンプルを掲載します。

参考にしてください。

 

あとがき

 

この記事では通常記事中に表示するこのできないウィジェット[THE]タブコンテンツを表示しています。これには「Widget Shortcode」というプラグインを使用しています。「Widget Shortcode」を使えば THE THOR の豊富なウィジェットがショートコード化され記事中にも使えるようになるのでオススメです。

ショートコード化すればCLASSを付与することもできるので1箇所のウィジェットのみにCSSを適用させることもできるようになり便利！

※Widget Shortcodeは現在のWordPressのバージョンではテストされていません。使用する場合は自己責任にてお願いします。