本記事は約5分で読むことができます。
【THORに追加CSS】manablog風にカスタマイズ【マナブファン必見】

追加CSSでTHORをmanablog風にデザイン変えたい人

THE THORをmanablogに近づける手順が知りたいです
THORでできるSEO対策の「CSS非同期読み込み設定でstyle-user.cssに適用する」方法もやってみたいです



今日は「お悩み解決に役立つ内容」をお伝えしていきます!
THE THORのデザイン自体も洗練されている上に、超有名ブロガーのマナブさんファンだったら運営ブログ「manablog」にデザインを近づけたいって思いますよね。


追加CSSやTHOR側の設定やカスタマイズで可能か分からず困りました…
- THE THORをmanablogに近づける3つの手順を解説
- CSS非同期読み込み設定でstyle-user.cssに適用してSEO評価アップ
本記事では詳細を解説していきます。manablogといえば下記のとおり「紺色に近い左線と薄い灰色背景のH2見出し・紺色に近い左線と透明背景のH3見出し・うすい紺色チェックマークのH4見出し・点線ボックス・人気記事バッジ・読みやすい行間設定」ですよね。


「THOR側の設定」自体でmanablogに近いフォント(文字)サイズやH2とH3の見出しデザインに変更可能。THORは最強のSEO対策テーマなので、独自で入れた追加CSS後のSEO対策も実装済みです。
1つに「CSS非同期読み込み設定」があり、「style-user.css」に適用できる仕組み。
追加CSSの反映確認が取れた後は、「style-user.css」に移していくことがおすすめです。ぼくも実際にデザイン反映させるのに、設定する箇所や工夫が複数あって苦労しましたが、無事THORブログがmanablogっぽくなりましたよ。
【Manablog copyのコピー】デザインを完全再現😌の記事を参考に、CSSをTHORへ対応させました。本記事を読むことでコピペ可能コードを活用でき、THOR独自のSEO対策を施すことが可能に。



THORのデフォルト見出しデザインもmanablogに近いから工夫しやすかったのと、SEO対策含め相性が良いカスタマイズなので、ブログ運営の効率化と読者満足度アップにつながりますよ!
今日はどうぞ最後まで、お読みくださいね。
THE THORをmanablogに近づける3つの手順


manablog風に【THE THOR(ザ・トール)】でカスタマイズする3つの手順や、実際に設定したときのイメージ図を解説します。
manablogならではの見出しサイズや見出しデザイン・人気記事バッジなどのコードを準備しました。


【WordPress】→【外観】→【カスタマイズ】→【追加CSS】へ下記のCSSコードをコピペ。
/*h2見出しフォントサイズ*/
.content h2 {
font-size: 27px;
}
/*スマホ用レスポンシブ*/
@media screen and (max-width:479px) {
.content h2 {
font-size: 20px;
}
}
/*h3見出しフォントサイズ*/
.content h3 {
font-size: 25px;
}
/*スマホ用レスポンシブ*/
@media screen and (max-width:479px) {
.content h3 {
font-size: 18px;
}
}
/*h4見出しの文頭にアイコン*/
.content h4:before {
font-family: "icomoon";
color:#6c9fce;
content: "\ea12 "
}
/*スマホ用レスポンシブ*/
@media screen and (max-width:479px) {
.content h4:before{
font-family: "icomoon";
content: "\ea12 "
}
}
/*manablog点線ボックス*/
.pre {
background-color: #f8f9ff;
outline: 1px solid #f0f0f0;
border: dashed 1px #4865b2;
padding: 25px;
margin: 15px 10px 40px;
}
/*スマホ用レスポンシブ*/
@media screen and (max-width:479px) {
.pre {
margin: 10px 10px 30px;
}
}
/*人気記事バッジ*/
.orange-badge {color: #fff;
font-size: 12px;
margin-right: 10px;
background-color: #ffa500;
border-radius: 2px;
padding: 6px 6px 6px;
}
/*文字行間設定*/
.content p {
margin-top: 5em;
}
.content :first-child {
margin-top: 0;
}
/*スマホ文字行間*/
@media only screen and (max-width: 480px) {
.content p { margin-top: 5em;
}
.content :first-child {
margin-top: 0;
}
}
CSSコードコピペの際は「半角表示や半角スペース」を間違えないように。


【外観】→【カスタマイズ】→【基本設定[THE]】→【基本スタイル設定】まで進みましょう。
- スマホ全体のフォントサイズを選択→大
- PC全体のフォントサイズを選択→中
- 全体のフォントファミリーを選択→ヒラギノ角ゴシック
![②:見出し→パーツスタイル[THE]の設定](https://aiueolife.com/wp-content/uploads/2021/02/スクリーンショット-2021-02-26-0.03.36.jpg)
![②:見出し→パーツスタイル[THE]の設定](https://aiueolife.com/wp-content/uploads/2021/02/スクリーンショット-2021-02-26-0.03.36.jpg)
【外観】→【カスタマイズ】→【パーツスタイル[THE]の設定】の見出し設定(個別ページ)を設定します。
H2見出しの設定
- 背景ー左線[カラーA:文字 B:背景 C:左線]
- カラーB[#f7f7f7]
- カラーC[#4865b2]
H3見出しの設定
- 左線[カラーA:文字 B:背景 C:左線]
- カラーB[#4865b2]
H4見出しの設定
- 基本[カラーA:文字](default)
以上3つの手順で作業していきましょう。
manablogならではのパーツ内容を解説します。H2とH3の見出しフォントサイズ・H4見出しの文頭にアイコン・点線ボックス・人気記事バッジ・文字行間設定のCSSを紹介したので、実際のイメージ図を見てください。
①:H2見出しフォントサイズ


②:H3見出しフォントサイズ


manablogのH3見出しは、H2より小さく背景色がないデザインですが、サイズを整えました。H2同様デザインは「THOR側の設定」で完結。
③:H4見出しの文頭にアイコン


manablogといえば、上記の水色がおしゃれな感じのチェックマークですよね。多用すること間違いなしですね。
④:manablog点線ボックス


manablog点線ボックスの使い方
<div class=“pre”>ここにテキストを入力</div>
テキストエディタならHTMLコードのまま書くことで、「ここにテキストを入力」の部分が【シンプルボックス】の中に入ります。



ブロックエディタの場合は「カスタムHTMLブロック」にコピペして編集してください。
⑤:人気記事バッジ


記事の下部にアフィリエイトリンクを置いたあとに、関連記事や人気記事への誘導に使えます。「manablog点線ボックス」同様、HTMLコードのままテキストエディタに打ち込むか、ブロックエディタなら「カスタムHTMLブロック」にコピペして編集していきます。
<p><span class="orange-badge">人気記事</span><a href=“URL”>記事のタイトル。</a></p>
「記事のタイトル」の部分は、誘導したい関連記事のタイトルそっくりそのままがおすすめ。



ブログカードよりさりげないからこそ、クリック率が高いというデータがあるみたいだね。
⑥:読みやすい行間設定


THORの初期設定では、文字が上下でかなり詰まった印象なので、スペーサーや<br>タグ使わずにCSSコードで余白をとります。余白が広すぎる場合は「margin-top: 5em;」の数字を変更することで、調整可能。
CSS非同期読み込み設定でstyle-user.cssに適用してSEO評価アップ


- 「追加CSSコード」を「style-user.css」へ移す
- 「CSS非同期読み込み設定」する
追加CSSやTHOR側設定デザインの反映確認後に作業する内容です。
①:「追加CSSコード」を「style-user.css」へ移す
【WordPress】→【外観】→【テーマエディター】→【THE THOR CHILD】を選択→【style-user.css】を選択。


「追加CSS」で問題なくデザイン確認できたCSSコードは「style-user.css」にコピペして移動。カスタマイズの追加CSSコードをコピペするときは、どのコードが何の働きをするコードか「/*半角スラッシュと半角アスタリスクで挟む*/」の説明文を入れておくと便利です。
/*サンプルコードのタイトルや役割メモ*/



「style-user.css」へコピペが終わったコードは「追加CSS」から削除したらいいね。
②:「CSS非同期読み込み設定」する



設定する理由は表示速度の改善が期待でき、SEO対策としても大きく貢献するからです。
【外観】→【カスタマイズ】→【SEO設定[THE]】→【CSS非同期読み込み設定】と進みます。


上記の設定の注意点は、「追加CSSには適用されない」ので、「子テーマCSS(style-user.css)を非同期読み込みにする」にチェック(✔️)を入れているときは追加CSSからの移動をお忘れなく。
まとめ | THORはmanablogに近づけやすい


今日は追加CSSでTHORをmanablog風にデザイン変えたい人に向けて、下記を解説しました。
- manablogならではのH2とH3の見出しフォントサイズ・H4見出しの文頭にアイコン・点線ボックス・人気記事バッジ・文字行間設定のCSSコード
- THOR側の設定でできる「文字サイズやH2とH3見出しデザイン」を設定する手順
- 「style-user.css」へ追加CSSを移し「子テーマCSS(style-user.css)を非同期読み込みにする」にチェックすることでTHOR独自のSEO対策



THOR側設定自体もmanablogに近いので、追加CSSだけでフォントサイズや行間設定が可能で、人気記事バッジや点線ボックスは記事執筆時に手間をかけるだけで再現可能でしたね。
ミニマルな雰囲気になるので、愛着も湧くことで筆者も読者も喜ぶこと間違いなしですね。
ちなみに当サイトも使用中のWordPressテーマ「SWELL」ならカスタマイズなしで、manablog風左線+灰色背景「H2見出し」や「H4のチェックマーク見出し」がデフォルト設定可能です。
SWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】に要点をまとめました。
今日は最後までお読みいただき、ありがとうございました!