2019/10/10

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

PROGRAMMING WordPress

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

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

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

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

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

デモサイト：こちら
販売ページ：こちら

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

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

Manablog Copy｜お値段：6,980円　

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

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

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

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

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

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

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

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

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

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

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

実装された機能の紹介

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

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

順番に見ていきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

例えば上記です。

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

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

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

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

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

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

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

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

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

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

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

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

デモサイト：こちら
販売ページ：こちら

期間限定のキャンペーンあり

販売記念として、ちょっとキャンペーンをやります。

期限：2019年10月末まで
内容：質問に無料対応

専用のグループチャットを用意しますので、なにかトラブルがあればサポートします。
ただ、返答は爆速じゃないので、そこだけご了承ください。２日に１回くらい確認しますので、そこで対応します。

チャットサポートの詳細は、購入後のメッセージにてお知らせします。

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

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

１．サイト名の設定
２．SNSシェアの設定
３．プロフィール設定
４．TwitterIDの設定
５．メニューの設定
６．ピックアップ設定
７．プラグインの設定
８．記事で使うタグ設定
９．サイドバー削除方法

１．サイト名の設定

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

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>

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

２．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を入れましょう。

３．プロフィール設定

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

まずはプロフィール画像を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>

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

４．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」の場所に、自分のアカウント名を入れるだけ。

５．メニューの設定

続いてはナビバーです。ここにブログのカテゴリを表示する感じです。
編集ファイルは「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>

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

６．ピックアップ設定

ここは注目記事の設置場所です。編集ファイルは「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">ピックアップ記事の１本目<br>オススメ記事の１本目がこちらです</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>