今、作っている他のブログでリストが付いているものがありました。
・お勉強
・ブログ
・3月
このようになっている物はCSSでリストと呼ばれています。
・だけではかなり寂しいのでこの・を画像にしてみます。
該当のCSSを見つけだして。。
今回は下記のような部分
div#utilities dl dd ul li {
margin: 0.5em 0;
list-style-image:url("/img/ico2.png");
}
list-style-image:url("/img/ico2.png");
が追加した部分です。
そうして・だった部分が画像にすり替わりました。
リストに色が付いただけでWebもがらりと印象が変わります。
テキストが寂しいので文字に影を付けてみました。
ブログのタイトル部分に影が付きました。
記述としては、該当のCSS部分を見つけだして
.asset-name a {
text-decoration: none;
text-shadow:#000 3px 3px 2px;
}
今回はこの部分です。
text-shadow:#000 3px 3px 2px;
この行を追加しただけです。
text-shadow:（カラー）
その後の記述については
ピクセルの指定で左から順番に
１，影の位置で右方向に、どの程度移動した位置か
２，影の位置で下方向に、どの程度移動した位置か
これを指定します。ちなみにマイナスで指定してあげれば反対方向に
影を付ける事も可能です。
３，一番右の値は影のぼかす範囲をしていしてあげられます。
これで、ブログの文字が一層引き立つはずです！
お試しあれー。
CSSをいじっていて背景の色を変えたり背景に画像を指定する
場面が増えてきました。
CSSでは一部分の背景の色を変えたり、画像を組み込む事が
可能になっています。
前回はヘッダの画像で下記のような指定をやってみましたが
div#header {
background-image:url("http://lunch-blog.com/img/top.png");
background-repeat: no-repeat;
}
background-image:url("http://lunch-blog.com/img/top.png");
この部分を
background:#ff9900;
にすれば背景の色がオレンジになったりします。
ヘッダだけではなく、ブログの題名部分であったり
左右にあるウィジェットと呼ばれる部分の題名部分なども
同じく画像を指定したり色を変えたりが可能になってきます。
さらに、属性と呼ばれる文章を下に追加するだけで
同じ画像の横方向への繰り返し
background-repeat:repeat-x;
同じ画像の縦方向への繰り返し
background-repeat:repeat-y;
繰り返さない
background-repeat:non-repeat;
など様々な選択が可能になります。
いつもホームページ制作ネタなので
今日はトラブルネタにしてみます。
いつものようにログインしようと
URLの後ろに
/mt/
を付けてログインしようとした所、急に
http://swzaob.com/mt/
このページに飛ばされました。
なんでログインできないのだろう？
と不思議に思っていましたが
実際のログイン方法が違ったみたいです。
http://swzaob.com/mt/mt.cgi
ここに飛ぶのが正解みたいです。
なんでいきなりいつものようにログインできなくなったか？
それはカテゴリに『MT』というものを作ったからでした。
最初ログインできない時は焦りましたが
正解がわかってしまうとあっさりでした。
こんにちは！
今日は他のサイトのヘッダの画像も作ってみました。
そしてCSSにバックグラウンド指定で組み込むのですが
今回は組み込み方の紹介です。
まず、対応しているCSSからヘッダーの部分を探します。
div#header {
background-image:url("http://lunch-blog.com/img/top.png");
background-repeat: no-repeat;
width:1000px;
height:150px;
}
このサイトではこの部分でした。
background-image:url("http://lunch-blog.com/img/top.png");
この部分で背景にイメージファイルで
http://lunch-blog.com/img/top.png
の画像を組み込むという意味になってます。
また、これを絶対パスと言います。
相対パスにすると
/img/top.png
この様に指定しても画像は入ります。
次に
background-repeat: no-repeat;
この文章を入れます。
この文章の意味は背景画像を繰り返し表示させない（リピートさせない）
というような意味になります。この文章を入れないと背景画像が繰り替えし表示され
ちょっと表示がおかしくなります。
最後に
width:1000px;
height:150px;
これは画像の縦幅のピクセル（width)
横幅のピクセル（height)
これを指定してあげています。
あとは、元の画像によってまた違うタグを使ったりして正常に表示させるようにしてあげます。
ここ最近でブログもがらっと変わりました。
一個前のブログから背景の色も、TOPの画像も文字のサイズも
変わっていると思いますが、これはほとんどCSSという物を編集して変化を加えました。
CSSはスタイルシートとも呼ばれていて、視覚的な部分に変化を与えるものです。
拡張子は.css
内容はというと..
.asset-name {
font-size: 20px;
background:url(http://swzaob.com/img/bb.png)no-repeat;
}
こんな感じのものが何度も永遠と下まで続いています。
例えば、上の文章だと
この部分のフォントのサイズは20ピクセルだとか画像はこれだとかを指定しているようです。
このCSSですが駆け出しの僕には大変な作業でした。
MT(ムーバブルタイプ)はCSSをいじればいろいろと出来そうなので、これからもちょこちょこ紹介してみます。
