簡単HTML講座！初級編からフローティングバナー設置まで！
こんにちは！アイ・オーダーの近藤でございます。
もうすぐ6月が始まりますね。
6月になると「もう1年の半分?!」と、毎年もれなく驚きます。
8月に山の日が制定されてから、6月は一年間で唯一、祝日の無い月になりました。
営業日が多く、楽天市場では大型イベントが開催される6月。
店長様にとっては、頑張り時の月ですね！
| 1 | 簡単HTML講座！ベテラン店長様も復習しませんか？ |
●初めてネットショップをオープンした店長様
●ずっと外注に任せていてページ編集方法がわからない店長様
●HTMLって何から勉強したらいいの？とお思いの店長様
トップページを丸ごと作ろうと思うと大掛かりなことになりますが、今あるページの編集であれば、それほど難しいことではありません。
今回は、簡単なHTMLについてご紹介してまいります。
| 1) BR 改行タグ | |
| 「こんにちは。店長の近藤です。」 この文章をこのまま書けば、ページ上に表示されるのも「こんにちは。店長の近藤です。」の様に表示されます。 しかし、「こんにちは。<BR>店長の近藤です。」このように、前の文の後ろに<BR>タグを記入すると 「こんにちは。 店長の近藤です。」 このように、<BR>を記入した部分で改行されることになります。 |
|
| 2) IMG 画像挿入タグ | |
| 楽天市場の場合、画像をR-Cabinetに登録します。 登録した画像の部分にある「画像URLコピー」のボタンをクリックし、 <IMG src=”https://image.rakuten.co.jp/店舗URL/cabinet/ファイル名.jpg”> このように <IMG src=”ここに画像ファイル名を記入”> “”の間に画像ファイル名をペーストすると、画像挿入が出来ます。  これを応用して <IMG src=”画像ファイル名” width=”800″ height=”400″> このように書くと、幅800px、高さ400pxのサイズ指定が出来ます。 同じ画像を、縮小して載せたい場合、<IMG src=”画像ファイル名” width=”400″> このようにwidthだけ数値を書いて、heightを未記入にすると、幅サイズに合わせて自動的に高さ調整を行います。 しかし、同じファイルを<IMG src=”画像ファイル名” width=”400″ height=”400″> このように書くと、本来、幅800px・高さ400pxの画像を、強制的に400px×400pxの正方形で表示させることになる為、画像が縦に無理やり伸ばしたような表示になってしまいます。 |
|
| 3) BR と IMG を混合する | |
| <IMG src=”□の画像.jpg”><IMG src=”□の画像.jpg”> このようにIMGタグを続けて記述すると、2つの画像が □□ の状態で並んで表示されます。 これに<BR>を追加すると <IMG src=”□の画像.jpg”><BR> <IMG src=”□の画像.jpg”> このように縦に並んで表示されることになります。 上の□の画像の底辺と、下の□の画像の上辺は、ピッタリくっついて表示されるので、画像の間にすき間を空けたい時は、 <IMG src=”□の画像.jpg”><BR><BR> <IMG src=”□の画像.jpg”> このように<BR>を2回記入すれば、上の□の画像を改行した後、さらにもう1個改行してから、下の□の画像を表示することになるので、上下の画像の間に間隔を空けることが出来ます。 |
|
| 4) A リンクタグ | |
| 文字や画像をクリックしたら、別のページに移動するようにしたい時は、リンクタグを記入します。 例）文字からリンクさせたい場合 お問い合わせは<A href=”移動先のURL”>こちら</A>をクリック！ 「お問い合わせはこちらをクリック！」 例）画像からリンクさせたい場合 <A href=”移動先のURL”><IMG src=”画像ファイル名”></A> リンクタグを書く時は、最後にAを閉じるタグ</A>が必要です。 閉じるタグを書いておかないと、リンクを指示した状態が、ずっと続いてしまうので、クリックさせたい範囲を決めて、その範囲の前と後ろで挟むようにして記述します。 |
|
| 5) 簡単な文字装飾 | |
| いくつか簡単な文字装飾をご紹介します。 ●太字 <b>～</b> <b>～</b> このタグの間に文字を記入すると、太字で表現されます。 ●下線 <u>～</u> <u>～</u> このタグの間に文字を記入すると、下線が表示されます。 ●斜体 <i>～</i> <i>～</i> このタグの間に文字を記入すると、斜体で表示されます。 ●太字・下線・斜体の合わせ技 タグを閉じる時は、必ず<1><2><3>の順番で開いたものを</3></2></1>の順番で閉じなければいけません。 <b><u><i>太字・下線・斜体</i></u></b> |
|
| これらが“超基本的”なHTMLのタグです。 既に出来ているページの編集は、文言編集と、BR、IMG、Aのタグがご理解いただいていれば、いろいろ触っていただけると思います。基礎が解ると、応用もしやすくなります。 |
| 2 | やりたかった！画面左側に縦長バナーの連続表示！！等 |
続いて、ご紹介するのは、「うちのお店でもやってみたかった！」の設置方法をご案内します。
| 1) 画面左側に縦長バナーの連続表示 | |
|
以下のソース <style ～ </style> をコピーしてください。
例えば、楽天市場の全ページ（RMS仕様のみ）に表示したい場合は、デザイン設定のヘッダーに挿入すると良いと思います。 <style type=text/css> <!– body { background-image:url(画像ファイル名); /* 画像ファイル名を書き変え */ background-repeat:repeat-y; background-position:0%; } –> </style> 既に今のページに <style ～ </style> が書いてある場合は、body ～ 最後の ｝までをコピーして、元々ある<style ～ </style> の間に貼り付ければOKです。 あまり幅広の画像を使用すると、メインのコンテンツの邪魔になるので、縦長サイズのものをご用意いただくと良いと思います。 body はページ全体に対して指示を出すので、このソースが書いてあるページは、一番上から一番下まで指定した画像が左端に連続表示されます。 |
|
| 2) 固定表示したまま動かないバナー | |
| ページをスクロールしても、固定の場所で表示して動かないバナーを見かけたことはありませんか？ これを「フローティングバナー」と呼びます。 幅100px×高さ200pxのバナーをご用意いただいたと仮定します。 以下をコピーしてご利用ください。 <div style=”width:100px; height:200px; position:fixed; left:0; top:100px; z-index:9999999999;”> <a href=”リンク先のURL”> <img src=”画像ファイル名” width=”100″ height=”200″ style=”border:none;”> </a></div> 「top:100px;」の部分は、楽天市場の場合、楽天の既定コンテンツを隠してはいけないルールがあるので、上から100pxの位置に表示するという意味です。 既定コンテンツが大きい場合は、こちらの数字を調整して、隠してしまわない様に注意してください。 |
| 3 | 令和キャンペーン10%OFF! 5月31日(金)まで!! |
ご好評いただいております「令和キャンペーン」が遂に明日まで！
店舗のリニューアルや、特集ページ・ランディングページ等の制作をご検討中の方は、是非この機会にご利用ください。
