わたしがブログのCSS編集をするときの流れです.あんまり参考にはならないかも...

使う画像をすべてオリジナルにするか,フリー画像を加えるかなどで手順が多少違うときもあります.

ふだんはひでぶぅさんのところのフリー画像からレイアウトを決めて,CSSを作っているので.その手順をば.


1.だいたいこんなのにしたいな~というイメージを漠然と決める.


大抵は,秋っぽいかんじ,冬っぽいかんじ...と大雑把に.

フリー画像を見ているうちに大雑把なイメージが変わることもあります.

今回は 「冬っぽいかんじ」 です.冬っぽい?


2.ひでぶぅさんのサイト で,レイアウトの核となるフリー画像を決めてダウンロード.


ブログで使う画像すべてをフリー画像でまかなうことができないため,

まずはデザインのメインとなる画像を1つ決めます.たいていは,タイトルに使う画像か,背景画像.

今回の場合はブログタイトル部分に使っている白抜きの家と木の画像.


3.1で大雑把に決めたイメージにあわせて,使えそうな画像をいくつかダウンロード.


今回の場合は 記事の日付部分やサイドバータイトル部分などに使っている「★」,コメント&TBタイトル部分の画像,フッター風に配置している「サンタ」と「プレゼント」の画像.


4.全体のデザインを大雑把に決めて,ノートに描く


↓ こんなかんじです...(実物)


CSS下書き左 CSS下書き右


ブログ全体像をノートの右側に大雑把に.

全体のレイアウトを決めてから,

右側に,全体,メイン,サイド,間隔の横幅や使用画像の縦横幅を細かく追記.

左側には,配色のRGBや使用フォントなどのメモを記載.


5.イメージにあわせて画像を二次加工,足りない画像作成や,画像サイズの微調整などを行う


今回の場合は,タイトル画像の縦横幅修正,サイドバーのタイトル,日付部分,フッター風画像など二次加工で作成,記事タイトル部分の画像を作成(オリジナル).

画像作成後,4の縦横幅のメモを修正.

利用ソフトは,Fireworks,PaintShop.たまにPhotoShopを使うときも.


6.ノートを見ながらオフラインでCSSを書き上げる


ノートの内容は上記の画像そのまま.あれを見てオフラインで表示確認をしながらCSSを書きます.

横幅のピクセル数が重要になってきますので.

利用エディタは,TeraPad.

表示確認は,IE,Fxにて.トップページ,個別の記事ページ,読者一覧などの一覧ページを確認.

慣れないうちは,ブログのHTML&詳解HTML&CSS&JavaScript辞典をちょこちょこ確認しながら書いていました.

現在はノートだけ.本の方はたまに見ますけれど...


7.「画像フォルダ」に使用画像をアップロード


アップロード後に6で書いたCSSの画像URLを修正.


8.「デザインと機能」の「CSS編集」で,CSSをコピー&ペーストして保存


それまでのCSSはすべて削除して(パソコンへ別ファイルを作って保存),

7で画像URLを修正したCSSを貼り付けて保存.

その後,オンラインでIE,Fxにて,トップページ,個別の記事ページ,読者一覧などの一覧ページ,検索結果ページを確認.CSSを微調整して完成★


↓ 完成後 (ちなみに完成前はデフォルトの「ブルー」)


2005fuyu


CSSを作っていくうちに,最初にイメージしてノートに描いたものとは,違ってきますね~(^^;

この冬バージョンのレイアウトは,ひでぶぅさんのテンプレートをブログ用に改造したものです.

ブログライクなかんじのテンプレートだったんですが,ホームページ用に作ってあるレイアウトの画像なので,やっぱり多少の二次加工を必要としました.

なかなかブログにそのまま使えるフリー画像ってないですからね...(^^;;;