THE THORでmanablog(マナブログ)風の記事にする方法

ブログ界の王者であるマナブさんが書いているmanablogは読みやすいですよね。
ブログを始めようかと思っている方なら必ず見たことがあると思います。

そんなマナブさんのブログですがオリジナルのテーマを利用していらっしゃいます。
もしmanablogそっくりのブログにしたいとうことでしたらmanablog copyというテーマを販売されていらっしゃますのでそちらを購入するのがベストですね。

ただ、多少なりともHTMLやCSSの知識が必要なテーマなようですので購入するのを躊躇してしまう方がいらっしゃるかもです。

そこでこの記事では「THE THORを使ってmanablog風の記事にする方法」をご紹介致します。

完全に同じにすることは出来ませんのであくまでも”風”であることをご了承ください。
また初心者の方でも設定できるように画像を使いながらなるべくわかりやすくに説明していきます。

では、早速設定していきましょう。

manablog風の文字と行間スペースの設定

manablog風の文字と行間スペースの設定

まずは文字と行間スペースをmanablog風にしてみましょう。

完成イメージはこんな感じです。
manablog風の文字と行間スペース

manablog風の文字フォント

manablogで使用されているフォントは Noto, Hiragino Sans,Helvetica,Arial,sans-serif (複数フォントをカンマで区切り、先頭に近い方から優先的に表示に利用される)です。
THE THORで似たような設定にする方法は以下のとおりです。

「外観」→「カスタマイズ」→「基本設定[THE]」→「基本スタイル設定」→ 文字の設定を”メイリオ”、大きさは”中”にする

文字の設定画面の出し方

フォントとフォントサイズの設定

THE THORの設定にもNotoというのはあるのですが、設定してみるとなんか違う感じがします。
ちょっと太文字チックになってしまうんですよね。

THE THORのフォント設定
THE THORのフォント設定
Noto フォントもあるけど設定してみるとmanablogとは違う感じになる

なので、文字は「メイリオ」で大きさは「中」に設定しましょう。
雰囲気的に似ています。

manablog風の行間スペース

次に行間スペースですが、manablogは段落と段落の間を広めにとっています。

確認すると60pxほど。

THE THORでは行間の広さを設定することができないのですが、その他の手段として以下の3つの方法があります。

  1. 段落のあとに改行を1つ多く挿入する
  2. 新エディターであるグーテンベルクでBlockSpacer(ブロックスペーサー)を入れる
  3. 追加CSSにて行間を変更する

一つずつ説明します。

1.段落のあとに改行を1つ多く挿入する

この方法は記事を書く際に自分で改行を1行多くする方法です。
特に設定はありません。

一段落書き終わったら改行で行間をあけて次の行からまた書き始めるといった感じです。

2.新エディターのグーテンベルクでBlockSpacerを入れる

この方法は新エディターで記事を書いている場合に利用できる方法です。

THE THORでは旧エディターが推奨されているのですが、あえて新エディターであるグーテンベルクを利用して、BlockSpacerを挿入します。

文章
BlockSpacer
文章

こんな感じです。

ただ、THE THORは未だにグーテンベルクを推奨していないのでこの方法は他の不具合を引き起こしてしまう可能性があります。

3.追加CSSにて行間を変更する

この方法はカスタマイズの「追加CSS」という設定に以下のコードをコピーする方法です。

/* ■manablog風の行間スペース */
.content > p, .content > ol, .content > ul, .content > .ep-box {
line-height: 2em;
margin: 22px 0px 60px 0px;
}

この方法が一番おすすめで、僕はこの方法で行間を広げています。

CSS(Cascading Style Sheets)とはウェブページの表示スタイルを決めるもので、上記のコードでは”段落と段落の間はこれくらいスペースをあけてね”という設定をしています。

この方法なら記事を書く際に改行を1つ多く挿入する手間が省けます。

「追加CSS」の設定方法は以下の通り。

「外観」→「カスタマイズ」→「追加CSS」→ 上記のコードを貼り付ける → 「公開」をクリック

追加CSSの設定方法

貼り付けたら忘れずに「公開」ボタンをクリックしましょう。

manablog風の見出し設定

manablog風の見出し設定

次に見出しの設定です。

manablogでは、

・H2見出し → 左側にブルーのボーダー+グレーの背景+黒文字
・H3見出し → 左側にブルーのボーダー+黒の太文字

のようになっています。
早速設定してみましょう。

まずは見出しの設定画面を開きます。

「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→ 「見出し設定(個別ページ用)」
見出し設定画面の開き方

「H2見出し」は以下のように設定します。

デザイン: 背景-左線[カラーA:文字 B:背景 C:左線]

カラーA:#333333
カラーB:#f7f7f7
カラーC:#4865b2

H2見出しの設定

「H3見出し」は以下のように設定します。

デザイン: 左線-基本[カラーA:文字 B:左線]

カラーA:#333333
カラーB:#4865b2
カラーC:設定しない

H3見出しの設定

設定したら「公開」をクリックします。
完成するとこんな感じになります。

manablog風見出し

雰囲気でてきましたがmanablogの見出しとは左側のブルーのボーダーの太さや文字の太さが異なります。

THE THORの通常設定ではここまでが限界ですので、もっと似せるためには先ほども登場した「追加CSS」の設定で対応する必要があります。
以下のコードを追加で貼り付けてください。

/* ■manablog風見出し */
.content h2 {
font-size: 25px;
line-height: 40px;
font-weight: normal;
border-left: 9px solid #4865b2;
padding: 20px 40px 18px 40px;
}
.content h3 {
margin: 20px 0px 20px 0px;
font-size: 20px;
line-height: 40px;
border-left: 9px solid #4865b2;
padding: 0px 15px 0px;
}

CSSの設定 その2

するとこうなります。

manablog風見出し その2

どうでしょう。
だいぶ似てますよね。

見出しはこれで完成です。

manabulog風のボックス設定

manabulog風のボックス設定

次にボックスです。

manablogでよく使われているブルーやグレーの囲みのボックスですね。

manablog風のブルーボックス

まずはブルーのボックスです。

THE THORのリストで文章を書いたときにこのような装飾になるようにします。

まずはリストの設定です。

「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→ 「リスト設定(個別ページ用)」
リストスタイル設定画面の出し方
「番号無しリスト」、「番号付きリスト」ともに以下のように設定する

デザイン: 点線[カラーA:マーク B:線 C:背景]

カラーA:#333333
カラーB:#4865b2
カラーC:#f8f9ff

リストの設定画面

エディタでリストを使用してみると以下のようになります。

manablog風のブルーボックス

少し上下のスペースが少ないので以下のコードを「追加CSS」に貼り付けます。

/* ■manablog風のボックス余白 */
.content > ol, .content > ul {
padding: 40px 10px 36px 40px;
}

するとこうなります。

manablog風のブルーボックス その2

いかがでしょう。
上下のスペースが広がりだいぶ似てきたんじゃないかと思います。

manablog風のグレーボックス

次にグレーのボックスですが、THE THORのシンプルなボックス表示が一番似ていました。

記事の投稿画面で下記のように操作すればだいぶ似ているグレーのボックスが表示できます。

グレーボックスにしたい文章を選択 →「スタイル」→「■デフォルトパーツ」→「ボックス」をクリック

デフォルトボックススタイルの設定方法

そうすると以下のようなグレーのボックスになります。

manablog風のグレーボックス

ボックスの設定は以上です。

manablog風のチェックマーク設定

manablog風のチェックマーク設定

続いてmanablogでよく見かけるチェックマークの見出しです。

THE THORでは標準でアイコンを挿入する機能がありますのでそれを利用します。

アイコンの中にチェックマークがあるのでそれを選択し、続けて文字をかけばOKです。

エディタ画面で「アイコンオプション」をクリック → 「icon-checkmark」を探してコピーする
icon-checkmarkの挿入方法 その1
「アイコン挿入」コマンド → 表示されたダイアログに「icon-checkmark」を貼り付ける
icon-checkmarkの挿入方法 その2

そうするとエディタにチェックマークのアイコンが表示されるので、それに続けて文字を書きます。
こんな感じになります。
manablog風チェックマーク その1

ただ、チェックマークの色や文字の大きさがmanablogとは違います。

これ以上はTHE THORの設定では変更できないので「追加CSS」にて対応します。
「追加CSS」に以下のコードを貼り付けてみてください。

/* ■manablog風チェックマーク */
p.icon-checkmark {
font-size: 1.15em;
font-weight:600;
margin-bottom: 15px;
}
p.icon-checkmark::before {
color: #6C9FCE;
}

そうするとこうなります。
manablog風チェックマーク その2

だいぶ似ていますね!

また、マナブさんはチェックマークと文の間にスペースを入れています。
なので記事を書く際に「チェックマーク」+「半角スペース」+「文字」 のようにするとそっくりにできます。
manablog風チェックマーク その3

まとめ:THE THORでmanablog風の記事にする方法

まとめ:THE THORでmanablog風の記事にする方法

いかがでしたでしょうか。

すべてやってみるとmanablogにだいぶ近い感じになったんじゃないかと思います。

ブログ初心者はデザインにこだわらずどんどん新しい記事を書くべきだという意見もありますが、やっぱり愛着のあるブログデザインでやる気を高めたいですよね。

ということで今回はTHE THORでmanablog風デザインにする方法をご紹介致しました。

この記事が皆さんのお役に立てば幸いです。

広告
THE THORでmanablog風の記事にする方法
最新情報をチェックしよう!