ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 背景の画像を変えたい!

背景の画像を変えたい!

背景の画像を元からある物から、自分の好きな画像へ変える方法や元は色で指定されていた背景を画像に変える方法を紹介したいと思います。

まず自分がどこの背景を変えたくて、スタイルシートのどの部分を編集したらいいのかを背景の色を変えたい!を読んで、把握して下さい。

把握できたら、画像はbackground-image: url("画像ファイルのURL")のタグで決められていることを最初に覚えて下さい。

背景の画像を元からある物から、自分の好きな画像へ変える方法

steppe
公式テンプレ-[steppe]の上部タイトル部分の背景画像を自分の持っている好きな画像に変えたいという例で説明します。

kingyo2.gif 今回はこの金魚の画像に変えたいと思います。

まずタイトル部分はどこかを見るために変数一覧を見てみます。すると<%blog_name>がタイトル部分だとわかりました。

そしてテンプレートの設定からHTMLの編集を見てみて、
<%blog_name>を検索してみます。
<div id="box_title"> <div class="site_title"><a href="<%url>"><%blog_name></a></div> <div class="site_intro"><%introduction></div> </div>
タイトル部分がbox_titleの名前で指定されていることがわかりました。(<%blog_name>は<head>じゃなくて<body>で囲まれている中を探して下さい)

続いてスタイルシートの編集を見てみます。box_titleで検索してみると・・・
#box_title {
position: absolute;
left: 20px;
top: 0px;
width: 730px;
height: 220px;
background-image: url(http://blog1.fc2.com/template/steppe/image/c_title.jpg);
}
名前で指定してタイトル部分を設定している所が見つかりました。ここの青字の部分のURLを自分の好きな画像のURLに変更します。自分の画像のURLは、ファイルのアップロードを使って入れ替えたい自分の好きな画像をアップロードして、新しい記事を作るなどの画面で画像をいつもの様に選択すると、自分の画像のURLがわかると思います。

金魚だらけ
この様になりました。金魚は1つだったのに、表示方法を何も指定していなかったので、タイトル枠の中が全部金魚で埋められました。

画像のタグ紹介

自分で画像の表示方法を指定したい人は以下のタグを組み合わせて使ってみてください。
画像の並び方
background-repeat: repeat-x; 横1列に並べる
background-repeat: repeat-y; 縦1列に並べる
background-repeat: no-repeat; 1つだけ表示する
background-repeat: repeat; 繰り返し表示して敷き詰める

画像の表示位置
基本形 background-position:横方向 縦方向;
横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)
表示位置の例-background-position: left top; (左上に表示)
表示位置の例-background-position: right bottom; (右下に表示)

数字と単位で指定する事もできます。横方向は左からの距離で、縦方向は上からの距離で指定します。(単位はpx・%など)
表示位置の例-background-position: 50px 100px;
(左から50px、上から100pxの位置)
表示位置の例-background-position: 150% 300%;
(左から150%、上から300%の位置)

使い方紹介

すっきり
これを踏まえてこの様に変更してみました。

#box_title {
position: absolute;
left: 20px;
top: 0px;
width: 730px;
height: 220px;
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/kingyo.gif);
background-repeat: repeat-x;
background-position:center center;

background-color:#fff;
}

横一列に画像を並べて、縦も横も中央に指定し、右の2つのメニューが上まで飛び出してかっこ悪かったので、background-colorで背景の色を白に変えてみました。
小さい画像なら繰り返し使い、大きい画像なら繰り返さずに好きな位置に指定して使うといいのではないでしょうか?

背景画像のスクロールの有無のタグ紹介

もしタイトル部分ではなくて背景画像を変えたいなら、背景画像のスクロールの有無のタグも参考にして下さい。
背景画像のスクロールの有無
background-attachment: fixed; スクロールさせない
background-attachment: scroll; スクロールさせる

スクロールさせないとは、文字だけ動いて背景は固定する事。
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない
スクロールしない

スクロールさせるとは、背景までもが一緒に動いてしまう事。
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる
スクロールさせる

元は色で指定されていた背景を画像に変える方法はつづきで紹介します。
<背景に画像を使いたい!へつづく>

関連ページ)
背景の色を変えたい!
・背景の画像を変えたい!
背景に画像を使いたい!


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
もともとないものからはどうすればよろしいのでしょうか。ぜひ教えてください。
clownさんへ
もともとない場合は「背景に画像を使いたい!」
http://rgrg.blog61.fc2.com/blog-entry-141.html
の方を参考にしていただけるとよいかと思います。よろしくお願いします。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/140-10345f58   

Template Designed by DW99