So-net無料ブログ作成
検索選択
使い方トップ » デザイン » 「オリジナルフォトヘッダー」を使う

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

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

OriginalPhotoHeaderSample01.jpg phdr_sample02.jpg 201204_plane_sample03.jpg

変更にはスタイルシート(デザインを指定するプログラム)の簡単な書き換えを伴いますが、はじめての方でも変更できるよう、以下に詳しい手順をご紹介しますので挑戦してみてください。
  • 画像サイズが大きくなりますので、閲覧環境(ディスプレイサイズや回線など)によっては快適にご覧いただけない可能性があります。
  • So-netブログでは、HTMLやCSSの編集に関して個別にサポートを行っておりませんので、ご了承ください。


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

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

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

画像の仕様について
  • フォーマット:JPEG(ジェイペグ)
  • 画像サイズ(ピクセル)
    スキンたてサイズよこサイズ
    ベーシック(表示例500ピクセル固定900ピクセル推奨
    フォトスタイル(表示例370ピクセル固定555ピクセル以下
    プレーン(表示例400ピクセル固定900ピクセル推奨

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

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

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



■設定方法

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


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

→テンプレート一覧(ベーシック)
originalphotoman01.jpg


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

→テンプレート管理
originalphotoman02.jpg


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


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

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

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

以上で完了です。


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



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

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

修正前: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; }