最終更新日: 2019/08/12

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

web webデザイン

こんにちは、さる基地（@sarukichi2019）です。

当ブログのデザインはブロガーのマナブ（@manabubannai）さん作のワードプレス有料テーマ『Minimal』を使ってます。

マナブさんは月収500万以上のスーパーブロガーです。
当ブログもマナブさんのブログからデザインや執筆のテクニックを学んでいます。

Minimalのデザイン、すごくシンプルでカッコいいんです。

ワードプレスの有料テーマはたくさんありますが一番好きなテーマです。
シンプルで余分なものがなく、何だか心地良いんですよね。

@manabubannai さん作のワードプレスの有料テーマminimalを使ってます。

Code忘れかけてる今じゃ中々ハードル高い💦

でもminimalのシンプルな心地良さは、そんな苦労をしてでも手にしときたい優れたデザインです。

デザイン経験者はきっと好きになると思います。

カスタマイズ頑張るしかない💪

— さる基地 (@sarukichi2019) May 6, 2019

カスタマイズは、購入時点でマニュアルが送られてきてそこにはカスタムに参考になるサイトの情報も掲載されてます。
（2019年8月から当記事も公式マニュアル内で紹介して頂くようになりました）

1点だけ言わせてほしい。

コーディングから10年以上遠ざかってる僕には中々にハードモード。笑
もらったマニュアルでも全然情報が足りない。
webでググっても情報が出てこない・・

それでも、、初心者同然だけど、どうしてもこのデザイン使いたい！

というわけで

WordPress有料テーマ『Minimal』のカスタマイズをまとめてみました。
私のような素人さんは、ぜひ参考にどうぞ。

目次カスタムしたい内容をクリックすればジャンプします▼

ナビゲーション周りをカスタムしたい
サイドバーに人気記事を出したい
画像が横幅いっぱいになってしまったので修正したい
ロゴ画像がどデカくなってしまったので修正したい
内部リンク用のリンクカードを設置したい
twitterを貼り付けるとズレてしまう
サイドバー、フッターの小さな文字を大きく
引用ボックス、引用マークの変更
Googleアドセンスタグの挿入
お問い合わせページの設置
ADquickプラグインの実装
入力にSANGO Gutenbergを使う方法
ツイッター投稿用にOGP設定
Gutenbergを使っていると画像が横幅いっぱいになってしまう問題を解決
最終更新日の表記追加
グーテンベルグエディターで自由にテキスト装飾できるプラグイン『add-richtext-toolbar-button』の追加
物販向けアフィリエイト用プラグインRinker設置
検索結果のエラーメッセージの修正
記事のライティング方法
TOPページだけに3カラムのナビゲーションを追加する

ワードプレス「Minimal」のカスタマイズ

まとめ方よくわからないので、僕が気になった部分ごとに参考記事を列記します。

ナビゲーション周りをカスタムしたい

私が参考にさせてもらった箇所は、

でした。他にも参考になる情報がたくさんあります。
»【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法

サイドバーに人気記事を出したい

サイドバーに人気記事を出したい。他にも色々カスタムしたいです。

上記をまたこちらのサイトに世話になりました。
»WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】

画像が横幅いっぱいになってしまったので修正したい

なんか画像が横幅いっぱいになってしまったので、下記参考に修正させてもらいました。他にも参考になる情報がいっぱい。カスタムします

»WordPress有料テーマ「Minimal」のカスタマイズ方法と購入した感想【初心者でもできる】

ロゴ画像がどデカくなってしまったので修正したい

ロゴ画像がどデカくなってしまったので修正のため下記を参考にさせてもらいました。

»【Minimal】ロゴ画像をスマホでもスマートに表示する方法
»ワードプレスのみでテーマMinimal初期設定【FTP無し】

内部リンク用のリンクカードを設置したい

内部リンクを案内するためのブログカードと言うか「リンクカード」を設置したくて参考にさせてもらいましたよ。

»【WordPress】コピペで実装ブログカードの作り方【プラグインなし】

twitterを貼り付けるとズレてしまう

ツイッターのツイートの貼付け。ワードプレスだとコピペできるので便利ですよね。Minimalのデフォルト状態でコピペすると、若干場所がズレます。修正のために下記CSSを追加します。

/*twitter貼り付け位置/

.twitter-tweet{
margin: 0 auto;
}

ちなみにCSSの随時検証は、Google Chromeの「検証」機能が便利です。
»Chromeブラウザの検証機能でCSSスタイルの確認や変更をテストする方法

サイドバー、フッターの小さな文字を大きく

サイドバーとフッターの文字を大きくしました。CSSを修正。

/*文字サイズ（サイドメニューやら小さい文字を大きく）*/

.author p {
font-size: 14px;
}

footer p, footer a {
font-size: 14px;
}

ul.list-unstyled{
line-height: 0;
}

main .wrap .meta {
text-align: center;
font-size: 15px;
}

引用ボックス、引用マークの変更

引用のボックスの調整と引用マークを出しました。CSSを追加します。

/*————————-
 引用
————————-*/

blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #efefef;
color: #555;
}

blockquote:before{
display: inline-block;
position: absolute;
top: 18px;
left: 15px;
vertical-align: middle;
content: “\f10d”;
font-family: “Font Awesome 5 Free”;
color: #cfcfcf;
font-size: 30px;
line-height: 1;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

Googleアドセンスタグの挿入

これは開発元の公式サイトの記事を参考にさせてもらいました。

»WordPressで記事中にアドセンスを自動挿入する方法【ツール不要】

『Minimal』に合わせて実施した他カスタマイズ

下記はMinimalでのブログ運用に必要そうだなと思った機能です。実装に合わせてカスタマイズしました。

お問い合わせページの設置

GoogleAdSenseの申請に必要とのことで実装しました。
（SANGO向けの記事でしたが大丈夫です）
»【SANGOカスタマイズしてみた】シンプルなお問い合わせページを作ってみた

設置したお問合せページはこちらです。

ADquickプラグインの実装

Minimal使うなら必須のプラグインですね。
購入時に使えるショートコードを教えて頂けますが、詳しい設定は下記が参考になります。

»WordPressプラグインAddQuicktagの使い方と設定！初心者向けに説明❦

ちなみに私はADquickのラインナップは

---

<div class=”pre”>グレーの枠で囲いたいテキスト</div>

---

チェックマーク

<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i>チェックマークつけたいテキスト</p>

---

---

大文字　（※購入時にショートコード案内あり）

---

蛍光マーカー（赤）

<span class=”pink_line”>蛍光マーカー（赤）くしたいテキスト</span>

---

蛍光マーカー（青）

<span class=”blue_line”>蛍光マーカー（青）くしたいテキスト</span>

---

蛍光マーカー（黄）

<span class=”yellow_line”>蛍光マーカー（黄）にしたいテキスト</span>

---

<div class=”pre2″>青いボックスで囲いたいテキスト</div>

---

<div class=”pre3″>点線で囲いたいテキスト</div>

---

という感じでADquickに登録をして使ってます。

ちなみに上記実装のために追加したCSSは、

/*蛍光ペン*/

.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

/*枠付きボックス（グレー）*/

.single div.pre {
font-size: 16px;
padding: 20px;
background-color: #fafafa;
outline: 1px solid #f0f0f0;
border-color: #f0f0f0;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

/*枠付きボックス（青枠）*/

.single div.pre2 {
font-size: 16px;
padding: 20px;
background-color: #F8F9FF;
outline: 1px solid #f0f0f0;
border-color: #4865B2;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

/*枠付きボックス（青点線）*/

.single div.pre3 {
font-size: 16px;
padding: 20px;
background-color: #F8F9FF;
outline: 1px dashed #4865B2;
border-color: #4865B2;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

です。

Adquickへのコード追加（2019/06/02追記）

Adquickへ　code　←こんな感じになるようにコードを追加

<code>ここに文字入れる</code>

CSSは以下です。

code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}

入力にSANGO Gutenbergを使う方法

もともとSANGOを使っていたので、入力はSANGO Gutenbergをそのまま使ってます。

クラッシブロックという機能もありますので、従来のクラシックエディターも使えますし、そこからADquickも呼び出しています。

詳しくはこちらのサイトで紹介されてます。
»SANGOで新エディター「Gutenberg」を使ってみた

トップページのリード文章

ここんとこ↑ですね。
この部分はSANGOGutenbergの入力欄だと

この部分に入力すればOKですね。

SANGOグーテンベルグならタイムラインが使えます

詳しくはこちらで解説しています。

追記：その後拡張した機能

ツイッター投稿用にOGP設定（追記2019/05/14）

ツイッターで投稿するときにサムネイル画像を出す設定です。
下記の記事を参考に設定しました。（プラグインを使わない方法で実装）

»【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

Gutenbergを使っていると画像が横幅いっぱいになってしまう問題を解決

Gutenbergを使って画像挿入すると「wp-block-image」というクラスタグが入ってしまい元々設定されていいたimgへのCSSが効かなくなります。

なので、下記のCSSを追記して、横幅いっぱいにならないように調整しました。

.wp-block-image {

width: 90%;
margin: 10px auto;

}

最終更新日の表記追加（追記：2019/07/27）

デフォルトでは、「Last-Modified:」となっている部分を「最終更新日」という表記に変更しました。

方法は、管理画面＞外観＞テーマエディター　からmeta.phpを選んで下記を変更するだけです。

グーテンベルグエディターで自由にテキスト装飾できるプラグイン『add-richtext-toolbar-button』の追加（追記：2019/07/27）

Minimalではテキストの装飾は、adquickを中心にやっていましたが、グーテンベルグ使っていると、クラッシクエディターに切り替えて文字装飾しないといけないので不便です。

特に、最近週主流の『蛍光ペン』などは、グーテンベルグ上でサクッと出ると嬉しいところ。そこで、プラグイン『add-richtext-toolbar-button』を入れることで、作業効率がかなりアップしました。

公式Add RichText Toolbar Button

プラグインをインストールしたら、後はプラグイン設定をするだけで、こんな感じでグーテンベルグのエディター上から装飾のメニューが出せます。

具体的に設定した内容は、

蛍光ペン各種

蛍光ペンは、基本的にプラグインにデフォルトで設定されていますので、カラーコードやペンの縦幅（私は50％で設定）を変更するだけです。

蛍光ペン（黄色）（カラーコード#FFFFBC）

蛍光ペン（青色）（カラーコード#CCE5FF）

蛍光ペン（赤色）（カラーコード#FFDFEF）

ボックス関係

ボックスはmanablogに習って、最小のバリエーションで運用しています。
プラグイン内に新規追加して、以下のスタイルを入力します。

グレー色の枠　

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #FAFAFA;
line-height: 1.7;

青色の枠

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 1.6;

青色の枠（点線）

display: block;
border: 1px dashed #4865B2;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 1.6;

人気記事←こんな感じのオレンジ色のボックスです。

padding: .3em;
text-align: center;
background-color: #EE7917;
color: #ffffff;
font-size: 90%;
margin-right: 5px;

公式←こんな感じの紺色のボックスです。

padding: .3em;
text-align: center;
background-color: #2B418B;
color: #ffffff;
font-size: 90%;
margin-right: 5px;

code←こんな感じで文字を強調したり、コードを紹介する時に使います。

padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;

チェックマーク

display: block;
position: relative;
line-height: 1.4;
background: #ffffff;
border: 0px solid #acf;
padding: 1em 1em 1em 1.0em;
font-size: 1.3em;
font-weight: 600;

[after] content: ” “;
[after] display: block;
[after] width: 0;
[after] height: 50%;
[after] position: absolute;
[after] top: 25%;
[after] left: 3.4em;
[after] opacity: 0.6;
[after] border-right: 0px dashed;
[after] border-right-color: #76b3f7;

[before] font-weight: 900;
[before] font-size: 0.6em;
[before] font-family: “Font Awesome 5 Free”, “Font Awesome 5 Brands”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
[before] content: “\f00c”;
[before] color: #6C9FCE;
[before] display: inline-block;
[before] position: absolute;
[before] top: 50%;
[before] left: 0em;
[before] transform: translateY(-50%) scale(1.5);

シェブロンマーク　（追記2018年8月12日）

[before] line-height: 1;
[before] font-size: 1em;
[before] font-family: “Font Awesome 5 Free”,”Font Awesome 5 Brands”,Aharoni,”Arial Black”,Impact,Arial,sans-serif;
[before] content: “\f138”;
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #333;

チェックマーク（赤）　（追記2018年8月12日）

[before] line-height: 1;
[before] font-size: 1em;
[before] font-family: “Font Awesome 5 Free”,”Font Awesome 5 Brands”,Aharoni,”Arial Black”,Impact,Arial,sans-serif;
[before] content: “\f058”;
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #ED5B65;

実際に使ってみると、このプラグインはかなり便利です。
文字の色、文字の大きさ、背景色などツールパレッド内でコントロールできます。
※反映しない場合はブラウザのキャッシュクリアをしてみてください。

物販向けアフィリエイト用プラグインRinker設置（追記:2019年7月31日）

Amazonや楽天のアフィリエイトリンクを簡単に設置できる『商品管理用のプラグイン　Rinker（リンカー）』をインストールしました。

参考Rinker（リンカー）が便利！導入と使い方を解説するよ

また、スマホでのプレビューを下記のように縦に並ぶようにCSSを調整しました。

参考「Rinker（リンカー）」スマホ・タブレット表示のレイアウト調整 CSSカスタマイズ

検索結果のエラーメッセージの修正（追記：2019年7月31日）

Minimalの検索結果に下記のようなエラーメッセージが出ていました。

Warning: Use of undefined constant _aioseop_description – assumed ‘_aioseop_description’ (this will throw an Error in a future version of PHP) in /home/manabubb/manabubb.xsrv.jp/public_html/minimal/wp-content/themes/minimal/search.php on line 43

実際に出たエラーメッセージ

こちらについては、ググっても事例が出なかったので制作者のマナブさんに直接問い合わせをさせて頂きました。（わずか1日でお返事を頂きました。ありがとうございます）

修正箇所は、管理画面＞外観＞テーマエディター＞検索結果（search.php）を修正します。

search.phpのコードの中の43行目あたりのコードを入れ替えるだけです。

■修正前

<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>

■修正後

<?php the_excerpt(); ?>

TOPページだけに3カラムのナビゲーションを追加する（追記：2019年8月12日）

本家manablogでも実装されているTOPページの3カラムナビゲーションの追加方法です。追加にあたり下記ブログを参考にさせて頂きました。

参考さかやんブログ

管理画面＞テーマエディター＞テーマヘッダーを開きます。
ソースの150行目あたりのdiv class ="row"の下にコードを追加します。

追加したHTMLソースは以下です（基本コピペで自分のブログの該当箇所を変更すればOK）

<?php if ( is_home() || is_front_page() ) : ?>

<!-- TOP3カラム表示 -->
<div class="col-xs-12 picks">

<div class="col-xs-12 col-sm-4 wrap topcolbox">
<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">

<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/05/minimal1.jpg" title="【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】" itemprop="url" class="thumbnail-img topthumb-img"></a>

</div>

<h2 class="title topttlorg" itemprop="name headline">

<a href="https://www.monkeychop69.com/2019/05/06/minimal/" title="【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】" itemprop="url">【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ<br>【まとめ】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/05/06/minimal/">READ MORE</a></div>
</div>



<div class="col-xs-12 col-sm-4 wrap center topcolboxcenter">

<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">

<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/06/demore.png" title="【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業３選【老後必要資金は2,000万】" itemprop="url" class="thumbnail-img topthumb-img"></a>

</div>

<h2 class="title topttlorg" itemprop="name headline">

<a href="https://www.monkeychop69.com/2019/06/13/fukugyo-designer/" title="副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業３選【老後必要資金は2,000万】" itemprop="url">【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな<br>副業３選【老後必要資金は2,000万】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/06/13/fukugyo-designer/">READ MORE</a></div>
</div>

<div class="col-xs-12 col-sm-4 wrap topcolbox">
<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/07/webd1.png" title="グラフィックデザイナーからwebデザイナーへの転職方法【基本独学でOK】" itemprop="url" class="thumbnail-img topthumb-img"></a>
</div>
<h2 class="title topttlorg" itemprop="name headline">
<a href="https://www.monkeychop69.com/2019/07/08/designer-webdesigner/" title="グラフィックデザイナーからwebデザイナーへの転職方法【基本独学でOK】" itemprop="url">グラフィックデザイナーから<br>webデザイナーへの<br>転職方法【基本独学でOK】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/07/08/designer-webdesigner/">READ MORE</a></div>
</div>

<?php endif; ?>	
						

ちなみに、<?php if ( is_home() || is_front_page() ) : ?>と<?php endif; ?>のタグ間に該当ソースがありますが、こちらのタグはワードプレスのTOPページにだけ表示したいHTMLを書きたいときのタグです。

HTMLが追加できたら、次にカスタマイザー＞追加CSSを選択して、CSSを追加します。

追加するCSSは下記です。（基本コピペでOK）

/* トップ3カラム */
@media (min-width: 768px) {
main .container .topcolbox{
  width: 31.33333%;
  margin-top: 30px;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolbox{
  padding-bottom: 5px;
}}
@media (min-width: 768px) {
main .container .topcolboxcenter{
  width: 31.33333%;
  margin-top: 30px;
  margin-right: 3%;
  margin-left: 3%;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolboxcenter{
  padding-bottom: 5px;
}}
main .wrap .thumbnail .topthumb-img{
  height: 170px;
}
main .container .topttlorg{
  font-size: 18px;
  padding-left: 5px;
  padding-right: 5px;
}

記事のライティング方法

ワードプレスMinimalをカスタマイズしたら次は記事のライティングです。
記事の書き方は、manablogのマナブさんもオススメの書籍『沈黙のwebライティング』を私もおすすめします。

かなりの部分は同意だけど、結局競合に真似されたらイタチごっこになりますよね。イタチごっこになる前の差別化が必要だと思う⇒沈黙のWebライティング – Webマーケッター ボーンの激闘 – https://t.co/2sHRIXIXRn

— マナブ@バンコク (@manabubannai) March 27, 2016

【まとめ】WordPress『Minimal』のカスタマイズについて

現状WordPressユーザーの多くは、JINやSANGO、アフィンガーなどのテーマを使っている人が多いと思います。

Minimalはそうした有料テーマに比べると、正直設定は大変です。

ですが、デザインが好きな方、WordPressのことやHTML、CSSのことを学びながらブログ運営したい。という人にはおすすめできます。

これがMinimalです。

公式ミニマリスト向けのWordPressテーマ『Minimal』を作りました

（完）

webデザイナー グラフィックデザイナー

• facebook
• Tweet
• Read Later