
THE THORには見出し、目次など多くの機能が備わっていてデザインも数多く初期装備されてるよね。
自分の好みのスタイルがない場合はCSSやHTMLを使ってカスタマイズをする必要があるみたい。
manablog風にしたいんだけどTHORでは、CSSコードや設定はどうしたらいいですか?
今日は↑↑こんなお悩み↑↑に答えていきます。



こんにちは!あいうえおLIFE(@pledge17uchs)です。
有料テーマ【THE THOR(ザ・トール)】のデザインっておしゃれだし、きれいで惚れますよね・・・。
僕もmanablog好きなので、ブログのデザインを近づけたくて、色々と試行錯誤して、必死でした。
結論からいうと、JINよりTHORの方が、イメージ的にはかなり近づけるので、本記事の設定をTHE THORでカスタマイズして、お気に入りブログを作りましょう。
理由は、当ブログとは別にぼくが運営している「特化ブログ:人生を変えた映画・アニメBlog」でmanablogに近づけたくて、必死に取り組んだから。
とはいえ、本当にできるのかなって不安になりますよね。
本記事のメリット
- THE THORで「追加CSS」にコードを追加する方法や手順
- 「SEO対策」のための「style-user.css」にコピペして、「追加CSS」から移す方法
- 「manablog風」にTHORで仕上げるコードや手順を理解することができる
- お気に入りブログになれば、執筆へのモチベが爆上がりするようになる
THORの関連記事も書いておりますので併せてどうぞ。
今日は最後まで、お読みくださいね。
追加CSSにコードを書く方法


THOR使ってるから、テーマ紹介記事のひとつでも書いたらどうなんだって一瞬思った。
— ほり@月31万のアフィカス (@horiblog55) July 25, 2020
でも特化ブログで忙しいし、こだわるなら追加CSSモリモリが必須だし、ブロックエディタに対応するのか不明な現状で記事は書けないと思った僕はただの怠け者です。
あ、でもテーマ自体は慣れれば使いやすいですよ😉
上記のツイートの通り、THORのカスタマイズのCSSコードは基本的に「追加CSS」か「style-user.css」に記載します。
- 【WordPress】→【外観】→【カスタマイズ】→【追加CSS】
- style-user.cssへ記載する(落ち着いたらコレ)
上記の2つのうち、❶の方が簡単なので、まずは先にマスターしましょう。
下記で詳しく解説します。
①【WordPress】→【外観】→【カスタマイズ】→【追加CSS】


基本的には「追加CSS」でコードを貼り付けますが、CSSコードの量が増えてきたら「style-user.css」にコピペするようにしましょう。
理由は、表示速度の改善が期待でき、SEO対策としても大きく関わってくるから。
デザインが落ちついたら【style-user.css】にコードを移していくのはおすすめの行動ですよ。
②style-user.cssへ記載する
「THE THOR」にはSEO対策の機能がバッチリ備わっています。
【CSS非同期読み込み設定】の作業手順は下記です。
手順
【外観】→【カスタマイズ】→【SEO設定[THE]】→【CSS非同期読み込み設定】
上記の設定の注意点は、「子テーマCSS(style-user.css)を非同期読み込みにする」にチェック(✔️)を入れても、高速化の為の機能は「追加CSS」には適用されないということ。


コピペが終わったCSSコードは「追加CSS」から削除。
追加CSSで上手く反映されたコードを「style-user.css」に移動する手順は下記です。
「style-user.css」までの流れ
【WordPress】→【外観】→【テーマエディター】→【THE THOR CHILD】を選択→【style-user.css】


/*サンプルコード*/
上記のように、半角で「スラッシュ」と「アスタリスク」で「コードの名前(適当でOK)」をコメントアウト(説明書きとしての意味のみにする)。
manablog風デザインコードを追加CSSへ


以前に「Manablog Copy」というWordPressテーマを発売しましたが、現在は「新規デザイン」を作っています😌
— マナブ@バンコク (@manabubannai) February 3, 2020
デザイナー2名体制にて、淡々と生産。購入者には無料配布です。かなりいい感じに進んでおります。身の回りに優秀な人が多すぎる。高価格帯のWeb制作チームも走らせたら、わりと稼げそうな予感 pic.twitter.com/ylIJlm2SFE
いよいよ、上記のmanablog風に【THE THOR(ザ・トール)】でカスタマイズするCSSを解説します。
上記の記事を参考にして、詳しく解説します。
①H2見出しサイズ


manablogの見出しと言えば、上記の画像の通りのデザインですが、サイズを変更して整えます。
デザイン設定は記事の後半でやります(CSSなし)。
②H3見出しサイズ


H3見出しは、manablogでは、H2より小さく、背景色がないデザインですが、上記のコードでサイズを整えます。
デザイン設定は記事の後半でやります(CSSなし)。
③H4見出しデザイン


manablogといえば、上記のチェックマークですよね。しかも水色がおしゃれな感じ。
上記のCSSコードを使うことで、HTMLにClass指定して書かなくても、H4見出しで楽に執筆することができます。
思いのほか、多用します。
④シンプルボックス


manablogでは、【H2見出し】→【画像】→【シンプルボックス】でH2見出しの箇条書きなどで多用します。
シンプルですが、目を引くので、箇条書きや、【画像】の下に添えておくとおすすめですよ。
<div class=“pre”>ここにテキストを入力</div>
⑤人気記事


記事の下部に、アフィリエイトリンクを置いたあとに、そっと置いてある関連記事や人気記事への誘導。
下記をHTMLの打ち込むテキストエディタモードか、ブロックエディタなら「カスタムHTML」ブロックを使って打ち込みます。
<p><span class="orange-badge">人気記事</span><a href=“URL”>記事のタイトル。</a></p>
ブログカードより、さりげないからこそ、クリック率が高いというデータがあります。
⑥読みやすい行間設定


THORの初期設定では、文字が上下でかなり詰まった印象なので、上記のCSSコード使って余白をとります。
上記だけで随分読みやすい記事になります。
カスタマイズの設定


CSSコードを「追加CSS」に書いた後は、下記の2点を設定します。
- 文字サイズ
- 見出し
詳しく解説します。
①文字サイズ:基本スタイル設定


【外観】→【カスタマイズ】→【基本設定[THE]】→【基本スタイル設定】まで進みましょう。
- スマホ全体のフォントサイズを選択→大
- PC全体のフォントサイズを選択→中
- 全体のフォントファミリーを選択→ヒラギノ角ゴシック
②見出し:パーツスタイル[THE]の設定


【外観】→【カスタマイズ】→【パーツスタイル[THE]の設定】の見出し設定(個別ページ)を設定します。
H2見出しの設定
- 背景ー左線[カラーA:文字 B:背景 C:左線]
- カラーB[#f7f7f7]
- カラーC[#4865b2]
H3見出しの設定
- 左線[カラーA:文字 B:背景 C:左線]
- カラーB[#4865b2]
H4見出しの設定
- 基本[カラーA:文字](default)
まとめ | THORでmanablog


あこがれのブログに近づけることで、モチベーション爆上がり間違いなしでしたね。
- THE THORで「追加CSS」にコードを追加する方法や手順
- 「SEO対策」のための「style-user.css」にコピペして、「追加CSS」から移す方法
- 「manablog風」にTHORで仕上げるコードや手順を理解することができる
- お気に入りブログになれば、執筆へのモチベが爆上がりするようになる
- 【THE THOR(ザ・トール)】はオシャレ
manablogは読みやすいブログなので、デザインを似せていくことであなたのブログ記事も読みやすくなります。



ブログ運営しながら、セルフバックで収益得つつ、アフィリエイトの感覚つかむなら下記の記事。



ブログは資産形成にもなるので、同時に仮想通貨投資で資産運用するなら、コインチェックもセルフバックして、始めちゃいましょう。
それでは、今日はここまで読んでいただきありがとうございます!