スマホ_画像の下に手打ち文字を入れる

Question

お世話になります。
楽天でのスマホページ編集にて、

画像の下に文字を手打ちで入れたりしたいのですが、
横2枚画像を並べた時のソースを教えてほしいです。

Accepted Answer

ECマスターズの伊藤です。

> AとBの画像を横並びにして、それぞれにテキストを入れたい場合は空白を開けるという方法しかないのでしょうか？

失礼致しました。下記のようなレイアウトをされたい
ということでよろしかったでしょうか。
ーーーーーーーーーーーーーーーーーーーー
■■■■■■■■■■　　　■■■■■■■■■■
■■■画像A■■■　　　■■■画像B■■■
■■■■■■■■■■　　　■■■■■■■■■■
画像Aコメント　　　画像Bコメント
ーーーーーーーーーーーーーーーーーーーー

こちらの場合は、TABLEタグにて作成していただくことができます。
＝＝＝＝＝＝＝＝＝＝

  
    
    
  
  
    画像Aのテキスト
    画像Bのテキスト
  

＝＝＝＝＝＝＝＝＝＝

もしご希望どおりのレイアウトにならない場合は、
お手数ですが、設置したURLと、ご希望のレイアウトを
ご連絡くださいますようお願いいたします。

Answer

ECマスターズの伊藤です。

> 画像の下に文字を手打ちで入れたりしたいのですが、 
> 横2枚画像を並べた時のソースを教えてほしいです。 

登録箇所が不明でしたので、商品詳細ページの、スマートフォン用商品説明文を
想定して作成いたしました。
登録箇所が異なるなどでうまくいかない場合は、
お手数ですが、ご返信にてご連絡くださいませ。
＝＝＝＝＝＝＝＝＝＝＝＝＝




テキストテキストテキスト


#itemDescription .two_column{
font-size: 0px;
}
#itemDescription .two_column img{
width: 50%!important;
display:inline-block!important;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝

Answer

ありがとうございます！
今までスマホはしたことがなかったので作ったことなかったです！

試してみます！

Answer

ECマスターズの伊藤です。

スマホのどこに表示させるかによって、
〜の内容が異なる場合がございますので
うまく表示させられなかった際には、ご相談くださいませ。

Answer

AとBの画像を横並びにして、それぞれにテキストを入れたい場合は空白を開けるという方法しかないのでしょうか？

Answer

ありがとうございます！ぜひやってみます！

Answer

お世話になります。上記の件について設定してみました。

https://item.rakuten.co.jp/★/c/0000000171/

ただ、画像（210px×210px）同士がくっついてしまって、もう少し隙間を作りたいのですが、どうすればいいですか？逆に、tableにつけてる指示を消してしまうと右側にくる画像が少し切れている気がします。
それとくっついている状態でも若干右側の画像が切れている気もします。。。

純粋に
https://www.rakuten.ne.jp/gold/e-zakkamania/
イーザッカマニアさんのスマホの画面のような隙間が欲しいです。

Answer

ECマスターズの伊藤です。

> ただ、画像（210px×210px）同士がくっついてしまって、もう少し隙間を作りたいのですが、どうすればいいですか？逆に、tableにつけてる指示を消してしまうと右側にくる画像が少し切れている気がします。
> それとくっついている状態でも若干右側の画像が切れている気もします。。。

現在、記述していただいている箇所を、
下記のとおり修正、追加をお願いいたします。

＝＝＝＝＝修正前＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝
class="item_list"
=""
の追加

＝＝＝＝＝修正前＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝
↓↓
＝＝＝＝＝修正後＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝
=""
の追加

＝＝＝＝＝追加＝＝＝＝＝

table.item_list td{
padding:0px 5px;
}
table.item_list img{
    width:100%;
}

＝＝＝＝＝＝＝＝＝＝＝＝
上記のpaddingの数字を、ご希望の余白に合わせて修正してください。
padding:【上下の余白】px 【左右の余白】px;


なお、上記の方法は、楽天RSMのバグを利用した方法となっております。
仕様変更となった際に、ご利用いただけなくなる可能性がございますので
ご了承の上、ご利用くださいますよう、お願いいたします。


また、現在、
＝＝＝＝＝＝＝＝＝＝＝＝






画像Aのテキスト
画像Bのテキスト









画像Cのテキスト
画像Dのテキスト


＝＝＝＝＝＝＝＝＝＝＝＝

といった形で記述していただいておりますが

＝＝＝＝＝＝＝＝＝＝＝＝






画像Aのテキスト
画像Bのテキスト







画像Cのテキスト
画像Dのテキスト


＝＝＝＝＝＝＝＝＝＝＝＝

のように、途中の
を削除して頂いたほうが、管理が楽になりますので
修正をご検討くださいませ。
（修正いただかなくても記述的には問題ございません）

Answer

ありがとうございます。

横並びではなく、なぜか全部1列になってしまったのと、

＝＝＝＝＝追加＝＝＝＝＝

table.item_list td{
padding:0px 5px;
}
table.item_list img{
width:100%;
}

＝＝＝＝＝＝＝＝＝＝＝＝

教えて頂いたこちらははねられてしまいます。

Answer

ECマスターズの伊藤です。

> 横並びではなく、なぜか全部1列になってしまったのと、

大変失礼いたしました。
ご案内しておりました内容が一部間違っておりました。

Answer

ありがとうございます。
上記修正しました。

＞スマートフォン用商品説明文に登録頂いておりますでしょうか。
＞貼り付ける場所によっては、エラーとなってしまう可能性が
＞ございますので、
＞スマートフォン用商品説明文の一番下に追加していただき、
＞ご登録のご確認をいただけますでしょうか。

現在カテゴリで作成しているのですが、やっぱりエラーになります。

Answer

https://www.rakuten.ne.jp/gold/e-zakkamania/

画像に文字も入れての枠線、文字も中央ぞろえでこちらの最初の方と同じようにしたいのですが、

現状画像横同士、縦も隙間がなくて設定方法はありますか？

Answer

ECマスターズの伊藤です。

> 現在カテゴリで作成しているのですが、やっぱりエラーになります。

登録頂いているのは、「スマートフォン用カテゴリ説明文」になりますでしょうか。
こちらは、楽天のバグを利用することができなため、
~を

RMSトップ ＞ 2 デザイン設定 ＞ スマートフォン デザイン設定 にある カテゴリページ共通パーツ設定

に登録していただきますよう、お願いいたします。


> 画像に文字も入れての枠線、文字も中央ぞろえでこちらの最初の方と同じようにしたいのですが、
> 
> 現状画像横同士、縦も隙間がなくて設定方法はありますか？

画像同士の隙間は、~を
ご登録で、表示していただけます。

枠線をつけるということであれば、
ご案内しております方法では、対応することができないため
下記の通り、修正をお願いいたします。

＝＝＝＝＝＝＝＝＝＝





画像Aのテキスト





画像Bのテキスト







画像Cのテキスト





画像Dのテキスト




＝＝＝＝＝＝＝＝＝＝

↓↓カテゴリページ共通パーツ設定に登録してください。
＝＝＝＝＝＝＝＝＝＝

table.item_list td{
width:50%;
padding:0px 5px 5px; /* 余白:上 左右 下 */
text-align:center;
vertical-align: top;
}
table.item_list p{
border:1px solid #F0F0F0; /* 線:太さ 実線 色 */
}
table.item_list img{
width:100%;
}

＝＝＝＝＝＝＝＝＝＝

Answer

ありがとうございます！出来ました！
あとひとつだけ、画像と文字の間に隙間をつくりたいです。

Answer

現状文字部分が結構窮屈に見えるので、同じフォントサイズくらいの隙間があればありがたいです。

Answer

ECマスターズの伊藤です。

> ありがとうございます！出来ました！

無事、デザイン部分の反映ができたようで、よかったです。


> あとひとつだけ、画像と文字の間に隙間をつくりたいです。

画像の下に隙間をつくるには
table.item_list img
に
margin:0px 0px 12px;
（画像の余白:上 左右 下）
を追加していただきますと、余白をつけることができます。
数字は、ご希望のレイアウトに合わせて、変更をお願いします。

＝＝＝＝＝＝＝＝
table.item_list img{
width:100%;
margin:0px 0px 12px;
}
＝＝＝＝＝＝＝＝


テキスト（値段）の下にも余白を追加する場合は
table.item_list p
に
padding:0px 0px 12px;
（ボーダー内の余白:上 左右 下）
を追加してください。

＝＝＝＝＝＝＝＝
table.item_list p{
border:1px solid #6B615E; /* 線:太さ 実線 色 */
padding:0px 0px 12px;
}
＝＝＝＝＝＝＝＝

Answer

ありがとうございます！理想通りになりました。
感謝です。

Answer

何か触ってたら急に枠線が出なくなってしましました。原因見て頂く事できますか？

Answer

ECマスターズの伊藤です。

> 何か触ってたら急に枠線が出なくなってしましました。原因見て頂く事できますか？

画像とテキストを挟んでいるが削除されているようですので
ご確認くださいませ。

 ← ここ

画像Aのテキスト
 ← ここ

Answer

ありがとうございます！最初に教えて頂いてたものに置き換えてしまってました。。。修正出来ました！お手数お掛けしました。