FC2ブログのCSSを編集して文字サイズや背景色を変更してみよう!

ブログの記事投稿にも慣れてきたら本文の文字装飾だけじゃなく、ブログタイトルの文字サイズ変更や背景色を変えてみたりしたくなるものですよね。

その為にはスタイルシート(CSS)を編集しなければいけません。

一見難しそうで「えっ?俺には絶対無理!」と思ってませんか?

でもポイントを掴めば誰でも簡単にCSSの編集が出来る様になります。

今回はブログタイトルのサイズ変更、ブログ背景色変更方法の2つをご紹介します。

HTMLとCSSとは?

ブログのテンプレートはHTMLとCSSの2つで構成されています。

  • HTMLとは?

    ハイパー・テキスト・マークアップ・ランゲージの略でWEBページを構築するコンピュータ言語です。

    <◯◯>・・・・</◯◯>の様なタグと呼ばれるもので書式をくくって使用します。
  • CSSとは?

    カスケーディング・スタイルシートの略。ブログ内の文字サイズや色、背景や画像挿入などの見栄えに関わる事を記述していくものです。

そんなに難しく考えずにHTMLはブログ記事の配置などの構成を決めており、CSSで文字装飾を行なってるという程度の認識で問題ありません。

慣れてくればHTMLもいじったりしますが、初心者はCSSからカスタマイズして行きましょう!

CSSを編集してブログを見栄え良くする方法

それではタイトルのサイズと背景色の変更方法を説明して行きます。

CSSを編集する前の準備

ブログ管理画面の設定バー『テンプレートの設定』かメインメニューの『テンプレート(PC)』をクリックします。

スタイルシートの編集に入る前に必ずテンプレートのコピーを作成しておいて下さい。

コピーを作っておく事でバックアップとなり、もし消したり変更してはいけない箇所を間違って触ってしまってもすぐ元に戻す事ができます。

現在適用中のテンプレートの『複製』をクリックして下さい。

テンプレート名に数字がついたコピーが作成されます。複製された「basic_white1」のテンプレートを編集していきます。

画面を下へスクロールすると以下の様なスタイルシート編集欄がありますのでこれを触っていきます。

間違ってHTMLを触ってしまったらブログがぐちゃぐちゃになりテンパってしまう可能性があるので注意して下さいね!(バックアップあるから大丈夫!)

ブログタイトルの文字サイズ変更

スタイルシート編集枠内のテキストエディタをスクロールしていくとh1  a  /*ブログタイトル*/のように記述してあります。

これはヘッダー部分のブログタイトルにh1タグを使用しているという事です。

この/*○○○*/自体はCSS上意味は無く、ただ単に設定を変更する時などにわかりやすいように表記してあるんですね。

その少し上を確認するとh1{font-size:276%;・・・・・}とありますが、これはh1タグのブログタイトルの文字サイズが276%に設定してあることを示します。

この数字部分を変更するだけでタイトルの文字サイズは変更されます。

今回は例として350%に変更してみます。

文字サイズの表記方法はパーセント(%)でもピクセル(px)どちらで入力してもOKですので自分がわかりやすい方を入力して下さい。

ブログの背景色の変更

続いてブログ背景色の設定を変更していきます。

このテンプレートでは/*全体の背景色*/と表記されてますが他のテンプレートだと違う項目かもしれませんのでブログ背景色や背景カラーなど似たニュアンスの箇所を探してください。

background-colorが背景色という意味なのでこれを目印に探してもいいかも知れません。

ここにある『#FFFFFF』が現在の背景色の設定です。何のことかわからないと思いますがこれはコンピュータが色を識別するコードのようなもので0~Fの16進数を6桁使い現わしてます。

「そんなん見ても色わかんないよ~」と思いますんで、色とコードが簡単に確認できる以下のサイトで好きな色を探してみて下さい。

【 WEB色見本 原色大辞典 – HTMLカラーコード】へ

そして『#FFFFFF』を消して、気に入った色のコードを入力して下さい。

例でちょっと青っぽい色の『#b0c4de』を入力してみます。

色コードに使うアルファベットは半角英字であれば大文字でも小文字でも大丈夫です。

以上2か所を変更したら『更新』をクリックして下さい。

プレビュー確認してテンプレート適用

テンプレート名の『basic_white1』をクリックしてプレビューを確認してみましょう。

まずはこれが変更前のブログ画面です。

そして下がCSS変更後のブログ画面になります。

ブログタイトルも大きくなり、背景も変更されています。

問題無いようならプレビュー画面を消して

①basic_white1の左丸にチェック

②『適用』をクリックしましょう。

テンプレート名の左がわに赤旗マークが表示されればテンプレートの変更も完了です。お疲れさまでした!

まとめ

CSSの編集方法を説明してきましたが、想像してたよりも簡単に出来たのではないでしょうか?

これらの変更を加えるだけでただテンプレートを変更しているだけのブログとの違いがだせて差別化がはかれます。

ブログは目立ってなんぼです!あまりいじり過ぎてごちゃごちゃなるのはマズいですが程よく手を加えてあげたらアクセスアップにも繋がると思いますのでぜひチャレンジしてみて下さい。

最近のコメント

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする