コピペOK【ザ・トール】行間とフォントサイズのカスタマイズで見やすく

THE THOR(ザ・トール)のデフォルト状態の行間。

スマホで見た時なんですが、狭いと思いませんでしたか?

この記事では、THE THOR(ザ・トール)の行間とフォントサイズの変更の方法を紹介します♪

前半ではTHE THOR(ザ・トール)での設定方法。

後半ではCSSを使って、自分の好きなだけ行間を広げる方法を紹介します(^^♪

テーマのスタイルに追加記入するわけでもありませんので、バックアップの必要もありません。

目次

THE THOR(ザ・トール)行間を広げよう、ちょっと横道

手書き風フォントが使えるのって面白い

2019/11/06
フォントの検索をしてこの記事に来てくれている方がいらしたので、フォントの色やサイズなどの変更について追記しました。

2019/03/02
フォントの変更~フォントサイズの変更・そして追加などの詳しい記事を作成しましたので、興味がある方はどうぞ♪

>>>>>wordpress【THE THOR】手書き風フォントを使う!追加方法を紹介♪

THE THOR(ザ・トール)の設定でフォントサイズを変更方法

記事ごとにTHE THOR(ザ・トール)のフォントサイズ変更

個別でフォントを変更する時は、エディタで変更することが出来ます。

赤丸をクリックするとフォントの種類が、青丸をクリックすると個別でフォントのサイズが変更できます。

THE THOR(ザ・トール)「基本スタイル」でサイト全体のフォントサイズ変更

そして全体のフォントサイズも変更できます。

画面左側の刷毛マーク「外観」 → 「カスタマイズ」をクリックしてください。

「基本設定」をクリック → 「基本スタイル設定」をクリックしてください。

「基本スタイルの設定」画面が表示されます。

THE THOR(ザ・トール)デバイス別のフォントサイズ変更

スマホ表示時のフォントサイズの変更

■スマホ全体のフォントサイズを選択

THE THOR(ザ・トール)のデフォルトのフォントサイズは「小」になります。

私は小さい画面で見るなら大きい方がいいかなぁと思い「大」に設定してあります。

PC表示時のフォントサイズの変更

■PC全体のフォントサイズを選択

こちらもTHE THOR(ザ・トール)のデフォルトのフォントサイズは「小」になります。

私はPC画面は「中」に設定してあります。

THE THOR(ザ・トール)サイト全体のフォント変更方法

サイト全体でフォントの種類を指定する

デフォルトのフォントの種類は「游ゴシック体」になっています。

私は「メイリオ」に設定してあります。

どのフォントにするのかは、お好みでいいです。

WEBフォントはおすすめしない

が、ここでちょっと注意点。

私は「NOTO Sans JP(WBフォント)」はおすすめしないです。

このWEBフォントの読み込みに時間がかかるから( ̄▽ ̄;)

このフォントを使っていなければ、心おきなく読み込まない設定に出来るから

「Google search console」でページの読み込みに時間がかかって警告を受けた時は、このフォントを読み込まないように設定しましょう( ̄▽ ̄;)

この記事ページの表示速度を上げるための「WEBフォント」を読み込まない設定の話は別記事を作成します♪

THE THOR(ザ・トール)で行間を広げよう

行間はあいている方が見やすい

投稿したページをWEBで見た時、エディタでみている行間と違っていませんか?

カスタマイズしないままだと行間があまり空いていないので、私は見ずらいと感じてしました。

とくに、スマホで見た時の行間がとても詰まって見えました。

ここでは、投稿記事の書き方と、見やすくするための行間のカスタマイズのやり方を紹介します。

コピペしてカスタマイズしましょう♪

行間を広げるCSSをコピペする前にTHE THOR(ザ・トール)の行の種類を説明

下の画像の様にばっちり「タイトルを追加」なんて書かれていますが、ここに書いた文はタイトルではなく「見出し1」です。

段落の横の▼をクリックすると、上で「見出し1」を使っているので「見出し2」から始まっています。

この、それぞれの見出し行と、通常行の行間の設定をCSSでしていきます。

THE THOR(ザ・トール)CSSコピペは「追加CSS」

THE THOR(ザ・トール)フォントサイズと行間をカスタマイズ

行間とフォントサイズのカスタマイズを始めます。

画面左側の刷毛マークの「外観」→「カスタマイズ」→「追加CSS」をクリックしてください。

 

THE THOR(ザ・トール)見出し文の行間指定に必要なもの

〇で囲っているCSSだけだと見出し文の行間が無視されました。

そこで見出し文の行間への指示は「高さ」だけだと無視されたので、高さだけではなくフォントサイズ&文字間隔&行の高さの指示を追加しました。

見出し文の行間が無事あきました。

THE THOR(ザ・トール)見出しのフォントサイズと行間のコピペ文紹介

THE THOR(ザ・トール)見出しのフォントサイズと行間のCSSの大まかな説明

/*---------段落のカスタマイズ--------*/
p { line-height:300%; }
/*-------見出し2のカスタマイズ--- */
.content h2 {
font-size: 20px; /*フォントサイズ*/
letter-spacing: 2px; /*文字間隔*/
line-height: 30px; /*高さ*/
}

「/*」から「*/」で囲んであるのは、スタイルの変更に関係ないコメント文です。
説明の意味で書きましたので、コピペ文は下の文になります。

THE THOR(ザ・トール)見出しのフォントサイズと行間のCSSのコピペ文

/*-------段落のカスタマイズ--------*/
p { line-height:300%; }
/*-------見出し2のカスタマイズ---*/
.content h2 {
font-size: 20px; /*フォントサイズ*/
letter-spacing: 2px; /*文字間隔*/
line-height: 30px; /*高さ*/
}

THE THOR(ザ・トール)CSSの記述の意味紹介

意味を説明します。

「 ;  」が文の終わりを表しています。
普通の文でいう「。」の代わりをしてくれています。

「p」は通常文(段落)への指示になります。
パーセントが多くなればなるほど自動改行で出来る行間が空きます。

「h2」と書かれているのは「見出し2」への指示です。

他の見出し文の設定をしたい時は、hの横の数字を 1 ~ 5 に変えて下にコピペしていってください。

THE THOR(ザ・トール)段落の行間とフォントサイズのCSS記述のカスタマイズ方法

もし、通常文のフォントサイズを変更したい時は↑の「h2」の所を「p」に変えてください。

上記のように通常文のフォントを細かく指定する時は1行目の「 p { line-height:300%; } 」は消してください。

/*-------段落のカスタマイズ--------*/
.content p {
font-size: 20px; /*フォントサイズ*/
letter-spacing: 2px; /*文字間隔*/
line-height: 30px; /*高さ*/
}

THE THOR(ザ・トール)見出しのフォントサイズと行間のCSSの記述をいじり倒そう

1行目に書かれている「p」の数値は大きいほど行間が空きます。

フォントサイズなど色々自分で変更してみてしっくりするサイズを設定してみたください。

THE THOR(ザ・トール)見出し文の行間とフォントサイズ

見出し文の行間は、高さ-フォントサイズ=行間の幅だと思ってください。

この計算で出てくる行間の幅の数字が大きいほど行間が空き,小さいほど行間がつまります。

最後に「公開」ボタンをクリックしてください。

THE THOR(ザ・トール)タイトルの設定

エディタ画面を下にスクロールしていくと画面の下に title設定があります。

①が検索したときに表示されるタイトルになります。先にも説明しましたが「投稿の編集」の下にタイトルを追加とありますが、あれは見出し1にるので気を付けてください。

②description設定が検索したときに表示される説明文になります。

書くところは大きくとってあり、文章を長く書けるようになっていますが、だまされてはいけません。

長い文章を書いても・・・・と表示されるだけです。

何か検索してみてください。

検索の説明文は1行45文字程の文が3行あるか無いかで表示されていると思います。

私は説明文は100文字前後をお勧めします。

③はインデックスされて検索されないようにしたい時、ここにチェック入れます。

④はフォローをされないようにしたい時、ここにチェック入れます。

私は、「お問い合わせ」「プライバシーポリシー」のページの時はチェックいれていますね。

【THE THOR】(ザ・トール)フォントサイズと行間まとめ

記事を書いていて見やすいように改行して行間を開けていますが、画面サイズに合わせて自動に改行される行間はカスタマイズで指定する所がありません。

(あったらごめんなさい。教えてください)

このフォントサイズと行間のカスタマイズのやり方は、テーマエディタを直接いじるわけではないので私はおすすめです。

そして私は行間だけの指示が無視されてなぜだ~~~、どうしたらいいのかと追加CSSの記述を調べるのにすごく時間がかかりました。

きっと探している仲間がいるんじゃないかなぁと思い書いてみました。

 

/Decoration/TOOL/そらのまなびぶろぐ/THE THOR/AFEREIT/

最新情報をチェックしよう!