マナブ産テーマ『Minimal』のレビュー＋カスタマイズ内容

ワードプレスのテーマで『Minimal』が気になっている方は是非読んでみて下さい、記事の内容は目次にある通りです、それではさっそく見てみましょう。

マナブ産テーマ『Minimal』のレビュー

私が使用しているWPテーマ『Minimal』はWEBマーケター・ブロガーとしても有名なマナブ氏（ @manabubannai ）が自作したもので、全体的にシンプルなデザインでミニマリスト向けに作られており、販売価格4,980円の有料テーマとなっております。

細かい説明は下記の記事をどうぞ（マナブ氏の記事に飛びます）、デモサイトはこちらになります。

※2019年11月21日にアプデ版リリース New

『Minimal』を購入した背景

私が『Minimal』を購入した背景について話しておきます、先に答えを言ってしまうとシンプルなデザインが好みだったのと、何よりマナブ氏が使用しているという『安心感』があったからです（これが一番大きい）

プログラミング記事と相性が良い

黒・白・グレーからなるスッキリとしたデザインに魅かれたのと、たまに書くプログラミング記事はシンプルなテーマの方が見やすいんですよね、これは私自身がエンジニアだからかな？笑

マナブ氏が使用している安心感

何よりトップブロガーであるマナブ氏が使っているテーマなら間違いないだろうという安心感がありました、逆に言うとマナブ氏を知らずして『Minimal』という選択はないかなと。笑

内部SEO対策について

内部SEO対策実施済みはこのご時世当たり前で、特別これがって部分はないかなと思います、他の有料テーマと同じく標準と思ってもらえればいいかと思います。

強いて挙げるとすればサイトの読み込み速度が速いという点ではSEO的に有利かなと、必要最低限の機能しか実装しないことで軽量化に成功しています。

※編集機能がない部分（サイドバーのプロフィールなど）は直接ファイル（コード）を編集する必要があります（マナブ氏による設定代行可）

カスタマイズ性について

カスタマイズ性については人によりけりかと思います、これは２パターンあると思います。

①：コードを編集することに抵抗がない人

本記事を書いている私のようにプログラミングやマークアップの知識がある人からすれば、ファイル数とコード量の少なさからカスタマイズしやすいと感じるかもしれません、少なくとも私はそう。

②：コード？何それ？な人

プログラミングはおろかマークアップの知識すらない人からするとカスタマイズ性は低いと感じると思います、管理画面からほとんど編集できないので知識がなければほぼデフォルトのまんま使うことになります。

販売価格『4,980円』について

価格については人それぞれかと思います、4,980円という金額は他の人気有料テーマと比べると安い方ではありますが、「4,980円も払ったんだから」という気持ちで購入すると高いと感じるかもしれません。

こと『Minimal』に関しては価格が多機能を保障するわけではないので尚更ですね、ぶっちゃけ私もマナブ氏のことを薄っすらしか知らない時は「高ぇ。笑」と思ったことがあります。

※実際には高いということはなく、テーマを作る手間を考えると妥当な価格、購入する側は背景を知らないから高いと感じてしまう

『Minimal』はこんな人にオススメ

話をまとめると『Minimal』はこんな人にオススメです。

• ブログにお金を投資できる人
• マナブ氏を参考にしたい人
• シンプルなデザインが好きな人
• コードを編集することに抵抗がない人
• ワードプレスを勉強したい人

マナブ氏をリスペクトしているなら買い、テーマ（環境）が同じだとマナブ氏のブログ施策を自分のブログに取り入れやすくなります、私はこれを「マナブログSEO」と呼んでいます、人は真似から成長していくのだ。

サイトをカスタマイズする時はコードを直接編集し調整する必要があるので、実装したことをググって調べて自分で考えながら実装させるなど多少プログラマティックな適性が求められる。

おまけ：実施したカスタマイズ内容まとめ

このブログでカスタマイズした内容を簡単にまとめておきます、以下の通りです。

• SNSボタンの追加
• トップに3カラムボックスを追加
• スマホ版のレイアウトを一部変更
• インフォメニューの追加
• サイトのPWA化＋戻るボタン
• 投稿日と更新日の表示
• パンくずリストの最適化 New
• タグのスタイル調整 New
• サイドバーにナビゲーション追加 New
• 他にも色々と調整（要望により追記）

①：SNSボタンの追加

記事下にあるSNSボタンの数を増やしました、デフォルトだと3つだった気がします、ちなみに表示位置も変える事ができます。

②：トップに3カラムボックスを追加

トップページ上部に3カラムボックスを設置して固定ページもしくはピックアップ記事を表示できるようにしました、本家が実施している施策をそのまま真似た形です、おかげでアクセスウハウハですね。

③：スマホ版のレイアウトを一部変更

トップページをスマホから見た時に可読性が高いようレイアウトを調整しました、デフォルトだと1スクロール1記事なのでこっちの方が正直見やすいと思います。

※一旦元に戻しています（アクセスを比較しテスト中）

④：インフォメニューの追加

メニュー下にインフォメニューを常時表示させました、推したい記事などのリンクをここに設置すればそこにアクセスを流すことができます。

⑤：サイトのPWA化＋戻るボタン

サイトをPWA化させ、それに伴い戻るボタンを設置しました、興味がある方はトップページをホーム画面に追加しそこからアクセスしてみてください、超高速なキャッシュ読み込みを体感できます。

⑥：投稿日と更新日の表示

記事の投稿日と更新日を両方表示させました、デフォルトだと片方１つだけですね。最近本家マナブ氏が対応したのに合わせた感じです、SEO的にもこっちの方がいいらしい（こういうのは無償で差分ファイル配れよと思った私は欲張りですかね）

⑦：パンくずリストの最適化

2020年1月22日、Google Search Console Teamから「サイト https://macoblog.com/ で「パンくずリスト」の問題が新たに 検出されました」と警告メールが飛んできまして、内容はパンくずの構造化データを修正しろ！という検索結果に影響する割と重要な内容っぽい。

マナブ氏のアプデには一切期待できないので自分で修正しました（表面上は変化なし）、作業内容を簡単に説明すると「data-vocabulary.org」から「schema.org」のマークアップに変更するだけ、後は「構造化データのテスト」で確認しエラーが消えていればOK。

修正後のコード「breadcrumb.php」

<div class="container-fluid breadcrumbs">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="breadcrumbs-inner" itemscope itemtype="http://schema.org/BreadcrumbList">

                    <span class="" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a href="<?php echo home_url(); ?>" itemprop="item">
                            <span itemprop="name">HOME</span>
                        </a>
                        <meta itemprop="position" content="1" />
                        &gt;&nbsp;
                    </span>

                    <?php

                        $meta_pos = 2;

                        if ( is_single() ) {
                     ?>

                        <span class="breadcrumbs" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                            <a href="<?php $cat = get_the_category(); echo get_category_link($cat[0]->cat_ID); ?>" itemprop="item">
                                <span itemprop="name"><?php echo $cat[0]->name; ?></span>
                            </a>
                            <meta itemprop="position" content="2" />
                            &gt;&nbsp;
                        </span>

                    <?php

                        $meta_pos++;

                         } else {
                         }
                     ?>

                    <span class="" style="color: #7B7B7B;font-size: 14px;font-weight: 300;" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <span itemprop="name">
                            <?php the_title(); ?>
                        </span>
                        <meta itemprop="position" content="<?php echo $meta_pos; ?>" />
                    </span>

                </div>
            </div>
        </div>
    </div>
</div>

追記：翌日にパンくず表記も修正

⑧：タグのスタイル調整

記事下に表示されるタグのスタイルを上記のように調整しました、デフォルトだとリンクと認識されにくいかなと思い「これは押せるボタンだぞ！」と分かるようにしました。

⑨：サイドバーにナビゲーション追加

おまけ：他にも色々と調整（要望により追記）

「Minimal」ではレイアウトやスタイルなど細かい部分が最適化されておらず昔のまま、本家を見てみると全て対応済みみたいで、それなら一緒にテーマを更新してくれよ（共通パーツくらい！）って話なんですがしてくれないみたいです。

なので、問い合わせが多いものについては私から対処策をお教えしたいと思います。

• 記事中のツイート埋め込み
• サイドバーにアドセンス広告

その①：記事中のツイート埋め込み

パチンコ・スロットをかじってる漫画家志望の人を探してます

— WEBトマト@ゲームマジ勢 (@MacoApp) 2019年6月27日

上と下を見比べてみると分かるように、ツイートを記事に埋め込むと左に寄ってしまう問題は、埋め込みコードをラップしてスタイル調整してあげれば解決します、手順は下記の通りです。

1. 埋め込みコードを<div>でラップする
   補足：「○○を○○で囲む」をラップすると言います
2. スタイルをあてて調整する

下のコードを記事にコピペして「ここに埋め込みコード」の部分を埋め込みコードに置き換えてください。

<div class="tweet-wrap">ここに埋め込みコード</div>

下記のスタイルを親テーマもしくは子テーマのstyle.cssにコピペします、一番下の行でいいかと思います。

.single div.tweet-wrap {
	padding-right: 40px;
	padding-left: 40px;
	margin-bottom: 60px;
}
@media only screen and (max-width:479px) {
	.single div.tweet-wrap {
		padding-right: 20px;
		padding-left: 20px;
	}
}

これでプレビューしてみると最適化されているはず、ラップ用のコードは「AddQuicktag」に登録しておけばいつでもすぐ使えるので便利かと思います（下記参考）

その②：サイドバーにアドセンス広告

サイドバーにアドセンス広告を設置したいとDMからお問い合わせ頂きましたので、その時の回答を貼っておきます。

管理画面 > テーマエディター > サイドバー（sidebar.php）

①：サイドバーの間に設置するならアドセンスコード（スクリプト）をタグで囲って設置すればOKです（下記コード参考）

<div class="col-xs-12 form-group" style="margin-top: 0">
<!-- アドセンス広告（サイドバー） -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345678901234"
     data-ad-slot="12345678901"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

②：サイドバー最下部に設置するならアドセンスコード（スクリプト）を「</aside>」の手前に直接設置すればOKです。

以上になります、お疲れさまでした。