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

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

なかなか悪くなかった。

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

ファイルを分けるべよ!

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

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

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

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

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのプログラミング入門、第5弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割ったり、か

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

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

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

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

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第16弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

carousel

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

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

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

コメントをどうぞ!

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




オリジナルゲーム.com