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

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

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

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

前半ではTHE THOR（ザ・トール）でのフォントと行間の設定方法。

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

ブログは、見出し、段落、文章、リスト等色々な種類で出来ています。
それぞれの行間を設定する事をオススメします(^^♪

＜広告＞

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

＜ PR ＞

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

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

クラシックエディタ

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

ブロックエディタ

フォントの変更は出来なさそうですが(￣▽￣;)
青丸の箇所をクリックすると用紙してるフォントサイズを変更することが出来ます。
自分の好きなサイズにする場合は「カスタム」に数字を入れてください。

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

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

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

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

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

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

＜ PR ＞

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

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

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

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

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

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

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

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

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

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

＜ PR ＞

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

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

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

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

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

THE THOR（ザ・トール）で行間を広げよう

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

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

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

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

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

＜ PR ＞

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

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

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

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

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

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

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

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

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

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

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

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

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

必ず半角文字になっていることを確認して作業をしてください。

THE THOR（ザ・トール）見出しのフォントサイズと行間のＣＳＳ

「/*」から「*/」で囲んであるのは、スタイルの変更に関係ないコメント文です。

THE THOR（ザ・トール）ＣＳＳの記述の意味紹介

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

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

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

THE THOR（ザ・トール）文章の行間とフォントサイズのＣＳＳ♪「div」も指定

ブロックエディタで「段落」で書いていればいいのですが、「グループ化」した場合など「DIV」も指定した方がいいです。

THE THOR（ザ・トール）リストの行間とフォントサイズのＣＳＳ♪「li」も指定

ブログ中でよく使用する「リスト」も行間＆フォントサイズを指定したい場合はこのコードを追加します。

THE THOR（ザ・トール）見出し＆段落等のフォントサイズと行間のＣＳＳの記述をいじり倒そう

１行目はフォントサイズです。
数字が大きいほど文字が大きくなります。
2行目は文字間隔です。
数字が大きいほど文字と文字との間隔が大きくなります。
３行目は行の高さです。
この数字が大きいほど、行間が開きます。

＜ PR ＞

THE THOR（ザ・トール）見出し＆段落等の行間のフォントサイズ

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

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

もう1つの行間をカスタマイズするコード

あまりおすすめはしないコードではあるのですが(￣▽￣;)
強制的に、指示に従いなさい！
というコード「!important」をつけたしたものになります。
このコードをつけたら、行の高さを指定するだけになります。

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

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

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

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

ランキングに参加しているのでクリックしてくださると嬉しいです(^^♪

アフェリエイトの登録は無料です！

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/