WordPressテーマをJINからSWELLに変更SWELL公式サイト

【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をコピペ可能にしてご紹介します。

本記事のメリット

  • THE THORで「追加CSS」にコードを追加する方法や手順
  • 「SEO対策」のための「style-user.css」にコピペして、「追加CSS」から移す方法
  • 「manablog風」にTHORで仕上げるコードや手順を理解することができる
  • お気に入りブログになれば、執筆へのモチベが爆上がりするようになる

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

もくじ

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

追加CSS

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

  1. 【WordPress】→【外観】→【カスタマイズ】→【追加CSS】
  2. style-user.cssへ記載する(落ち着いたらコレ)

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

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

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

追加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」には適用されないということ。

style-user

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

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

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

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

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

style-user

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

/*サンプルコード*/


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

\ 表示速度が早い! /

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

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

manablogへ

いよいよ、上記のmanablog風に【THE THOR(・トール)】でカスタマイズするCSSを解説します。

上記の記事を参考にして、詳しく解説します。

①H2見出しサイズ

H2見出し

manablogの見出しと言えば、上記の画像の通りのデザインですが、サイズを変更して整えます。

デザイン設定は記事の後半でやります(CSSなし)。

②H3見出しサイズ

H3見出し

H3見出しは、manablogでは、H2より小さく、背景色がないデザインですが、上記のコードでサイズを整えます。

デザイン設定は記事の後半でやります(CSSなし)。

③H4見出しデザイン

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点を設定します。

  1. 文字サイズ
  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」にコードを入れて、manablog風にデザインする方法とSEO対策の反映について紹介しました。

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

まとめ
  • THE THORで「追加CSS」にコードを追加する方法や手順
  • 「SEO対策」のための「style-user.css」にコピペして、「追加CSS」から移す方法
  • 「manablog風」にTHORで仕上げるコードや手順を理解することができる
  • お気に入りブログになれば、執筆へのモチベが爆上がりするようになる
  • 【THE THOR(ザ・トール)】はオシャレ

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

あいうえおLIFE

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

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

もくじ
閉じる