ヘッダー・フッター画像の変更

FC2ブログマニュアル

現在パソコン版のマニュアルを表示中

スマートフォン用[公式テンプレート]の『basic_red』を適用した状態から説明を始めます。

※テンプレートの選択・変更に関してはこちらに手順が記載されております。
※背景色のみ変更したい場合は、「２．テンプレートの編集手順」からが手順となります。

１．ヘッダー・フッターに使用する画像ファイルのアップロード　↓
２．ヘッダーの編集手順　↓
３．フッターの編集手順　↓

1. ヘッダー・フッターに使用する画像ファイルのアップロード

ブログ管理画面ページの左メニュー[ツール] > [ファイルアップロード]より、
ヘッダーに使用する画像ファイルのアップロードを行ってください。

※画像ファイルのアップロード方法は、こちらをご覧ください。
※アップロードはFC2で行っていただくことをおすすめします。
※スマートフォンの画面サイズによって、使用する画像が異なりますので事前にご確認ください。

画像のパス(URL)の取得

アップロードが完了したら、同ページの「ファイル一覧」に画像が表示されます。
ファイル一覧の中からヘッダーに使用する画像のサムネイルをクリックすると別画面で画像が開きます。
ブラウザーのアドレスバーに表示されているのが画像のパス(URL)です。

2. ヘッダーの編集手順

ブログ管理画面ページの左メニュー[環境設定] > [テンプレートの設定]をクリックしてください。
テンプレート設定ページ下部「basic_redのスタイルシート編集」にて編集を行います。

まず、スタイルシート編集のテキストボックスから「Header」を探します。
「Header」の下にある#headerにてヘッダー画像の設定をしています。
現在、#headerの「background-color:#FF3333;」には背景色が設定されていますので削除します。

▲スタイルシート編集のテキストボックス

削除したところに下記のコードを貼り付けます。

　background-image: url(ヘッダー画像のURL); /*画像の指定*/

(ヘッダー画像のURL)には、「１．ヘッダーに使用する画像ファイルのアップロード」の項目で一時保管した画像のパス（URL）を貼り付けてください。

[プレビュー]をクリックすると変更を確認できます。

　　　　　▲テンプレート編集前　　　　　　　　　　　　　　　　▲テンプレート編集後

#header内の「min-height:44px」がヘッダーの高さですので、こちらのpxを変更して背景画像に合わせることができます。

[プレビュー]をクリックすると変更を確認できます。

　　　　　▲テンプレート編集前　　　　　　　　　　　　　　　　▲テンプレート編集後

編集が終わったら[更新]をクリックして完了です。

※画像の並べ方や表示位置、固定設定に関して詳細はこちらをご覧ください。

背景に関する指定

background-color: #fff; /*色の指定*/
background-image: url(画像のパス); /*画像の指定*/
background-repeat: repeat; /*繰り返しの指定*/
background-position: left top; /*配置の指定*/
background-attachment: fixed; /*画像位置を指定*/

3. フッターの編集手順

まず、スタイルシート編集のテキストボックスから「Blog Footer」を探します。
「Blog Footer」の下にある#footer.poweredにてフッター画像の設定をしています。
現在、#footer.poweredの「background-color:#FF3333;」には背景色が設定されていますので削除します。