初心者が読むべき500のノウハウ記事のまとめ

ManablogCopy(マナブログコピー)でGutenberg(グーテンベルク)を使う方法【WordPress初心者がレビュー】

この記事はこんな人におすすめ
  • Manablog Copyでグーテンベルクを使いたい人
  • マナブログコピーで簡単に記事を書きたい人
  • 色々あるけどマナブログに憧れてテーマ買いたい人
  • ManablogCopyの前身のMinimal(ミニマル)つかている人

こんにちは!
アフィリエイトの超ノウハウコレクターごま吉(@Lv1gomakichi)です。

スーパーアフィリエイターのマナブさん(@manabubannai)が先日リリースされたWordPressテーマ『ManablogCopy(マナブログコピー)』

公式WordPressテーマ『ManablogCopy(マナブログコピー)』


クラシックエディター推奨ということですが、

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

私はグーテンベルクからのデビューなので、ちとキツイ・・

そんな人のために、『ManablogCopy(マナブログコピー)』でグーテンベルクを使う方法を考えてみたのでご紹介しますー

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

簡単に言うと私イチオシのプラグイン『add-richtext-toolbar-button』クラシックエディタでやれることを補ってもらうパターンです。


また、ManablogCopy(マナブログコピー)を触った感想ですが、こんな環境の人におすすめな感じです。

ManablogCopy(マナブログコピー)がオススメな人

  1. マナブさんに憧れてやまない人
  2. マナブログのようなデザインにしたい人
  3. これから新規でブログを立ち上げようと思っている人

①は言わずもがなですが、②についてはマナブログのデザインが良いなぁと思っている人にはおすすめです。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

賛否両論ありますが、デザインはズバ抜けてセンス良いと私は思います。シンプル・イズ・ベスト(´ε` )

③についてですが、初心者の人で【テーマの載せ替え】をしようと思っている人は少し覚悟が必要です。というのが、その前のいずれかのテーマ独自で使っている機能(吹き出しや表組みテーブル、引用など)が、載せ替えたら使えない可能性があるからです。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

当たり前といえば当たり前ですが、丸っきり記事を再構築してくれる訳ではありません

なので、個人的には初心者であれば【これから新規でブログを立ち上げる人】には良いかなと思います。

まあ、色々言ってますが、はっきり言って情熱というかモチベーションがあれば全部クリアできる話です。笑

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

絶対にマナブさんのようになったるんや!!

と思っている人には、おすすめです(´ε` )

なぜならモチベーションが違います。憧れのマナブさんと同じブログなんですから。ちょっとやそっとの困難は情熱で切り抜けてください。(根性論っ!)

あと現実的な話ですが、このくらいのスキル持っていないと正直大変苦労します。

このくらいのスキルは最低限必須

  • WordPressのテーマファイル(PHP)を直接いじれる人
  • なんとなく作業をやらない人 ←PHPいじるので下手するとオワコンですw
  • CSSを最低限理解している人
  • HTMLを最低限理解している人
  • 諦めない人 ←大事w

他テーマと違ってManablogCopy(マナブログコピー)は、デフォルトでWordPressの中枢のファイル(PHPとか)を直接修正する必要があります。

なので、適当にやっちゃうと画面真っ白の『死の真っ白画面』に出くわすこともあるかもしれないです。ちゃんと覚悟してやりましょう。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

必ずBackupは取ってからやろうね

【超簡単】ワードプレスのデータをバックアップとる方法。プラグイン『All-in-One WP Migration』の使い方:HP code

お値段について

お値段については、2019年10月14日現在で6,980円(税別)とのこと。
高いとか安いとかは、個人の価値観なので割愛しますが、※満足いただけない場合、無期限で全額返金いたします。とのことなので、とりあえずチャレンジもアリだと思います。(時間は消耗しますヨ)

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

高いか安いか判断するのは自分自身です

前置き長くなりましたが、ではどうぞー

ManablogCopy(マナブログコピー)でGutenberg(グーテンベルク)を使った【動作環境】


まずは、動作環境です。私のManablogCopy(マナブログコピー)の環境はこんな感じ▼

WordPress本体

  • WordPress5.2.3

実質使ったプラグイン

  • Add RichText Toolbar Button ←コレコレ
  • Contact Form 7 
  • Disable Comments
  • Edit Author Slug
  • Google XML Sitemaps
  • Rinker
  • SANGO Gutenberg ←無理やりだが使えるw

公式サイトにあるようにプラグインは最小限で運営がいいかもです。

ManablogCopy(マナブログコピー)でGutenberg(グーテンベルク)を使う方法【WordPress初心者がレビューします】


まずは、ManablogCopy(マナブログコピー)のインストール。
購入して、ゲットしたテーマをインストールします。

管理画面外観テーマのアップロードファイルを選択
で購入したzipファイルをアップロードします。


mblogを選んで有効化


サポートページのガイドに従って、サンプル記事をまずはゲットです。

SP【Manablog Copy】 よくある質問まとめ【一問一答】


はい。こんな感じで記事サンプルがWordPressに入りました▼


推奨されているクラシックエディタで開くと、こんな感じ▼

み、見慣れん・・


Classic EditorをOFFにしてグーテンベルクで無理やり開いてみましょう(´ε` )

見慣れた感じに゚キタ━━━━(゚∀゚)━━━━!!


ちなみに、サンプル記事のベースプレビューはこんな感じ▼
(ちゃんと整ってますね。※グーテンベルクに切り替えたらアイキャッチは出ませんね)


では、グーテンベルクを使ってさっそくやってみよう!と思ってみたものの、

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

グレーの枠とか、青点線枠とか、チェックマークとかどうやって出そう・・

そこで、個人的に大絶賛中の『Add RichText Toolbar Button』の出番です。
導入の詳しい解説は、【ブログで便利なテキスト装飾12選】WordPressグーテンベルグから1発でテキスト装飾する方法【CSS苦手な人向け】をご参考ください。

【ブログで便利なテキスト装飾12選】WordPressグーテンベルグから1発でテキスト装飾する方法【CSS苦手な人向け】

Add RichText Toolbar Buttonを導入

Add RichText Toolbar Buttonを使えば、こんな感じでグーテンベルク内でテキストの装飾が出来ます(元記事と同じ装飾が可能)

※リストタグを使った「青点線の枠」はデフォルトCSSに設定されていたので、グーテンベルクを使って簡単にリスト設定すればOK。

プレビューしてみたのがこちら▼
(まあまあ再現できてますね。あとは微調整レベル)


ちなみに、Add RichText Toolbar Buttonを使えばこんな感じのテキスト装飾も簡単にできるようになります。

上記で私が設定しているAdd RichText Toolbar ButtonのJSONファイルはこちらです。
ご使用は自己責任でお願いします。

Add RichText Toolber Button JSONファイル (44 ダウンロード)

その他、ManablogCopy(マナブログコピー)でグーテンベルクを使う上で最低限必要なカスタマイズ


本文の装飾関係は上記で最低限クリアですが、他にもいくつか押さえて置かないといけない部分があったので、そちらもレビューします。

アイキャッチ画像の登録

アイキャッチは、グーテンベルク機能の右側メニューから簡単に登録ができます。

トップページの概要文(抜粋文、リード文)が出ない

そのままグーテンベルクを使うと、トップページのアイキャッチ下の文章が出てきません。


グーテンベルクには右メニューに抜粋で文章を入れれる欄があります。こちらの機能を有効にさせるために、PHPファイルをいじっていきます。

外観テーマエディターメインインデックスのテンプレートを開きます。


変更するのは32行目付近の記述です。

この表記を

<?php the_excerpt(); ?>

に変更します。

こんな感じ

そうすると、抜粋欄に文章を入れると

トップページに反映されました(´ε` )▼

画像が横幅いっぱいになってしまう問題

グーテンベルクで画像の挿入は簡単になっていますが、そのまま使うと画像が横幅いっぱいになります。

アイキャッチが横幅いっぱいなので、H2見出し直後など少し変化をつけたい所です。

カスタマイザーから追加CSSを加えます。

追加CSSを選びます。

CSSコードを追加します。

.wp-block-image {
width: 90%;
margin: 10px auto;
}

横幅90%で画像が収まるようになりました▼

ManablogCopyにも共通して使えるMinimalカスタマイズ

マナブログコピーの前身であるMinimalのカスタムについて、雑記ブログの方でもカスタマイズを紹介しています。共通して参考にして頂けると思います。

関連【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】

【まとめ】ManablogCopy(マナブログコピー)でグーテンベルクを使う方法


いかがだったでしょうか?

ManablogCopy(マナブログコピー)でグーテンベルクを使うには最低でもこのくらいのカスタマイズが必要かなと思います。

ただ、冒頭でも言ったように【マナブログのようなブログが作りたい】と思っている人にはコレ以上無いテーマだと思います。

ツイートもしましたが


全然HTMLとかCSSとかわからない人が、Minimalを買って、そこからカスタマイズ始めるとすれば、それに比べて1ヶ月位はショートカットできるでしょうし、少し知識のある人も30時間〜40時間はショートカットできると思います。(※個人差あり:私レベルだと)

ただ、他市販のテーマはこうした設定作業は、ほぼありません。
購入した状態からある程度ザクザク使っていける仕様になっていますし、随時アプデがあれば自動的にアプデ反映されます。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

ManablogCopy(マナブログコピー)は、PHPファイルを直接カスタムしていくので、アップデートがもしあれば・・自動的に反映は出来ないかもですね。


ただ、それでも『マナブさんのようにブログを書きたい』と思っている人にとっては、そのへん差し引いても十分魅力的なテーマかもしれません。

というのが、そのくらいブログを書き続けるのはモチベーションが必要だからです。途中息切れするくらいなら、多少カスタムが辛くてもモチベーション増える方がイイです。

続けることの方が、カスタマイズより全然ハードです。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

続かないと意味ないですから( ゚д゚ )クワッ!!

あとは、これも冒頭で書きましたが『デザイン性』で選ぶなら全然アリです。色々テーマを使ってますが、やはりMinimalですとかマナブログコピーのデザイン性はセンス良いし、心地よさがあります。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

心地よいデザインは、なかなか出会えません。

購入する初心者の方は、何を求めて購入するのか?購入前に一度検討されるといいと思います。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

それがあなたの価値観です。

最後に私はMinimalを使ってますが、問題なく快適に使えています(´ε` )
このレビューが初心者の方の参考になれば幸いです

※注:本記事は、SEO的なことは全く考えていないです。

おまけ

グーテンベルクにしたので、無理やりSANGOグーテンベルクをインストールしましたが、、中々アリかもしれませんw

アコーディオンが楽々使える(´ε` )