webでお絵かき

アクセスカウンタ

zoom RSS ■ウェブリブログのカスタマイズ A

<<   作成日時 : 2005/01/09 09:59   >>

ブログ気持玉 0 / トラックバック 2 / コメント 0

前回の説明は「HTML」や「タグ」などもよく知らない人にとっては不説明でした☆
ので、一から説明しますね。
(・・・と言っても私がすべて分かっている訳ではナイ。)
ちょっと長いかもしれませんが、お付き合い下さい。

まず、ウェブリブログ(ウエブリブログじゃなくエは小さいェらしい・・・うーむ・・・)の「トップ編集/機能」を開きます。
した〜の方に、「CSS編集」っていうのがありますね。
CSSって言うのが、スタイルシート(Cascading Style Sheetsの略)の事。
上級者向け、と書いてありますが構わず開く。
(いや、どこまでが中級者でどこまでが上級者のボーダーラインはないし、初心者がやっちゃイケナイとも書いてないし。)
そしたら枠(フォーム)の中にずら〜っと、色々書いてありますよね。

私は一瞬ここで怯んで、挫折しかけた(苦笑)

この中にあるのが、スタイルシートの設定画面。
基本的な事はここで設定します。
新規に記事を作成する時に「デザインテンプレート」を使うと、そのテンプレートと、設定したCSSの混ざったページになります。
「デザインテンプレート選択」で、「CSS編集用(デザイン無し)」を選択すると、まんま、この基本的な画面が作成されます。

分かる人は、ここで色々設定して、自分の好みにあったページを作っていく。
ちょっとだけ分かる、私のような人間はいじくってみて試行錯誤で頑張ってみる。
だから、説明は私の理解した範囲ね、ごめんなさい。
以下、そのまま、その画面の基本的なところに説明を加えてみました。
_____________________________________

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
background-color:#任意の色;
background-image:url("http://画像のURL");
}
↑間違って「}」を消さないでね。
これで、背景色(color)が設定されるか、背景画像(image)が敷き詰められます。
「color」「image」どちらかの記述でオッケーです。

___________________________________
/* コンテナ(広告・フッタを除くメイン領域) */
#container{
background-color:#任意の色;
background-image:url("http://画像のURL");
}
これで、記事の中の背景色(color)が設定されるか、背景画像(image)が敷き詰められます。
bodyのところと同じで、「color」「image」どちらかの記述でオッケーです。
すこし項目飛ばして下に進みます。

___________________________________
/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
background:#任意の色;
background:url("http://画像のURL") no-repeat;
height:(画像の高さのピクセル数を入れます)px;
position:relative;
}
これで、タイトル色、画像が入れ替わるのです。
ここだったら、これね。
更にすこし項目飛ばして下に進みます。

___________________________________
/*---------------- プロフィール ----------------*/
#profile{
background-color:#任意の色;
background-image:url("http://画像のURL");
}
ここも同様、プロフィール画面の背景色か背景画像が設定できます。

___________________________________
ここまで出来れば、取り敢えず体裁がつきます。
あとは同じようにしていくだけなので。
細かく設定するには物足らないけど、初心者ならコレで大丈夫・・・と思う。

ただし、これだけしか設定してない場合、
新規記事を作成する時には、テンプレートを使った方が無難です。
他に色々、デザイン的に面白くない事が起こるのよねぇ〜・・・。

因みに・・・不具合が起こっても一切関知しませんのでご了承を。
自己責任で設定して下さいね〜。
(「初期値をフォームに入力 (元に戻したい場合)」を押せば、
初期化出来るから安心してね^^;)


●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?
HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(2件)

タイトル (本文) ブログ名/日時
ウェブリブログのCSS編集
このブログの主旨からは外れてしまうんですけど、CSS(カスケーディングスタイルシート)を使ったウェブリブログのカスタマイズ方法を解説している柴成さんの「webでお絵かき」の記事■ウェブリブログのカスタマイズに刺激を受けまして、私もちょっとだけやってみます。 ウェブリブログではせっかくCSSを編集することができるのに、CSSのどの部分が実際のどの場所に対応しているのか分かりにくくて、試行錯誤でやってみるしかないという面があります。もう少し詳しいヘルプが欲しいところですね。 実は私はCSS... ...続きを見る
海外ドラマ私的ブログ@WebryBlog
2005/01/09 23:56
↑ブログの記事別アクセスアップ検証してみたり↑↑
ブログ始めて2ヶ月が経過しました。 せっかくアクセスレポート機能がついたから、記事別アクセス検証してみようかと。 (あるものは何でも使う主義さっ♪) ...続きを見る
webでお絵かき@WebryBlog
2005/03/07 00:13

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
■ウェブリブログのカスタマイズ A webでお絵かき/BIGLOBEウェブリブログ
文字サイズ:       閉じる