背景画像・背景色の変更

FC2ブログマニュアル

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

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

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

１．背景に使用する画像ファイルのアップロード　↓
２．テンプレートの編集手順　↓
∟【１】　背景色の変更手順　↓
∟【２】　背景画像の変更手順　↓

1. 背景に使用する画像ファイルのアップロード

ブログ管理ページの左メニュー［ツール］＞ [ファイルアップロード] より
背景に使用する画像のアップロードを行ってください。（下画像①参照）

※画像のアップロード方法はこちらをご覧ください。
※画像アップロードはFC2ブログで行っていただくことをおすすめします。

【旧・管理画面の場合】

move

【新・管理画面の場合】

画像のパス(URL)の取得

ファイルアップロードが完了したら、同ページの「ファイル一覧」に画像が表示されます。
ファイル一覧の中から背景に使用する画像のサムネイル（上画像②参照）をクリックすると
別画面で画像が開きます。

ブラウザーのアドレスバーに表示されている画像URLをコピー(Ctrl+Cまたは右クリック)して、
メモ帳などのアプリケーションに貼り付け(Ctrl+Vまたは右クリック)し、一時保管してください。

以上で、背景画像をテンプレートに表示させるための下準備はOKです。
次は実際に、テンプレートを設定し、背景色・背景画像を変更していきます。

2. テンプレートの編集手順

ブログ管理ページの左メニュー[環境設定] ＞ [テンプレートの設定]をクリックしてください。
テンプレート設定ページ下部、「basic_redのスタイルシート編集」にて、編集を行います。
まずは、青色の枠で囲っている/*=====Basic=====*/というタグを探してみましょう。

2-【1】背景色の変更手順

/*=====Basic=====*/の項目内に「background-color:#E0E0E0;」というタグがあります。
このタグが、背景色を設定しています。
「#E0E0E0」が、背景の色（カラーコード）なので、ここを変更することで背景色が変わります。

実際に背景の色を、ピンク色（#E0E0E0）から黄色（#FFD700）に変更します。

※カラーコードは検索エンジンで「HTML　色見本」で検索すると、たくさんヒットします。

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

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

このように入力した色が背景に適応されるようになります。
編集が終わったら、[更新]を押して完了です。

以上で、背景色の変更は終了です。

2-【2】背景画像の変更手順

/*=====Basic=====*/の項目内に「background-color:#E0E0E0;」というタグがあります。
このタグが、背景色を設定していますので、削除します。

削除した行に、下記のタグを貼り付けます。

background-image : url(背景画像のURL); 　　　/*背景画像の指定 */
background-repeat : repeat; 　　　　　　　　　　　　　/* 繰り返しの指定 */
background-position : left top; 　　　　　　　　　　　　/* 配置の指定 */
background-attachment : fixed; 　　　　　　　　　　　/* 画像位置を指定 */