カテゴリーページのパンくずリストが画像にしたい

Question

カテゴリーページにてリストを画像にすることはできますか？
（PC,SPともに）

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> できたらタイトルの下に説明文をいれたいのですが、
> それはどうやって入れ込むといいでしょうか？

まず、該当カテゴリのカテゴリ説明文に下記styleタグをご記載ください。

= この下の行から ====================

/* 下位カテゴリに説明文掲載 */
a.subcategory_list:after {
display: block;
border-top: 1px dotted #bdbdbd;
}

/* 各カテゴリの説明文 */

= この上の行まで ====================

次に、/* 各カテゴリの説明文 */ と  の間に、
各下位カテゴリに掲載する説明文の指定を、
１つずつ追加していただきますようお願いします。
形式は下記の通りです。

= この下の行から ====================
tr:nth-child(縦位置) > td[width="33%"]:nth-child(横位置) a.subcategory_list:after {
content: "説明文";
}
= この上の行まで ====================

説明文は実際の文章を、
縦位置は上から何番目かをそのままの数字で、
横位置は左から何番目かを２倍にした数字で、
それぞれご指定ください。

例：いただいた画像の「キッチングッズ」の位置に説明文を指定する場合
縦位置は上から1番目を示す「1」、横位置は左から2番目を2倍にして「4」と指定します。
tr:nth-child(1) > td[width="33%"]:nth-child(4) a.subcategory_list:before {
content: "おしゃれで便利なキッチングッズで楽しくおいしく♪";
}

ご覧いただいたとおり、画像とほぼ同様の方法となります。
記述内容をまとめて、わかりやすくしていただくことも可能です。

Answer

ECマスターズの田中です。

PC用のカテゴリーページですと、
どの部分の変更をご希望でしょうか。
https://ec-masters.gyazo.com/5a8887f6ef10a3e3d663843f4510b257
上記赤枠もしくは青枠、もしくは説明文内に新しく設置をご希望でしょうか。

また、どのような見せ方をご希望でしょうか。
参考になるショップがございましたら、
URLやスクリーンショット（写真）など
お知らせいただきますようお願いします。

なお、SP用カテゴリーページでは、
既存の要素の見た目を変更することはできないため、
カテゴリ説明文の中に新しくご設置いただく必要がございます。

Answer

楽天カテゴリーリスト　カスタマイズの検索で出てきた（方法は明記されてない）
のがすごい理想的なのですが
他社さんの実例が見つけられませんでした。。

添付の画像のような実装は可能なのでしょうか?

よろしくお願いいたします。###HR######IMG01a311cd1bfdb47f7305442341f9409cf.jpegIMG0######BR###

Answer

ECマスターズの田中です。

いただいた画像を掲載しているページを
確認いたしました。
こちらは、先の返信の通り、PC用限定の方法であることを
予めお含みおきください。

パンくずリスト（画像の「カテゴリトップ > 雑貨カテゴリ」の部分）は
下記styleタグをご記載いただくことで実装できます。

= この下の行から ====================

/* パンくずリスト */
td.breadcrumbs_list{
	padding:16px 10px;
	background:#eee;
	display:block;
	width:710px;
	border-bottom:2px solid #aaa;
}

= この上の行まで ====================

記載先は、カテゴリページ内で読み込まれる項目であれば結構です。
たとえば、全カテゴリページ・商品ページ共通で使う場合は、
ヘッダー・フッター・レフトナビのヘッダーコンテンツの先頭もしくは末尾、
目的のカテゴリページのみで使う場合は、該当カテゴリのカテゴリ説明文上の先頭または末尾、
といった形になります。
（上記はあくまでも例のため、ページに読み込まれる他の項目でも結構です）

下位カテゴリリストに画像を掲載する場合は、
まず、該当カテゴリのカテゴリ説明文に下記styleタグをご記載ください。

= この下の行から ====================

/* 下位カテゴリに画像掲載 */
span.subcategory_list { display: none; }
a.subcategory_list:before {
    content:"\0020";
    display:block;
    width: 100%;
    height: 画像の高さpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
}

/* 各カテゴリの画像 */

= この上の行まで ====================

「画像の高さ」は、任意の半角数字に置き換えてください（100 など）。

次に、/* 各カテゴリの画像 */ と  の間に、
各下位カテゴリにどの画像を掲載するかの指定を、
１つずつ追加していただきますようお願いします。
形式は下記の通りです。

= この下の行から ====================
tr:nth-child(縦位置) > td[width="33%"]:nth-child(横位置) a.subcategory_list:before {
    background-image: url(画像URL);
}
= この上の行まで ====================

画像URLは実際のURLを、
縦位置は上から何番目かをそのままの数字で、
横位置は左から何番目かを２倍にした数字で、
それぞれご指定ください。

例：いただいた画像の「キッチングッズ」の位置に画像を指定する場合
縦位置は上から1番目を示す「1」、横位置は左から2番目を2倍にして「4」と指定します。
tr:nth-child(1) > td[width="33%"]:nth-child(4) a.subcategory_list:before {
    background-image: url(画像URL);
}

下線や文字などは追加の設定が必要となります。
まずは画像の設置をお試しいただきますようお願いします。

Answer

https://item.rakuten.co.jp/biosupli/c/0000000103/

教えていただいたように設定してみたのですが、
画像のサイズで苦戦しています。

作成する際にW×Hを
どのサイズで作るとうまくいきますでしょうか？

Answer

ECマスターズの田中です。

うまくいくかどうかは、
BIOさんのご希望に沿うかどうかで決まります。

画像の横幅は100％としておりますが、
ページ全体が固定幅のレイアウトのため、
実際の幅は314px前後で固定となります。
（環境によって差が出る場合がございます）

いただいたページで使われている画像は
横幅400px・高さ233pxで作成されておりました。

これを横幅314pxに合わせて、縦横比を変えずに縮小すると
横幅314px・高さ182pxとなります。

そのため、私よりご案内いたしましたスタイルシートの
「画像の高さ」を、182にご設定いただくことで
画像全体を表示させることができます。

なお、「画像の高さ」直下の行をBIOさんにて
background-size: contain
と書き換えていただいておりますが、
末尾の;がないため、書式エラーが発生しております。
background-size: contain;
のように「;」をご記載いただきますようお願いします。

まずは上記のようにご対応いただくことで
画像全体が表示されている様子を
ご確認いただきますようお願いします。

その上で画像サイズをご変更いただく際は、
横幅314pxで作成しなおしていただくと、
そのままの見た目で設置できますので
わかりやすくておすすめです。

Answer

ご丁寧にありがとうございました。

https://item.rakuten.co.jp/biosupli/c/0000000103/

おかげ様でうまくできたのですが、
できたらタイトルの下に説明文をいれたいのですが、
それはどうやって入れ込むといいでしょうか？