6 ヘッダー画像の編集
ヘッダー画像をもつテーマがたくさんあります。 (各テーマの上段に画像があるもの) 自身のページに元の画像をそのまま使うことは稀ですので、それを変更してご自身のイメージ画像に変えるために、簡単に操作できるImagePerfect と呼ばれるツールを使います。(選んだテーマにヘッダー画像がない場合は、このツールを使いません)
まず最初に、ヘッダー画像にマウスをもっていくと「Edit Image」ボタンが表示されるので、これをクリックします。
まず最初に、ヘッダー画像にマウスをもっていくと「Edit Image」ボタンが表示されるので、これをクリックします。
以下の画面が表示されるので、Add Imageボタンをクリックします。(この作業をキャンセルする場合は、右上にあるCancelボタンをクリック、元の画像を使う場合は、Use the original Imageをクリック)
すると、画像をどのようにアップロードするかを指定するダイアログボックスが開きます。これは、<3 画像の追加>で学習したものと同じ手順です。
以下は、PCから選択した直後の画面です。
- 画像のサイズは画像のコーナーと端にある小さな丸点を使って変更できます。
- クリックして画像を上下左右にドラッグできます。
- ページ上段にあるツールを使って、文字列を追加・編集、必要に応じ画像効果も追加できます。
OKなら、右上にあるSaveボタンをクリックして確定します。(OKボタンの右にあるXをクリックすると、画像が削除) 「Save」ボタンのすぐ右にある矢印を使うことで、
- サイトのすべてのページにこのヘッダー画像を適用
- または、このページだけに適用するかの指定をすることができます。(各ページに違ったヘッダー画像を設定することもできます)
なお、「Add Image」ボタンを使って同じヘッダーに何枚も画像を追加するができます。
ヘッダー画像の高さを調整
CSSを変更することになります。ヘッダー画像の高さが大きいものは、.tall-header-page .wsite-headerに規定されています。 小さいものは、.short-header-page .wsite-headerに規定されているので、それぞれこのheight値を変更します。
ヘッダー画像内に文字を入力
ヘッダー画像を配置後、画像をクリックすると「Edit」ボタンが表示されるので、これをクリック → 左上にある「Add Text」ボタンをクリックすると文字入力枠が表示されるので、ここに入力(位置はドラッグして自由に決めることができる)
※文字フォント・サイズは選択できますが、日本語が入力できるフォントがないので、すべて英数字のみの入力となる。 日本語を入力したい場合は、画像を作成し、「Add Image」ボタンを使って配置します。編集後は「Save」(保存)するのを忘れないようにしましょう。
※文字フォント・サイズは選択できますが、日本語が入力できるフォントがないので、すべて英数字のみの入力となる。 日本語を入力したい場合は、画像を作成し、「Add Image」ボタンを使って配置します。編集後は「Save」(保存)するのを忘れないようにしましょう。