Written by Kosei Yayoshi

【鬼】Manablog Copyを徹底レビュー【購入後の修正点、設定、使い方】

WordPress


こんにちは、ヤヨコウです。

当ブログは、Manablog Copyで運営しています。
Manablog Copyを使い始めて1年経ちました。

使ってみた感想は、下記のとおり。

Manablog Copyを1年使ってみた感想。

・設定は簡単
・テーマの修正が鬼
・何かあっても自力で修正
・無期限の返金保証があるので安心

設定は簡単だけど、テーマの修正が鬼。最近は、All in One SEO Packのアプデで、突然ディスクリプリョンが、表示されなくなって焦った。←自力で修正済み

結論から書くと、Manablog Copyは「鬼」です。

本記事の内容

  • Manablog Copyを徹底レビュー【失敗を前提にチャレンジしよう】
  • Manablog Copyを購入したら、まず始めにする修正点まとめ
  • Manablog Copyの修正が終わったら行う設定を解説【Ver3,Ver1】
  • Manablog Copyで綺麗な記事の書き方【タグの使い方を解説】

Manablog Copyの購入前に、必ず上記の「修正点」と「設定」を確認してください。

「修正」と「設定」が出来ないと、Manablog Copyは、まともに使えないので、記事の内容に目を通して「修正内容と設定方法」を確認してから、購入することを推奨します。

本記事を見れば、購入後に後悔することを、ある程度防げるように書いているので、購入前に、この記事をよく読んでくださいね。

それでは「鬼」Manablog Copyをレビューしていきます。

Manablog Copyを徹底レビュー【失敗を前提にチャレンジしよう】

記事の冒頭でも、書きましたが、Manablog Copyは、初心者向けではありません。「鬼」です。

では「どいういったところが、初心者向けではないのか」これを、具体的に解説していきます。

Manablog Copyには、2つのバージョンがある【Ver1とVer3】

Manablog Copyには

  • 管理画面を追加した[Ver3]
  • 管理画面なしの[Ver1]

の2つのバージョンがあります。管理画面ありの[Ver3]だと、WordPressのメニューに[mblog管理]という項目が追加されます。

[Ver1]だと、管理画面がないので、直接[.phpファイル]を編集して設定をしていきます。

[Ver1]だとカスタマイズしやすい

[Ver1]の方が、無駄な機能がなく、カスタマイズしやすいので、当ブログでは、[Ver1]をカスタマイズして使用しています。

現在は、[Ver1]の配布はされていないみたいです。

[Ver1]をダウンロードしたい場合は「マナブログのお問い合わせ」か「マナブのマネージャーさんのTwitterのDM」からお問い合わせしてみてください。

Manablog CopyのVer3は設定が簡単だけど、表示が一瞬乱れる(修正方法あり)

[Ver3]は、簡単に設定が出来ますが、ページの読み込み時に、一瞬だけ表示が乱れます。

ページの読み込みが、終われば、綺麗に表示されます。

Manablog Copyは、本来ソースコードを直接弄って設定するのですが、[Ver3]で、管理画面を追加した影響で、表示が乱れてしまっています。

修正方法は、下記のツイートのとおり。

下記のCSSを[style.css]に追記することで、表示の乱れを修正できます。

/* ドロップダウンメニューの表示の乱れを修正 */
.sub-menu {
  display: none;
}

正直、こういった、地味な修正が沢山あるので、Manablog Copyは「完全初心者には、厳しいかな」といった感じです。

とはいえ、ググれば大抵のことは、解決できるので、ググれるなら、選んでOK。

Manablog Copyでの記事執筆【Classic Editorを使用】


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

Manablog Copyでの記事執筆は「Classic Editor」というプラグインをインストールして、テキストエディタで書いていきます。

Manablog Copy[Ver3]は、ビジュアルエディタにも対応しているので、ビジュアルエディタでもOKです。

[Ver1]の場合は、下記のコードを追記することで、ビジュアルエディタに対応できます。

[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;
}

これで、ビジュアルエディタに対応できます。

「Classic Editor」のサポートは2021年まで

「Classic Editor」は、2021年でサポートが終了してしまいますが、代替プラグインに「Disable Gutenberg」というプラグインがあるので、2021年以降も、テキストエディタは、使えると思います。

「Classic Editor」の代替プラグインの「Disable Gutenberg」については、下記の記事をご覧ください。(外部サイト)
» Classic Editorサポート終了後の代替プラグインとして使える「Disable Gutenberg」

「Disable Gutenberg」は、2022年以降もできる限り、サポートを続けてくれるみたいですね。

一応「Gutenberg」で書けるけど使いにくい

Manablog Copyで「Gutenberg」をONにして、記事を書いてみましたが、かなり書きにくいです。というか無理。

Mananablog Copyに限った話じゃありませんが、「Classic Editor」がなければ、WordPressで記事執筆に集中するとか無理です。

テキストエディタでの記事執筆のやり方

記事の書き方、タグの使い方は、記事の後半で解説します。

Manablog Copyを使うメリット【シンプルでカスタマイズしやすい】

Manablog Copyを使うメリットは、シンプルでカスタマイズがしやすい。これに尽きます。

テーマのカスタマイズの自由度が高い

Manablog Copyは、無駄な機能を徹底的に削ぎ落としているので、ソースコードを好きなように弄って、見た目を好きなように、変えられます。

ある程度、html、cssが理解できるようになると、Manablog Copyのカスタマイズのしやすさに驚くはずです。

html、cssに触ったことのない初心者には、難しいかもですが、テスト環境を作って、

Manablog Copyのソースコードを弄りながら「html,cssを理解していく」

という使い方をしてみると、理解が深まり、楽しめます。

Manablog Copyのアプデには期待しないほうが良い【自分でアップデート】

Manablog Copyは、頻繁にアプデがされません。

現在(2021/01/19)最終のアプデは「2020/08/13」のメールで、コードの修正(1箇所)のお知らせだけです。

大幅なアプデは、[Ver3]で管理画面が追加されたことくらいです。

新規デザインが追加もされるかも

Manablog Copyの新規デザインが追加予定みたいですが、上記ツイートから一切、アプデのお知らせメールや、告知ツイートがないので、いつ新規デザインが追加されるのかも、不明です。

新規デザインの告知から、半年以上、なにもなしです。「マナブさんが、新規デザインのことを忘れている」という可能性大です。

なにか問題があってもアプデされない

Manablog Copyは、購入後の修正が「鬼」です。

僕が、Manablog Copy購入後に、自力で修正した内容は下記のとおり。

  • サーチコンソールの「パンくずリスト」エラー
  • Android端末(Chrome)で太字が反映されない問題
  • プラグイン「All in One SEO Pack」のアプデで、記事のディスクリプション(説明文)が、突然表示されなくなる←new2021

上記の問題は、一切アプデがなかったので、自力で修正しました。

上記問題の修正方法は「Manablog Copyの修正点まとめ」にまとめているので、購入後、自力で修正してください。

自分でアップデートしていく

マナブさんのアプデに、期待せずに、自分で「html,css」を勉強しつつ、自分でアップデートをしていく。

これがManablog Copyです。自分のブログは、自分でアップデートです。
» Manablog Copyの購入ページ | Brain

Manablog Copyを購入したら、まず始めにする修正点まとめ

Manablog Copyを購入する前に、必ず「修正点」を確認しておいてください。

とにかく、自力で修正する点が多いので、この内容を見て、「自力で修正できそう」という方のみ購入することを推奨します。

修正方法は、指定されたコードを、別のコードに置き換えるだけなので、

  • [Ctrl + F]を使ったサイト内検索
  • コピペ

上記2つができれば、簡単に修正できるはず。

【Ver3のみ】ドロップダウンメニューの表示が乱れる問題を修正

この修正は、[Ver3]のみの修正です。

修正内容は、下記のツイートのとおり。

下記のCSSを[style.css]に追記すればOK。

/* ドロップダウンメニューの表示の乱れを修正 */
.sub-menu {
  display: none;
}

これで、ページの読み込み時に表示が乱れなくなります。

[style.css]にCSSを追記してManablog Copyのデザインを修正

AndroidのChromeで太字を表示させる修正

Manablog Copyは、初期状態だと、AndroidスマホのChromeで太字が反映されないので、修正が必要です。

下記の記事を参考に修正です。
» 【Manablog Copy】Androidスマホで太字を反映させる方法【CSSを追記】

英字がはみ出す問題を修正

とりあえず貼っておけがOK。
下記のコードを[style.css]に追記です。

/* 英字がはみ出る問題を修正 */
body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

「パンくずリスト」のエラーを修正【breadcrumb.phpを置き換える】

Manablog Copyを使っていると、Googleのサーチコンソールから「エラー警告」を受け取ると思うので、[breadcrumb.php]ファイルのコードを全て置き換えます。

修正内容の詳細は、下記をご覧ください。(外部サイト)
» 【マナブログコピー(WordPress)】パンくずリストエラーの修正方法【Google Search Console Error】

上記サイトが閉鎖されてしまったので、[archive.org]のURLを載せています。

All in One SEOのディスクリプリョン(メタ情報)を表示させる修正

Manablog Copyで「記事の説明文」を表示させるのに使われている「All in One SEO Pack」というプラグインのアプデの影響で、記事のディスクリプション(説明文)が表示されなくなってしまったので修正が必須です。

修正方法は、下記の記事にまとめたので、修正してください。
» Manablog Copyで新記事のディスクリプションが表示されないときの対処法

【修正済み?】search.phpファイルの修正

下記の修正は、2020/08/13に送られてきた、マナブさんからの修正メールの内容です。

変更箇所

[search.php]ファイルの2行目の下記のコードを

<?php $s = $_GET['s']; ?>

変更後の状態

下記のコードに置き換えてください。

<?php $s = htmlentities($_GET['s']); ?>

修正ができれば、Manablog Copyを使いこなせるはず

上記の修正ができれば、問題なくManablog Copyを使いこなせると思います。

修正するには、ソースコードを直接弄るので「難しいかも」と感じるかもですが、慣れれば問題なしです。

Manablog Copyは、慣れれば、かなり使い勝手のいいWordPressテーマなので「失敗を前提」に、返金保証を使いつつ、チャレンジしてみるのもありです。
» Manablog Copyの購入ページ | Brain

Manablog Copyの修正が終わったら行う設定を解説【Ver3,Ver1】

Manablog Copyには「管理画面が追加されたVer3」と「管理画面なしのVer1」の2つのバージョンが存在します。

[Ver1]がダウンロード出来ない時は「マナブログのお問い合わせページ」か「マナブのマネージャーさんのTwitterのDM」から、お問い合わせしてみてください。

Manablog Copyの[Ver3][Ver1]の初期設定を解説していきます。

設定が反映されない時の対処法

設定が反映されない時は、ブラウザキャッシュが残っているので、

  • 1.キーボードの[F12]を押して
  • 2.開発者ツール(デベロッパーツール)を開いて
  • 3.ページの更新ボタンを長押しして
  • 4.[キャッシュの削除とハード再読み込み]をクリック

ブラウザのキャッシュを削除すると、設定が反映されます。

やり方がわからない方は、下記の記事を参考にどうぞ。(外部サイト)
» 【Chrome】ブラウザの頑固なキャッシュを完全に削除するスーパーキャッシュクリア方法

Manablog Copy[Ver3,Ver1]共通の設定

下記の項目の設定は、[Ver3][Ver1]共に共通です。

必要最低限のプラグインをインストール

下記の記事を参考にプラグインをインストールします。
» WordPressのおすすめプラグインは8つだけ。断言します

上記の記事で紹介されているプラグイン以外は、基本的にアンインストールしてOKです。一応、使っていないか、確認してからアンインストールです。

バックアップの設定

バックアッププラグインは、下記の記事を参考に設定です。
» バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

キャッシュとファイル圧縮の設定

これは、別にやらなくてもいいですが、下記を参考に、キャッシュ設定とファイル圧縮設定をしておくことで、キャッシュプラグインが不要になります。
» エックスサーバーでWPをSSL化した際のリダイレクト設定(.htaccess)

[.htaccess]ファイルにコードを追記するだけなので簡単です。

追記方法は、ブログの運営サーバーによって違うので、「.htaccess サーバー名」でググってください。

AddQuicktagの設定からタグの設定をインポートする

下記を参考に、AddQuicktagの設定をしておきます。
» 【Manablog Copy】 よくある質問まとめ【一問一答】

テキストエディタで、ブログを書くときに、タグ打ちが楽になります。

Manablog Copy[Ver3]の設定

下記(外部サイト)を参考にManablog Copyの設定をしていきます。記事内の動画解説が分かりやすいです。
» 【Ver2】Manablog Copyのセットアップ/動画あり【初心者向け】

[Ver2]の解説記事ですが、[Ver3]と設定方法は同じです。

Manablog Copy[Ver1]の設定

下記(外部サイト)を参考に設定を設定をしていきます。こちらも解説動画を見ながら設定すると分かりやすいです。
» 【無料動画あり】マナブログ「Manablog Copy」設定方法【初心者】

Googleアドセンスを記事中に綺麗に自動挿入させる設定

下記の記事を参考にGoogleアドセンスの設定をすることで、記事中に綺麗にGoogleアドセンスを、自動挿入出来ます。
» Manablog CopyでGoogleアドセンスを綺麗に埋め込む方法

Manablog Copyで綺麗な記事の書き方【タグの使い方を解説】

繰り返しになりますが、下記のページを参考に、AddQuicktagの設定からタグの設定をインポートしておいてください。
» 【Manablog Copy】 よくある質問まとめ【一問一答】

Manablog Copyタグの使い方まとめ

  • 吹き出し
  • 箇条書き
  • 画像の挿入方法
  • 太字の書き方
  • 文字を灰色の背景で囲む
  • チェックポイント
  • 引用の書き方
  • 表の書き方
  • YouTubeの埋め込み方
  • リンクカードの貼り方
  • 赤文字
  • ソースコードの埋め込み方

テーマをカスタマイズして、見た目を変えたいかもですが、まずはアクセスを集めることに専念です。

初心者がカスタマイズしても自己満でブログが終わります。

当ブログもほぼ、カスタマイズしてません。

タグ打ちのやり方


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

ブログのテキストエディタで、表示されているタグをクリックすると、タグ打ちが出来ます。

詳しい使い方は、「AddQuicktag 使い方」でググってください。

吹き出し

◯◯◯◯◯「◯◯◯◯◯◯◯◯◯◯」

吹き出しのキャラクターの画像をサーバーにアップロードして、画像URLを変更してください。

タグ[talk]

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="https://画像のURL" alt="" class="img-responsive">
</div>
<div class="col-md-9 col-xs-9 text">
	<p><span class="bold">◯◯◯◯◯</span>「◯◯◯◯◯◯◯◯◯◯」</p>
</div>
</div>

箇条書き

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3

タグ[ul][ol][li]

点を数字にしたい場合は、[ul][ol]にすればOK。

<ul>
	<li>箇条書き1</li>
	<li>箇条書き2</li>
	<li>箇条書き3</li>
</ul>

画像の挿入方法

タグ[link][img]

<a href="https://画像のURL"><img src="https://画像のURL" alt="" /></a>

見出しの下に画像を貼る場合

タグ[h2_nmb][h3_nmb]

<h2 class="nmb">これは、h2見出しです</h2>

<a href="https://画像のURL"><img src="https://画像のURL" alt="" /></a>

太字の書き方

これは、太字です

タグ[bold]

<span class="bold">これは、太字です</span>

チェックポイント

これは、チェックポイントです

タグ[point]

<p class="point"><i class="fa fa-check" aria-hidden="true"></i> これは、チェックポイントです</p>

文字を灰色の背景で囲む

Manablog Copyを1年使ってみた感想。

・設定は簡単
・テーマの修正が鬼
・何かあっても自力で修正
・無期限の返金保証があるので安心

設定は簡単だけど、テーマの修正が鬼。最近は、All in One SEO Packのアプデで、突然ディスクリプリョンが、表示されなくなって焦った。←自力で修正済み

改行するときは、<br>タグを挿入します。<br>タグを挿入しないと、表示が乱れます。

タグ[pre_link]

<div class="pre">Manablog Copyを1年使ってみた感想。
<br>
・設定は簡単
・テーマの修正が鬼
・何かあっても自力で修正
・無期限の返金保証があるので安心
<br>
設定は簡単だけど、テーマの修正が鬼。最近は、All in One SEO Packのアプデで、突然ディスクリプリョンが、表示されなくなって焦った。←自力で修正済み</div>

引用の書き方

これは、引用です

タグ[b-quote]

<blockquote>これは、引用です</blockquote>

引用元を追加する場合

これは、引用です
引用元の記事タイトル

引用元のURLを[blockquote]タグ内に追記して、[a]タグのクラスに[class="credit"]を指定すればOK。

<blockquote>これは、引用です
<a href="https://引用元のURL" class="credit">引用元の記事タイトル</a></blockquote>

表の書き方

左1 右1
左2 右2
左3 右3

タグ[table]

<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>左1</td>
<td style="background-color: rgb(250, 250, 250); --darkreader-inline-bgcolor:#1a1b1c;" data-darkreader-inline-bgcolor="">右1</td>
</tr>
<tr>
<td style="background-color: rgb(250, 250, 250); --darkreader-inline-bgcolor:#1a1b1c;" data-darkreader-inline-bgcolor="">左2</td>
<td>右2</td>
</tr>
<tr>
<td style="background-color: rgb(250, 250, 250); --darkreader-inline-bgcolor:#1a1b1c;" data-darkreader-inline-bgcolor="">左3</td>
<td>右3</td>
</tr>
</tbody>
</table>
</div>

表の書き方は、下記の記事を参考にすると分かりやすいです。htmlの基礎が理解できると、Manablog Copyを使いこなせます。
» HTMLのtableでテーブルを作る方法と応用テクニックを解説

<tr>タグと<td>タグの使い方を理解です。

YouTubeの埋め込み方

下記(外部サイト)を参考にYouTubeの埋め込みコードをコーディングします。下記記事の追加CSSは、追記しなくてOK。
» 【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

YouTubeの埋め込み手順

  • YouTubeの埋め込みコードを取得
  • 埋め込みコードの[src=""]を空にして、[data-src="youtubeのURL"]にする
  • YouTubeの埋め込みコードを[<div class="YoutubeWrapper">修正したYouTubeの埋め込みコード</div>]で囲む
  • 記事の先頭に、JavaScriptを貼り付ける

YouTubeを記事中に埋め込む時は、下記のJavaScriptを記事の先頭に貼り付ければOK。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

タグ[youtube]

<div class="YoutubeWrapper"><iframe width="560" height="315"  src="" data-src="https://www.youtube.com/embed/7J30apoL3nQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

リンクカードの貼り方

sharehtmlを、もっと綺麗にしたメーカー」というサイトに、URLを打ち込んで「Enter」

CSSコードは、追記しなくてOK。

詳しい使い方は、下記の記事をどうぞ。
» ShareHTMLの新しい形!綺麗な記事リンクHTMLを作れる超便利ウェブツール

赤文字

赤文字にしたい文字

顔文字と組み合わせると、こんな使い方が出来ます。
カアーッ(*/□\*)赤面

タグ[code]

<code>赤文字にしたい文字</code>

ソースコードの埋め込み方

ここにソースコード

» HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール

ソースコードを埋め込む前に、上記サイトで、ソースコードを特殊文字に変換してください。

タグ[programming]

<pre><code class="language-php">ここにソースコード</code></pre>

まとめ:デザインが好みなら、とりあえず試してみるといい

以上で、Manablog Copyのレビューは、終わりです。

この記事の内容を踏まえた上で「Manablog Copyを使ってみたい」と感じた人は「失敗を前提」にチャレンジしてみてください。

もし、うまく設定ができなくても、Manablog Copyは、無期限の返金保証があるので、実際に使ってみて難しく感じるなら「返金してもらい、別のテーマを使う」ということも出来ます。

設定や修正は、慣れれば簡単ですが、htmlやcssに一切触れたことのない人からすると、かなり扱いが難しく感じるかもです。

Manablog Copyは、完全初心者向けではありませんが、htmlやcssを勉強しながら使ったり、カスタマイズ性を重視するなら、洗練された素晴らしいWordPressテーマだと思います。

デザインが好みなら、ぜひ一度お試しあれ~。
» Manablog Copyの購入ページ | Brain

コメントする

*必須

メールアドレスは、公開されません

内容を確認してから送信してね