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

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

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; }
The following two tabs change content below.

タケ

マイナーな海外地方都市への旅行が好きです。 リトアニア名物料理「ツェペリナイ」は絶品でした。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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