はてなブログでCSSを使って色の指定
こんにちは、雑記ラビリンスです。
ブログを書き始めてからレイアウトについて気になってきませんか？
そしてブログを書いているとき、色を使いたくなる時ってあると思います。
そういうとき、CSSを使うと簡単に色を使うことができます。
- HTML編集
- デザインー＞カスタマイズー＞デザインCSS
で可能です。
例として下にブロックを一つ配置しました。
<div style="border: solid 2px black; width: 20%; height: 30px;"></div>
コードとしては、こんな感じにしました。
これはHTML編集で直接書きました。
border:枠線のスタイル。
width:幅
height:高さ
を表しています。
この場合ですと、高さ30px、幅は全体の20%、枠線は太さ2pxの
黒い直線となります。
枠の中を赤にしたいときは
<div style="border: solid 2px black; width: 20%; height: 30px;
background-color: red;"> </div>
background-colorというプロパティを使って
英語のredと書けば背景が赤になってくれます。
でもなんて表現していいかわからない色ってあると思います。
赤っぽい色とか、でも赤とは少し違う。
そういう場合に
というリンク先がお役に立ちます。
色の名前が一覧表になっておりますので、表現しにくい
色も見つけることができます。
またこのサイトの右上にあるツールを使えば、よりあなたが
使いたい色に出会うことができると思います。
また下の四角にマウスを乗っけると色が変わります。
色が変わるよ
:hoverという疑似クラスを使って実装できました。
#color:hover{
background-color:"yellow";
}
これは2番の方法で記述しました。
こんな遊びができるのもCSSの面白いところです。
また、CSS全体については
というサイトがとても詳しくて便利ですので
ブログのレイアウトに関してとても重宝するかと思います。
まだまだレイアウトに関しては試行錯誤の連続なので
分からないことが多いですが、より見やすいサイトにできればいいなと
思っております。
おしまい。
下の記事もあわせてどうぞ
