ブログを書きながら
「こんなふうなことが書きたい」とか
「こんなデザインにしたい」
とか思いつくたびに
ググって調べます。
ただ
ある程度知識がある人にとっては
当たり前のことなのかもわかりませんが
「そのくらいはわかってるでしょ」
ってことは
説明がなかったりということが
よくあります。
わからないことを
どんどん調べていくうちに
最初にわからなかったことが
何だったのか分からなくなったり…。
まあ、できるようになれば
初心者がわからないことを
理解できなくなるのも
あたりまえなのです。
なので、HTMLもCSSも
それがなにかすら、
どんな役割なのかもわからないまま
ブログをはじめたぼくが
少しずつ調べながら覚えたことを
まとめていきます。
ぼくがつかっているのは
livedoorブログなので
livedoorブログ限定の記載もありますが
少しでも参考になればと思います。
Contents
1.記事の一部だけデザインを変えたい
たとえば
記事の一部だけデザインを変更したいとき
を例に解説したいと思います。
実際に記事を書いていて
「ここの背景だけ色を変えたいな」
「この部分だけ四角の枠で囲みたいな」
と思うことがよくあります。
記事のなかで
コードやコマンドの解説をするときなどに
分かりやすくするために
デザインを変えて区別したくなります。
引用コマンドなどを利用して
書いていました。
でも、ある程度書くのに慣れてくると
「好きな色に変えたい」とか
「枠線の種類や色を変えてみたい」とか
思うようになってきました。
そんな場合の手順を例にします。
下準備として
デザインを変更したい部分を
〈div〉でくくり
〈class〉を指定します。
〈div〉と〈/div〉ではさむことで
はさまれた部分を
ひとつのかたまりとして
取り扱えます。
〈class〉は
そのかたまりに
名前をつけるようなものです。
あとでCSSを変更して
デザインを変更するときに
「この部分」と
指示できるように
名前をつけておくわけです。
ここでは "code-display-html" という class にしました。
HTML
<div class="code-display-html">
" 記事の一部だけデザインを変更する"
</div>
2.CSSのどこを変える?
次にページのデザインを決めている
CSSを変更します。
デザインを指定するコードは
調べれば案外でてくるのですが
「どこに書き込めばいいか」
というのは案外教えてくれません。
当然、適当に追加しただけでは
変更されないので
ぼくも最初はつまづきました。
まずはHTMLのなかにclassで指定した
「この部分」というところを
指定する必要があります。
"code-display- html"は
記事ページのなかにあり
livedoorブログでは
記事本文は"article-body"で指定できるので
CSS
.article-body .code-display-html {
(プロパティ) : (値);
}
のように指定します。
"プロパティ"というのは
指定したい項目のことで
例えば文字の色を変更するなら
プロパティ に "color" を指定し
値にカラーコードを記載します。
つまり
“article-body” のなかの
“code-display-html”の
色を指定したカラーコードで表示しなさい
という指定になるわけです。
3.背景の色を変える方法
1.で書いたHTMLのコードは
ふつうに表示すると
文字だけが表示されます。
<div class="code-display-html">
" 記事の一部だけデザインを変更する"
</div>
背景を変更するためには
backgroundという
プロパティを変更します。
backgroundの値として
カラーコードを記入し
色を指定します。
CSS
.article-body .code-display-html {
background:#ffeddb;
}
するとこのような表示になります。
<div class="code-display-html">
" 記事の一部だけデザインを変更する"
</div>
カラーコードを変更することで
いろいろな色に変更できるわけです。
4.まとめ
今回つかった手順をまとめます。
- 記事のデザインを変更したいときはCSSを変更する
- デザインを変更したい部分のHTMLをdivでくくりclassを指定する
- CSSでは.article-body .(指定したclass)で変更箇所を指定する
- 背景色を変更するにはbackgroundプロパティをカラーコードで指定する
初心者だったぼくが
初心者に分かりやすくと書き始めましたが
なんか意外に
難しくなってしまったような気がしますが
いかがだったでしょうか?