【HTML のこと１】はてなブログで「楽天で購入」ボタンの位置修正

【HTMLのこと 1】

 ******************************

楽天アフィリエイトのリンクを張り付けるときに、

オリジナルのサイズでは無く・・・

【送料無料】 アームチェア リラックスチェア 北欧風 『koko ココ』 スレートブルー バーチ プライウッド 椅子 曲げ木 曲木 灰青 パーソナルチェア 価格：4044円（税込、送料無料) (2020/7/12時点) 楽天で購入

こんな風にサイズ調整したい時があります。

でも、ドラッグアンドドロップだけでは、外枠はサイズが変わらないし、

「楽天で購入」ボタンが「楽天で」となってしまいます。

【送料無料】 アームチェア リラックスチェア 北欧風 『koko ココ』 スレートブルー バーチ プライウッド 椅子 曲げ木 曲木 灰青 パーソナルチェア 価格：4044円（税込、送料無料) (2020/7/12時点) 楽天で購入

それをこんな風に調整する方法です。

【送料無料】 アームチェア リラックスチェア 北欧風 『koko ココ』 スレートブルー バーチ プライウッド 椅子 曲げ木 曲木 灰青 パーソナルチェア 価格：4044円（税込、送料無料) (2020/7/12時点) 楽天で購入

******************************

※サンプルで使用したリラックスチェアのリンクは以下の通りです。

・画像とテキスト

・240 x 240

・カスタマイズはデフォルト

１．準備

１－１

まず、楽天アフィリエイトのリンクが どこからどこまでかが分かるように

「編集見たまま」で、区切り線を書いておきましょう。

私の場合はこれ「******************************」

を、上下に2つ用意します。

１－２

楽天アフィリエイトからリンクをコピーして、

はてなブログの「HTML編集」の

「******************************」の間に貼り付けます。

２．外枠のサイズの変更

 外枠のサイズはここ（赤色の下線）の数字を変更します。

width・・・幅

オリジナルの 504px から、340px に変更しました。

３．中枠のサイズの変更 

中枠のサイズはここ（赤色の下線）で変更します。

※赤下線箇所拡大

オリジナルの 240 x 240  から　120 x 120 に変更しました。

2か所あるので、気を付けてください。

４．「楽天で購入」ボタンの調整

 「楽天で購入」ボタンのコードは一番下の2行です。

※赤、青下線の個所を拡大↓↓↓

float・・・浮く、浮かぶ

float の right を left に変更するとボタンは左寄せになります。

中枠のサイズに float を left に変更することで完了するかもしれません。

left に変更しても「楽天で購入」が正しく表示されていなければ、

width の数値を変更してみて下さい。

％は全体の幅に対してどのくらいの割合の幅にするか指定します。

今回のサンプルの場合は60％に変更したら ちょうどよくなりました。

ここまで書いておいて何なんですが、

リンクによってはうまく編集できないかもしれません・・・

HTML と CSS の勉強もやっていきます。

＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／