経済指標flg_JPN.jpg
日本
flg_US.jpg
米国
flg_EU.jpg
EU
flg_UK.jpg
英国
flg_AUS.jpg
豪州
flg_NZ.jpg
NZ
雇用統計7/30(火)8/2(金)8/6(火)
政策金利8/1(木)8/6(火)8/7(水)
GDP8/15(木)
前月以前の経済指標スケジュールはこちら

2008年06月08日

CSS編集D:背景画像を変更する

header_15

こんにちは、ほくほくです。

今日は、ブログのデザインを変更するお話。

前回までで、左右のサイドバーとメインコンテンツの幅を広げ、ページ幅と一致するようになっています。
今回は、背景画像を変更してみましょう。

これが終わると、これまでの一連の変更で崩れた全体のデザインが、一旦綺麗にそろいます。

ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)
にほんブログ村 為替ブログへ ランキングクリック&応援、よろしくお願いしますexclamation にほんブログ村 為替ブログ FX システムトレード派へ
ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)ー(長音記号1)

なお、今回はテンプレートの画像を編集して設定する方法を記載しますが、自分の好きな画像を背景に設定する場合も、方法は同じになります。
自分の好みに応じて、好きな画像を背景にしてみて下さい。


さて、前回(関連記事)までで、ブログのデザインはこうなっています。

design_20080413_12.JPG

画像だけが、ページサイズに合っていない状態です。

この画像を、ページサイズに合わせて変更するわけですが、今回はこのテンプレートの画像をそのまま活用し、サイズだけ変更して再設定することにします。


まずは、テンプレートの背景画像を、PCのローカルに保存しましょう。

やり方は、画面上の背景画像のところで右クリックして「名前をつけて背景を保存」を選択し、ファイルを保存するだけです。


背景画像をPCのローカルに保存したら、この画像を編集します。
画像加工ソフトはたくさんあるので、お好きなものを使って下さい。
ここでは、今回たまたま使用したPictBearというツールで説明します。

このツールはフリーなので、Vectorなどで手に入ります。
 ・Vector

このPictBearを起動し、「ファイル」⇒「開く」で先ほど保存した画像を開きます。

20080427_01.JPG


ファイルを開いたら、「イメージ」⇒「イメージサイズの変更」を選択します。

20080427_02.JPG


この次に開かれる画面で、画像の幅を“1000(px)”にします。

以上の作業が終わったら、名前をつけて画像を保存して、画像の編集作業は終了です。
これで、幅1000pxの背景画像ができました。


次に、作成した画像をブログにアップロードしましょう。

Seesaaブログでは、「マイ・ブログ」の「記事投稿」⇒「ファイルマネージャ」画面でファイルをアップロードすることができます。

アップロードしたら、アップロードしたファイルのパスを記録しておきましょう。


最後に、CSSの設定変更です。

CSSの編集画面で、“#container”の中の“background-image:url”の箇所を探してください。

20080427_03.JPG

ここに記載されている
 “https://blog.seesaa.jp/img/bg/green_leaves/head.jpg”
というパスを、先ほどファイルマネージャでアップロードした新しい背景画像のパスに書き換えます。


以上の作業を行って「プレビュー」ボタンを押すと、こんなふうになります。

20080427_04.JPG

ようやく、画像がページに合った形になりました。

ここまでで、ページ全体のレイアウト変更については作業完了です。
ここから先は、サイドバーのボックスの枠線変更などといった、細かな設定作業になっていきます。

今回はこれぐらいにしておきましょう。

(以下、次回です)


<CSS編集関連記事>
  ◆CSSでブログのデザインを変えてみよう!
  ◆@CSS編集の基本
  ◆Aページ全体の幅を広げる
  ◆B右サイドバーの幅を広げる
  ◆C左サイドバーとメインの幅を広げる
  ◆D背景画像を変更する
  ◆E記事コンテンツに枠線をつける
  ◆Fサイドコンテンツに枠線をつける

<参考書>
  ◆スタイルシート辞典
  ◆HTMLタグ+スタイルシート辞典ちび

▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
1日わずか15分!半年で運用利回り17.8%の簡単システムトレード
  ◆投資資金の稼ぎ方
タグ:ブログ
posted by o(^0^)o ほくほく at 18:47 | Comment(0) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。