ゼロから始めるハタチの人生

いろいろなことを書いています。

【コピペで簡単!】はてなブログでフォントの大きさを変える3つの方法【目的別】

こんにちは。ベレです。

 

はてなブログのフォントサイズ小さいなあ。」

はてなブログでフォントの大きさを変えたい‥‥!!」

 

そう思ったことはありませんか?

 

はてなブログのフォントサイズは、デフォルトの設定だと少し小さめですので、初期設定のままでブログの記事を書くと、非常に見づらいブログになってしまいます。

 

せっかくいい記事を書いても、「見づらい」という理由で誰にも読まれないのは、悲しいですよね。

 

ですので、はてなブログでブログを書く際は、ぜひともフォントサイズを大きくしてから記事を書き始めてほしいです。

 

 

本記事では、はてなブログのHTMLとCSSを編集して、フォントサイズを見やすくする方法を3つご紹介します。

 

コピペでできるようにテンプレートも作成しましたので、ぜひ参考にしてみてください。 

 

目次

 

1.フォントサイズを変更する方法①:「HTML編集」でCSSを書く

 ・文章を変更したい場合

 ・文字だけを変更したい場合

2.フォントサイズを変更する方法②:「デザインCSS」に直接書く

 ・本文全体のフォントサイズを変更したい場合

3.まとめ

 

1.「HTML編集」に設定する方法

 

・文章を強調したい場合

 

特定の文章を強調したい!!

 

例文のように、本文全体のフォントサイズを変更せずに、一部のフォントサイズを変更したいときに有効な方法です。

 

では、上の例文をつくる方法を見ていきます。

 

 

手順①

「HTML編集」を押し、HTML編集画面へ移動する

はてなブログ

 

 

手順②

強調したい文章の <p> の中に、以下のコードをコピー&ペーストする

 style="font-size: 30px;"

  ※注意

全て半角小文字です。

・style の前には半角スペースがあります。

・半角数字「 30 」の部分を変更することで、自由に文字サイズを変えることができます。自由に好きな数字を入れてみて、自分が一番しっくりくる文字サイズにしてみてください。

 

フォントサイズに正解はありません。自分で見てみて、自分のイメージに合うフォントサイズに設定しましょう。

 

あなたのブログ記事の最初の読者はあなた自身ですから、フォントサイズは自分の感覚で決めていいんです。

 

 

手順③

最終的にこのようになっていることを確認する

<p style="font-size: 30px;">特定の文章を強調したい!!</p>

はてなブログ

 

完成!!

 

これの状態で「みたまま編集」「プレビュー」を開くと、フォントサイズが変更されており、「特定の文章を強調したい!!」が大きく表示されているはずです。

 

・文字だけを強調したい場合

 

特定の文字だけを強調したい!

 

といった、文章の中の文字だけのフォントサイズを変更する方法です。

では、上の例文をつくる方法を見ていきます。

 

 

手順①

「HTML編集」を押しHTML編集画面へ移動する

はてなブログ

 

 

手順②

強調したい文字のに、以下をコピぺする

<span style="font-size: 30px;">

 

 

手順④

強調したい文字の後ろに、以下をコピペする

</span>

 

 

手順⑤

最終的に、このようになっていることを確認する

<p>特定の<span style="font-size: 30px;">文字だけ</span>を強調したい!</p>

はてなブログ

 ※注意

すべて半角小文字です。

 ・半角数字「 30 」の部分を変更することで、自由に文字サイズを変えることができます。いろいろな数字を入れて、試してみましょう!

 

完成!!

 

2.「デザインCSS」に設定する方法

 

今紹介した方法は、細かい設定に向いていますが、本文全体のフォントサイズを設定する方法として、適切ではありません。

 

先ほど紹介した方法でもできなくはないのですが、いちいちコピペしていたのでは、面倒くさいです。

 

そこで、本文全体のフォントサイズを変更する方法をご紹介します。

 

ちなみに、このブログも全体のフォントサイズを少し大きくしています。

 

どうですか?読みやすいですか?

 

 

手順①

ブログトップから、「デザイン」を開く

はてなブログ

 

手順②

「カスタマイズ」から「デザインCSS」を開く

はてなブログ

 

 

手順③

「デザインCSS」の中に、以下をコピペする

.entry-content p {font-size: 18px; }

 ※注意

すべて半角小文字です。

・半角数字 「18」の部分変更することで、自由に文字サイズを設定できます。いろいろな数字を入れて、試してみましょう!

 

ちなみに、この18という数字は、大体この記事の本文のフォントサイズです。

 

少し大きめですが、字は大きいほうが見やすいのではないかと思い、このようなフォントサイズに設定してあります。

 

手順④

 

完成!!

 

何か記事を書き、「プレビュー」を見てみると、本文全体のフォントサイズが少し大きくなっているはずです。

 

3.まとめ

 

いかがでしたでしょうか。

ご参考になったのであれば、幸いです。

 

フォントサイズはブログの第一印象です。

より見やすいブログにするアイデア、ぜひお試しください!