上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 今回は、「バックグランド」にシームレス、或いは大きめサイズの背景画像を適応していく方法です。
 そんなに大変ではないので、是非ともお試し下さい。




背景画像をアップロード



 まずは自分のブログスペースに背景画像をアップロードします。どこかの素材を利用するときは、著作権や利用規約に十分注意して下さい。
 写真などと同様の手順でファイルをアップロードしたら、アップロードした画像のサムネイルをクリックします。
 すると、「画像ファイルのアドレス」が出てきます。これが、オンラインでの画像ファイルとなります。

castam-3faithblack-002.gif

 そして、上図の「アドレスバー」に出ている画像のアドレス「http://~~~~.gif(jpgやpngの場合もあります)」をコピーしておきます。




ブログ全体のバックグランド画像



 デフォルトでは、黒の斜め掛けアミの画像が指定してある、一番端の背景画像の変更場所は、以下の場所になります。

/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#666 url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/3faith-black-001.gif") repeat;
color:#555;
}

 この「赤字部分」を先ほどコピーした「画像のアドレス」に書き換えれば完成。
 プレビューして、自分で設定した画像になっているか確認してみてください。




サイドバー、カテゴリバーの背景画像



 サイドバーの「プラグインタイトル」と「カテゴリバー」の背景画像も、簡単に変更することが出来ます。
 これは、前回記事と同様に、ノートパッドなどの「文字の置き換え機能」があるソフトを使用します。
※詳しい使い方はこちらを参照してください。
[3Faith徹底改造]色調のカスタマイズ

 前回同様に、ノートパッドなどに「CSS全文」をコピペします。

文字の置き換えツール
※ノートパッド

 まずは、置き換え前の文字「検索する文字列」に

background:#555;
※「;」も忘れず入力

 置き換え語の文字列に

background:url("画像のURL") repeat;

 と、入力。赤字部分は、「アップロードした画像のアドレス」に書き換えます。

 これが出来たら、「すべて置き換え」を実行し、これを、FC2管理画面の「スタイルシートの編集ボックス」に全文コピペして戻せば完成。
 こちらも、プレビューして確認してみてください。



カテゴリバーの、サブカテゴリーの背景部分は?

.cate_sub{
display:none;
background:#777;
position:absolute;top:24px;left:0px;
z-index:2;
padding:5px;
border-top:1px solid #fff;
border-left:10px double #fff;
}

 この赤字部分が、サブカテゴリーの背景色が指定してある部分です。
 この場所を探すには、「Ctrl」+「F」キーで画面内検索ボックスを使用すると便利。





ヘッダーの背景画像を変更する



 ヘッダーの背景色は、デフォルトでは「濃いグレー」になっています。
 これを、画像に置き換えるには、以下の部分を検索します。

#header{
text-align:left;
height:120px;
margin:0 auto;
background:#555 url("") no-repeat center bottom;
}


 赤字部分が背景の設定部分です。
「url("")」の「""」の間に、画像のアドレスを挿入すれば、簡単にヘッダー背景画像を設定出来ます。
 「background」についての詳細説明は、こちらを参照してください。
スタイルシートでのデザイン(バックグランド編)

 また、3FaithBlackのヘッダーの細かいカスタマイズは、こちらを参考に。
[3Faith徹底改造]ヘッダー部分のHTML・CSSの解説



■メニューに戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Thu.06.23.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。