iWebでページタイトルを設定する方法（１）

ここでご紹介しているTipsは、iWeb’08をご利用の場合のTipsです。

iWebで制作したホームページでは、ページタイトルはページインスペクタで設定したページ名になってしまいます。その為、ページタイトルを日本語にすると、ファイル名まで日本語になってしまい、一部のブラウザやサーバで正しく表示されないなどの問題を引き起こします。

しかし、iWebのブログテンプレートを活用すれば、ページタイトルを日本語のタイトルに設定して、かつファイル名は英数字にする事が可能です。

このTipsはMobileMeはもちろん、「フォルダに公開…」機能を使って出力したHTMLにも有効です。

サンプル

まずこのページでご紹介するTipsを使ったページのサンプルをご紹介しましょう。

下の写真をご覧いただければ分かりますが、URLは「http://banner-pic.com/banner-pic/goods/goods.html」となっており、ページタイトルは「雑貨などの写真 | バナー素材写真 | 無料ダウンロード | Banner Photo BOX」となっています。

このページはiWebだけで設定しており、テキストエディターで書き換えたりと一切の手は加えていません。最終的にこのようなページを制作する方法をご紹介します。

ページはすべて「ブログ」でまとめる

iWebでは、ページを制作する際に、写真や動画などの用途別にテンプレートを選ぶ事ができます。
しかし、サンプルで挙げたサイトでは、すべてのコンテンツにおいて「ブログテンプレート」を使用して、ページを制作していきます。

実際のiWebでどのようになっているのかは、下の写真をご覧ください。

ページのタイトルを入力するテキストボックスを活用する

ブログテンプレートには「ページのタイトルを入力するテキストボックス」と「ページの主文を入力する」テキストボックスがあります。

ページの主文を入力するテキストボックスは、それほど重要ではありませんが、ページのタイトルを入力するテキストボックスは重要です。なぜなら、このテキストボックスに入力された文字が、ブラウザ上でのページタイトルになるからです。

サンプルとして挙げたサイトのように、「ページタイトルらしい言葉」を入力する場合は、テキストボックスの位置に気をつけなくてはいけません。そのページの見出しのように振る舞ってしまっては、何とも不格好になってしまうからです。

そこで、サンプルのサイトでは、この「ページのタイトルを入力するテキストボックス」をヘッダー部分に移動して、ページの見出しは新規テキストボックスを作成して設定しました。

ページの最上部にある白地のテキストが、iWeb上の「ページタイトル」にあたります。

iWebでページタイトルを設定する方法（2） では実際にページを制作する手順を解説したいと思います。

「役にたった」と思ったらシェアお願いします