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

THE THOR【ザ・トール】行間とフォントサイズのカスタマイズ方法を紹介します。

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

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

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

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

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

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

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

目次

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

記事ごとに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フォントは読み込みに時間がかかるからです( ̄▽ ̄;)

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

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

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

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

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

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

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

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

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

「見出し1」の場所を紹介します。

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

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

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

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

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

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

THE THOR(ザ・トール)の追加CSSの紹介をします

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

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

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

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

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

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

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

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

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

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

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

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

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

THE THOR(ザ・トール)文章の行間とフォントサイズのCSS♪「div」も指定

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

THE THOR(ザ・トール)リストの行間とフォントサイズのCSS♪「li」も指定

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

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

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

THE THOR(ザ・トール)見出し&段落等の行間のフォントサイズ

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

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

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

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

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

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

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

THE THORではWEBフォントのプラグインは使用できませんでした。
手書き風の文字は、レンタルサーバーに用意されている無料の手書き風文字を使用しましょう。

そら
レンタルサーバーによって違いますので、私が使用したことがある2つのサーバーでのWEBフォントの使い方を下の記事で紹介しています。
興味がある方はどうぞ♪

Xサーバー【THE THOR】手書き風日本語WEBフォント簡単に使用♪

ConoHa Wing【THE THOR】手書き風日本語WEBフォント簡単に使用♪

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

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

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

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

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

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

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

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

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

THE THORの行間を広げるコピペ文を紹介
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。

サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら