2019/08/28 (更新日: 2020/04/27)

【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

おすすめ教材

チャット相談メインで学びたい場合
僕も隅々まで学習させていただいているマナブさんの教材「ブログ型アフィリエイトの完全講義【ブログ歴６年の僕の集大成です】」は圧倒的コスパで、心からおすすめのブログ教材です。
完全個別のセッションで学びたい場合
僕が運営する「ブログやメディア運営を学べるオンラインスクール【初心者歓迎】」がおすすめです。基礎から徹底的に習得することができる外出せずに学べるパソコン教室です。

manablogを徹底的にモデリングしたい人「マナブさんのWordPressテーマ『Minimal』をカスタマイズしてブログを始めたいんだけど、どうすればいいのかなぁ。あと、『Minimal』は他のWordPressテーマと比較しても、HTMLでの編集が必要で難しい…。ブログ初心者の僕にもわかるように教えてほしいなぁ。」

参考：「Manablog Copy」設定方法

この記事の「信頼性」と「実績」

マナブさんから、「ブログが綺麗」とお褒めのコメントをいただきましたm(_ _)m

すでに綺麗ですね😌 無料で最新版もお渡ししますー。

— マナブ@バンコク (@manabubannai) October 5, 2019

また、現在「マナブログ　モデリング」で１位です。
» 【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

無料相談ができるチャットを用意しました

» マナブログを目指す人の専用チャット【無料参加はコチラ】

下記のような相談ができるチャットを開設しました【無料】

マナブログをモデリングするときに必要な知識
「Manablog Copy」 or 「Minimal」のカスタマイズ方法
HTML／CSSなどの、基本的なこと

【相談無料】マナブログを目指す人を応援するグループチャット【無期限】

マナブログ「Manablog Copy」の設定方法など、１人では厳しいかもという初心者〜中級者向けにグループチャットを用意しました。ブログを頑張りたいという人であれば、どなたでも無料で参加可能です。必要と感じてくださる場合は、ぜひお気軽にご参加ください🙇‍

» 無料参加する

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー＆マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

証拠：マナブ氏モデリング → ３ヶ月の鬼継続

「ブログコンセプト決まらない」のロングテールキーワードで１位
PageSpeed Insightsのスピードチェック「９９」

※上記の結果を３ヶ月で出せたことも、SEO内部対策済みで超シンプルにまとまっている「Minimal」を使用し、基本すべてをモデリングさせていただいたことが何よりも大きいと思いますm(_ _)m

本記事の内容

【manablog】マナブログをモデリングする際の注意点
【manablog】マナブログをモデリングするためのソースコードを公開【基本】
【manablog】マナブログをモデリングするためのソースコードを公開【応用】
【manablog】マナブログをモデリングするための８つのコツ

【manablog】マナブログをモデリングする際の注意点

manablog（マナブログ）をモデリングする際の注意点に触れておきます。

テキストモードでの編集が必須になります

Minimalを購入すると、下記の注意書きメッセージがあります。

■記事投稿に関して
WordPressエディタではテキストモードを選択してください。
ビジュアルエディタを使うとレイアウト崩れの原因となります。

ビジュアルモードで、感覚的に操作するのは厳しいです

Minimalで記事を投稿する際は、他のWordPressテーマとは異なり、ビジュアルモードでの編集は厳しいです。
ただ、ここで辛いな、、、と萎えるのではなく、HTMLに目を慣らしておくほうがいいと思います。

ぶっちゃけ、他のWordPressテーマでも、ビジュアルでいい感じで制作しても、ソースコードを見たら超崩れているとかも結構あるので、テキストモードでの編集に慣れる絶好の機会です＼(^o^)／
» 【WordPress】「ビジュアル」と「テキスト」の違いと使い方

Minimal自体が、相当シンプルなコーディングなので、サイトの表示速度が結果的に爆速になります＼(^o^)／

【manablog】マナブログをモデリングするためのソースコードを公開【基本】

では、さっそく行きましょう、大きなポイントは上記画像のとおりです。

Minimalをインストールし、有効化すると超シンプルさに驚く人も多いと思いますが、目指せmanablogです＼(^o^)／

大きく分類すると、５つの設定でOKです

ヘッダー＆メニューの設定
トップ固定３記事の設定
プロフィールの設定
ランキング表示の設定
フッターの設定

ステップ0：css/style.css

» コピペ用のソースコードを表示する（css/style.css）
まずは、このCSSを設定しておきましょう。

ステップ１：header.php

※赤文字の箇所を変更するだけでOKです。
» コピペ用のソースコードを表示する（header.php）

用途に応じて、変更が必要なところ。

ロゴ（PCとスマホ用）
キャッチコピー
トップ固定の３記事
ファビコン

» ファビコンに変換できるツール

更新情報：2019年11月22日

もっと高性能な無料ツールがあったので、解説しました。

ステップ２：nav-menu.php

※赤文字の箇所を変更するだけでOKです。
» コピペ用のソースコードを表示する（nav-menu.php）
用途に応じて、変更が必要なところ。

カテゴリー
アイコン

アイコンは自身で選択が必要

Font Awesomeからアイコンを選ぶ。

ステップ３：sidebar.php

※赤文字の箇所を変更するだけでOKです。
» コピペ用のソースコードを表示する（sidebar.php）
用途に応じて、変更が必要なところ。

アイコン画像
プロフィール文章
各種リンク
ランキング表示（この設定をする場合は、先に「ステップ５：function.php」を済ませてください←エラーが出ます）

ステップ４：footer.php

※赤文字の箇所を変更するだけでOKです。
» コピペ用のソースコードを表示する（footer.php）

「About me!」のリンク
「Portfolio」のリンク
「Twitter」の埋め込み
「Copyright」の変更
僕は一応、携帯電話番号も表示しておきました

Twitter（フッター右）の設定

Twitter Publish
[TwitterのURLを入力]→[画面左「Embedded Timeline」を選択]→[コードを取得]→[hrefに貼付け]

ステップ５：function.php

※赤文字の箇所を変更するだけでOKです。
» コピペ用のソースコードを表示する（function.php）

用途に応じて、変更が必要なところ。

AdSenseを入れる場合は、マナブ氏の記事を参考に設定します
→ 「WordPressで記事中にアドセンスを自動挿入する方法【ツール不要】」

基本、ここまでできればOKですが、さらに良くするためにやっておくといい設定を下記にまとめていきます。

【manablog】マナブログをモデリングするためのソースコードを公開【応用】

さらに、manablog（マナブログ）まで近づけるためにしておくべき設定などをまとめます。

おすすめの設定１：category.php／index.php／search.php

» コピペ用のソースコードを表示する

用途に応じて、変更が必要なところ。

「READ MORE」 → 「この記事を読む」とかに変更してもOK

おすすめの設定２：meta.php

» コピペ用のソースコードを表示する（meta.php）
用途に応じて、変更が必要なところ。

「Last-Modified」 → 「最終更新日」に変更するとマナブ氏と同じです

おすすめの設定３：related.php

» コピペ用のソースコードを表示する（related.php）
※赤文字の箇所を追加すると、記事下に下記の内容を追加できます。

「まとめ記事」の表示
「お仕事依頼」の表示

おすすめの設定４：sns.php

» コピペ用のソースコードを表示する（sns.php）
用途に応じて、変更が必要なところ。

Twitterのリンクはご自身のものに変更

おすすめの設定４：tag.php

» コピペ用のソースコードを表示する（tag.php）
用途に応じて、変更が必要なところ。

「_aioseop_description」 → 「’_aioseop_description’」
「READ MORE」 → 「この記事を読む」とかに変更してもOK

※「_aioseop_description」だと、エラーになってしまいまして、「'_aioseop_description'」と変更することで解決しましたm(_ _)m

【manablog】マナブログをモデリングするための８つのコツ

manablog（マナブログ）をモデリングする際のコツを、８つまとめておきます。

プラグインは必要最低限、問い合わせもGoogleフォームを使用する
WordPress編集画面では、迷わずに下書きの質を高める
見出し２の下に、要点をまとめ見出し３を作っていく
「主張」→「理由」→「具体例」を見出しごとで、鬼繰り返す
画像選びは、「Shutterstock」を使用する
冒頭の会話用アイコンは、「いらすとや」を使用する
キーワード選定を明確に、ジャンルを絞って発信する
内部リンクの「ブログカード」コピペ用ソースコード

プラグインは必要最低限、問い合わせもGoogleフォームを使用する

不必要にプラグインを入れるのは、絶対に良くないです。また、手当り次第プラグインに頼り切るのもNGです。

お問い合わせには「Contact Form 7」を使用することが多いと思いますが、よく考えればGoogleフォームのほうが安定しているよな、、、とマナブ氏のmanablogをモデリングしているときに勉強になりましたm(_ _)m

Googleフォームの設置と、スプレッドシートとの連携を方法は下記記事でまとめています。
» 【無料】お問い合わせフォームをブログに設置する方法【作り方】

WordPress編集画面では、迷わずに下書きの質を高める

manablog（マナブログ）のモデリングで、スーパー勉強になったのは「下書きの質を上げる」ことです。

下書きレベルの段階で、質を高めることがこんなにも効率的にブログが書けるということを改めて勉強することができました。

下書きの方法については、下記記事でまとめ、ブログ書き方テンプレートを無料でお渡ししています＼(^o^)／
» 【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

見出し２の下に、要点をまとめ見出し３を作っていく

見出し３（H3）は、どうしても感覚的につけてしまうことが多いと思います。過去の僕もそうでした。

でも、見出し２（H2）の下に、見出し３（H3）を箇条書きで用意して、これを見出し３（H3）としてきれいにまとめる…。
本当勉強になりますm(_ _)m

「主張」→「理由」→「具体例」を見出しごとで、鬼繰り返す

「ブログ全体」の主張→理由→具体例
「見出し２」の主張→理由→具体例
「見出し３」の主張→理由→具体例
「まとめ」の主張→理由→具体例

上記を、それぞれ繰り返すことで、自然と3,000文字〜4,000文字のブログ記事を毎日生産することができるのだと思っています。

なので、僕もこれをモデリングしつつ、毎日ブログ記事を生産中です。
文章が上達しない、、、と悩んでいる人に対して参考になる記事を用意しましたので、ぜひ読んでいただければ嬉しいです。
» 【ブログ】文章力がないと悩む人に伝えたい５つのコツ【上達したい】

画像選びは、「Shutterstock」を使用する

manablog（マナブログ）で使用されている画像の多くは、「Shutterstock」からダウンロードされているものです。
また、manablog（マナブログ）の画像サイズは「横1200px」です。

ブログ画像の選び方や、サイズ設定の方法は下記記事を参考にしてください。
» 【ブログ入門】画像の選び方と、おすすめの配置場所【３つのルール】
» 【テキトー禁止】ブログの画像サイズは、何ピクセルがベストか【検証】

冒頭の会話用アイコンは、「いらすとや」を使用する

このような画像ですね。

イラストを検索できる機能もついているので、お気に入りの画像を見つけて使いましょう。
» かわいいフリー素材集いらすとや

キーワード選定を明確に、ジャンルを絞って発信する

全くのブログ初心者の場合、どんな意識でキーワードを選べばいいのか、、、という疑問を解消するためにも完全初心者向けに記事をまとめてみました。
» 【ブログ入門】キーワードの探し方と選び方のコツ【ステップは５つ】

内部リンクの「ブログカード」コピペ用ソースコード

下記のソースコードを使用すれば、内部リンクのブログカードを表示することができます。

<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 参考記事①：ここにタイトル</p>
<p><a href="#" style="text-decoration: none;"></p>
<div class="link-box">
<div class="img-box">
<div style="background-image: url('#');"></div>
</div>
<div class="text-box">
<p class="title">ここにタイトル</p>
<p class="description">ここにメタディスクリプション</p>
</div>
</div>
<p></a></p>

このようなものですね。

更新情報：2019年10月14日

ブログカードの表示させるツールを、マナブさんが提供されました。
「ShareHtmlを、もっと綺麗にしたメーカー」です。
シンプルなブログカードが自動で生成される、素晴らしいツールです。

使い方は、下記記事で解説しています。

いったん、以上になりますm(_ _)m
僕も試行錯誤して取り組みつつ、作業していますので、追加した内容があればTwitterでお知らせできればと思います。
» ゾノ@スモール起業ビルダー(@zononakazono) | Twitter

WordPressテーマ「Manablog Copy」を使用したサイトまとめ

下記の記事にて、マナブログWordPressテーマ「Manablog Copy」を使用したサイトをまとめています。

無料相談ができるチャットを用意しました

» マナブログを目指す人の専用チャット【無料参加はコチラ】

下記のような相談ができるチャットを開設しました【無料】

マナブログをモデリングするときに必要な知識
「Manablog Copy」 or 「Minimal」のカスタマイズ方法
HTML／CSSなどの、基本的なこと

【相談無料】マナブログを目指す人を応援するグループチャット【無期限】

» 無料参加する

下記より、「Manablog Copy」のカスタマイズに関する記事をまとめてチェックすることができます。

最後までお読みいただき、ありがとうございます。「オールインワンWeb集客サイト完全レポート」というレポートが大人気です。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

私は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Kajabi特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます

無料配信【先生2.0】完全在宅＆好きなことで稼ぎ毎日感謝される働き方【無料】

人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】

Manablog Copy｜ワードプレス学習用｜参考メモ