携帯電話などから閲覧できる「携帯サイト」を作る記事の第2弾です。 前回の記事「携帯サイトの作り方 第1回 作成方法の基礎」では、携帯サイトとして機能する基礎(XHTMLの書き方・各社端末共通の装飾方法・基本的な記述方法)をご紹介いたしました。

今回は、携帯端末ならではのリンクの作り方と、リンクの装飾方法についてをご紹介いたします。

携帯電話の番号キー(ボタン)でリンクを移動させる方法

携帯電話の番号キー

携帯電話では、画面のスクロールに[↑][↓]キーを使うしかないため、移動に時間がかかります。そこで、携帯電話の番号キーを使って「ページ内の特定の場所」へジャンプできるようにしてみましょう。

番号キーでジャンプできるようにしておくと、スクロールの手間が省けて便利です。また、頻繁に使われると思われるリンクも、番号キーを使ってクリックできるようにしておくと、時間の節約になって便利です。

「#」キーでページ内移動

上図のサンプルサイトでは、「#」キーを押すことで(同一ページ内の)メニュー部分にジャンプするようにしています。 こうすると、離れた位置にあるナビゲーションをすぐ表示させられます。

番号キーでリンクをクリック(ページ移動)

上図のサンプルでは、「1」や「2」などの数字キーで、メニューにあるリンクをクリックできるようにしています。 ここでは項目が2つしかありませんが、メニュー項目がたくさんある場合に、いちいち[↑][↓]キーで選ばなくても各ページに移動できるメリットがあります。

リンクの色を装飾する方法

携帯サイトもPCサイトと同じように、スタイルシートを使うことで「リンクの文字色」を自由に指定できます。 記述方法はPCサイトを作る場合と同じですが、多くの携帯端末に対応させるには、記述できる場所や方法が限られています。

リンクの色を装飾

今回は、上記のサンプルような、各種リンクの作成・装飾方法をご紹介いたします。

サンプル携帯サイトのURL(QRコード)

なお、前回と同様に、作成結果はサンプル携帯サイトに反映してありますので、お手持ちの携帯端末で見てみて下さい。(右図のQRコードを読み取ればURLが得られます。)
パソコンのブラウザからも閲覧可能です。(ソースを参照したい場合にどうぞ)
※7月3日時点でのサンプル携帯サイトのトップページは、画像も含めて合計15.7KBあります。

【携帯サイトの作り方 第2回 目次】

1. はじめに・サンプル (このページ)
2. 番号キーで移動させるリンクを作る
3. リンクの表示色を指定する

※携帯電話からの見え方を確認できる各社のソフトウェアについては、記事「実機を使わずに携帯電話からの見え方を確認」でご紹介しています。