Excelのこととか色々

マクロをどんな Excel ファイルにも実行できるように設定して、3秒かかる操作も1秒で完了。あといろいろ書いてみます・・・

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

【HTMLのこと 1】

f:id:tuna-kichi:20200711190234p:plain

 

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

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

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


 

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

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

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


 

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


 

 

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

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

・画像とテキスト

・240 x 240

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

 

 

1.準備

1-1

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

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

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

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

 

1-2

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

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

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


2.外枠のサイズの変更

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

f:id:tuna-kichi:20200712184908p:plain

width・・・幅

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

 

3.中枠のサイズの変更 

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

f:id:tuna-kichi:20200712185349p:plain

※赤下線箇所拡大

f:id:tuna-kichi:20200712185753p:plain

 

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

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

 

4.「楽天で購入」ボタンの調整

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

f:id:tuna-kichi:20200813153946p:plain

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

f:id:tuna-kichi:20200813154026p:plain

float・・・浮く、浮かぶ

 

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

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

 

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

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

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

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

 

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

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

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

 

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

  Graspyで無料プログラミング講座を受講する