FC2ブログ マニュアル

背景画像・背景色の変更

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

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

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

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

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

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

【旧・管理画面の場合】​

move

【新・管理画面の場合】​

画像のパス(URL)の取得

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

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

2

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

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

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

3

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

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

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

4

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

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

5

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

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

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

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

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

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

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

 

背景に関する指定

※画像の繰り返しの指定や位置を変更したい場合はこちらをご覧ください。

(背景画像のURL)には、「1.背景に使用する画像ファイルのアップロード」の項目で一時保管した画像URLをペーストしてください。

6

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

7

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

このように背景に画像が表示されるようになります。編集が終わったら、[更新]を押して完了です。

※画像編集ソフトによっては、画像が正常に表示されない場合がございます。
 その場合は、拡張子を変更して再度アップロードをお試しください。

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

マニュアル一覧を見る »

お問い合わせ

ヘルプをご覧になっても問題が解決されない場合は、サポートへお問い合わせください。

FC2ブログに関するお問い合わせはこちら