BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ ブログ文章の行間と文字のフォントを変更する方法

このエントリーをはてなブックマークに追加

はてなブログカスタマイズ ブログ文章の行間と文字のフォントを変更する方法

   投稿日: 2017/11/16    投稿者:webコラム

702cf178002e099b16dc8cd31cad29b3_s.jpg

こんにちは! ライターのモモタロウです。

今回は、はてなブログカスタマイズ ブログ文章の行間と文字のフォントを変更する方法をお伝えします。

ブログ記事の文字のフォントを変更しよう


20171014-3.jpg
上の画像のフォントを大きくします。

まず、はてなブログにログインします。
20171014-1.jpg

「ダッシュボード」から「デザイン」をクリックします。

20171014-1-1.jpg

左上のメニューバーにある「スパナ」ボタンをクリックして、
「{}デザインCSS」をクリックします。

CSS編集枠の中に、以下のタグを書き込みます。

.entry-content {
    font-size:30px;
    line-height:1.8em;
}
少し極端なフォントの大きさで、
  font-size:30px; としてみました。

変更を保存して、ブログを確認すると・・・

20171014-8-30.jpg

かなり大きくなりました。ブログに合った任意の大きさに数字を変更するとよいでしょう。


文章の行間を変更しよう


次に、ブログの文章の行間を変更してみよう。
先ほどの「{}デザインCSS」で、

.entry-content {
    font-size:16px; ←これが、デフォルトの大きさです。
    line-height:1.8em; ←これが、デフォルトの大きさです。
}


20171014-2.jpg



.entry-content {
    font-size:20px; ←フォントの大きさをわずかに上げてみます
    line-height:2.3em; ←2.3emに変更してみます。
}

20171014-6.jpg

変更を保存して、ブログを確認すると・・・

20171014-7.jpg


文章の行間が開きました。

まとめ


如何でしたか。 今回は、文章の行間と文字のフォントの大きさを
まとめてお伝えしました。是非、試してみてくださいね。



カテゴリ:

TOPへ