Blog
2004/01/24のBlog
[ 20:27 ]
[ CSSを弄り倒そう ]
タイトル部分に画像のみ表示させたい場合タイトル文字が邪魔場合があるだろ？
邪魔なものは綺麗さっぱり消してしまおうぜ！
.myblog-header-text {
display: none;
}上記をコピーして自分のCSSに貼り付けてください。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。
邪魔なものは綺麗さっぱり消してしまおうぜ！
.myblog-header-text {
display: none;
}上記をコピーして自分のCSSに貼り付けてください。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。
2004/01/22のBlog
[ 20:27 ]
[ ヒヨコ君の適当CSS講座 ]
;)
■ ボックス (画像有り）
それぞれの要素にはボックスが生成されます。
ボックスは内容領域・パディング・ボーダー・マージンから構成されます
■ 内容領域 基本的に文字や画像などが入る領域です。
font-size : 大きさ値
color : 色
background-color : 色
width : 横幅
height : 高さ
などがよく使われてますかね。
■ パディング(padding) 文字から枠までの幅です。background-colorも反映されます。
padding-top : 上幅
padding-bottom : 下幅
padding-left : 左幅
padding-right : 右幅
・すべて同じ幅なら一括指定
padding : 幅
それぞれの要素にはボックスが生成されます。
ボックスは内容領域・パディング・ボーダー・マージンから構成されます
■ 内容領域 基本的に文字や画像などが入る領域です。
font-size : 大きさ値
color : 色
background-color : 色
width : 横幅
height : 高さ
などがよく使われてますかね。
■ パディング(padding) 文字から枠までの幅です。background-colorも反映されます。
padding-top : 上幅
padding-bottom : 下幅
padding-left : 左幅
padding-right : 右幅
・すべて同じ幅なら一括指定
padding : 幅
;)
■ ボーダー(border) 枠 (値の順序は任意です)
border-top : 上幅値 線種 色
border-bottom : 下幅値 線種 色
border-left : 左幅値 線種 色
border-right : 右幅値 線種 色
・ すべて同じ値なら一括指定
border : 幅 線種 色
・ボーダー線種について少し。（画像有り）
solid = 実線
dobule = 二重線 (線幅値が小さすぎると実線で表示されます）
dotted = 点線
dashed = 破線
他にもありますが、それほど使わないと思うので省きます。
■ マージン(margin) 枠の外側の幅です。ボックス内のbackground-colorは反映されません。
margin-top : 上幅
margin-bottom : 下幅
margin-left : 左幅
margin-right : 右幅
・ すべて同じ幅なら一括指定
margin : 幅
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
border-top : 上幅値 線種 色
border-bottom : 下幅値 線種 色
border-left : 左幅値 線種 色
border-right : 右幅値 線種 色
・ すべて同じ値なら一括指定
border : 幅 線種 色
・ボーダー線種について少し。（画像有り）
solid = 実線
dobule = 二重線 (線幅値が小さすぎると実線で表示されます）
dotted = 点線
dashed = 破線
他にもありますが、それほど使わないと思うので省きます。
■ マージン(margin) 枠の外側の幅です。ボックス内のbackground-colorは反映されません。
margin-top : 上幅
margin-bottom : 下幅
margin-left : 左幅
margin-right : 右幅
・ すべて同じ幅なら一括指定
margin : 幅
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
2004/01/20のBlog
[ 19:48 ]
[ ヒヨコ君の適当CSS講座 ]
■セレクタの種類 (自信ないので流す程度にご覧ください）
・基本セレクタ(基本グループに対して適応）
指定した要素名（セレクタ）のすべてに適応されます。
h1 { color: #000000 }
・クラスセレクタ(任意特定したグループに対して適応）
指定した要素に対して指定したクラス属性を持つものに適応させます。
.hiyoko { color: #000000 }
・IDセレクタ(1つの内容に対して1適応）
クラスセレクタとほぼ同じなのですが、こちらは1つの内容に対して1つしか指定できません。
※ DoblogにはIDセレクタは使用されてません。
#hiyoko { color: #FF0000 }
疑似クラス(効果のようなものですかね）
文書(HTML)に存在しないようなものに適応。疑似クラスは必ずセレクタの後に記述します
a:link a:active a:visited a:hover 等がそれにあたります
■文書(HTML)での記述
基本セレクタ・・・・基本的なタグ
クラスセレクタ・・・class="hiyoko" 等の任意の名前で記述します。
IDセレクタ・・・・・id="hiyoko" 等の任意の名前で記述します。
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
・基本セレクタ(基本グループに対して適応）
指定した要素名（セレクタ）のすべてに適応されます。
h1 { color: #000000 }
・クラスセレクタ(任意特定したグループに対して適応）
指定した要素に対して指定したクラス属性を持つものに適応させます。
.hiyoko { color: #000000 }
・IDセレクタ(1つの内容に対して1適応）
クラスセレクタとほぼ同じなのですが、こちらは1つの内容に対して1つしか指定できません。
※ DoblogにはIDセレクタは使用されてません。
#hiyoko { color: #FF0000 }
疑似クラス(効果のようなものですかね）
文書(HTML)に存在しないようなものに適応。疑似クラスは必ずセレクタの後に記述します
a:link a:active a:visited a:hover 等がそれにあたります
■文書(HTML)での記述
基本セレクタ・・・・基本的なタグ
クラスセレクタ・・・class="hiyoko" 等の任意の名前で記述します。
IDセレクタ・・・・・id="hiyoko" 等の任意の名前で記述します。
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
[ 00:50 ]
[ ヒヨコ君の適当CSS講座 ]
CSSとは・・・・文書(HTML)の見栄えを定義する為の新しい技術です。
CSSを使うことによりHTMLソース軽減、簡素化する事が出来ます。
HTMLでは実現できなかった複雑なレイアウトも可能にします。
Doblogのデザイン変更で表示されているCSS書式をすべて消してプレビューで見てみるとCSSとはなんぞや？ってのがわかると思います。
(もし間違って設定保存を押してしまった場合、テンプレートを選びなおせばもどります。)
さて始めましょう。
■CSS書式の記述方法を覚えましょう。（すべて半角で記述します。）
セレクタを指定 { をつけ プロパティを指定 ：で区切り 値を決め } で閉じます。
セレクタ → { → プロパティ → : → 値 → }
body { color : #000000 }
セレクタとは？ スタイルを適応する対象の事です。
プロパティとは？ セレクタに対して、どのような効果を付けるかを決めるものです。
(プロパティ:値)を ;（セミコロン） で区切る事により複数指定する事が出来ます。
セレクタ → { → プロパティ → : → 値 → ；(セミコロン） → プロパティ → : → 値 → }
セレクタを ,(カンマ） で区切る事により複数指定する事が出来ます。
セレクタ→, (カンマ）→セレクタ { → プロパティ → : → 値 → }
書き方が違っても下記の記述は同じ意味を持っています。
body { color: #000000; line-height: 130%; background-color: #ffffff }
body {
color: #000000;
line-height: 130%;
background-color: #ffffff
}
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
CSSを使うことによりHTMLソース軽減、簡素化する事が出来ます。
HTMLでは実現できなかった複雑なレイアウトも可能にします。
Doblogのデザイン変更で表示されているCSS書式をすべて消してプレビューで見てみるとCSSとはなんぞや？ってのがわかると思います。
(もし間違って設定保存を押してしまった場合、テンプレートを選びなおせばもどります。)
さて始めましょう。
■CSS書式の記述方法を覚えましょう。（すべて半角で記述します。）
セレクタを指定 { をつけ プロパティを指定 ：で区切り 値を決め } で閉じます。
セレクタ → { → プロパティ → : → 値 → }
body { color : #000000 }
セレクタとは？ スタイルを適応する対象の事です。
プロパティとは？ セレクタに対して、どのような効果を付けるかを決めるものです。
(プロパティ:値)を ;（セミコロン） で区切る事により複数指定する事が出来ます。
セレクタ → { → プロパティ → : → 値 → ；(セミコロン） → プロパティ → : → 値 → }
セレクタを ,(カンマ） で区切る事により複数指定する事が出来ます。
セレクタ→, (カンマ）→セレクタ { → プロパティ → : → 値 → }
書き方が違っても下記の記述は同じ意味を持っています。
body { color: #000000; line-height: 130%; background-color: #ffffff }
body {
color: #000000;
line-height: 130%;
background-color: #ffffff
}
マッタリ更新＆進行しますのでヨロシク！何か質問のある人は、コメントにでも書いてください。
2004/01/16のBlog
[ 16:29 ]
[ CSSを弄り倒そう ]
■ あまり意味はないけどフォーム部品の立体感をなくそうぜ。(既出かも)
input, textarea { border: #828257 1px solid; }
◇ヒヨコ君の適当説明◇
基本セレクタ IDセレクタ classセレクタ 疑似クラスはカンマで区切る事により複数指定可能です。
・input, textarea フォームの部品。
・border 枠の色・枠線の幅・線種
上記の必要とする場所を変更して自分のCSSに貼り付けてください。
背景色も指定できるが部品ごとに指定できないので、お勧めできません。
コメント・トラックバックのフォームにも反映されます。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく
input, textarea { border: #828257 1px solid; }
◇ヒヨコ君の適当説明◇
基本セレクタ IDセレクタ classセレクタ 疑似クラスはカンマで区切る事により複数指定可能です。
・input, textarea フォームの部品。
・border 枠の色・枠線の幅・線種
上記の必要とする場所を変更して自分のCSSに貼り付けてください。
背景色も指定できるが部品ごとに指定できないので、お勧めできません。
コメント・トラックバックのフォームにも反映されます。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく
[ 13:00 ]
[ CSSを弄り倒そう ]
■ 文字を枠で囲ってしまおうぜ！
.blog-text i {
font-style: normal;
color: #009900;
padding: 10px;
border: 3px dotted #999900;
background-color: #F9F9F7;
width: 300px;
display: block;
}
こんな感じになります。(上記はイタリックのタグ使用の例です)
◇ヒヨコ君の適当説明◇
・font-style: normal;は、元のタグ効果を消すものなので、
セレクタ指定で強調又はアンダーラインを指定した場合はそれぞれのものに変更してください。
・color フォントの色
・padding 文字から枠までの幅
・border 枠線の幅・枠の線種・枠線の色
・background-color 背景色
・width 枠の幅
・display指定を変更するとレイアウトが崩れてしまうので注意してください。
上記の必要とする場所を変更して自分のCSSに貼り付けてください。
当然のことながら過去に書いた日記にも反映されます。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。
■ 2004/07/10追記
★ 正しいwidth値の計算方法
width + padding値 *2 で計算してください。
上記の場合なら、300px+10px*2 = 320px
width値が.blogの幅を越えると表示崩れを起こす危険があります。不安ならばwidthを消してしまいましょう。
■ 関連記事
引用文を罫囲みで表示（改訂版） by 土岐正造さん
.blog-text i {
font-style: normal;
color: #009900;
padding: 10px;
border: 3px dotted #999900;
background-color: #F9F9F7;
width: 300px;
display: block;
}
こんな感じになります。(上記はイタリックのタグ使用の例です)
◇ヒヨコ君の適当説明◇
・font-style: normal;は、元のタグ効果を消すものなので、
セレクタ指定で強調又はアンダーラインを指定した場合はそれぞれのものに変更してください。
・color フォントの色
・padding 文字から枠までの幅
・border 枠線の幅・枠の線種・枠線の色
・background-color 背景色
・width 枠の幅
・display指定を変更するとレイアウトが崩れてしまうので注意してください。
上記の必要とする場所を変更して自分のCSSに貼り付けてください。
当然のことながら過去に書いた日記にも反映されます。
デザイン変更する場合プレビュー機能を使いましょう。一応バックアップをお忘れなく。
■ 2004/07/10追記
★ 正しいwidth値の計算方法
width + padding値 *2 で計算してください。
上記の場合なら、300px+10px*2 = 320px
width値が.blogの幅を越えると表示崩れを起こす危険があります。不安ならばwidthを消してしまいましょう。
■ 関連記事
引用文を罫囲みで表示（改訂版） by 土岐正造さん
2004/01/13のBlog
[ 18:37 ]
『下から上へ』 フォトショの力 （既出かな？）
リンク切れ,,,,終了
動ナビニュース 18禁
URL：http://www.i-like-movie.com/03/03frame.html
もう少しまともに作れば写真修正だけでお金貰えそうな勢いですね。
怖い時代になりました。
リンク切れ,,,,終了
動ナビニュース 18禁
URL：http://www.i-like-movie.com/03/03frame.html
もう少しまともに作れば写真修正だけでお金貰えそうな勢いですね。
怖い時代になりました。
2004/01/12のBlog
[ 14:47 ]
;)
blogってなんだ？・・・・ヾ（＞▽＜）ゞﾌﾞｯﾊﾊﾊﾊﾊヾ( >▽)ﾉ彡☆ばんばん!
自分のページみてると、どう見ても、ちんけなホームページにしか見えないのだが・・・・
トラックバックなんて使ったことないし機能的にもいまいち理解していない。あはは
俺 「これでいいのかな・････」
ヒヨコ 「まぁ気楽に行こうぜ、きっと時が解決してくれるだろうよ。」
俺 「そうだね・・・」
背景画像にこれといった意味はないので気にしないでください。
それよりblog_entryに背景色つけるとトラックバック表示が消えるな・・・優先順位でもあるのかな
自分のページみてると、どう見ても、ちんけなホームページにしか見えないのだが・・・・
トラックバックなんて使ったことないし機能的にもいまいち理解していない。あはは
俺 「これでいいのかな・････」
ヒヨコ 「まぁ気楽に行こうぜ、きっと時が解決してくれるだろうよ。」
俺 「そうだね・・・」
背景画像にこれといった意味はないので気にしないでください。
それよりblog_entryに背景色つけるとトラックバック表示が消えるな・・・優先順位でもあるのかな
2004/01/10のBlog
[ 21:42 ]
[ CSSを弄り倒そう ]
書き込みで使えるタグは、強調、イタリック、アンダーラインがあります。
この３つのタグ効果をCSS上で手っ取り早くCOLOR効果に変えてしまおうぜ。
しかし普通に指定してしまうとページ全体に反映されてしまうので、こんな時は限定指定します。
ID・クラス・セレクタは半角スペース等で組み合わせ指定することができます。
例1
.blog-text b { color: #ff0000; font-weight: normal; }
↓簡単な説明
blog-text領域内で強調( b )表示されている文字は赤色で表示。
最後のFONT-WEIGHT: normal; はCSS優先表示を利用して本来のタグ効果を消すためのものです。
.blog-text b { color: #ff0000; font-weight: normal; }
.blog-text i { color: #0066FF; font-style: normal; }
.blog-text u { color: #009900; text-decoration: none; }
文字色やスタイルは、お好きなように変更してください。
変更の際 ”#000000” みたいに引用符で囲まないようにね
上から、強調、イタリック、アンダーラインになっております。
使うものを自分のCSSに貼り付けてください。他の記述にかぶらない場所ならどこでもOKです。
当然のことながら過去に書いた日記にも反映されます。
又、あくまでもCSS使用上での変化です。CSSオフ時の表示状態も考えながら使いましょう。
この３つのタグ効果をCSS上で手っ取り早くCOLOR効果に変えてしまおうぜ。
しかし普通に指定してしまうとページ全体に反映されてしまうので、こんな時は限定指定します。
ID・クラス・セレクタは半角スペース等で組み合わせ指定することができます。
例1
.blog-text b { color: #ff0000; font-weight: normal; }
↓簡単な説明
blog-text領域内で強調( b )表示されている文字は赤色で表示。
最後のFONT-WEIGHT: normal; はCSS優先表示を利用して本来のタグ効果を消すためのものです。
.blog-text b { color: #ff0000; font-weight: normal; }
.blog-text i { color: #0066FF; font-style: normal; }
.blog-text u { color: #009900; text-decoration: none; }
文字色やスタイルは、お好きなように変更してください。
変更の際 ”#000000” みたいに引用符で囲まないようにね
上から、強調、イタリック、アンダーラインになっております。
使うものを自分のCSSに貼り付けてください。他の記述にかぶらない場所ならどこでもOKです。
当然のことながら過去に書いた日記にも反映されます。
又、あくまでもCSS使用上での変化です。CSSオフ時の表示状態も考えながら使いましょう。
2004/01/09のBlog
[ 23:32 ]
[ CSSを弄り倒そう ]
blogインプッの際に使える表現方法は太字、イタリック、アンダーラインがあります。
この限られた３つの表現方法で上手く文章を書くのも大切だと思います。
が手っ取り早く表現方法の幅を広げてしまえ～企画
こんな感じで
好きな色が
３つ使えるんだ
フォントサイズ～スタイルも自由に設定できます。
明後日までに設定方法を公開します。
この限られた３つの表現方法で上手く文章を書くのも大切だと思います。
が手っ取り早く表現方法の幅を広げてしまえ～企画
こんな感じで
好きな色が
３つ使えるんだ
フォントサイズ～スタイルも自由に設定できます。
明後日までに設定方法を公開します。