macoblog

「ゲーム × プログラミング」で生きていく

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

WordPress

WEBトマトWEBトマト

どうも、トマトと申します。当ブログで使用しているWPテーマ『Minimal』についてレビューを残しておきます。なぜこのタイミングなのか?ブログの月間アクセスが30万を超えたあたりからテーマに関する問い合わせが多くて、同じことを説明するのが面倒になってきたからです。

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

目次【本記事の内容】

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

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

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

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

アプデ版では機能が追加され、本家マナブ氏の使用しているテーマにより近い形になっています、コピーテーマというのはそういう意味です。その分、販売価格は4,980円6,980円と高めに販売されています。
 
※筆者(トマト)の考えとして、この価格帯なら初心者の方は手を出さない方がいいかと思います(すまん、媚びる気はない。笑)

『Minimal』を購入した背景

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

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

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

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

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

ちなみに、以前使用していたテーマはバズ部産の『XeoryBase』という無料のテーマで、コンテンツ作りに特化したシンプルなテーマです。

内部SEO対策について

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

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

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

カスタマイズ性について

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

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

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

②:コード?何それ?な人

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

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

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

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

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

WEBトマトWEBトマト

かき氷って高くね?氷を削ってシロップかけるだけで300円ってヤバイわ・・・と知人が言っていたのを思い出した

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

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

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

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

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

WEBトマトWEBトマト

自分でコードを編集しカスタマイズしていく中でワードプレスを学ぶ事ができるので勉強者の方にもオススメではないかなと勝手に思っています

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

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

①:SNSボタンの追加

『Minimal』テーマカスタマイズ①:SNSボタンの追加

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

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

『Minimal』テーマカスタマイズ②:トップに3カラムボックスを追加

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

HTML/CSSに多少の知識があれば実装できます、具体的には本家のソースコードを参考に足らない部分を足して修正を重ねていく感じです。試す時はバックアップを取った上でレイアウト崩れにご注意くださいませ。

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

『Minimal』テーマカスタマイズ③:スマホ版のレイアウトを一部変更

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

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

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

『Minimal』テーマカスタマイズ④:インフォメニューの追加

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

ヘッダーファイルをいじるだけで簡単に実装できます、本家にはありませんがあった方がいと思います。

⑤:サイトのPWA化+戻るボタン

『Minimal』テーマカスタマイズ⑤:サイトのPWA化+戻るボタン

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

完全に余計な機能。笑、、、そもそもiOS環境でのPWAが進んでいないのでAndroidじゃないとPWAの恩恵は受けにくいんですよね、まぁ必要のない機能だと言えます。

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

『Minimal』テーマカスタマイズ⑥:投稿日と更新日の表示

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

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

『Minimal』テーマカスタマイズ⑦:パンくずリストの最適化

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

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

お困りの方の為にコード公開します

構造化データの修正方法が分からない方の為に修正後のコードを公開しておきます。編集するファイルはテーマ内にある「breadcrumb.php」のみ、バックアップは必ず取っておいてください。
 
修正手順としては、修正前のファイルと修正後のコードを参考に差分を調整するだけでOKです(「breadcrumbs-inner」というクラスを持つdivタグとその中を丸ごと変えれば大丈夫なはず)、修正前のファイルが全く同じって方はファイルの中身を丸ごと移し替えるだけで済むかと思います。
 
最後に、適当な記事を「構造化データのテスト」で確認し「BreadcrumbList」の項目にエラーなし・警告なしと表示されていれば無事完了です。

修正後のコード「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』テーマカスタマイズ⑧:タグのスタイル調整

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

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

おまけ:他にも色々と調整(要望により追記)

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

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

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

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

  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」に登録しておけばいつでもすぐ使えるので便利かと思います(下記参考)

ラップ用のコードは「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です。

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

WEBトマトWEBトマト

他にも細かい調整はしましたが大きなカスタマイズは今回紹介したものぐらいで、ほとんどはデフォルトのまま使用しています。なお、カスタマイズの相談については対応できかねます、簡単な質問であればTwitterからどうぞ、気分が乗れば返信します。