Norifumi Nakazono's Blog.

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

HOW TO MEMO WORDPRESS

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

こんにちは、ゾノです。

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

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

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

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

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

本記事の概要

スポンサードサーチ

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

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

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

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

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

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

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

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

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

スポンサードサーチ

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

【manablog】マナブログをモデリングするためのソースコードを公開
では、さっそく行きましょう、大きなポイントは上記画像のとおりです。

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

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

  1. ヘッダー&メニューの設定
  2. トップ固定3記事の設定
  3. プロフィールの設定
  4. ランキング表示の設定
  5. フッターの設定

ステップ0:css/style.css

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

ステップ1:header.php

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

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

  • ロゴ(PCとスマホ用)
  • キャッチコピー
  • トップ固定の3記事
  • ファビコン

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

ステップ2:nav-menu.php

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

  • カテゴリー
  • アイコン

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

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

ステップ3:sidebar.php

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

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

ステップ4:footer.php

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

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

Twitter(フッター右)の設定

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

ステップ5:function.php

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

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

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

スポンサードサーチ

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

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

おすすめの設定1:category.php/index.php/search.php

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

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

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

おすすめの設定2:meta.php

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

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

おすすめの設定3:related.php

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

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

おすすめの設定3:related.php

おすすめの設定4:sns.php

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

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

おすすめの設定4:tag.php

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

  • 「_aioseop_description」 → 「’_aioseop_description’」
  • 「READ MORE」 → 「この記事を読む」とかに変更してもOK
※「_aioseop_description」だと、エラーになってしまいまして、「'_aioseop_description'」と変更することで解決しましたm(_ _)m

スポンサードサーチ

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

【manablog】マナブログをモデリングするための8つのコツ
manablog(マナブログ)をモデリングする際のコツを、8つまとめておきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

冒頭の会話用アイコンは、「いらすとや」を使用する
このような画像ですね。

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

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

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

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

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

<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>

このようなものですね。
内部リンクの「ブログカード」コピペ用ソースコード

いったん、以上になりますm(_ _)m
僕も試行錯誤して取り組みつつ、作業していますので、追加した内容があればTwitterでお知らせできればと思います。
» ゾノ@ブログ教師 (@norifumizono) | Twitter

相談やお問い合わせ、ご依頼など

お気軽にメッセージください。
» お問い合わせ

Webマーケティング基礎知識の学習用に、「【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ」をまとめました。

【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

ブログを使ったWeb集客の基本を学習したい方向け。本記事は初心者がブログを開設するために必要な基礎をまとめました。情報が変われば常にアップデートしていきます。これからWebマーケティングをを学びたい人や現在学習中の人は是非ご覧ください。

» 詳細を読む

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

どうしても分からなかったり、1人で悩むことがあればご相談ください。
また質問やメッセージ、相談があればお気軽にお問い合わせください(*´∀`*)
» お問い合わせ

人気記事ファイル名称の付け方とフォルダ整理【パソコンが散らかる原因】

人気記事【個人起業】ホームページ&ブログは必要か【欲しければ作りましょう】