WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマSKIN:コースカテゴリー名が複数行になる際のレイアウトを調整する

この記事は2018年5月10日に更新されたもので、内容が古い可能性がありますのでご注意ください。

Q.スマホ閲覧時、コースカテゴリー名が長いものと短いものが混在するとレイアウト崩れが起きます。対策を教えてください。

コースカテゴリー名が長いもの(複数行にまたがるもの)と短いものが混在する場面において、スマホ閲覧時のアーカイブ画面内カテゴリー表の部分で一部の枠線が切れるという事例がありました。
下記のようにカスタムCSSで個別に調整いただければと思います。

A.カスタムCSSに下記コードを追加することでご対応ください。

下記いずれかのカスタマイズをお試しください。

ダッシュボード左メニュー[外観]→[TCDテーマオプション]→[基本設定]タブ内にあるカスタムCSSに、下記のようなコードを追加します。

1.高さを指定し、余分を非表示に設定する

.course_categories li a{ overflow:hidden; height:15px; }

2.長いコースカテゴリー名(複数行)を省略して表示する設定

.course_categories li a{ overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。