ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 文字のサイズを変えたい!

文字のサイズを変えたい!

簡単に仕組みを説明

前回でサイズの単位はわかったと思います。問題は何の文字を変えたくて、スタイルシートのどこを編集するのかです。とりあえず、あなたのブログのHTMLとスタイルシートを見てみて下さい。

見てみると大体・・・

/*---------------------------------------
▼▼ メイン
----------------------------------------*/

こういった、ここからここまでがメニューですよ。メイン部分ですよ。とわかりやすく説明が入っているのではないでしょうか。
なのでこれを見ただけで、大まかに上から順番に「全体の基本的な設定」・「タイトル部分」・「メニュー部分(プラグイン1や3)」・「メイン部分(記事の部分)」・「コメント部分」・「トラックバック部分」・「メニュー部分(プラグイン2)」の様な順番に並んでいるのがわかると思います。

中には説明がなかったり、複雑な仕組みでこんな様な感じではないのも沢山あると思います。

<!--topentry--> ~ <!--/topentry--> 記事の部分
<!--plugin--> ~ <!--/plugin--> メニュー(プラグイン)
の部分
<!--category_area--> ~ 
<!--/category_area-->
カテゴリーの部分
<!--comment_area--> ~ 
<!--/comment_area-->
コメントの部分
<!--trackback_area--> ~ 
<!--/trackback_area-->
トラックバックの部分

そんな人でも、HTMLはみんなこの<>~<>でできていると思うから大体の仕組みはわかるのではないでしょうか?
ちなみにこれを変数と言いまして変数一覧がここにあるので、探し物がある時はここを見て該当場所がどんな変数で囲われているかを見て、そこを見れば見つかると思います。

感覚で変える方法

仕組みが大体でもわかると、見ただけで拒絶反応を起こして、見る気がしない、わからない、できるわけがない、という気持ちも治まって「何かできるかもしれない!」という気持ちが芽生えませんか?

気持ちも楽になったところで、いよいよ本題の文字サイズの変更です。
文字のサイズはfont-size:によって表されています。これを踏まえて考えます。
例として、ブログのタイトルの文字サイズを変えたいなと思ってるとします。そこでサイズだからスタイルシートを見てみます。すぐ上で覚えた事をフル活用すると・・・(※例として公式テンプレのmame-peopleを見本にします)

/*-------------------------------------
▼▼ プログタイトル部分
-------------------------------------*/
.Name
	{
	color: #eea30e;
	font-size: 14px;
	font-weight: bold;
	background-image: url("http://blog1.fc2.com/
template/mame-people/image/name-bg.gif");
	background-repeat: no-repeat;
	background-position: 0 0;
	text-align: center;
	margin: 10px 0 0;
	padding: 10px 0 0;
	width: 591px;
	height: 62px }
.Introduction
	{
	color: #979797;
	font-size: 10px;
	font-weight: lighter;
	margin: 0;
説明でブログタイトル部分と書いてあるから大まかにここだなとわかりますよね。そこに.Nameというものがあるのでタイトルの名前だろうと想像つきますよね。
それで上から順番に見ていくと、上から2番目にfont-size:とありました。この数値を、文字を大きくしたければ大きく、小さくしたければ小さく変えれば出来上がりです。
ちなみに.Nameの下は.Introductionですね。タイトルの下だから紹介文だということぐらいは想像つきますよね。こんな感じでタイトル以外もわかると思います。

もし、自分がこれだろうと思って数字を変えてみて、大きさが変わってなくても、諦めずに、多分その近くのfont-sizeを変えれば大体上手くいくと思います。

理論的に変える方法

そんな直感的なやり方は嫌だ!私は1発でビシっと変えたい!スタイルシートに説明なんか全然ないから、そんな説明では全くわからない!という人もいると思うので別の説明もします。

まずスタイルシートではなくて、HTMLの方を見て下さい。
そしてタイトル部分を探します。探し方は変数一覧を見ると<%blog_name>がブログタイトルを表示している事がわかるります。(下の方にあるどこでも使える単変数にあります)わかったらHTMLをCtrl+Fなどを使って検索します。(※今回はこのブログを見本に説明します)

<body>

<!-- **********header_ST********** -->
<div id="header">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"
><%blog_name></a></h1>
<h2 class="introduction"><%introduction></h2>
<ul id="navi">
いくつかblog_nameがあるかも知れませんが、ブログの表示方法を変える時は<body>から後ろを編集する事やブログの説明を表示する%introductionもすぐ下にあるので、これがタイトル部分を表しているんだろうという事がわかります。
そうするとblog_nameを囲っているタグが<h1>だということもわかりますよね。
ちなみにh数字タグは、文字の大きさとその単語の重要さを示す時に使われるタグです。タイトルは一番重要なのでh1などで表示される事が多いです。h数字タグはh1~h6まであります。

そして<h1>で囲われている事がわかったら、次はスタイルシートを見てみます。

div#header h1 { font: bold 30px HGSoeiKakugothicUB, "ヒラギノ角ゴ Pro W6", sans-serif; }
今度はh1のタグをスタイルシートの中でCtrl+Fなどを使って検索してみると、この様に見つかります。見つかることここのfont: bold 30pxを変えれば出来上がりです。
複数個の囲っているタグ(ここではH1)が見つかるかも知れませんが「font」が書いてあればそこの数字を変えれば文字の大きさも変わります。 もしどこにも「font」がなければ自分で「font-size: 13px;」と書き加えてあげればサイズを指定することができます。

まとめると、HTMLとスタイルシートは兄弟みたいなものなので、タイトル部分がh1タグで囲われていると、スタイルシートの設定もh1タグに対して文字サイズを設定する事で文字の大きさを変更出来ます。

この2つを使えば、メニューや記事・日付けなど自分が変えたい所のサイズをある程度自由に変えられるのではないでしょうか。

それぞれ細かく設定されている場合も多いと思うので、なかなか自分が変えたい目的のものが変更できなくても、すぐにくじけずにその周辺を色々とサイズを変えてみるときっとできると思います。
たぶんみんな結局は何回も試行錯誤して、カスタマイズは覚えていく物だと思います。
<画像と文字の間隔をあけたい!へつづく>

関連ページ)
絶対サイズと相対サイズ
・文字サイズを変えたい!


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
あー
アホなんで分かりません
font-size: 14px;タイトル.Introduction

と思ってましたが違いました。
どうすればいいんですか?
文字のサイズをかえるにはHTMLではなくてスタイルシートの文字のサイズの数字を変えて下さい。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/80-281af853   

Template Designed by DW99