商品ページ中の見出し文字の装飾方法（スタイル）

Question

アンジェさんの商品ページのように、見出しのテキストを装飾したいのですが、方法を教えてください。ちなみに弊社の契約プランは「スタンダードプラン」です。

具体的に実現したいのは次の２つです。
合わせて添付画像をご覧ください。
（１）見出しの文字サイズと行間、および本文との境界線
（２）見出しのベースライン付近にアンダーライン（薄いグレー）を引く

添付画像は次のページのキャプチャです。
https://item.rakuten.co.jp/angers/157411/

該当付近のソースコードを見る限り、（１）も（２）も、タグで囲んでいるだけです。

よろしくお願いします。###HR######IMG052d30d864941821f8c9ac26bb78913d9.pngIMG0### ###IMG1372c39195a75c34d00c0fb56f4445175.pngIMG1###

Accepted Answer

ECマスターズの伊藤です。

> 少し説明不足でした。
> スタイルを適用したいのはスマートフォンページです。

スマートフォンページですが、
残念ながら、現在は対応いただくことができません。

対象の店舗さまは、タグが禁止される前に
設定頂いたCSSが残っており、
現在もまだ使用できている状態となっております。

代替案となりますが、

・タイトル部分を画像でご用意いただく

・本来の使用法とは異なりますが、どうしても
タグで線を引きたいようであれば、tableを
利用する




といった方法が考えられます。

（２）については、残念ながら、画像以外の方法では
ご対応いただくことができません。

Answer

ECマスターズの伊藤です。

> （１）見出しの文字サイズと行間、および本文との境界線
> （２）見出しのベースライン付近にアンダーライン（薄いグレー）を引く

（１）（２）とも、下記に記載されている

    〜

を、商品説明文等、商品ページのHTMLが
記載できる箇所に登録してください。

（１）の箇所
黒ボーダー
（２）の箇所
グレーボーダー

としていただくことで、ご希望のスタイルを
適用いただくことができますので、お試しください。


＝＝＝＝＝以下、商品説明文等に登録してください。

.bottomborder{
font-size: 2.0em;
border-bottom: 1px solid #333;
background: none !important;
margin: 10px 0;
display: block;
line-height: 1.7em;
text-align: center;
color: #333;
font-weight: bold;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
padding: 10px 20px;
}
.grayborder {
font-size: 20px;
padding: 25px 0 5px 0px;
display: inline-block;
text-align: left;
background: linear-gradient(transparent 80%,#eee 0%);
line-height: 1.3em;
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-weight: bold;
}

Answer

ありがとうございます。

少し説明不足でした。
スタイルを適用したいのはスマートフォンページです。

宜しくお願い致します。