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

公開 : → 更新 :

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

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

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

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

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

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

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

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

前回は背景をカスタマイズしましたね。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画像

なかなか悪くなかった。

まとめ

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

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

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

zsh

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

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

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

普段から猫に遊ばれている@It_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

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

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