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

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

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

今回もFC2ブログの最強カスタマイズを始めていこうと思います。
今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初期設定の今の状態だと文字が小さすぎて見えませんよね。。。
ブログをカスタマイズするのに大切なことは、見る人にとっていかに見やすいブログにするかです。

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

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

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

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

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

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

まずは、文字の大きさを変更することから始めていきましょう。
前回は背景をカスタマイズしましたね。Rは背景を無難に真っ白にしてみました。

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画像

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

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

数値による指定方法もいろいろあるのですが、とりあえず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画像

なかなか悪くなかった。

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、WEB開発で、JavaScriptは必須といっても過言ではありません

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。個人での開発はとても大変で、時間がかかってしまっていますが、すこしずつ形にしていっています。 さて、今回はUnityで開発したiO

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

コメントを残す(コメントは承認後に反映されます)

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