本サイトにはプロモーションが含まれています

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

Wordpressカスタマイズの覚え書き

WordPressプラグイン “Shortcodes Ultimate“でタブコンテンツを作成した際、スマホ表示にすると水平に並べたいタブが縦になってしまいます。これをCSSカスタマイズで解決します。コピペOK.

目次

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

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

こんなことです。

[ Shortcodes Ultimate ]タブコンテンツのスマホ表示カスタマイズ方法
パソコンだと水平にタブが並ぶのに
[ Shortcodes Ultimate ]タブコンテンツのスマホ表示カスタマイズ方法
スマホだと縦になる。

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

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

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

しかし、このプラグインで実装できる装飾機能は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]

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

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

[ Shortcodes Ultimate ]タブコンテンツのスマホ表示カスタマイズ方法
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次