1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebでページタイトルを設定する方法(1)

iWebでページタイトルを設定する方法(1)

ここでご紹介しているTipsは、iWeb’08をご利用の場合のTipsです。 iWebで制作したホームページでは、ページタイトルはページインスペクタで設定したペ […]

  • 2016/5/4
  • 2008/10/17

ここでご紹介している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) では実際にページを制作する手順を解説したいと思います。

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

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