FC2ブログの記事内で文字サイズを大きくする方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログの記事内で文字サイズを大きくする方法

FC2ブログの記事内で文字サイズを大きくする方法

FC2ブログの記事内で文字サイズを大きくする方法

FC2ブログの記事内の文字サイズを変更してみる

今回は、FC2ブログの記事内の文字サイズを変更する方法をご紹介いたします。

うまく利用すれば、文章の一部分を強調したいときなどに役立ちます。

ついでに、文字が重なってしまったときの対応方法なども書いておきました。良かったらご覧ください。


FC2ブログの記事内の「文字サイズ」について

1:「文字サイズ」を大きくするとは?

「文字サイズ」を大きくするというのは、記事内の文章の一部(もしくはすべて)を、次のように通常の文字サイズよりも、大きくすることをいいます。

「文字サイズ」を大きくするとは?

ちなみに、ここで言う「通常の文字サイズ」というのは、お使いになっているテンプレート(CSS)で指定されている文字の大きさです。

テンプレートによって、「通常の文字サイズ」が15pxという指定のものもあれば、20pxなどのものもあります。

2:「文字サイズ」を大きくする理由

FC2ブログの記事内の「文字サイズ」を大きくする理由としては、主に次のような場合が考えられます。

  • 特定の文字列だけ(単語など)を、強調するために使いたい。
  • 記事の文章が小さくて読みにくいので、全体的に文字サイズを大きくしたい。

上述「2」については、記事を書くたびに変更しなければいけないことを考えると、CSSで変更する方が効率的ではあります。

3:FC2ブログで「文字サイズ」を変更する方法

CSS」などという聞いたことのない言葉が出てきて驚いた人もいらっしゃるかもしれませんが、CSSのスキルがなくても、文字サイズの変更は可能ですのでご安心ください。

FC2ブログには、CSSを使わずに「文字サイズ」を変更する方法は2つあります。

  • 標準モード用の「文字サイズ」変更ボタンを使う。
  • 高機能テキストエディタ用の「文字サイズ」変更ボタンを使う。

4:標準モードの「文字サイズ」いろいろ

標準モード用の「文字サイズ」ボタン

標準モードの「文字サイズ」には、次の3つの選択肢があります。

「文字サイズ」
の選択肢

タグの状態

<span>タグで、style="font-size: x-large;"が指定されます。

<span>タグで、style="font-size: large;"が指定されます。

<span>タグで、style="font-size: x-small;"が指定されます。

元のサイズと比較して表示すると、次のようになります。

標準モードの「文字サイズ」変更後のサンプル

5:高機能テキストエディタの「文字サイズ」いろいろ

高機能テキストエディタの「文字サイズ」ボタン

高機能テキストエディタの「文字サイズ」には、次の5つの選択肢があります。

「文字サイズ」
の選択肢

タグの状態

xx-small

<font>タグで、size="1"が指定されます。

x-small

<font>タグで、size="2"が指定されます。

small

<font>タグで、size="3"が指定されます。

medium

<font>タグで、size="4"が指定されます。

large

<font>タグで、size="5"が指定されます。

元のサイズと比較して表示すると、次のようになります。

高機能テキストエディタの「文字サイズ」変更後のサンプル

現状(2010/01/11)においては、<font>タグは非推奨タグですので、標準モード用のボタンを使う方が良いかもしれません。

6:「文字サイズ」を変更する場合の留意事項

  • 意味もなく、文字を大きくしたり小さくしたりすると、逆に読みにくくなります。
  • タイトルや見出しよりも文章内の文字を大きくしてはいけません。強調の効果は逆に減退します。

判断の基準は、ターゲットとするユーザから「読みやすい」と感じてもらえるかどうかです。気をつけて利用しましょう。


FC2ブログの記事内で文字サイズを大きくする方法

(01)

標準モード用のボタンを使って、「文字サイズ」を変更する方法について書いていきます。

まず、文章を書きましょう。

文章を書く

(02)

文字サイズを大きくしたい箇所を、範囲選択してください。

文字を範囲選択

あるいは、全体的にすべての文章を大きくしたいような場合は、すべて範囲選択しましょう。

すべて範囲選択

すべてを範囲選択するような場合は、[Ctrl]+[A]キーを打鍵すると便利です。

(03)

「文字サイズ」を変更するボタンを、クリックしましょう。([大]、[中]、[小]お好きなものを)

「文字サイズ」を変更するボタンをクリック

(04)

指定した箇所の文字列の文字サイズが、変更されているはずです。

文字サイズが変更されました

文字が重なってしまったときの対応方法

(01)

文字サイズを変更すると、次のように文字が重なってしまうことがあります。(これは困った)

文字サイズを大きくしたら文字が重なってしまった

(02)

多くの場合、この「文字が重なってしまう」という現象は、CSSの指定の仕方が原因で起こります。

CSSにて、「line-height」の指定を、単位つきで書いていると、文字が重なってしまうことがあるのです。

「line-height」の指定が、単位ありになっている

単位は「em」だけとは限りません。テンプレートによっては「px」などで指定していることもあるかもしれません。

(03)

テンプレートによって違うので、指定箇所を明確にお話することはできません。「line-height」で、検索をかけて探してみてください。

そして、次のように単位を削ってみましょう。

「line-height」の指定を、単位なしにする

一般的に「body」に対して「line-height」を指定していることが多いように思います。

(04)

ブログの表示確認をしてください。おそらく、文字の重なりが解消されているはずです。

ブログの表示確認

CSSのスキルに不安がある場合は、詳しい人にお願いするか、CSSを覚えるしかありません。

前の記事へ
次の記事へ

次回予告

次回は、FC2ブログのプラグインを使った親子カテゴリにする方法(中級者用)を書きます。


関連記事

FC2ブログの作り方をご紹介している記事です。

1:FC2ブログのエディタで文字サイズを変更する方法

2:CSSを使った文字サイズを変更する方法

カテゴリの記事一覧

作成日:2010/01/16 更新日:2010/01/16

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

CSS

そうなんですよね~、CSS覚えるしかないんですよね~(-_-;)
ちょっとしたことなんでしょうが、うまく表示がなされない、
という事がよくありますからね・・・。
なんでも一人でできれば言うことなしなのですが(^_^;)

いろいろ

fuminchuさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

そうですねー、
覚えるといろいろとできますねー。

でも、fuminchuさんの場合、
お忙しいから。(´Д`;)

なかなかねー、大変ですよねー。
英語とかもあるしー。

No title

kumaCrowさん、こんにちは。

今日の文字の大きさを変えるのは、私でもできそうです。
今度余裕があるときにやってみますね。

お花を頭に咲かせてるおじさんは、どなたですか?(笑)

もじもじ

おしゃれrinkoさん、こんにちは!(・∀・)/Hello
コメントありがとうございます。

そうですねー、何か強調したいような場合にでも、
お試しになってみてくださいませ。(´▽`)♪

でも、今のままでじゅうぶん読みやすいので、
それほど必要ないかもしれませんけどねー。

お花を頭に咲かせているおじさんは、デギンさんです。

「そんな恥ずかしいことは、できん」と言いつつ、
頭にお花をのせてしまう、かわいい人です。

子供が5人います。

はじめまして

こんばんは!旅かぼちゃと申します。
ちょこちょこ覗かせていただいてますが、今までご挨拶もせず、読み逃げしておりました(汗)。
自分のブログ記事の中にこっそりと(のつもり)、こちらのブログのリンクを張っただけなのに、はてブして頂きましてありがとうございます。

とてもわかりやすく解説されてるので、色々と勉強になってます。GIMPやInkscapeもインスコして、KumaCrowさんのようなイラストが書けたらいいな~と(適当に)頑張っています(笑)。
というようにKumaCrowさんを教祖と仰いでおりますので、これからも頑張ってください!
コメント書くのが苦手な割にはいっぱい書いてしまいましたw
またお邪魔させていただきます。(ぺこり)

ミカン

旅かぼちゃさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

読み逃げ、ぜんぜんOKです。

mixiみたいなルールはありませんから、
お気軽にどうぞー。ヾ(*´∀`*)ノ

それから、リンクしていただいて、
ありがとうございます。

お礼も申し上げず、すみませぬ。
勝手にはてブもしちゃって、すみませぬ。(´Д`;)

GIMPだけでなく、Inkscapeもですかー、
頑張り屋さんなのねー。(´▽`)♪

あのミカンは、Inkscapeで描いたのかしら。
いい感じですね。

良かったら、
また、遊びにきてくださーい。(ぺこり)

ぐれーと で・ぎーーーん!w

兄上。。。ワタクシ、CSSなんて食べられないもの、わからないから、「改行」で重ならないようにしておりまする^^;
OKかどうかは、わかりかねますが、行間が広くても文字が重なるよかマシ♪っとなw

文字の大きさ、色などは けっこう使います♪
ついでに以前も伺ったかと思いますが・・・やっぱり、できたらいいなあ。。。できないかしらん・・・のお伺いです^^;

文字を「大」や「中」、「太い(B)」などにした場合、その文字にリンクがうまく貼れません。
なんでやろーーー(T0T)

なぜか、出来る時もあるのが不思議なのですが、我ながら あれこれやってるうちに出来てるから理解していません^^;

文字を大きくしておいて、そこにリンクを貼ると多分できません。通常サイズになります。
リンクを先に作っておいて、文字を大きくするとリンクが消えます。

たまたま出来た時は、文字を先に作っておいて、その上にURLからでなく、リンクを別のとこで作っておいて、上から貼りつけて出来たことがあります。・・・今、何回やっても出来ないから違うのかも・・・
できたのは、私のブログの「はじめまして」と「ブログ紹介」の2つの記事の中の、紹介ブログタイトルに貼ったリンクだけだと思います。

んーーー^^; ンマイ方法ありませぬか? もちろん高機能バージョンで・・・CSS?でないと無理ならあきらめまする^^;



高機能テキストエディタで、リンクが設定されない件

ありんこさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

【対応方法】:

たしかに、リンクを入れてから、
文字サイズや太さを変えると失敗するみたいです。

私の場合は、
次の手順であればできました。

 1:文字サイズや太さを変える。
 2:リンクを入れる。

とりあえず、この順番であれば、
何回やっても問題は起こりませんでした。

【発生した理由】:

入れる順番によってうまくいかないのは、
バグかもしれません。

【補足】:

同じ文字列で何度も試すと、

不要なタグがゴミのようにたまって、それがじゃまして、
うまく表示されないということがあるのかもしれません。

うまくいかないときは、打ち込んだ文章を、
一度メモ帳などのテキストエディタなどに貼り付けて、

タグが無い状態にしてみてください。

改めて、テキストエディタのタグの無い文章をコピーし、
FC2ブログの入力欄へ貼り替えて、試してみると良いかもしれません。

見えないゴミ・・・裏ではそういうのが積み重なってるんですねー^^;知らなかった・・・
文字の装飾をしてからリンク、失敗したらよそでつ作っておいてやりなおす、ですね?
わかりました!やってみます♪
ありがとうございます^0^

ありんこさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

文字は消えても、タグが残ることは往々にしてありそうです。

そうですね。
装飾してからリンクなら、おそらく問題ないかと思います。

お試しあれー。

でけたー♪

文字装飾してからリンクできました~♪ありがとうございまする~^0^
私、もしかして、URLじゃなくてソース入れようとしてたのかしらんw

・・・ばか・・・(T▽T)w

ソース派 vs 醤油派

ありんこさん、こんばんあん( ・∀・)ノあーん
コメントありがとうございます。

でけたーようで、何よりです。
良かったばい。

ソースどんまい。ヽ(´ー`)ノ

助かります^ ^

ブログ初心者で文字を大きくする方法もまったくわからず苦戦していたので、かなり助かりました(≧∇≦)

FC2の説明はcssの変更方法みたいな事しか書かれておらず-_-b

ホント助かります。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/623-7e639dfd
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて