楽天トラベルの悲劇 カスタマイズページの作り方。

HTMLは難しくない?

ここからHTMLを書く。
だが、HTMLをかけない人は以下のことだけで十分だ。

とにかくタグで囲む。 これが基本だ。

■囲むと改行が伴うタグ

<div> … </div>

これで一段落になるからなんでもわからないうちはdivで囲め。

<p> … </p>

空きが段落ごとにある とにかく使ってみればわかる。

こういった要素をブロック要素という。divやpやul,ol,li,などがある。

■囲んでも改行がされないタグ

<a> … </a>

リンクしたいテキストを囲む。
下のようにリンク先を書けばいい。だが、外部サイトへのリンクは許されていない。

<a href="http://travel.rakuten.co.jp/xxxxxxxxxxxx/xxxxxxxx/">リンクしたいテキスト</a>

<strong> … </strong>

太字になる

こういった要素をインライン要素という。aやstrong,em,span,などがある。自由に使っていい。

■画像

<img src="http://example.com/xxxx/xxxx.jpg">

のように記述する。
画像の置き場所は楽天で画像アップロードをするか、自前で持っているサーバーにアップロードする。
画像のURL(つまりアドレスだな)をsrc="URLアドレス"に書き込むわけだ。

■ただ改行したい ※よくつかう

<br>

「日本国」という国号は、日本列島が中国や朝鮮半島から見て東側、<br>
つまり「日の本(ひのもと)」に位置することに<br>
由来していると考えられる。

■テーブル

<table>
<tr>
<td>テキストタイトル1</td><td><img src="http://example.com/xxxx/xxxx.jpg"></td>
</tr>
<tr>
<td>テキストタイトル2</td><td><img src="http://example.com/xxxx/xxxx.jpg"></td>
</tr>
</table>

一見複雑だが、使い慣れると何でもかんでもテーブルでやってしまう病気にかかるほど便利だ。
推奨されていないが、慣れない素人ならばテーブルでレイアウトしてもいいと思う。

テーブルの線を隠したいときには

<table border="0">

とすればいい。

背景の色や各セル(文字や画像が入ってるボックスだな)の隙間やなんかなどもスタイルシートで設定できる。
ここは勉強が必要だが、あらゆるサイトで必要なだけ説明してくれているので、できなくはないだろう。

2 Replies to “楽天トラベルの悲劇 カスタマイズページの作り方。”

  1. 楽天トラベルのカスタマイズページのGOLDテンプレートにて、

    と記載すると、外部リンクは許可していないエラーメッセージが出ます。

    @import “http://www.example.com/css/rakuten.css”;

    と記述すると記述は可能ですが、読み込めていないようです。

    javascript、cssファイルは、どのように参照させるのが良いのでしょうか?

    • 2010年あたりに書いた記事なので、すでに情報が古い可能性があります。ご了承ください。

      たしかに外部Javascriptは数年前から書き込みできなくなってましたね。
      ただ、Javascriptを書き込めないというわけではないので、直書きすることで対応できそうです。
      もしくはJavascriptで外部Javascriptを読み込むとかでも対応できると思いますが、正規の方法ではないでしょう。

      CSSは、importできなければ、CSSは普通にlinkタグで書き込むとどうでしょうか。

      もし結果をいただければその情報をもとに記事を更新できればと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA