「オリジナルフォトヘッダー」を使う

「オリジナルフォトヘッダー」は、自分で撮影した写真やお気に入りの画像を、ヘッダーの背景画像として飾れる便利なデザインテンプレートです。以下のように自分の好きな画像を設定できます。

変更にはスタイルシート（デザインを指定するプログラム）の簡単な書き換えを伴いますが、はじめての方でも変更できるよう、以下に詳しい手順をご紹介しますので挑戦してみてください。

• 画像サイズが大きくなりますので、閲覧環境（ディスプレイサイズや回線など）によっては快適にご覧いただけない可能性があります。
• SSブログでは、HTMLやCSSの編集に関して個別にサポートを行っておりませんので、ご了承ください。

■はじめに：画像を用意する

ヘッダーの背景に使える、大きめサイズの画像を用意してください。

使える画像の例

• デジカメで撮影したオリジナルの写真
• ご自身で作成したイラストなどの画像
• 権利上使用が認められている画像素材

画像の仕様について

• フォーマット：JPEG（ジェイペグ）
• 画像サイズ（ピクセル）
  

  スキン	たてサイズ	よこサイズ
  ベーシック（表示例）	500ピクセル固定	900ピクセル推奨
  フォトスタイル（表示例）	370ピクセル固定	555ピクセル以下
  プレーン（表示例）	400ピクセル固定	900ピクセル推奨

画像のサイズの変更やくり抜き（リサイズ・トリミング等）は、画像編集サービスやソフトウェアなどで行う必要があります。一例として、以下のようなサービスやソフトがあります。

・Google Picasaウェブアルバム（Webサイト）
・Google Picasa（無料写真管理ソフト Win/Mac）
・ADOBE PHOTOSHOP ELEMENTS 9（有料写真編集ソフト Win/Mac 体験版有り）
・Vector - グラフィックエディタ（画像編集ソフトの紹介サイト Win）

※ご注意！※
著名人の写真やキャラクター、アーティストの作品など、ご自身に使用する権利の無い画像の使用は、知的財産権を侵害する可能性があり、利用規約違反となりますのでおやめ下さい。

■設定方法

以下の手順に習って、確認しながら行ってください。


１．「オリジナルフォトヘッダー」テンプレートを設定する
管理画面の[デザイン] - [テンプレート一覧]を開いて、「オリジナルヘッダー」ジャンルから、好きなデザインを選択して適用します。

→テンプレート一覧（ベーシック）



２．テンプレートの編集画面へ移動
管理画面の[デザイン] - [テンプレート管理]に移動し、１で追加した「オリジナルフォトヘッダー」の[編集]をクリックして「スタイルシート編集」を開きます。

→テンプレート管理



３．画像をアップロードする
「スタイルシート編集」画面で、あらかじめ用意した画像を[ファイル]からアップロードします。



４．画像を差し替える
同じ「スタイルシート編集」画面で、テキストエリアのフォーム内から「背景画像指定」の文字列のある場所を探します。下図を参考に、「"background:"～」で始まる1行を選択し色を反転させます。


文字列を選択したままの状態で、[ファイル]にあるサムネイル画像をクリックすると、自動的に文字列が差し変わります。「サムネイル画像表示」にチェックが入っている場合は、あらかじめチェックをはずしてください。


[保存]をクリックし、正しく表示されているか確認してください。（[プレビュー]を行っても正しく表示されない場合があります）。

以上で完了です。


失敗した場合は？
[テンプレート一覧]から、新しい「オリジナルフォトヘッダー」を選択しなおして、初期状態に戻してから再度チャレンジしてみてください。

■ヘッダーを非表示にしている方（※有料プラン）

ヘッダーを非表示にしていると、表示崩れが発生しまので、以下のようにスタイルシートの追加修正をお願い致します。

修正前：31行目あたり

body { background:#ffffff url(_common/skins/9007/images/img_bg.gif) repeat-x; }

修正後：赤字部分を追加

body { background: #ffffff url(_common/skins/9007/images/img_bg.gif) left -26px repeat-x; }