こんにちは。Saitokouです。
WordPressテーマSOLARISを使用してWebサイトを制作していたところ、タブコンテンツを４つ入力したときに、スマホ表示で一部のタブが見えなくなってしまう現象に遭遇しました。
これでは、閲覧するデバイスによって違いが出てしまうので、この表示を修正したいと思います！
ちなみにこのタブコンテンツのタブの数はいくらでも追加できる仕様になっているため、量によっては今回のようにHTML/CSSでの対応が必要になります。
カスタムCSS記載場所
管理画面 ＞ TCDテーマ ＞ 基本設定 ＞ カスタムCSS
WordPressテーマ標準のカスタマイズ機能を使うこともできますが、今回は上記の箇所を使用します。保守的な観点からいうと、サイト全体に適用される追加CSSを登録する箇所はどちらかに統一しておいたほうが良いです。
記述CSS
以下のCSSを記載します。コピペOKです。
※TCDのバージョンアップデートにより、効かなくなる可能性があります。
@media screen and (max-width: 750px) {
.tab_content_top .tab .item {
line-height: 15px;
width: 80px;
padding: 5px;
}
}
上記のコード追加により、4つ目のタブが表示されます。
パッと見た間隔、スマホの場合はタブ4つが限界になりそうです。5つ以上タブを設置するなら、タブを2行にして表示するなどの工夫が必要になりそうです。
まとめ
今回は追加CSSによって、スマホ表示時に消えてしまっていた4つ目のタブを表示する方法を紹介しました！コードも所定の箇所にコピペするだけなので、表示に困ったらぜひ実施してみてください！
<PR> WordPressでのホームページ作成に苦戦していませんか？
当ブログの筆者はWordPressを利用したWebサイト制作をご提供しています。
・WordPressの操作が分からないので、メッセージや動画で教えてほしい！
・なかなか思うようなデザインにならないので、設定のコツを知りたい！
・エラーが発生してしまったので、解決方法を知りたい！
このような皆さんのご希望を、ぜひ一度SaitoKouにお聞かせください。
皆様のWebサイトに関するモヤモヤ解消をお手伝いします！！
