ブログ ブログカスタマイズ

CSSを使ってブログのデザインを変更する

以前、pタグやbrタグといったHTMLタグのことを少し書きました。
⇒Bloggerではpタグ、brタグは使えない！？

そもそもタグをつける必要性は何かと言えば、SEO的な配慮。このことが一番な理由になってくると思います。文法を守るという意味合いでもつける必要がありますよね。

しかし、それよりもボクはブログデザインの変更するときに楽。SEOとか文法とか。そういったことを気にする必要のないブログ書きにとっては、労力低減に必須なのでは？そう考えています。

CSSを使う

CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
引用：HTMLクイックリファレンス　CSSの基本

ブログデザインの変更を、タグを用いることによって楽にする方法において必要になってくるのがCSSです。

いろいろと難しいことが書いてありますが、簡単に言ってしまえばタグ自体のデザインを決めるものと考えてしまって問題ないかと思います。タグで囲ったものをどういったものにするのか。そこで決めてしまうものがCSSです。

実際の様子

.main-outer p{
 font-size:15px;
 line-height:1.7em;
 padding-bottom:24px;
}

例えば、ボクのブログにおいてpタグは、上記のようにCSSによって指定されています。pタグで囲った場合は、フォントのサイズが15px、行の高さが1.7em、下の余白が24pxと指定されています。

pタグで囲った文字などは、この指定に沿った表示をする。ということは、ここを変更してあげるだけで個々に編集する必要性がなくなるということになります。

.main-outer p{
 font-size:20px;
 line-height:1.7em;
 padding-bottom:40px;
}

フォントサイズ（15px→20px）と下の余白（24px→40px）の変更をしてみました。すると表示は以下にようになります。

pタグで囲われた文字のサイズが変わり、pタグ終了後の下の余白が広がります。タグで囲ってあれば、CSSの変更のみですべての記事に反映させることができます。一括で編集したいときなどに便利ですよね。これが、タグを使う（CSSを使う）メリットだと考えています。

pタグ以外ももちろん使える

CSSで指定できるものは、pタグだけではありません。ブログデザイン全てに対応しています。

Vaster2のコメント欄を見やすくしてみた

上記記事にあるように、デザイン上で指定されているタグに対して、CSSを追加することによって、その見え方を変えることができます。

ここまでCSSを推す理由

ここまで読んでいただければわかる通り、タグとCSSを用いればブログを書く労力低減の意味がわかってくると思います。

実際、ボクは以前のブログは以下のように書いていました。

例えば、ボクのブログにおいてpタグは、上記のようにCSSによって指定されています。pタグで囲った場合は、フォントのサイズが15px、行の高さが1.7em、下の余白が24pxと指定されています。<br />
<br />
<br />
<br />
pタグで囲った文字などは、この指定に沿った表示をする。ということは、ここを変更してあげるだけで個々に編集する必要性がなくなるということになります。

誰もが読みやすいように、段落に余白を持たせてあげる。つまり、下に空白をつけるようにエンターキー（brタグ）を連打するような書き方をしていました。

• 文～文　8行
• 文～文(比較的近い)　3～5行

スマートフォンからの見え方を確認し、PCからの見え方を確認して、上記のようなことを決めて書いていました。恥ずかしながらしっかりと、余白のことは決めていましたがタグに関しては無知だったため、エンターキー（brタグ）で対応していました。（"行"とはエンターキーをいくつ押すかを示しています。）

CSSの例

.main-outer p{
 font-size:15px;
 line-height:1.7em;
 padding-bottom:120px;
}

もしも今、昔のブログの決め事をCSSで指定した場合、上記のようになります。
padding-bottom:120px;　これで"文～文　8行"の余白を満足できます。（文字サイズ15pxとして、15px × 8行＝120px）

わざわざ、エンターキーを連打し余白を作る必要がなくなり、pタグで囲えば自動的に余白ができます。

CSSの例2

それではもう一つの、"文～文（比較的近い）　3～5行" についてはどうするのか。その方法について以下に例で記載します。今回は3行（45px）で固定したとします。

p.h45px {
 padding-bottom:45px;
}

上記CSSを追加します。上記はpタグにclass属性を追加することで、スタイルを変更することができます。

<p>pタグの120px余白（8行分反映）</p>
<p class="h45px">h45pxの45px余白（3行分反映）</p>

使い方としてはこんな感じに、pタグで囲った場合は8行分の余白が反映されて、p（半角スペース）class="〇〇"と指定した場合はそちらが反映されるようになります。種類を増やしていけば、class指定するだけで自動でいろいろな余白が作られます。

CSS指定の注意点

CSSの例2で出てきたclassの指定ですが、h45pxと指定してあります。

p.kinncya {
 padding-bottom:45px;
}

例えば、上記のように指定する文字に関しては決まりがありません。上記では"kinncya"というクラスを割り振っています。この場合だったら、class"〇〇"の中に"kinncya"と入力すると45px（3行分）が反映されるようになります。

しかし一つだけ注意点として、指定する文字の最初に数字を使えないことがあります。

指定する文字の頭には、必ず文字で指定するようにしてください。数字でなければ日本語で"きんちゃ"とか指定してもできます。

参考

スタイルシートの基本 -- ごく簡単なHTMLの説明

スポンサーリンク

スポンサーリンク