« ココログの設定されているスタイルシートの確認 | トップページ | ubuntu 11.04 firefoxにはcssは全く反映されず »

2011年6月10日 (金)

とりあえずCSSを作ってみました

まずは最初の一歩!

なんでも、とりあえずチャレンジしてみなければ始まらないということで、cssの設定も行ってみました。

手順は次のとおりです。

cssをエディタで作る

参考書を片手に、こんな感じの装飾があるといいなとエディタでcssファイルを作りました。クラスとして作って、多くのタグに使えるようにしました。できあがった内容は次のとおりです。

.kita1 { 
 width: 500px;
 border-color: #cccccc;
 border-style: none none solid solid;
 padding: 5px 0em 0em 1em;
 border-bottom-width: 5px;
 border-left-width: 1.5em;
 }

.kita2 {  
 width: 400px;
 border-color: #cccccc;
 border-style: solid none solid none;
 padding: 5px 0em 0em 1em;
 border-bottom-width: 5px;
 border-left-width: 1em;
 }

.kita3 {
 width: 300px;
padding: 0em 0em 0em 0.5em; border-color: #CCCCCC; border-style: none none dotted solid; border-bottom-width: thin; border-left-width: thick} .kitaq { width: 500px; border-color: #CCCCCC; border-style: dotted; border-width: thin; padding: 0.5em 0em 0.5em 0.5em; } .kitaq2 { width: 500px; border-width: thin; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #CCCCFF; border: #CCCCCC; border-style: none } .kitaqg { width: 500px; border-width: thin; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #CCCCCC; border: #CCCCCC; border-style: none; }

上記の内容を登録する

管理ページの「デザイン」タブから「カスタムCSS」を出して、そこに貼り付けます。

htmlのタグにclass="クラス名"を追加する

例えばh1タグなら

<h1 class="kita2">これはh1にCSSを使ってます</h1>

などと書く。

以下は上の例を実際にh2タグとpタグに使った例です。

h2 kita1

p kita1

h2 kita2

p kita2

h2 kita3

p kita3

h2 kitaq

p kitaq

h2 kitaq2

p kitaq2

h2 kitaqg

p kitaqg

少しずつ、カスタムなcssを増やしていきたいものですね。

« ココログの設定されているスタイルシートの確認 | トップページ | ubuntu 11.04 firefoxにはcssは全く反映されず »

CSS」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/575454/51907343

この記事へのトラックバック一覧です: とりあえずCSSを作ってみました:

« ココログの設定されているスタイルシートの確認 | トップページ | ubuntu 11.04 firefoxにはcssは全く反映されず »

2014年11月
            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            
無料ブログはココログ