1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. ブログ
  6. »
  7. FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。

今回もFC2ブログの”最強”カスタマイズを始めていこうと思います。
今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初期設定の今の状態だと文字が小さすぎて見えませんよね。。。
ブログをカスタマイズするのに大切なことは、見る人にとっていかに見やすいブログにするかです。
女性に例えれば簡単です。醜い女性を誰がもう一度見たいと思いますか!醜い人ゴメンなさい!あなたのことを言いました。

というわけで、ブログを美しく、もう一度見たいと思えるブログにカスタマイズしていきましょう。

まず一つ注意書きです。
サイトを作る上で問題になるのが、ブラウザによって表示が変わってきてしまうということです。

なので、そのブラウザごとにあったサイズに設定しなくてはなりません。

本当はすべてのブラウザで表示の確認をした方がいいのですが、私はwindowsを持っていないので、InternetExplorerでの確認が、エミュレータのようなものでしか確認できません。
とりあえず、InternetExplorerでの確認はWindowsを持っている人であれば各自ご確認ください。

目次
  1. 記事やプラグイン部分の文字の大きさ。
  2. タイトルの文字の大きさ。
  3. まとめ

記事やプラグイン部分の文字の大きさ。

まずは、文字の大きさを変更することから始めていきましょう。

前回は背景をカスタマイズしましたね。Rは背景を無難に真っ白にしてみました。

FC2画像
FC2画像

今回はここから始めていきましょう。

キーワードにより文字サイズを指定する。

CSSを書き換える場所は、文字を変えたい場所によって異なります。
ではまず、記事やプラグインの部分の文字の大きさを変更してみましょう。

まずはCSSのソースの中から、次のソースを探してください。

body {
	color : #333;						/* 文字の色 */
	background-color : #fff;				/* 背景の色 */
	text-align : center;					/* 古いIEでセンタリングする */
	line-height : 1.5;					/* 行間 */
	font-size : x-small !important;				/* 古いIEの文字サイズ */
	voice-family : "\"}\"";					/* おまじない */
	voice-family : inherit;					/* おまじない */
	font-size : small !important;				/* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}

html>body {
	font-size : small !important;				/* Opera用の文字サイズ */
}

もうすでにコメントに何を変更すればいいのか書いてあるので、説明するまでもないかもしれないのですが、説明いたしましょう。

font-sizeというのが、文字の大きさを指定する命令です。このソース内でも3箇所ありますよね。
このfont-size、指定する方法はいくつかあります。

まず、もともとのソースのような指定方法です。

xx-small
x-small
small
medium
large
x-large
xx-large

という小さい順に並んだ7種類のワードを、font-size :の後に入力することにより、フォントのサイズをしていします。
では、実際にやってみましょう。

body {
	color : #333;						/* 文字の色 */
	background-color : #fff;				/* 背景の色 */
	text-align : center;					/* 古いIEでセンタリングする */
	line-height : 1.5;					/* 行間 */
	font-size : small !important;				/* 古いIEの文字サイズ */
	voice-family : "\"}\"";					/* おまじない */
	voice-family : inherit;					/* おまじない */
	font-size : medium !important;				/* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}

html>body {
	font-size : medium !important;				/* Opera用の文字サイズ */
}

とりあえず、全体に一段階ずつ大きくしてみました。

FC2画像
FC2画像

数値により文字サイズを指定する。

では、数値による指定方法を見てみましょう。
数値による指定方法も先ほどとほとんど変わりません。キーワードなのか数値なのかの違いです。

数値による指定方法もいろいろあるのですが、とりあえずpxで指定する方法です。

font-size : 15px;

といった具合です。簡単ですね!
この数値によって文字の大きさが変わってくるので、自分の思い通りのサイズになるまで試してみるといいと思います。

タイトルの文字の大きさ。

次に、FC2ブログのタイトル部分の文字の大きさも変更してみましょう。
要領は先ほどと一緒です。

今度はCSSの中から、下のように書かれた部分を探してください。

/* タイトル */

div#branding h1 a {
	padding : 0 10px;
	font-size : x-large;					/* 古いIEの文字サイズ */
	font-weight : bold;					/* 太字にする */
	voice-family : "\"}\"";					/* おまじない */
	voice-family : inherit;					/* おまじない */
	font-size : xx-large;					/* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}

html>body div#branding h1 {
	font-size : xx-large;					/* Opera用の文字サイズ */
}

ここがFC2ブログのタイトルの文字を指定している部分です。
先ほどと同じように指定していきましょう。

font-sizeの部分を自分の指定したい大きさに書き換えるだけです。
Rは大げさにもfont-size : 50px;と指定したのですが。。。

FC2画像
FC2画像

なかなか悪くなかった。

まとめ

と、このような感じで今回は終わろうと思います。
あとは自分好みに見やすさなどを考えて調節していってください。

まだまだブログの直すべきところはあるので、これからも一緒に美しいブログを作っていきましょう。

スポンサードリンク

関連コンテンツ

オススメ記事

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

コメントをどうぞ!

メールアドレスが公開されることはありません。