【THORに追加CSS】manablog風にカスタマイズ【要チェック】

THE THORでmanablog風にしたくて悩む人

THETHORには見出し、目次など多くの機能が備わっていてデザインも数多く初期装備されてるよね。

自分の好みのスタイルがない場合はCSSやHTMLを使ってカスタマイズをする必要があるみたい。

manablog風にしたいんだけどTHORでは、CSSコードや設定はどうしたらいいですか？

今日は↑↑こんなお悩み↑↑に答えていきます。

あいうえおLIFE

こんにちは！あいうえおLIFE（@pledge17uchs）です。

有料テーマ【THE THOR（ザ・トール）】のデザインっておしゃれだし、きれいで惚れますよね・・・。

僕もmanablog好きなので、ブログのデザインを近づけたくて、色々と試行錯誤して、必死でした。

結論からいうと、JINよりTHORの方が、イメージ的にはかなり近づけるので、本記事の設定をTHE THORでカスタマイズして、お気に入りブログを作りましょう。

理由は、当ブログとは別にぼくが運営している「特化ブログ：人生を変えた映画・アニメBlog」でmanablogに近づけたくて、必死に取り組んだから。

とはいえ、本当にできるのかなって不安になりますよね。

そこで今回は、THE THOR初心者でも簡単にコードを追加できるように、僕が実際に使っているCSSをコピペ可能にしてご紹介します。

本記事のメリット

使用サーバーエックスサーバー

追加CSSにコードを書く方法

THOR使ってるから、テーマ紹介記事のひとつでも書いたらどうなんだって一瞬思った。

でも特化ブログで忙しいし、こだわるなら追加CSSモリモリが必須だし、ブロックエディタに対応するのか不明な現状で記事は書けないと思った僕はただの怠け者です。

あ、でもテーマ自体は慣れれば使いやすいですよ😉

— ほり@月31万のアフィカス (@horiblog55) July 25, 2020

上記のツイートの通り、THORのカスタマイズのCSSコードは基本的に「追加CSS」か「style-user.css」に記載します。

上記の2つのうち、❶の方が簡単なので、まずは先にマスターしましょう。

下記で詳しく解説します。

①【WordPress】→【外観】→【カスタマイズ】→【追加CSS】

基本的には「追加CSS」でコードを貼り付けますが、CSSコードの量が増えてきたら「style-user.css」にコピペするようにしましょう。

理由は、表示速度の改善が期待でき、SEO対策としても大きく関わってくるからでして、デザインが落ちついたら【style-user.css】にコードを移していくのはおすすめの行動ですよ。

参考記事THETHORでCSSコードを追加記載する方法を紹介！

②style-user.cssへ記載する

「THE THOR」にはSEO対策の機能がバッチリ備わっています。

【CSS非同期読み込み設定】の作業手順は下記です。

手順

【外観】→【カスタマイズ】→【SEO設定[THE]】→【CSS非同期読み込み設定】

上記の設定の注意点は、「子テーマCSS(style-user.css)を非同期読み込みにする」にチェック（✔️）を入れても、高速化の為の機能は「追加CSS」には適用されないということ。

「追加CSS」で問題なく動作確認できたCSSコードは「style-user.css」にコピペして移しましょう。

コピペが終わったCSSコードは「追加CSS」から削除。

追加CSSで上手く反映されたコードを「style-user.css」に移動する手順は下記です。

「style-user.css」までの流れ

【WordPress】→【外観】→【テーマエディター】→【THE THOR CHILD】を選択→【style-user.css】

カスタマイズのCSSコードを記載していくと、「どのコードが何の働きをするコード」か下記のように説明文を入れておくと便利ですよ。

/*サンプルコード*/

上記のように、半角で「スラッシュ」と「アスタリスク」で「コードの名前（適当でOK）」をコメントアウト（説明書きとしての意味のみにする）。

＼ 表示速度が早い！ ／

【ザ・トール】THE THOR公式サイト

国内最高峰のSEO最適化テーマ

manablog風デザインコードを追加CSSへ

以前に「Manablog Copy」というWordPressテーマを発売しましたが、現在は「新規デザイン」を作っています😌
デザイナー２名体制にて、淡々と生産。購入者には無料配布です。かなりいい感じに進んでおります。身の回りに優秀な人が多すぎる。高価格帯のWeb制作チームも走らせたら、わりと稼げそうな予感 pic.twitter.com/ylIJlm2SFE

— マナブ@バンコク (@manabubannai) February 3, 2020

いよいよ、上記の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>

上記をadquick tagに登録、もしくはテキストエディタにHTMLを書くことで、「ここにテキストを入力」の部分が【シンプルボックス】の中に入ります。

⑤人気記事

記事の下部に、アフィリエイトリンクを置いたあとに、そっと置いてある関連記事や人気記事への誘導。

下記をHTMLの打ち込むテキストエディタモードか、ブロックエディタなら「カスタムHTML」ブロックを使って打ち込みます。

<p><span class="orange-badge">人気記事</span><a href=“URL”>記事のタイトル。</a></p>

「記事のタイトル」の部分は、誘導したい記事のタイトルにしておくのがオススメですよ。

ブログカードより、さりげないからこそ、クリック率が高いというデータがあります。

⑥読みやすい行間設定

THORの初期設定では、文字が上下でかなり詰まった印象なので、上記のCSSコード使って余白をとります。

上記だけで随分読みやすい記事になります。

カスタマイズの設定

CSSコードを「追加CSS」に書いた後は、下記の2点を設定します。

詳しく解説します。

①文字サイズ：基本スタイル設定

【外観】→【カスタマイズ】→【基本設定[THE]】→【基本スタイル設定】まで進みましょう。

②見出し：パーツスタイル[THE]の設定

【外観】→【カスタマイズ】→【パーツスタイル[THE]の設定】の見出し設定（個別ページ）を設定します。

H2見出しの設定

H3見出しの設定

H4見出しの設定

まとめ | THORでmanablog

今回は、【THE THOR（ザ・トール）】で「追加CSS」にコードを入れて、manablog風にデザインする方法とSEO対策の反映について紹介しました。

あこがれのブログに近づけることで、モチベーション爆上がり間違いなしでしたね。

manablogは読みやすいブログなので、デザインを似せていくことであなたのブログ記事も読みやすくなりますよ。

あいうえおLIFE

THE THORのデザインの見本として、THE THOR作成したmanablog風デザインブログを下記から見てみてください。

それでは、今日はここまで読んでいただきありがとうございます！