ブログ記事内の文字の大きさ太さ色を変えてみよう(HTML-CSS)

文字をいろいろ変えてみよう

最近は手軽に作れるブログですが、初心者でも簡単に出来るカスタマイズから少しずつ覚えて使ってみましょう。第一回目はいちばんよく使いそうな文字の装飾です。文字の太さ、大きさ、色を変えてみましょう。

PR

見栄えやデザイン装飾はCSS(スタイルシート)で行おう

文字を太くしたり大きさを変えたり色をつけたりする用途は、大きく分けて「見栄えをよくすること」「重要な点を明確にすること」の二つがあると思います。

ブログを始めたばかりの頃は主に前者で、次第に後者になっていくのが一般的かもしれません。わたしもブログを始めた当初は文字の属性などを指定するタグなど一切知らず、文章を入力して投稿するという単純な作業からスタートしたものです。

そのうち、記事を作成する画面の上部に用意されているボタンで太字にしたり大きくしたりするようになり、見栄えを気にするようになりました。

そこで、最初に選んだテーマが文字の装飾です。今日覚えるのは全部で3つ。

  1. 文字の太さを変える
  2. 文字の大きさを変える
  3. 文字の色を変える

この3点を、記事を書くHTMLタグで変更するのではなく、CSS(スタイルシート)を使って設定する方法で覚えましょう。

あとで楽ができるのはHTMLタグよりCSS

HTML?CSS?そんな説明はいらないから手っ取り早く簡単にカスタムできる方法が知りたいんだど!と思っていませんか?

というのは、わたし自身が最初の頃そう思ったことがあるからです( ;・∀・)

そして多くのマニュアルサイトが「CSSで設定したほうがいいよ?」「あとあと楽なのよ?」とCSSで設定することを推奨していたにも関わらず、その有りがたい助言を「覚えるのが面倒そう・大変そう」という先入観から見事にスルーして、数ヵ月後・・・その助言に従っておくべきだったと痛感することになったのが管理人のパターン。

ではなぜCSSで設定することを推奨しているのか。少し長くなりますが、イメージしやすいように状況の変化と合わせて説明します。

最初の頃はブログのテンプレートも「まぁ、これでいいかな」くらいの気持ちで選びます。そのうち色々な知識が勝手に入ってくるようになると絶対にテンプレートを変えたくなるんです!

たぶんその頃には記事内で色々な文字の装飾もしているでしょう。テンプレートを変えたことで表示が微妙になるケースが多発します。各記事内でHTMLタグを使って編集していた場合、表示がおかしい場所を一つずつチェックして全て手直しをしていくという恐ろしい作業が待ち構えることになるのです。そのとき初めてCSSの重要性を痛感することになります。

コピペでもいいから設定しておけば良かった・・・と後悔します。手作業で一つずつチェックしていく作業にうんざりし、本当に使いたいテンプレートを諦める人もいるのではないでしょうか。

CSSで設定しておけば、記事を一つずつチェックする必要はありません。例えば文字の大きさを修正したいなら、CSS内でその指定をしている数値を一箇所変更するだけで完了します。

これはびっくりするほど楽です。全記事に目を通し修正していく、その膨大な作業量に比べたら、今ちょっと調べものに時間を費やしCSS設定をするその手間のほうがよほどマシです。推奨です。というより必須です、と言いたいくらいです。

皆さんがわたしと同じパターンに陥らないよう、当時の自分を思い出しながら、なるべく分かりやすく説明していくのでスルーせずに挑戦してみてください。

HTMLとCSSの違い

管理人の場合、まず分からないのがココでした。なぜなら当時やりたかった文字の簡単な装飾は、CSSで設定しなくてもHTMLタグで出来たからです。だから混同します。同じじゃないの?と。

同じではなかったと痛感するのはこのずっと後のこと、というのは前述した通りですね。ここではもう少し違いをハッキリさせておきましょう。

現段階で詳細に説明しても頭に入らないし残らないと思いますので、ものすごくザックリ説明します。というよりわたし自身もその程度の知識しかないですし、その程度の知識でもこのサイト程度のものは作れるんだな、と思って下さい。

HTMLとは?
ホームページやブログの本体。内容や文章構造を書くもの。文章構造とは記事のタイトルや見出し、今この説明で使っているようなリスト表示などです。
CSSとは?
見た目の装飾やデザイン指定をするところ。
このリストでは「HTMLとは?」(Q)部分が太字になっています。
説明部分(A)は左側のスペースも広めになっています。これはCSSで設定しているので、記事を書くときにはリストタグで文章を囲んでいるだけです。

え?これだけ??と思うかもしれませんが、これだけです。もっと詳しく勉強されたい方は検索すれば山のようにマニュアルサイトが出てきますので、もっと知識のある方のサイトでお願いします。

スタイルシートがある場所

ご利用中の無料ブログによってスタイルシートのある場所は様々です。すべてのブログを使ったことがあるわけではないので、把握しているブログのみナビします。

該当ブログがなかったら、各ブログのマニュアルやQ&Aなどで確認してみてください。

FC2ブログの場合

  1. 管理画面を開く
  2. 左のメニュー「設定」の中の「テンプレートの設定」をクリック
  3. 開いた画面を下にスクロール
  4. いちばん下に「スタイルシート編集」があります

Seesaaブログの場合

  1. 管理画面を開く
  2. 左のメニュー「デザイン」をクリック
  3. 開いた画面中央に「デザイン一覧・デザイン設定・コンテンツ・HTML」とメニューが並んでいるので「デザイン設定」をクリック
  4. 下へスクロールすると適用中テーマタイトルのリンクがあるので「タイトル」リンクをクリック
  5. 表示された画面が「スタイルシート編集」の画面です

WordPressの場合

  1. 管理画面を開く
  2. 左のメニュー「外観」の中の「テーマの編集」をクリック
  3. 開いた画面の右にあるファイル一覧の下のほうに「スタイル」の見出し
  4. 「スタイルシート(style.css)」をクリック

※ 利用中テーマに「子テーマ」が用意されていたらダウンロードして子テーマでのCSS編集を推奨します。

文字のデザイン設定をしてみよう

では実際に、文字をいろいろ変えてみましょう。この基本さえ覚えてしまえば、さらに属性要素を追加した応用も可能になります。

CSSを変更する前に必ず変更前のバックアップをしましょう。バックアップと言っても難しいことはありません。範囲を指定してコピーし、それをメモ帳などにペーストして残しておくだけです。万が一のことが起きたとき、変更前に戻すための保険だと思ってください。下記に簡単な手順を説明します。メモ帳ってどこにあるの?コピーやペーストの仕方もよく分からないという方は確認してください。

  1. スタイルシートを開き、どこでもいいので編集画面内をクリック
  2. キーボードの「Ctrl」とアルファベットの「A 」を同時押しする(範囲指定)
  3. 範囲が青く表示されている状態で「Ctrl」とアルファベットの「C」を同時押しする(コピー)
  4. パソコン画面左下の「スタート」から「すべてのプログラム」「アクセサリ」と進み「メモ帳」をクリック
  5. 開いたメモ帳の中をどこでもいいのでクリック
  6. 「Ctrl」とアルファベットの「V」を同時押しする(ペースト)
  7. メモ帳の上に表示されている「ファイル」を選択して「名前をつけて保存」で保存しておく

以後、「コピペして」と書かれていたら、上記の手順3,4,7 の動作を行ってください。

太くする方法 <b> <span class="bold">

散々CSSは大事ですよ、と前置きしておいて何ですが、文字の太さはHTMLタグのみでも問題ありません。なぜならHTMLタグ使用での装飾が非推奨になっていないタグだからです。

でもいずれ非推奨になる可能性もゼロではないので両方の例をあげておきます。

【HTMLタグのみ場合】
文字を <b> と </b> で囲みます。
入力例
文字を <b> 太く</b> 表示します。
表示画面
文字を 太く 表示します。
【CSSで設定する場合】
以下をスタイルシートにコピペします。

解説
1行目はコード説明です。なくても構いませんが、あとで修正するときに日本語の説明が見えるほうが安心します。どこで何を設定したか忘れてしまうので重宝します。
2行目はクラス名で、3行目が指示内容になります。
記事作成中に2行目のクラスを指定したら3行目に設定した内容で表示してね」という意味になります。

上のコードをスタイルシートにコピペして保存をしたら記事を書きますが、この太字の設定はテンプレート作成者が初期で設定してくれている場合も少なくありません。

CSSへコピペする前に下記の入力例で記事を書いてみて、もし太字が表示されたら既に設定されているという事になります。

入力例
文字を <span class="bold"> 太く</span> 表示します。
表示画面
文字を 太く 表示します。

太字はHTMLタグで囲むほうが楽ですが、CSSの練習台には内容も単純でちょうどいいので、未設定だったら試しに挑戦してみましょう。

大きさを変える方法

これまで一般的によく使われていたのは <font> というHTMLタグを使ってサイズを指定する方法です。しかし、この方法は現在非推奨となっています。

使うことは出来ますが非推奨なので、ある日突然 <font> で指定していた記事はプラウザ上では変化なし、という状況に陥る可能性がないとも言い切れないのです。

また <big> </big> で囲んでいる方もいるかもしれませんが <big> も現在は非推奨です。

【CSS 設定】
文字の大きさを段階的に指定して使います。

解説
1行目はコード説明です。
2,5行目は文字の大きさのクラス名で、3,6行目が数値設定になります。通常の大きさを100%とし、それより何%大きく(小さく)したいかを指示しています。
記事作成中に2,5行目のクラスを指定したら3,6行目に設定した大きさで表示してね」という意味になります。数値はお好みに変更してください。

上のコードをスタイルシートにコピペして保存をしたら記事を書きます。

入力例
文字を <span class="large">大きく</span> 表示します。
文字を <span class="small">小さく</span> 表示します。
表示画面
文字を 大きく 表示します。
文字を 小さく 表示します。

もっとパターンを多くしたい方はこんな感じになります。

多すぎても使うとき大変そうですね。クラス名は半角英数字なら任意で決めても構いません。但し、あまりに適当につけてしまうと直したくなったときCSS設定した意味がなくなります。設定する時は、そのサイトを継続する限り使い続けるコードだと認識した上で決めましょう。

色を変える方法

最後は文字の色を変更する方法です。

こちらもでも <font> タグでカラーコードを指定して使われてることも多かったですが、スタイルシートで設定していきましょう。

【CSS 設定】
カラーコードを設定して使います。

解説
1行目はコード説明です。
2,5行目は色のクラス名で、3,6行目がカラーコード設定になります。
記事作成中に2,5行目のクラスを指定したら3,6行目に設定した色で表示してね」という意味になります。カラーコードはお好みで変更してください。

上のコードをスタイルシートにコピペして保存をしたら記事を書きます。

入力例
文字を <span class="red"> 赤く</span> 表示します。
文字を <span class="gray"> 灰色</span> に表示します。
表示画面
文字を 赤く 表示します。
文字を 灰色 に表示します。

色は何種類でも追加で登録可能です。カラーコードは「カラーコード」「カラーチャート」などの語句で検索するとたくさん出てきますので、使いやすいと思うものをブックマークしておくと便利です。

応用編(まとめ)

これまでの要素を同時に設定してみましょう。

赤い文字を太字で設定

方法は二つあります。一つは、1つのクラスに対して二つの属性を設定する方法。もう一つはこれまでのクラス設定をそのまま利用する方法です。

【CSS で二つの属性を設定する場合】
カラーコードと太字の指示を1つのクラスに設定して利用します。

入力例
文字を <span class="bold-red"> 赤色で太く</span> 表示します。
表示画面
文字を 赤色で太く 表示します。
【CSS の設定は1クラス1属性のままで使う場合】
記事作成時 <span class=”○○ △△”> と複数設定する。
○○ と △△ の間には半角スペースが1つ入っています。
入力例
文字を <span class="bold red"> 赤色で太く</span> 表示します。
文字を <span class="red large"> 赤色で大きく</span> 表示します。
表示画面
文字を 赤色で太く 表示します。
文字を 赤色で大きく 表示します。

うまく設定できましたか?
CSSでの設定は :; を入れ忘れたり、入れ違えないように気をつけましょう。

表示したら途中から全部、赤文字になっていたというようなケースはタグの閉じ忘れだったり / を入れ忘れたりしていることが多いので、落ち着いてチェックしてみましょう。

【2015/9追記:最後の方法について】クラスで先に指示した「赤い文字」は問題なく反映されても、次の「大きくする」指示が反映されないことがあります。

これは最近、他のブログで気づきました。
こちらのワードプレスでは問題なく利用できていましたし、無料ブログA社でも問題なく利用できてましたが、B社は最後の方法が使えませんでした。

提供しているブログサービスによるのか、テンプレートによるのか、わたしにはそこまで特定することは困難です。すみません。

もしお使いのブログで、「スペースで区切り複数繋げる」という最後に紹介した方法がうまくいかない場合には、ご自身がよく利用するパターンのもの(例えば、赤い文字かつ太字など)を予めCSSに登録しておく、という最初の方法でお試し下さい。

ブログランキング
お帰り前に応援1クリックいただけたら嬉しいです!
このページの情報があなたのお役に立ちましたらお願いします。
ブログランキング   にほんブログ村 小遣いブログ ポイントサイトへ
PR

シェアはとても励みになります。ありがとう!

購読はフォローが便利です

コメント

  1. ちえ より:

    はじめまして
    フォントのカラーと太さを同時に指定するタグを探して
    たどり着きました

    記載されているタグですが
    ではじまり、閉めるタグがすべてなので
    「a」が「e」なっております

    ぱっと見気がつかずそのまま指定したらうまく表示されませんでした…

    通りすがりですがご連絡致します(_ _)

    • sora sora より:

      ちえさん、はじめまて。
      たくさんあるマニュアルサイトの中から訪問いただきありがとうございます。

      ご指摘いただいた箇所を確認し、すぐに訂正いたしました。申し訳ありません。
      そして、お知らせいただき本当にありがとうございました。

      その後、うまく表示させることはできたでしょうか?
      これに懲りず、また何かありましたら訪問いただければ嬉しく思います。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です