こんにちは、ほくほくです。
今日は、ブログのデザインを変更するお話。
前回までで、左右のサイドバーとメインコンテンツの幅を広げ、ページ幅と一致するようになっています。
今回は、背景画像を変更してみましょう。
これが終わると、これまでの一連の変更で崩れた全体のデザインが、一旦綺麗にそろいます。
ランキングクリック＆応援、よろしくお願いします
なお、今回はテンプレートの画像を編集して設定する方法を記載しますが、自分の好きな画像を背景に設定する場合も、方法は同じになります。
自分の好みに応じて、好きな画像を背景にしてみて下さい。
さて、前回（関連記事）までで、ブログのデザインはこうなっています。
画像だけが、ページサイズに合っていない状態です。
この画像を、ページサイズに合わせて変更するわけですが、今回はこのテンプレートの画像をそのまま活用し、サイズだけ変更して再設定することにします。
まずは、テンプレートの背景画像を、PCのローカルに保存しましょう。
やり方は、画面上の背景画像のところで右クリックして「名前をつけて背景を保存」を選択し、ファイルを保存するだけです。
背景画像をPCのローカルに保存したら、この画像を編集します。
画像加工ソフトはたくさんあるので、お好きなものを使って下さい。
ここでは、今回たまたま使用したPictBearというツールで説明します。
このツールはフリーなので、Vectorなどで手に入ります。
・Vector
このPictBearを起動し、「ファイル」⇒「開く」で先ほど保存した画像を開きます。
ファイルを開いたら、「イメージ」⇒「イメージサイズの変更」を選択します。
この次に開かれる画面で、画像の幅を“1000（px）”にします。
以上の作業が終わったら、名前をつけて画像を保存して、画像の編集作業は終了です。
これで、幅1000pxの背景画像ができました。
次に、作成した画像をブログにアップロードしましょう。
Seesaaブログでは、「マイ・ブログ」の「記事投稿」⇒「ファイルマネージャ」画面でファイルをアップロードすることができます。
アップロードしたら、アップロードしたファイルのパスを記録しておきましょう。
最後に、CSSの設定変更です。
CSSの編集画面で、“#container”の中の“background-image:url”の箇所を探してください。
ここに記載されている
“https://blog.seesaa.jp/img/bg/green_leaves/head.jpg”
というパスを、先ほどファイルマネージャでアップロードした新しい背景画像のパスに書き換えます。
以上の作業を行って「プレビュー」ボタンを押すと、こんなふうになります。
ようやく、画像がページに合った形になりました。
ここまでで、ページ全体のレイアウト変更については作業完了です。
ここから先は、サイドバーのボックスの枠線変更などといった、細かな設定作業になっていきます。
今回はこれぐらいにしておきましょう。
（以下、次回です）
＜CSS編集関連記事＞
◆CSSでブログのデザインを変えてみよう！
◆①CSS編集の基本
◆②ページ全体の幅を広げる
◆③右サイドバーの幅を広げる
◆④左サイドバーとメインの幅を広げる
◆⑤背景画像を変更する
◆⑥記事コンテンツに枠線をつける
◆⑦サイドコンテンツに枠線をつける
＜参考書＞
◆スタイルシート辞典
◆HTMLタグ+スタイルシート辞典ちび
▼▼▼ 年利20%以上の簡単FXシステムトレード『o(^0^)o ほくほくFX』 ▼▼▼
◆投資資金の稼ぎ方タグ：ブログ
