人気ブログランキング | 話題のタグを見る

○○さんの為のエキサイト・スキン編集ブログ
by skin_dasu
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
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編集枠の全体にあるタグを全部削除して、
クリアホワイトのタグをペーストします。
タイトル部分に枠(罫線)を追加する -その2-_a0064894_22271398.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
ここで一旦プレビューすると、
TOPの部分に枠(罫線)が追加されいることが分かります。

タイトル部分に枠(罫線)を追加する -その2-_a0064894_2231575.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
次はクリアホワイトのタグをペーストしたことで、
元からあった(ここでは大理石ですが)タグの数値も
クリアホワイトに変更されてますので、元に戻す必要があります。
上から順に行っていきますね。
(ここで、-その1- の最後に現在使用しているスキンのタグの
コピペか保存しておいて下さい が役立つ訳ですね)

メモ帳を見ながらでもコピペでもいいので、数値を変更します。

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22323689.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22383637.jpg


HTML編集枠の変更は一旦、これで終了です。





・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
次は追加したTOPの枠(罫線)内に色を付けます。
これはCSS編集枠内の DIV.HEADER の上辺りに

DIV#TOP {
BACKGROUND-COLOR : #お好きな色 :
}
と入力します。↓

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22405874.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると、↓


タイトル部分に枠(罫線)を追加する -その2-_a0064894_22464193.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
しかし、枠全体にはカラーが出ていません。
そこで、
PADDING : 25PX; (数値はお好みで)

BACKGROUND-COLOR : #お好きな色 :
の下に追加入力します。↓
タイトル部分に枠(罫線)を追加する -その2-_a0064894_22493253.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると、↓


タイトル部分に枠(罫線)を追加する -その2-_a0064894_22505866.jpg


ハイー、これで基本は終了です。
保存を押せば、適用されます。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
で、ここからはオマケを2つほど。

上の PADDING : 25PX; で「お好きな数値」をと書きましたが、
100PX;と入力した場合

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22565726.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると、↓すんごいことになってます。


タイトル部分に枠(罫線)を追加する -その2-_a0064894_22574645.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
タイトルとURLだけはもう少し左側に寄せて置きたい。と云う場合は、

DIV#TOP {
BACKGROUND-COLOR : #お好きな色 :
PADDING : 100PX;
}
の100PX;の後ろに15PX; と入力します。
で、正確には  

100PX 15PX;

となります。 
数値が2つ以上並ぶ場合は 最初の数値には ; は入力せず、
最後の数値にだけ ; が入ります。
また 15PX もお好みでいい訳ですが、全体のバランスを見ながら、
数値を入力しましょう。↓

タイトル部分に枠(罫線)を追加する -その2-_a0064894_2258928.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると、↓

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22585351.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
もう1つ、
TOPと下のメモ欄と投稿欄の間にアクセントしてラインを入れたい場合は、
上の

DIV#TOP {
BACKGROUND-COLOR : #お好きな色 :
PADDING : お好きな数値PX;
}


BORDER-BOTTOM : 5PX SOLID #お好きなカラー
を追加入力します。↓

タイトル部分に枠(罫線)を追加する -その2-_a0064894_22591325.jpg


5PX  はラインの幅ですので、これもお好みで。
また、当ブログのコメント欄にある点線で表示させた場合は、
SOLID を dotted に変更するだけです。
別にラインなんかいらないやぁーって方もオマケの話ってことで・・・

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると、↓
タイトル部分に枠(罫線)を追加する -その2-_a0064894_2259411.jpg


今回はここまでです。
次回はTOP と メモ帳&本文欄の間にスペースを作るを予定してます。
by skin_dasu | 2006-04-27 22:24 | skin編集 | △TOP
<< タイトル部分に枠(罫線)を追加... タイトル部分に枠(罫線)を追加... >>