so-netブログカスタマイズ その6 画像の適用とレイアウトの修正

終盤に近づいてきました。
まず、作成した画像を表示させます。

最初に記事管理→ファイル管理から、前回作成した画像を全部アップロードします。

次に、CSSをテキストエディターで開き、banner_bg.jpgというファイル名があるところを探します。
ツールバーに検索窓を表示させておくと便利です。
33行目くらいに、background:url("/_common/skins/854/images/banner_bg.jpg") no-repeat 0px 0px;　という行があるはずです。

画像のリンク先の記述をみつけたら、アップロードした画像のURLを探します。
記事管理→ファイル管理のところにある画像のファイル名（banner_bg.jpg）をクリックします。「元ファイルを見る」をクリックすると画像が表示されますので、ブラウザーのURL欄を見て、『https://blog.so-net.ne.jp/_images/blog/_○○○/○○○○○○○/banner_bg.jpg』の『/_images』以降をコピーします（下線部）。

コピーしたURLを、CSSの background:url("/_common/skins/854/images/banner_bg.jpg") no-repeat 0px 0px;　の（”　”）内と置き換えます（下線部）。
『background:url("/_images/blog/_○○○/○○○○○○○/banner_bg.jpg") no-repeat 0px 0px;』となります。スラッシュ（　/　）が抜けないように注意してね。

他の3つの画像も同じように探してURLを置き換えます。

他に、今回は使いませんが同梱されている画像ファイル『main_bg.jpg』、『side_bg.jpg』もCSS内に記述がありますので、このファイル名がある行を/*　～　*/　でくくってコメントアウトします。
例：　290行　/* background:url("/_common/skins/854/images/side_bg.jpg") no-repeat; */

ここまでできたらテンプレート管理にCSSをコピーして貼り付け、ブログを表示させてみて変更されたかどうか見てみましょう。

できました（早っ




まだメイン部分の幅を変えていないので、YouTubeは右端が切れたままです。
たとえば、CSSの100行目くらいに、
/* Articles */

#main {
width:570px;
overflow:hidden;
/* background:url("/_common/skins/854/images/main_bg.jpg") no-repeat; */
}
という記述があります。このように、ところどころに幅を指定するwidthというプロパティが入っています。

ここでwidth：570px　となっているのを変更します。
全体の幅は元は770pxあったので、230px増やしています。左右のカラム幅は変えていないので、メイン部分の幅は単純に570＋230＝800pxとなります。変更が必要な部分をこんな感じで変えていきます。

変更する行は、

103行　width:570px;
109行　width:540px;
584行　width:380px;
585行　_width:378px;
591行　width:370px;
625行　width:370px;

この幅の数字を全て230を足した数字にしてください。
できたらまたテンプレート管理でCSSを貼り付けて変更します。

これで完成に近くなってきました。
こちらで実物のサイトを見られます。→GIRLS ON FILM

タグ：ブログ カスタマイズ

コメント 1

参考にさせていただきました。
ありがとうございます。
(^_0)ノ
by cheese999 (2013-02-16 23:37)