ヘッダーにロゴ画像を追加しよう
ヘッダー部には、サイトのタイトルが <H1> タグで表示されるようになっていますが、会社のロゴ画像などを追加することが可能です。ロゴ画像を追加するには、スタイルシートで、<H1> タグを非表示にして、テンプレートでロゴ画像を追加します。
- 「スタイルシートの編集方法」のとおり、スタイルシート編集ページを開きます。
- 「h1」部分に、「display: none;」を追加します。
h1
{
...
display: none;
} - スタイルシート編集ページは、[上書き保存]ボタンをクリックし、確認ダイアログが表示されたら[OK]ボタンをクリックし、[閉じる]ボタンで閉じて下さい。
- ページ上部の「メニューへ」をクリックし、メニューへ戻ってください。
- メニューから「テンプレート管理」をクリックして、テンプレート管理ページを開いてください。
- 「header.tmpl」の右にある[内容]ボタンをクリックしてください。
- テンプレート編集ページが表示されますので、ロゴ画像を追加するタグを <h1>...</h1> の後あたりに記述してください。次の例は、公開サーバー上のホームディレクトリにある「logo.gif」という画像ファイルを、ロゴ画像として指定しています。
...
<a href="<%home%>"><img src="<%home%>logo.gif" style="width: 240px; height: 48px" alt="logo" /></a>
... - テンプレート編集ページは、[上書き保存]ボタンをクリックし、確認ダイアログが表示されたら[OK]ボタンをクリックして下さい。
- テンプレート管理ページに切り替えて、ページ上部の「メニューへ」をクリックし、メニューへ戻ってください。
- メニューから、ページ編集をクリックし、適当なページを選択して下さい。
- ページ編集ページが表示されますので、ページ下部の[プレビュー]ボタンで確認して下さい。
↓動画によるロゴ画像追加の例です。クリックで再生します。