「夜空」テンプレートのカスタマイズ(1)・・・壁紙を貼る

CSSカスタマイズを使って「夜空」テンプレートをカスタマイズする方法です。

「夜空」テンプレートはオリジナルではこんな感じ。

同じ「夜空」テンプレートを使っている住人の方にも参考になるかと思いエントリーしておきます。自分でもどうやってカスタマイズしたか忘れそうなので、覚えのためにも。

さて、まずはとっても簡単な、背景壁紙の追加です。オリジナルでは「真っ黒」な背景に壁紙を貼ります。

1.壁紙画像を作成する、または拾ってくる
Paintshopなどのソフトを使って自分で作るか、ネット上に数ある「ホームページ素材」を拾ってきます。


これは現在使っている自作の壁紙。欲しければ持ってってもらって構いません。「オレストは死んだ!」とか「ヨカナーンの首をください」とか書いてあってよければ…

音楽系のブログを書いている人ならこんな壁紙もオススメです。
音楽画像素材ウタノツバサでダウンロードしてください。


2.ファイルマネージャーを使ってアップロードする
ウェブリブログの編集メニューから[設定]の「オプション」→[ファイルマネージャー]で、ファイルマネージャーが起動します。壁紙をアップロードします。

3.アップロードした壁紙のURLを確認する
アップロードした壁紙がファイルマネージャーの一覧に表示されているはずです。ファイル名にリンクが付いているのでクリックすると、さっきアップロードした壁紙が別ウィンドウで表示されます。そのウィンドウのアドレスバーを見てください。表示されているURLが壁紙のURL(場所)です。

4.CSS編集でCSSに追記する
ウェブリブログの編集メニューから[設定]の「オプション」→[CSS編集(上級者向け)]を開きます。

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

↓このように追記します。

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background:url("http://ここにさっき確認した壁紙のURLを入れる"); /* 背景に画像を敷きつめる */
background-color:#000000; /* 背景色をカラー名やRGB値で指定する */
}

/* 背景に画像を敷きつめる */
/* 背景色をカラー名やRGB値で指定する */
これはただの「覚え書き」ですから、省略しても構いません。

background-color:#000000;
これは背景を「黒」にします。ここがちょっとばかりミソです。
背景には壁紙を敷き詰めているので本来「黒」にする必要はないのですが、これをやっておかないと、壁紙を読み込むまでのわずかな間、背景が「白」になってしまいます。壁紙を読み込むとすぐに壁紙が敷き詰められますが、全体が紺と黒で暗めの画面になっているので、一瞬現れる背景の「白」がフラッシュしたように見えてあまり感じがよくありません。

「設定」ボタンを押したあと、自分のブログを表示してみてください。壁紙が敷き詰められているはずです。

最近の画像付き記事