[ Shortcodes Ultimate ]タブコンテンツのスマホ表示カスタマイズ方法【簡単CSS】

プラグイン Shortcodes Ultimate のタブコンテンツでモバイル表示のタブを水平横並びにするCSS

WordPressプラグイン “Shortcodes Ultimate“でタブコンテンツを作成すると、水平に設定していてもスマホ表示でタブが縦になってしまいます。

こんなことです。

せっかくなので、スマホ表示の時にも横に水平にタブを並べたい。

有料のアドオン購入で解決するらしいですが、ここでは無料のまま解決できるCSSをシェアします。

“Shortcodes Ultimate“の使い方自体はここでは省きます。入れるだけで50種類余りの記事装飾機能を実装できるプラグインなので、装飾機能の無いテーマをお使いの方にとっては重宝なプラグインだと思います。

WordPress.org 日本語

WP Shortcodes Plugin — Shortcodes Ultimate ビジュアルコンポーネントの包括的コレクション

しかし、このプラグインで実装できる装飾機能はSWELLならばほぼ付いているので……。(タブコンテンツも何の苦労もなく作れてしまいます)

装飾を自由自在に使いたい方はSWELLをお薦めいたします。

SWELLの特徴を見てみる

コピペできるShortcodes Ultimateのタブコンテンツを横に並べるCSS

以下を「外観」→「カスタマイズ」→「追加CSS」に記入します。

(ロリポップサーバーなどでエラーが出る場合は「/* shortcodes ultimateモバイルタブ水平 */」というコメントを外してください)

/* shortcodes ultimateモバイルタブ水平 */
@media (min-width: 280px) {
.su-tabs-nav  {
    box-sizing: border-box!important;
    display: flex;
	overflow: scroll;
}
}

もう少し上でもいいかなとは思うのですが、280px幅のスマホまでは水平タブの形になるように設定しています。

“overflow: scroll” はタブ2つならば必要ないと思うのですが、3つ以上になるとボックスからはみ出してテンプレートを壊すので、メインカラムからはみ出る部分はスクロールするように設定しています。

以下は一応。Shortcodes Ultimate タブコンテンツのショートコードです。(2タブ)

[su_tabs style="default" active="1" vertical="no" mobile="stack" anchor_in_url="no" class=""]
  [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]コンテンツ[/su_tab]
  [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]コンテンツ[/su_tab]
[/su_tabs]

これでスマホサイズでもタブが水平に並びます

テーマに関わらず使えるはずです。お試しください。