会員サイトでカテゴリ名が長い場合にメニューで文字が重なってしまいます。どうしたらよいでしょう?

症状

表題の件ですが、画像のように左メニューの文字が折り返されて崩れて表示されてしまいます。

会員サイトのレイアウトが「テーマ1(クラシック)」の場合

テーマ1_長いカテゴリ名

会員サイトのレイアウトが「テーマ2(シルバー)」の場合

テーマ2_長いカテゴリ名

解決方法

このような場合、CSSの調整でご対応いただけます。

手順としては、
「シナリオ管理メニュー」→「会員サイト管理」画面から、
「custom.css」を編集して、下記コードを追加することで反映されます。

ページ全体の幅を広げる方法

会員サイトのレイアウトが「テーマ1(クラシック)」の場合

/* 上のヘッダー部分 */
h1 {
width: 1025px; /* 25px分余白 */
}

/* 中央コンテナ(左カラム+右カラム) */
#container {
width: 1050px;
}

/* 左カラム */
#header {
width: 300px;
}

テーマ1_長いカテゴリ名_調整後1
調整後は上の画像のように崩れが解消されて表示されます。

会員サイトのレイアウトが「テーマ2(シルバー)」の場合

/* 上のヘッダー部分 */
#header_top {
width: 1050px;
background: none; /* 画像が固定幅のため消す */
/* background: url(images/backgroud_image.png) repeat; */
}

/* 中央コンテナ(左カラム+右カラム) */
#container {
width: 1050px;
background: none; /* 画像が固定幅のため消す */
/* background: url(images/backgroud_image.png) repeat; */
}

/* 左カラム */
#header {
width: 300px;
}

全体の幅はそのままで右カラムを縮小して左カラムを広げる方法

会員サイトのレイアウトが「テーマ1(クラシック)」の場合

/* 左カラム */
#header {
width: 300px;
}

/* 右カラム */
#content2 {
width: 650px;
}

テーマ1_長いカテゴリ名_調整後2
調整後は上の画像のように崩れが解消されて表示されます。

会員サイトのレイアウトが「テーマ2(シルバー)」の場合

/* 左カラム */
#header {
width: 300px;
}

/* 右カラム */
#content2 {
width: 630px; /* 20px分余白 */
}

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

サブコンテンツ

このページの先頭へ