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

なかなか悪くなかった。

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹介《しょうかい

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

画像を動かすよ!

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今回も、プログラミングの勉強《べんきょう》をはじめていきましょう! 前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaSc

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

コメントをどうぞ!(コメントは承認後に反映されます)

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