カテゴリ
skin編集投稿&表示方法 コメント欄 背景の変更 メモ帳 その他 タグについて skin付属 スキン解体 はじめに 以前の記事
2010年 12月2009年 06月 2009年 05月 2006年 08月 2006年 07月 2006年 05月 2006年 04月 2006年 02月 2006年 01月 2005年 12月 2005年 11月 メモ帳
ご訪問有り難うございます。
なるべく分かり易いように 努力致します。 その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
|
タイトル部分に枠(罫線)を追加する -その2-
ハイー、今回は前回に続いて「タイトル部分に枠を追加する」です。
で、実際にTOPの部分に枠(罫線)を追加して行きましょう。 (少しずつ難しく成っていきます。 画像が見えにくい場合は、画像を直接クリックしてください。 別ウィンドウが開きます。 また、実際に作業を行う前に、軽く全体に目を通して下さい。) 前回の一番最後にクリアホワイトのHTML枠内の全体の全部を メモ帳に保存しておいたタグをメモ帳からコピーして、 エキサイトさんにログインしてマイブログの マイスキンのHTML編集枠の全体にあるタグを全部削除して、 クリアホワイトのタグをペーストします。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ここで一旦プレビューすると、 TOPの部分に枠(罫線)が追加されいることが分かります。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 次はクリアホワイトのタグをペーストしたことで、 元からあった(ここでは大理石ですが)タグの数値も クリアホワイトに変更されてますので、元に戻す必要があります。 上から順に行っていきますね。 (ここで、-その1- の最後に現在使用しているスキンのタグの コピペか保存しておいて下さい が役立つ訳ですね) メモ帳を見ながらでもコピペでもいいので、数値を変更します。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ HTML編集枠の変更は一旦、これで終了です。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 次は追加したTOPの枠(罫線)内に色を付けます。 これはCSS編集枠内の DIV.HEADER の上辺りに DIV#TOP { BACKGROUND-COLOR : #お好きな色 : } と入力します。↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると、↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ しかし、枠全体にはカラーが出ていません。 そこで、 PADDING : 25PX; (数値はお好みで) を BACKGROUND-COLOR : #お好きな色 : の下に追加入力します。↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると、↓ ハイー、これで基本は終了です。 保存を押せば、適用されます。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ で、ここからはオマケを2つほど。 上の PADDING : 25PX; で「お好きな数値」をと書きましたが、 100PX;と入力した場合 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると、↓すんごいことになってます。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ タイトルとURLだけはもう少し左側に寄せて置きたい。と云う場合は、 DIV#TOP { BACKGROUND-COLOR : #お好きな色 : PADDING : 100PX; } の100PX;の後ろに15PX; と入力します。 で、正確には 100PX 15PX; となります。 数値が2つ以上並ぶ場合は 最初の数値には ; は入力せず、 最後の数値にだけ ; が入ります。 また 15PX もお好みでいい訳ですが、全体のバランスを見ながら、 数値を入力しましょう。↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると、↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ もう1つ、 TOPと下のメモ欄と投稿欄の間にアクセントしてラインを入れたい場合は、 上の DIV#TOP { BACKGROUND-COLOR : #お好きな色 : PADDING : お好きな数値PX; } に BORDER-BOTTOM : 5PX SOLID #お好きなカラー を追加入力します。↓ 5PX はラインの幅ですので、これもお好みで。 また、当ブログのコメント欄にある点線で表示させた場合は、 SOLID を dotted に変更するだけです。 別にラインなんかいらないやぁーって方もオマケの話ってことで・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると、↓ 今回はここまでです。 次回はTOP と メモ帳&本文欄の間にスペースを作るを予定してます。
by skin_dasu
| 2006-04-27 22:24
| skin編集
| △TOP
|