【コピペでOK！】楽天の商品名とキャッチコピーをカスタマイズする方法【テンプレデザイン５選】

みなさん、こんにちわ！なまけうめ（@namakeume）です。

この記事では、

という人向けに簡単に、お話しさせて頂ければと思います。

商品情報を伝える「商品名」と「キャッチコピー」

ここです↓

楽天の初期設定のままだと上記のような表示になります。

ここを自分のショップらしくカスタマイズすればより統一感のある店構えになり、信頼性のUPに繋がります。

さっそく何種類かデザインをご紹介します！

テンプレデザイン５選

それでは早速、デザインをご紹介します♪

下記に記載のcssを楽天RMSのヘッダーに直接コピペするか、cssデータをGOLDにアップロードしてヘッダーに記載してください。

※cssデータにしてGOLDへアップロードする場合は「<style>、</style>」は入力しない様にしてくださいね♪

太点線で境界線を分ける

太めの点線をキャッチコピーの下に設定し、商品名とキャッチコピーが分かりやすくなりました。
商品名は色を付けてより目に入るようにしてみました♪

cssはこちら

<style>
span.catch_copy {/*キャッチコピー*/
    line-height: 1.3;/*行の高さ調整*/
    border-bottom:2px dashed #2B33A3;/*点線*/
    padding-bottom:5px; /*余白調整*/
    display:block;/*ブロックの定義*/
}
span.item_name {/*商品名*/
    color: #2B33A3;/*文字色*/
    display: block;/*ブロックの定義*/
    line-height: 1.5;/*行の高さ調整*/
    padding:10px 0;/*余白調整*/
}    
</style>

赤線を引いてメリハリを

キャッチコピーに赤の二重線を引き、商品名とのメリハリを付けました。
お互いを邪魔せずに主張しているのでどちらも目に入りやすいデザインですね♪

cssはこちら

<style>
span.catch_copy {/*キャッチコピー*/
    display:block;/*ブロックの定義*/
    line-height:1.3;/*行の高さ調整*/
    padding-bottom:5px;/*余白調整*/
    border-bottom: double #f6c2d5;/*二重線*/
    margin-bottom:17px;/*余白調整*/
    font-size: 14px;/*文字サイズ*/
}
span.item_name {/*商品名*/
    display: block;/*ブロックの定義*/
    line-height:1.4;/*行の高さ調整*/
}
</style>

点線で分かりやすくポップに

文字の下に点線を付けてポップな雰囲気に♪
キャッチコピーにも商品名にも点線が入っているので分かりやすく目に入ってきやすくなります。

cssはこちら

<style>
span.catch_copy {/*キャッチコピー*/
    border-bottom: dotted 1px #cccccc;/*点線*/
    display: block;/*ブロックの定義*/
    padding-bottom: 0.5em;/*余白調整*/
    margin-bottom: 0.8em;/*余白調整*/
    line-height: 1.5;/*行間*/
    color: #8a8a8a;/*文字色*/
    font-size: 12px;/*文字サイズ*/
}
span.item_name {/*商品名*/
    color: #666666;/*文字色*/
    display: block;/*ブロックの定義*/
    border-bottom: 2px dotted #ddd;/*点線*/
    padding-bottom: 8px;/*余白調整*/
}
</style>

枠線で商品名に注目を集める

商品名を枠線で囲み背景の色も変えています。より他と違うデザインにしました。
背景色を変えるだけでも印象が変わります。

枠線は、太めの実線や二重線もお勧めですね♪

cssはこちら

<style>
span.catch_copy { /*キャッチコピー*/
    font-size: 14px;/*文字サイズ*/
    line-height: 2;/*行の高さ調整*/
    color: #F36;/*文字色*/
    font-weight: bold;/*太字*/
}
span.item_name {/*商品名*/
	font-size: 16px;/*文字サイズ*/
	display: block;/*ブロックの定義*/
	width: 350px;/*横幅*/
	border: 1px dashed #686868;/*枠線*/
	color: #483027;/*文字色*/
	padding: 10px;/*余白調整*/
	background: #F7F7F7;/*背景色*/
}
</style>

左に太線でおしゃれにラベル風

左に太めの実線を入れることで見出し感を強め、ラベル風なデザインに♪
よりオリジナリティが出て他のショップよりセンスが良く信頼性にもつながりますね！

cssはこちら

<style>
span.catch_copy {/*キャッチコピー*/
    font-size:14px;/*文字サイズ*/
    color:#b7b3b3;/*文字色*/
    display: block;/*ブロックの定義*/
    margin:0;/*余白調整*/
    padding: 4px 0px 15px 0px;/*余白調整*/
}        
.item_name {/*商品名*/
    width:380px;/*横幅*/
    line-height:120%;/*行の高さ調整*/
    letter-spacing:1.5px;/*行間*/
    border-left: solid 8px #b5b6b4;/*左太線*/
    border-bottom: dotted 1px #999;/*下線*/
    padding: 5px 0px 5px 10px ;/*余白の調整*/
    font-size:20px;/*文字サイズ*/
    margin:0;/*余白調整*/
    display: block;/*ブロックの定義*/
}
</style>

まとめ

色んなショップさんを見ていますが、ここが細やかな設定をされているショップさんは信頼性があるなと私は思います。（個人的な意見です。笑）


ちなみに、キャッチコピーか商品名に「display: block;」を入れてあげれば１つのブロックとして認識されるので結果的に改行をしてくれます。

それだけで商品名とキャチコピーが分割されるので分かりやすくなります。

タグとかよく分かんないよ～って方はこれだけは設定する事をお勧めしますよ～！