デザイナーモードで「ロゴ画像」を差し替える方法

旧マニュアル番号: No.41

【注意】この操作は「デザイナーモード」で行います。No.38の注意点を必ず読んでから、自己責任の上で実行してください。

会社やサービスのロゴが新しくなった際に、サイトのヘッダー（上部）などに表示されているロゴ画像を差し替える方法です。画像を変更する操作は、テキストの修正よりも少し手順が複雑になります。 実画面例: ロゴはヘッダーなど共通パーツに入っていることが多いため、差し替え後は複数ページで確認します。

1. 新しいロゴ画像の準備

まず、Webサイトで使用するための、新しいロゴ画像を準備する必要があります。

ファイル形式: Webで一般的に使われるSVG, PNG, JPGなどの形式で用意します。
- SVG: ロゴのように、拡大縮小しても荒れないベクター形式が最も推奨されます。
- PNG: 背景が透明なロゴの場合に使用します。
ファイルサイズ: 表示速度に影響するため、ファイルサイズは可能な限り小さく（数KB〜数十KB程度）してください。
ファイル名: logo.svg や new-logo.png のように、半角英数字のファイル名にしてください。

2. 操作手順

デザイナーモードを開きます。
ロゴが表示されているページ（通常はトップページ）を開きます。
ロゴ画像をシングルクリックで選択: サイトのヘッダーなどにあるロゴ画像を、シングルクリックして選択します。選択されると、青い枠で囲まれます。
右側のスタイルパネルを確認: ロゴ画像を選択した状態で、画面右側のスタイルパネル（Style Panel）を見ます。その中を下にスクロールしていくと、「Backgrounds」または「Image & gradient」という項目があり、現在設定されているロゴ画像がプレビュー表示されています。
画像を差し替える:
- プレビュー画像の隣にある「Replace Image」というリンクをクリックします。
- または、プレビュー画像自体をクリックします。
アセットパネルが開く: クリックすると、「アセットパネル（Assets Panel）」という、サイトで使用されている画像の一覧画面が開きます。
新しいロゴ画像をアップロード: アセットパネルの右上にある、雲のマークの「Upload」ボタンをクリックし、PCに保存しておいた新しいロゴ画像を選択してアップロードします。
画像を選択して差し替え: アップロードが完了すると、アセットパネルの一番上に新しいロゴ画像が追加されます。その新しいロゴ画像が選択された（青い枠で囲まれた）状態で、パネルを閉じると、サイト上のロゴが新しいものに差し替わります。

3. 特に注意すべき点

サイズや位置の調整はしない: ロゴを差し替えた後、もしサイズや表示位置が微妙にずれてしまったとしても、ご自身でスタイルパネルの数値を調整するのは絶対にやめてください。 ロゴの差し替えは、あくまで画像の入れ替えのみに留めてください。もし表示が大きく崩れた場合は、すぐに「元に戻す（Ctrl+Z）」を押し、IGNITE公式サイトのお問い合わせフォームから相談してください。

4. 【最重要】変更を公開する

差し替えが完了したら、必ず「No.44」の手順に従って「Publish」（公開）作業を行い、変更をサイトに反映させてください。

次のステップ: 画像の差し替えには、アセットパネルというものが関わってきました。次は、この「No.42 サイトで使う画像をアップロードする場所（アセットパネル）」について詳しく見ていきましょう。