Written by Manabu Bannai

【お知らせ】マナブログのWordPressテーマのコピーを販売します

PROGRAMMING WordPress

こんにちは、マナブです。

自作したWordPressテーマにて、ブログ運営しています。
ブログ歴は6年で、月間150万PV、収益1,000万くらいです。

先日に下記のツイートをしました。

上記のとおり「WordPressテーマ」を販売します。
記事で詳細解説しておりますので、ご覧くださいませ。

Manablog Copy|SEOと読みやすさを追求したテーマ

更新情報

Manablog Copyを販売します【SEOと読みやすさを追求】


論より証拠かなと思うので、まずはデモサイトをどうぞ。

Manablog Copy|お値段:6,980円 

上記のとおりで、僕のサイトのコピー版ですね。
色合いとかを変更したら、わりと雰囲気も変わるかなと思います。

カスタマイズバージョンの参考例

参考までに、こちらをどうぞ。
オリオンママさん(@beachcatcom)という敏腕Webデザイナーの方のブログです。

僕のテーマを使っているのですが、デザインが美しいです。
色合いを変えてロゴを入れると、変わりますね。

注意点:完全初心者だと、厳しいかもです

Manablog Copyは「必要最低限の機能実装」というスタンスです。
僕は元エンジニアなので「自由度の高いテーマ」を目指しました。

市販されているテーマは「機能が多いけど、なんかダサくなる…」という感じだったので、僕のテーマはミニマリスト的な設計になっております。

ビジュアルエディタは使えません

上記のとおり。要するに「HTMLだったりのタグを、多少は理解しないとキツい」という感じ。まぁ1日で慣れます。

あと、もしかすると「なんか、管理画面の雰囲気が違うな」と感じるかもですが、Manablog Copyでは「Classic Editor」というプラグインを使っています。こちらは「旧式WordPressの投稿エディタを表示する」というツールです。

WordPressはアップデートしたのですが、使いづらいと感じる人が多く、僕も同じです。旧式の方が、使いやすいです。

更新情報:2019年11月13日

SNSコメントを見ていたら「ビジュアルエディタが使えないのはキツい…」という意見が多かったので、対応しました。下記2箇所を変更したら、問題なく使えると思います。

# 修正点①:functions.phpに下記を追加

function remove_p_on_images($content){
    return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}
add_filter('the_content', 'remove_p_on_images');

# 修正点①の写真解説

# 修正点②:style.cssに下記を追加

.single > img:not(.img-responsive) {
    width: auto;
    max-width: 87.5%;
    margin-top: -10px;
    margin-bottom: 30px;
    border: 1px solid #d8d8d8;
}

# 修正点②の写真解説

以上となります。
これでビジュアルエディタも問題ないかなと思います。

実装された機能の紹介

注目ポイントは、下記の3つです。

  • その①:SEO対策は、かなり完璧です
  • その②:読みやすさ設計も、良いはず
  • その③:セキュリティにも、強い設計

順番に見ていきます。

その①:SEO対策は、かなり完璧です

SEOは、自信があります。
論より証拠ということで、僕が運営するマナブログは「月間1,000万」ほどの収益です。

SEOでも上位を量産しており、下記のとおり。

たぶん、ここまで公開している人は日本にいないはず。
海外にも、たぶんいません。

あと、細かいSEO設計も完璧です。

  • 構造化マークアップ済み
  • 記事更新後に、日付変更
  • 各種タグはもちろん最適

上記のとおり。
構造化マークアップとかは、ヤヤコシイので、気になる場合はググってください。

あと少し重要な部分は「記事公開日と更新日の表示」とかですね。

上記のとおりで、2019年のGoogleのSEO方針を考慮すると、上記の表示方法が最適と判断しています。
あと、各種タグ(Title, H1, H2, H2)などは、もちろん最適化しています。

その②:読みやすさ設計も、良いはず

読みやすさにも、こだわっています。ここまで読んでいただきありがとうございます。
当サイトは「Manablog Copy」と同じ文章表示ですが、わりと読みやすくないですか。

具体的には、下記の点を意識しています。

  • フォントサイズ
  • フォントの行間
  • 改行時の、余白
  • PC版での、横幅
  • 文字色(薄い黒)

例えば上記です。

細かい話をすると、実はもっとあります。僕はデザインもわりと好きだったりするので、大手サイトとかを分析し、もっとも良い比率に仕上げました。

例えばですが「文字を横向きに追いかけるとき、何文字くらいだと読みやすいか」とかを考えています。

その③:セキュリティにも、強い設計

セキュリティに強いだと、ちょっと語弊あるかもです。

正確には「不要なプラグインはすべて排除」という感じです。
論より証拠なので、公開します。

こちらが全てです。使っているのは「6個だけ」ですね。相当少ないはず。

なお、プラグインは無駄に増やさないほうが良く、その理由は「プラグインをアップデートしない→セキュリティホールが生まれる→サイトがハッキングされる」というパターンが多いからです。

Manablog Copyなら、最低限の信頼できるプラグインのみで運営できます。
あと、バックアップも自動化しているので、なにか問題が起きても安心です。

※プラグイン設定に関しては後述します。

返金保証付きにて、販売します

というわけで、気になる方は下記よりどうぞ。
返金保証があるので、無期限で返金します。

Manablog Copy|SEOと読みやすさを追求したテーマ

Manablog Copyの設定方法のまとめ【随時更新】


いくつかの初期設定が必要です。まとめておきます。

  • 1.サイト名の設定
  • 2.SNSシェアの設定
  • 3.プロフィール設定
  • 4.TwitterIDの設定
  • 5.メニューの設定
  • 6.ピックアップ設定
  • 7.プラグインの設定
  • 8.記事で使うタグ設定
  • 9.サイドバー削除方法

1.サイト名の設定


まずはサイト名を設定しましょう。

WordPressメニューの「外観→テーマエディタ」に進みます。そして「header.php」を選択します。

そして、下記の部分を変更します。

変更箇所:102〜103行目

<span class="sitename main">Manablog Copy</span>
<span class="sitename sub">Written by Manabu Bannai</span>

上記なので、ここをサイト名にします。

変更イメージ:102〜103行目

<span class="sitename main">Yamada Blog</span>
<span class="sitename sub">Written by Taro Yamada</span>

こんな感じですかね。これでサイト名の設定完了。

2.SNSシェアの設定

ここは必須じゃないですが、大切なので設定しておきましょう。
いわゆる「OGP設定」の方法です。

SNSとかで記事をシェアしたときに「見やすい画像」が出ていたりしますよね。
あれには、設定が必要なので、見ていきます。

まずは「FacebookのID」を取得する

下記サイトから取得できます。
自分のFacebookプロフィールURLを打ち込んでください。

その後に、また「header.php」を表示して、下記を変更します。

変更箇所:44行目

<meta property="fb:admins" content="0000000000000" />

上記なので、ここを変更します。

変更イメージ:44行目

<meta property="fb:admins" content="1234561234561" />

例えば上記です。

なお、本当は「fb:app_id」という値も設定した方がいいですが、ここは省略しても問題ないです。
気になる方はググってみてください。若干だけヤヤコシイですが、慣れたら簡単です。

TwitterのOGP設定も、やっておこう

こちらは簡単です。変更箇所は「46〜47行目」となります。

<meta name="twitter:site" value="@xxxxxxxxxxxx" />
<meta name="twitter:creator" value="@xxxxxxxxxxxx" />

上記なので、ここを変更します。

<meta name="twitter:site" value="@manabubannai" />
<meta name="twitter:creator" value="@manabubannai" />

こんな感じです。自分のTwitterIDを入れましょう。

3.プロフィール設定


続いてはプロフィール設定です。画像と自己紹介文を入力します。

まずはプロフィール画像をWordPressにアップ

まずは画像をWordPressにアップしてください。普通に「記事に画像をアップする感じ」で大丈夫です。
そして、下記からURLを抜き取ります。

上記のとおり。簡単ですよね。そして「sidebar.php」を編集します。

変更箇所:3〜7行目

<img src="http://manabubb.xsrv.jp/manablog/wp-content/uploads/2019/10/shutterstock_1123232387.jpg" class="img-responsive img-circle" />
<h4><span itemprop="name">Taro Yamada</span></h4>
<hr>
<p>
自己紹介です。自己紹介です。自己紹介です。自己紹介です。自己紹介です。自己紹介です。自己紹介です。自己紹介です。自己紹介です。
</p>

上記なので、ここを変更します。

変更イメージ:3〜7行目

<img src="ここにコピーした画像URLを貼り付け" class="img-responsive img-circle" />
<h4><span itemprop="name">坂本 龍馬</span></h4>
<hr>
<p>
幕末に活躍しました。西郷隆盛とかも協力して、日本を良くするために活動しており、人生の行動記録をブログに執筆しています。
</p>

上記の感じですね。入力するときは、改行とかしないようにしましょう。

4.TwitterIDの設定


サイトのフッター部分では、Twitter表示しています。
ここの設定も簡単です。編集ファイルは「footer.php」です。

変更箇所:56行目

<a class="twitter-timeline"  href="https://twitter.com/manabubannai" data-widget-id="302814657645789185">Tweets by @manabubannai</a>

変更イメージ:56行目

<a class="twitter-timeline"  href="https://twitter.com/XXXXXXX" data-widget-id="302814657645789185">Tweets by @XXXXXXX</a>

上記の「XXXXXXX」の場所に、自分のアカウント名を入れるだけ。

なお、上記で表示されなかったら、下記を使ってみてください。

<a class="twitter-timeline" height="570" href="https://twitter.com/XXXXXXXXXX?ref_src=twsrc%5Etfw">Tweets by XXXXXXXXXX </a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

5.メニューの設定


続いてはナビバーです。ここにブログのカテゴリを表示する感じです。
編集ファイルは「nav-menu.php」です。

ここはパット見ですこしヤヤコシイかもですが、下記に変更イメージを掲載しておきます。

変更前の状態

<li class="dropdown" itemprop="name">
	<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart" aria-hidden="true"></i> Menu01 <span class="caret"></span></a>
	<ul class="dropdown-menu">
		<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
		<li><a href="<?php echo home_url(); ?>/seo/">Nav01</a></li>
	</ul>
</li>

変更後の状態

<li class="dropdown" itemprop="name">
	<a href="#" itemprop="url" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-line-chart" aria-hidden="true"></i> 副業情報 <span class="caret"></span></a>
	<ul class="dropdown-menu">
		<li><a href="<?php echo home_url(); ?>/blog/">ブログ</a></li>
		<li><a href="<?php echo home_url(); ?>/programming/">プログラミング</a></li>
	</ul>
</li>

例えば上記の感じです。ここだけちょっと、頑張りましょう。

なお、メニュー設定に関しては下記記事がわかりやすいです。
» 【無料動画あり】マナブログ「Manablog Copy」設定方法【初心者】

6.ピックアップ設定


ここは注目記事の設置場所です。編集ファイルは「picks.php」です。
ここに関しては、下記の点を変更しましょう。

  • 記事画像
  • 記事タイトル
  • 記事リンク

上記のとおりで、HTMLをみたらすぐに分かるはず。
具体的には下記のコードを変更する感じです。

<a style="background-image:url(http://manabubb.xsrv.jp/manablog/wp-content/uploads/2019/10/top_001.jpg" itemprop="url" class="thumbnail-img"></a>
<a href="http://manabubb.xsrv.jp/manablog/pick01/"  itemprop="url">ピックアップ記事の1本目<br>オススメ記事の1本目がこちらです</a>
<div class="readmore"><a href="http://manabubb.xsrv.jp/manablog/pick01/">READ MORE</a></div>

上から順番に「画像→タイトル→リンク」の順番です。
変更イメージは下記のとおりです。

<a style="background-image:url(ここに画像リンクを貼る" itemprop="url" class="thumbnail-img"></a>
<a href="ここに記事URLを貼る"  itemprop="url">ここに記事タイトルを貼る</a>
<div class="readmore"><a href="ここに記事URLを貼る">READ MORE</a></div>

上記のとおり。ちょっとややこしくてスイマセン。
しかし、こういった細かい部分に「構造化マークアップ」があったりで、WordPressの初期仕様だとSEOに弱かったりするんですよね。

頑張って慣れてください。

7.プラグインの設定

プラグイン設定は下記をどうぞ。

基本的には上記設定でOKです。
なお、1つ注意点は「Akismet」は不要です。そもそもコメント欄がありませんので。

あと「PuSHPressとWordPress Ping Optimizer」も、最近は削除しました。
理由はリンク先の記事に書いています。

あと「Broken Link Checker」は、メール通知がダルいので削除しました。
これは自己判断でどうぞ。僕は不要でした。

8.記事で使うタグ設定

タグに関しては、デモ記事を下記に添付します。
こちらを「ツール→インポート」から読み込んでください。
» サンプル記事をダウンロードする

上記と合わせて「AddQuicktag」のデータも読み込んでください。
» AddQuicktagのファイルダウンロード

AddQuicktagは「設定→AddQuicktag」を選択し、その後に「インポート」の項目があるので、そこから「addquicktag.json」をアップロードします。

これを見たら、タグの使い方もわかるはず。

補足:ブログカードの設定方法

ブログカードの表示には「ShareHtmlを、もっと綺麗にしたメーカー」というツールを使います。WordPressのデフォルトのブログカードだと、美しさに欠けるので、僕がツールを自作しました。

URLの貼付け後に「HTMLコードをコピペ」したら動作します。
CSSコードも出てきますが、これは無視して大丈夫です。

9.サイドバー削除方法

サイドバーも削除できます。例えば下記。

こういったページが作れると、便利ですよね。
ここはワンクリックで設定可能です。

上記のとおりです。圧倒的に簡単ですね。

補足:記事の概要文の表示に関して

確実に質問が届くと思うので、記載しておきます。下記のとおり。

このように連動する感じです。
All in One SEO Packをインストールして、そして入力するようにしてください。

なお、All in One SEO Packで「詳細」が書き込めない場合は「Autogenerate Description」をOFFにしてください。

というわけで、今回はこれくらいにしようと思います。
Manablog Copyはマナブログのアップデートに従って、継続アップデートしていく予定です。

一度購入したら、アップデートは無料です。わりと本気で作ったWordPressテーマなので、ぜひご検討ください。

Manablog Copy|SEOと読みやすさを追求したテーマ

参考マニュアル①

参考マニュアル②

参考マニュアル③

インストール方法の動画マニュアル

投稿方法の動画マニュアル

Manablog Copyの基本操作セミナー

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社