manablog(マナブログ)風にカスタマイズする方法【アフィンガー5なら簡単です】

こんなお悩みを解決します。

manablog(マナブログ)と言えばブロガー界では有名なマナブさんが運営されているブログですよね。

今ブログをやっている人の中にはマナブさんに影響されてブログを始めた人も多いのではないでしょうか？

僕もそのうちの一人です(笑)

 

manablog(マナブログ)はデザインも洗練されていておしゃれな部分が多いので実際にこんなブログにしたいという人が多いと思います。

そこで今回は「アフィンガー5」を使ってmanablog(マナブログ)風のデザインにする方法をまとめました！

これを読めばあなたもmanablog(マナブログ)風でおしゃれなブログが作れること間違いなし！

 

ブログのカスタマイズ方法は使っているテーマによって変わるのでアフィンガー5以外を使っている方は、

似たような設定項目を探してみて下さい。

 

本記事の信頼性

この記事を書いている僕はアフィンガー5を使ってブログを運営しており、現役エンジニアということもあり、実際に使用されているコードなどを分析しながら再現しました。

 

上記に当てはまる方は是非ご覧ください！

 

アフィンガー5を見てみる

 

manablog(マナブログ)風に見出しをカスタマイズする方法

上記の順番で解説していきます。

 

manablog(マナブログ)風の見出しとは？

このような見出しを作成していきます。

上記画像は大見出しで、小見出し（h3）はこちら

どちらもアフィンガー5ならサクッとできます！

 

大見出し（h2）のカスタマイズ方法

まずは管理画面を開き「外観」➜「カスタマイズ」を開きましょう。

次にカスタマイズ画面から「各テキストとhタグ（見出し）」➜「H2タグ」を選択

 

赤線部分の「色を選択」を押すと色を入力するボックスが出てくるので、各項目順番に下記の値を設定していきます。

背景色（グラデーション上部）、ボーダー色（サブ）は使わないのでそのままで大丈夫です。

 

「h2タグの基本スタイル」➜「左ラインデザインに変更（※要ボーダー色）」を選択。

その他のチェックボックスは全て空白でOK

 

下の方にこのような項目があるので

「左の余白（px）」➜ 40

「上下の余白（px）」➜ 20

と入力しましょう。

 

小見出し（h3）のカスタマイズ方法

先ほどと同様になりますが、カスタマイズ画面から

「各テキストとhタグ（見出し）」➜「H3タグ」を選択

 

ほぼ同様の設定になりますが

背景色だけ入力されている値を消しておきましょう。

 

「h3タグの基本スタイル」➜「左ラインデザインに変更（※要ボーダー色）」を選択。

その他のチェックボックスは全て空白でOK

 

下の項目は下記の数値で入力。

「左の余白（px）」➜ 15

「上下の余白（px）」➜ 0

 

これで設定は完了です。

プレビューを確認後問題なければ上部にある「公開」を押して保存しましょう。

 

manablog(マナブログ)風に枠線をカスタマイズする方法

このような枠線を作成していきます。

枠線のカスタマイズはアフィンガー5を使っていてもCSSの編集が必要です。

とはいえコピペでOKなので安心してください！

 

枠線のカスタマイズ手順（準備）

まずは管理画面を開き「外観」➜「カスタマイズ」を開きましょう。

次にカスタマイズ画面から「追加CSS」を選択。

 

 

下記のCSSコードをコピー（ctrl+C）して貼り付け（ctrl+V）してください。

貼り付けできたら「公開」を押して保存しましょう。

これでmanablog風の枠線を使う準備ができました。

 

枠線のカスタマイズ手順（使用方法）

次に実際に枠線を使う方法ですが、

今回はクラシックエディターを使った方法ですので、

WordPressのブロックエディターを使っている方は、クラシックエディターにするプラグインを導入しておきましょう。

 

まずはいつも通り記事を書いてもらって枠線を付けたい部分が出てきたらテキストモードに切り替えます。

 

 

ブログ記事の投稿画面の右上から「テキスト」を選択。

テキストモードに切り変わったら枠線で囲みたい部分の上に下記のタグをコピーして貼り付けてください。

ここまで囲みたいという末尾の部分に下記のタグをコピーして貼り付けてください。

 

イメージとしてはこんな感じです

二つのコードでサンドイッチしましょう。

通常通り箇条書きにすることもできます。↓

 

コードを覚えられないという人にちょっと裏技

パソコンにコードを辞書登録してしまうという方法です。

Windowsなら➜　ctrl+F7　同時押しで登録画面を開けます。

 

Macは持ってないのでわかりません(笑)

「mac 単語登録」「mac 辞書登録」で検索してみて下さい。

 

このようなウインドウが開くので上記のように単語とよみを入力して登録しましょう。

よみの部分はわかりやすい単語でじゆうに設定してください。

上記の場合だと「わくせん」と入力して変換するとコードが出てきます。

 

manablog(マナブログ)風チェックマークを付ける方法

manablogでよく使われているチェックマークですがこれはかなり簡単にできます。

特にアフィンガー5側のカスタマイズや設定も必要なく、実際に記事を書くときに入力する方法です。

 

先ほどと同様にクラシックエディターを使った方法ですので、

WordPressのブロックエディターを使っている方はクラシックエディターにするプラグインを導入しておきましょう。

 

ブログ記事の投稿画面の右上から「テキスト」を選択。

テキストモードに切り変わったら下記のタグをコピーして貼り付けてください。

 

「ここにタイトルを記入」の部分を消して表示したいタイトルを入力すればOKです。

編集画面上ではテキストのみしか表示されませんがプレビューすればチェックマークがついているはずです！

 

まとめ「manablog(マナブログ)風にカスタマイズする方法」

案外簡単ですよね！

もしこのブログみたいにする方法を教えてほしい！

というようなことがあればTwitterのDMいただければ、順次記事にしていこうと思いますのでお気軽にどうぞ！

 

【関連記事】【初心者ブロガー必見】初めに登録すべきアフィリエイトASP5社！

【関連記事】最低限やるべきWordPressの初期設定【やらないと後悔します】