ブログ初心者必見! htmlで文章デザインを変える「style」と「CSS」の仕組みを紹介!

ブログで記事を書いているとき「文字色を変えたい」「枠線で囲みたい」なんて思ったりしませんか?
こうしたことをするにはプログラミングの「html」などを理解する必要があり、ブログ初心者では少々難易度が高いでしょう。
今回は記事中の文章のデザインを変えるために必要な「style」「CSS」の使い方の紹介をします。




文章のデザインを変えるには

「h」タグなどを理解しよう!

まず文章のデザインを変えるため、その文章を構成している要素の「タグ」の役割を理解しましょう。

例えば単純な文章の段落では「p」というタグが使われています。
htmlで文章、例えば「あいうえお」と書くときは

<p>あいうえお</p>

と記述されます。
(ただ余りにも基本的なタグのせいなのか、WordPressなどではこのタグは普段省略されて文章が書かれています)

記事タイトルや文章のタイトルの「見出し」なら「h1」~「h6」で表され、

<h1>記事タイトル</h1>
<h2>見出し2</h2>

と記述されます。
(「h1」タグは記事タイトルを書いたときに自動的に入れられるので、記事中には「見出し2」にあたる「h2」タグから使っていくことになります)

こうして文章のデザインを変えていくには「p」や「h」といったタグに変更内容を追加していくことになります。

なお変更したい文章を終わらせる際は、必ず文末に「/」をつけたタグで文章を囲んでください。
<p>なら</p>、<h2>なら</h2>といったように、先に使ったタグに「/」をつけたタグで文章を囲んで終わらせます。

デザイン変更方法その1:「style」を使う

文章などのデザインを変更する方法の一つ目として「style」を使う方法があります。
これはデザインを変えるためのhtml文として真っ先に理解したいものです。

使い方としては次のように使います。
例:文字色を赤にする場合。

<p style="color: #ff0000">文字色を赤に</p>

実際にはこうなります。

文字色を赤に

このように「p」タグなら「p」タグ内に、「h2」タグなら「h2」タグ内にstyle="~"と記述して、"~"内に変更したい要素を書きこんでいきます。
要素名と変更する内容の間は必ず「:」で区切ってください。
この場合、フォントの色の要素である「color」と、変更する色の「#ff0000」の間に「:」を入れて区切ってます。

また複数の要素を変更したい場合、「;」で要素同士を区切って記述します。
例:文字色を赤に、文字を太字にする場合。

<p style="color: #ff0000;font-weight:bold">赤の太字に</p>

実際にはこうなります。

赤の太字に

これが文章などのデザインをhtmlで変更する基本となります。

※colorはフォントの色を、font-weightはフォントの文字幅を表す要素です。

デザイン変更方法その2:「CSS」を使う

CSSとは先ほどの「style」内に書いた内容をひとまとめのクラスとして設定・管理してしまう機能のことです。
こうすることにより、変更した箇所を一括で編集することができるようになります。

ブログデザインの変更・設定は基本この方法でされているので絶対に覚えておきたいものです。

記述するにはまず「クラス」をつくります。
WordPressなどを使っている人なら「外観」→「テーマの編集」で今使っているテーマの「style.css」というファイルか、「外観」→「カスタマイズ」にある「追加CSS」にクラスをつくります。
※「style.css」を変更する場合は「子テーマ」をつくってからやりましょう。

記事:《WordPress》テーマの編集と子テーマのつくり方

では先ほどのstyleでも書いた「文字色を赤に」・「太字に」するクラスをつくります。

.moji{
 color:#ff0000;
 font-weight:bold;
}

まずは「.」から始まり、自由にクラス名を書き、{}で覆います。
その中にstyleで書いたように変更したい要素を書きこんでいきます。

そうしたら今度はこれを文章に適用させます。

<p class="moji">赤の太字に</p>

先ほどは「style」と書かれていた部分を「class」と変えます。
これで「style」と同じように

赤の太字に

と表記されるようになります。

「style」と「CSS」、手間は一緒じゃない?

デザインを変えるためのstyleとCSSですが、上記の内容を比べてみるとどちらも書く手間は同じ、あるいはCSSのほうが若干増えてると感じる人もいるでしょう。
しかしCSSが真価を発揮するのは、あとで複数の場所・記事でデザインを変更したくなったときです。

例えばstyleとCSSで次のような複数の文章のデザインを変えてみたとしましょう。

あいうえお

あいうえお

あいうえお

この文章をstyleで変更したときのhtml文はこうなります。

<p style="color: #0000ff; font-weight: bold;">あいうえお</p>
<p style="color: #0000ff; font-weight: bold;">あいうえお</p>
<p style="color: #0000ff; font-weight: bold;">あいうえお</p>

一方CSSで専用クラスをつくって記述するとこうなります。

<p class="font-blue">あいうえお</p>
<p class="font-blue">あいうえお</p>
<p class="font-blue">あいうえお</p>

※クラスはstyle.cssか追加CSSに記述
.moji{
  color:#0000ff;
  font-weight:bold;
}

こうして見るとわかりやすいですが、変更する箇所が多いほどクラスで記述したほうが書く量が少なくなります。

そして重要なのが後日デザインを変更したくなった場合、例えば文字色を青から赤に変更する場合を想像してみてください。
・・・想像できたでしょうか?
styleで変更した場合はいちいち書いた部分のstyleの内容を変更していかないといけませんが、CSSでクラスを適用させておけばクラスの「color」の一行を変更するだけで複数の文章を一括変更できます。
クラスで文章のデザインなどを設定してしまえば、複数の記事の文章を一度に変更できます。

これがCSSでクラスをつくってデザインを変更するのが推奨されている理由です。

記事を書いていく上でよく使うであろうタグ

では記事の文章デザインを変更したいとき、良く使うであろうタグを紹介していきます。

詳しくは後述しますが、記事中に <~ class="~">文章</~> と詳しくhtml文を書いて変更するタグと、CSSだけ設定してしまえばいいタグがあります。

記事中にhtml文を書いて変更するタグ

p

「p」タグは先ほども紹介した通り文章の段落をつくるのに使われるタグです。

注意したいのが<p>~</p>で囲ったら自動的に改行されてしまうことです。
例えば あいうえお と文章の一部分だけを強調したい場合に「p」タグを使うと

あい

うえ

と表示されてしまうため、文章の一部を変更するのには適していません。
一部分だけを強調したい場合は次に説明する「span」タグを使います。

span

「span」タグは先ほど「p」タグで説明した通り、段落中の一部分の文章のデザインを変更したいときに使います。

「span」タグならこんな風に文章の一部分だけデザインを変更できます。

「span」タグで段落全体を囲むこともできるので、基本文章を強調させたりする場合は「p」タグの代わりに使う事になります。

div

「div」タグは<div>~</div>で囲った部分を1グループとして扱えるタグです。
「p」タグや「span」タグなどで囲った文章などをまとめて扱えるようにできます。

例えば複数の段落をまとめて編集したい場合は、その文章を「div」で囲んでしまいます。

<div style="text-align: center;">
<p style="color: #ff0000; font-weight: bold;">あいうえお</p>
<p style="color: #0000ff; font-weight: bold;">あいうえお</p>
</div>

これは「文字色が緑の太字の文章」「文字色が青の太字の文章」「divでまとめて中央寄せする」という内訳です。
実際に表示するとこうなります。

あいうえお

あいうえお

このように「div」タグで囲んだものをまとめて変更できるようになります。
イメージとしてはこうなります。

「div」タグは「p」タグなどの代わりに使う事も多く、いろいろな場面で使えるので優先して覚えておきましょう。

既にクラスが設定されているタグ

ここから紹介するタグは既にブログテーマにクラスとして設定されているタグです。

わざわざ記事中でhtml文を書かなくでも初期クラスの設定を弄ればいいので、style.cssや追加CSSなどでクラス設定を変更しましょう。
(むしろ記事中で設定してしまうと、あとあと面倒になります。)

こういったタグは基本style.cssの子テーマを作成して変更します。
WprdPressなら「外観」→「カスタマイズ」の「追加CSS」に記述していく方法もあります。
オリジナルのstyle.cssを弄ると、初期設定が分からなくなったり最悪画面が真っ白になってしまうのでやめましょう。

記事:《WordPress》テーマの編集と子テーマのつくり方

h1~h6

「h」タグは記事タイトルや文章タイトルに使われるタグです。
「文章タイトル」は「目次」に表示されるタイトルといえばわかりやすいでしょうか?

機能の「見出し」を使うと、自動的に文章をタグで囲んでくれます。
デザインを変更したい場合は「見出し1」なら「h1」タグといったように、その見出しに対応するタグを変更していきましょう。

body

bodyタグは文章全体の構成を設定しているタグです。

フォントサイズや行間といった文章の構成を一括で行えるので、記事全体の文章の設定を弄りたい場合はこのタグを使いましょう。

既存のタグの設定を一括変更したいとき

「記事中のすべての文字の大きさを変えたい」などの設定をしたい場合、style.cssや追加CSSでそのタグのクラスを弄ります。

例えば文章全体のフォントサイズを変えるなら「body」タグなどを使います。

.body{
  font-size:24px;
}

このように「body」タグのクラスを弄れば、文章中の文字の大きさを24pxに変更できます。
(直接style.cssを弄るのは危険なので、子テーマをつくるか、追加CSSに記述するようにしましょう。)

関係無い部分まで変更された場合

タグを変更する場合は、タグのクラスに「~のタグを変更」のように記述しましょう。

「タグのクラス内容を変更したら、関係無い部分まで変更された!」なんてことが起きる場合があります。
例えば記事ページのみ文章デザインを変更したいのに、ブログトップといったページにまでデザイン変更が及んでいる、などです。

基本タグというものはブログのすべての場所に共通して使われています。
そのため記事ページの見出しのみを変更したい場合、「記事ページのh2タグを変更」というようにクラスを設定しないといけません。

特定の部分のみ変更する際のクラスの書き方はこうなります。

.entry-content h2{
  font-size:24px;
  color:#0000ff;
}

このentry-contentというのはブログのテーマで設定されている「記事ページ」のことを指すクラスです。
(使っているテーマによっては微妙に違う名称だったりもします)
この場合「entry-contentクラス内でh2クラスを変更する」という意味になります。

名称が分からない場合、このentry-contentに当たる部分を調べるには「記事のソースコード」を見て見ましょう。

例えば記事のタイトルを「お試しタイトル」、記事の最初に「あいうえお」という文章を書いたとします。
そうしたら「プレビュー」などで実際の記事画面を開いて、右クリックで「ページのソースを表示」を選びます。(「フレームのソースを表示」とも書かれています)

ソースコード画面を開いたら先ほど書いた「あいうえお」という文章をソースコードページ内で検索しましょう。
「あいうえお」の文章が「p」タグで囲まれてる部分があるはずです。

「あいうえお」の上に<div class="entry-content">とありますが、これは「entry-content」というクラスを記事の文章全体に適用しているということです。
つまり「p」タグや「h2」タグといったものを記事の文章のみに適用したい場合は、先ほど書いたように「.entry-content ~{」と書けばいいわけです。

ついでに「お試しタイトル」がその上にありますが、こちらは「entry-title」というクラスが設定されています。
この場合記事タイトルのデザインを変更したい場合は「entry-title」のクラスを弄ればいいことになります。

特定の部分のクラスだけデザインを変更したいなら、タグの前に該当する別のクラスを書きこむことを覚えておきましょう。

最後に

いろいろと長々書きましたが、これで記事中の文章のデザインを変更する仕方の紹介を終わります。

ブログ初心者の人は覚えるのも一苦労ですが、クラスさえ覚えてしまえば記事の文章だけでなく大抵のブログデザインを変更できるようになります。
stykeの使い方から順序よく覚えていけばクラスの使い方も覚えられます。
焦らずひとつひとつしっかりと覚えて、デザインを変えられるようになりましょう!