はてなブログで文字サイズや行間を変更する|CSSコード紹介

はてなブログでは、ブログ内の文字サイズを変更する公式ツールがありません。

参考|はてなブログ 文字の大きさを変える

文字の大きさを変更したい、また目次の文字サイズや行間についてもカスタマイズしたいと思い、コードを探しましたのでご紹介いたします。

今ご覧のページはワードプレスで作成したものです。
コードを反映させた、はてなブログのデモページはこちらご参照ください。

この記事に当てはまる方

  • はてなブログを全体的に、読みやすいように変更をしたい方
  • コードの説明が欲しい方

管理人の備忘録とアウトプットを兼ねています

使い方(簡易)

  1. デザイン設定の[カスタマイズ]を開く
  2. CSSコードを【デザインCSS】に貼る

コードを貼る前(変更前)にするべきこと

今回は、「デザインCSS」にコードを貼っていきます。
つきましては、見出しのデザインコードを貼る前に、必ず現段階の「デザインCSS」を保存しておいてください。

もし失敗してブログデザインが崩れてしまったら、元に戻すのに大変な時間を食います。

経験者は語ります。

場所はPCのメモでも、GoogleKeepでも、iOSのメモでも、なんでもよいので、ご自身が使いやすいところに保存ください。

個人的には、保存ボタンを押さなくても記入するだけで保存してくれる、Google,iOSなどのクラウドサービスがおすすめです。

フォントサイズなど変更コード|CSS

モーリーさんのコードをいただきました。
とても丁寧に説明されていてわかりやすく、とても助かりました。

以下のコードを、

【ダッシュボード】➡【デザイン】➡【カスタマイズ(=真ん中のスパナマーク)】➡【デザインCSS】に貼り付けます。

/* 文字のフォントの種類を一括で変更 */
body{ 
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; /*フォントの種類*/
}
/* 記事タイトル */
.entry-title a{
font-size: 22px; /* 文字サイズ */
line-height: 1.6; /* 行の高さ */
}
/* 本文 */
.entry-content {
color: #333333; /* 文字の色 */
font-size: 16px; /* 文字サイズ */
line-height: 2.0; /* 行の高さ */
}
/* 段落 */
.entry-content p {
margin: 0px 0px 0px 0px; /* 周囲の余白 上右下左の順 */
}
/* 目次 */
.table-of-contents a {
font-size: 16px; /* 文字サイズ */
}
/* テーブル */
.entry-content table {
font-size: 14px; /* 文字サイズ */
line-height: 1.6; /* 行の高さ */
margin: 10px 0px 10px 0px; /* 周囲の余白 上右下左の順 */
}

記事タイトル

各記事のタイトルのフォントサイズや行の高さが変更できます。

本文

記事本文のフォントサイズ、行間、文字の色を指定できます。

Google公式では本文のフォントサイズについて16px以上で、人の目からして読みやすいサイズを推奨しています。

Googleの提唱するフォントサイズは16px
引用元:モバイルフレンドリー対応_GoogleとAppleの推奨フォントは?

段落

記事を書くとき、エンターキー(Enter)で改行を行います。この改行の余白を指定します。
管理人の場合、「改行」と「行間」の幅に差をつけたかったので、以下のように数値を変更しています。(なんとなく見やすいきがする)

margin: 10px 0px 0px 0px;

ちなみに、「Shift」+「Enter」は行間余白で改行できます。同一の段落内で改行したいときは「Shift」+「Enter」、一段落つけたいときは「Enter」と使い分けています。

「Shift」+「Enter」

こんにちは
ぼく、ドラえもんです
もしもボックス~!

「Enter」のみ

こんにちは

ぼく、ドラえもんです

もしもボックス~!

目次

目次の文字の大きさを変更できます。

テーブル

テーブルとは、以下のような表のことです。

好きなホラー映画ジャンル詳細公開年
エスターサイコ2009
SAWサイコサスペンス2004
残穢ジャパニーズホラー2016
ミストトラウマ2007
ジェーン・ドウの解剖怪奇現象2016

Googleスプレッドシートでテーブルを作成し、それをはてなブログの記事編集画面にコピペするだけで掲載できますので、とても便利です。

このテーブルの文字サイズ、行間、テーブル周辺の余白を設定できます。

反映されなかったコードとその対策

モーリーさんのコードで、管理人のブログでは反映されなかったコードがありましたので、その対策をご紹介します。

(反映されなかった理由は、使用しているテーマデザインとの相性の問題だと思います。)

ソースコード

ソースコードのデザイン変更CSSについて、管理人のブログではバックグラウンドの色などが反映されませんでした。

ソースコードとは、以下のようにコードをはてなブログの記事内で紹介する際に使う、以下のような表示デザインです。

/* ソースコード */
.entry-content pre.code {
background-color: #282a36;
color: #ffffff;
}
.synComment { color: #6272a4; } /* コメント */
.synIdentifier { color: #bd93f9; } /* 識別子 */
.synPreProc { color: #a199c8; }/* プリプロセッサ */
.synSpecial { color: #c000c0; }/* 特殊文字・記号 */
.synStatement { color: #50aeae; }/* ステートメント */
.synType { color: #ff79c6; }/* 型  */

こちらはワードプレスのページですので、はてなブログデモサイトご参照ください。

え、デザイン表示されてるじゃん

と、思われたかもしれませんが、あのソースコードデザインCSSは、「はてなブログシンタックスハイライト CSS ジェネレータ」で作成し、コードをいただき貼り付けしました。
カラー変更も簡単にできますので、大変助かりました。

はてなブログにソースコードを貼り付ける場合、「はてな記法」または「Markdown記法」モードで、それぞれのコード貼り付け用のタグを用いて表示させます。

はてな記法のタグ

>|言語名|


ソースコード

||<

>|| ||<でコードを囲むと、その中のコードをシンタックスハイライト(色分け表示)してくれます。

Markdown記法

```言語名

ソースコード

```

``` ```でコードを囲むと、中のコードをシンタックスハイライトしてくれます。

見出しタグ

見出しデザインCSSについて、管理人のブログでは文字のサイズの変更が反映されませんでした。
また、他にも気に入った見出しデザインを採用したく別のコードを使用しています。

見出しデザインと、見出しの文字変更方法についてはこちらご参照ください

はてなブログ 見出しデザインや見出し文字サイズを変更する

2022/8/20    

この記事では、はてなブログでの見出しデザインと、見出しの文字サイズ変更方法をご紹介します。 見出しはコンテンツの顔といっても過言ではない箇所です。各々のコンセプトに合った、素敵なデザインにしましょう。 ...

合わせて、見出しのh2タグを未設定の方はこちらも一読ください。
h2タグは大切なものですので、早い段階での設定を強くおすすめします。

はてなブログではh2がない!見出しタグの適切な使い方と、設定方法を解説

2022/8/20    

今回は、はてなブログでの見出しタグの使い方について説明していきます。 デフォルトのままで使用していますと、Google側が提示しているSEO(検索エンジン最適化)にそぐわない記事になってしまいますので ...

まとめ

今回、モーリーさんのコードのおかげで、ブログ全体の改善ができました。本当にありがたいです。

皆様のブログにとっても、最適なデザイン設定の参考に立てましたら幸いです。

現在ははてなブログではなく、ワードプレスでブログ活動を行っております。はてなブログProを選択しなかった理由をまとめましたので、はてなブログProを検討中の方、ブログ収益化を検討中の方はぜひご参照ください。

https://samurai0505.com/hatenapro-wordpress/

はてなブログカスタマイズ 関連記事

はてなブログProに契約しなかった理由|本気でブログをするならワードプレス一択

2022/10/15

この記事では、はてなブログ無料版から、有料版に移行しなかった理由をお伝えします。 本気でブログ収益化を目指そうと思い、はてなブログ無料から有料版「はてなブログPro」への移動を考えましたが、様々な方面 ...

はてなブログ画像リンクを一括変更する|Search Regexの使い方徹底解説

2022/8/20

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。 この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。 今回使用 ...

はてなキーワードのリンクを、ワードプレスで消す方法を徹底解説|失敗談あり

2022/8/20

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードペ ...

はてなブログで表をスクロールさせる|コピペで簡単に表が見やすくなるコード

2022/8/20

officeエクセルやグーグルスプレッドシートで貼り付けた表やテーブル。 スマホ表示にしたときに、はみ出して見れないなどといったことがないように、大きくなった表には横スクロールをつけましょう。 使い方 ...

はてなブログで一部のサイドバーのみを、スマホで非表示にするコードを公開

2022/8/20

スマホでは不要なサイドメニュー非表示にして、スマホの表示をスッキリさせましょう。

このサイトはアフィンガーを使用しています

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

  • B!