【まとめ】ワードプレステーマ『Minimal』のデザインカスタマイズ【副業ブログのノウハウ #13】
この記事では、マナブログでも使われているワードプレステーマMInimaiのカスタマイズについて学ぶことができます。
この記事の目次
- 1 【マナブログ】ワードプレス「Minimal」の基本カスタマイズ
- 2 【マナブログ】ワードプレス『Minimal』をさらに使いやすく快適にしたカスタマイズ
- 2.1 お問い合わせページの設置
- 2.2 ADquickプラグインの実装方法
- 2.3 Adquickのバリエーション追加
- 2.4 入力にSANGO Gutenbergを使う方法
- 2.5 ツイッター投稿用のOGP設定方法
- 2.6 Gutenbergを使っていると画像が横幅いっぱいになってしまう問題を解決
- 2.7 最終更新日の表記追加
- 2.8 グーテンベルグで自由にテキスト装飾できるプラグイン『add-richtext-toolbar-button』の追加
- 2.9 物販向けアフィリエイト用プラグインRinker設置
- 2.10 検索結果のエラーメッセージの修正
- 2.11 TOPページだけに3カラムのナビゲーションを追加する
- 2.12 【レビュー記事向け】検索画面上で表示される★マーク評価の追加方法
- 2.13 画像最適化プラグイン EWWW Image Optimizerの実装
- 2.14 コードブロック記載用プラグイン Highlighting Code Block実装
- 2.15 スマホ画面が横にズレるのを修正
- 2.16 タグ検索結果一覧のディスクリプション部分のエラーを修正
- 2.17 YouTube動画を埋め込むとスマホでハミ出す現象の改善
- 2.18 目次を追加する方法:プラグイン『Table of Contents Plus』の活用
- 2.19 文字の細い目次
- 2.20 記事最下部に『人気記事』を表示
- 2.21 ページ最下部シェアボタンの追加
- 2.22 アフィリエイト用申し込みボタンの追加
- 2.23 グーテンベルグの表組み(テーブル)を使う方法
- 2.24 ページTOPに戻るボタンの実装(追記:2019年12月19日)
- 2.25 スマホのハンバーガーメニュー内に検索窓を設置する方法
- 2.26 Googleサーチコンソールのパンくずリストのエラー修正方法
- 2.27 ManablogCopy(マナブログコピー)でクラシックエディターをやめてグーテンベルクで運営する方法
【マナブログ】ワードプレス「Minimal」の基本カスタマイズ
マナブログ風に使うための最低限のカスタマイズは以下です。
ナビゲーションのカスタム方法

グローバルナビゲーションの設定については、『Manablog Copy まとめ』の記事で詳しく解説しています。
【WordPressマナブログコピー】グローバルナビ(メニュー)の設定
ManablogCopyのグローバルナビの設定方法を紹介します。 変更の方法は、テーマのphpファイルを直接変更します。
サイドバーに人気記事を出す方法

サイドバーに人気記事を出したり、他カスタムを学ぶことができます。
- 人気記事をサイドバーに出す
- 高速化したい
- トップに戻るボタンをつけたい
参考WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】
画像が横幅いっぱいになるのを修正する方法

デフォルトでは画像が横幅いっぱいになるので修正します。
修正方法は『Manablog Copy まとめ』で詳しく解説しています。
【WordPressマナブログコピー】画像横幅の調整:アイキャッチ以外の画像が横幅いっぱいになってしまう問題を解決
ManablogCopyでは、グーテンベルクで投稿すると画像が横幅いっぱいになります。ここでは、アイキャッチ以外の投稿画像について、横幅いっぱいに掲載したくない場合の方法を紹介します。
ブログ名を画像にする方法(追記:2019年12月8日)

ブログ名を画像にする方法は、『Manablog Copy まとめ』の方で詳しく解説していますので手順はこちらをご覧ください。
【マナブログコピー(WordPressテーマ)】ブログ名(ヘッダー)を画像にする方法【スマホのブログ名は別の画像に変更】
この記事では、ブログ名を画像にする方法を紹介します。合わせてスマホのブログ名は別の画像にしたい場合の変更方法も紹介します。
スマホについても下記のように、別の画像を使うことも可能です。

ちなみに上記『Manablog Copy まとめ』で紹介している記事中のheader.phpへのコードは、Minimalの場合は以下のコードとなります。<h1>〜<h1>
間を下記のコードに差し替え▼
<h1 class="title">
<?php } ?>
<?php if ( is_mobile() ) : ?>
<a href="<?php echo home_url(); ?>"><img src='h★スマホ用のロゴ画像★' alt="ロゴ" class="logo-sp" style="width:90%;" /></a>
<p style="color:#D2C2B0;margin-top:-10px; font-size:14px;">キャッチコピー</p>
<?php else: ?>
<a href="<?php echo home_url(); ?>"><img src='★PC用のロゴ画像★' alt="ロゴ" style="width:500px; height:50px; " /></a>
<?php endif; ?>
<?php if (is_front_page()) { ?>
</h1>
※Minimalは、Manablog Copy
のように追加CSSを設定する必要はありません。
リンクカード設置方法
先日アップデートのあった『Manablog Copy』のエントリーより、制作者のマナブさんのリンクカードそのものを実装する方法が掲載されてましたので、抜粋して紹介します。
マナブさん自作の『ShareHtmlを、もっと綺麗にしたメーカー』を使えば簡単です。
公式ShareHtmlを、もっと綺麗にしたメーカー


実装方法は、以下です。




公開済みボタンを押して反映させます。


グーテンベルグを使っている人は、投稿画面のカスタムHTML
を選択して、フィールドにソースをコピペします。
完成するとこんな感じです▼
美しいですね。
【マナブログSEO】わずか2ヶ月で上位表示を実現したワードプレスMinimalの実力【ミニマルのSEOが凄い件】
マナブログのワードプレス有料テーマ『Minimal』のSEOは大丈夫?ミニマルで検索エンジンの上位がとれるだろうか?Minimalは他のテーマと比べて使いにくいけど、今後も使い続けるべき?こうした疑問
CSSは、一度追加CSSに書き込みできていれば、今後はHTMLコードのみのコピペで投稿に反映されます。
twitterを貼り付け時のズレを修正する方法

ツイッターのツイートの貼付け。ワードプレスだとコピペできるので便利ですよね。Minimalのデフォルト状態でコピペすると、若干場所がズレます。修正のために下記CSSを追加します。
.twitter-tweet{
margin: 0 auto;
max-width: 90%!important;
}

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


サイドバーとフッターの文字を大きくしました。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;
}
引用ボックス、引用マークの変更(追記:2020年1月6日※微調整)

引用ボックスの調整
と引用マーク
を出しました。
CSSを追加します。
/*————————-
引用
————————-*/
blockquote {
position: relative;
padding: 10px 15px 10px 40px;
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: 20px;
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.8em;
}
記事内にGoogle AdSense(アドセンス)タグの挿入
まずは、AdSenseの画面でコード
を取得しましょう。

WordPressの管理画面>外観>テーマエディター>functions.phpにアクセスします。

functions.phpの一番下に下記のコードを丸ごと追記します。
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<div style="padding-left:20px;padding-right:80px;margin-top:50px;margin-bottom:50px;">
★★自分のアドセンスコードをここにコピペしてください★★
</div>
<div style="clear:both"></div>
EOF;
$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {
if ( $h2s[0] ) {
// 1つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][0] ) {
$the_content = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
}
// 2つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][1] ) {
$the_content = str_replace($h2s[0][1], $ads.$h2s[0][1], $the_content);
}
// 3つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][2] ) {
$the_content = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
}
// 4つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][3] ) {
$the_content = str_replace($h2s[0][3], $ads.$h2s[0][3], $the_content);
}
// 5つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][4] ) {
$the_content = str_replace($h2s[0][4], $ads.$h2s[0][4], $the_content);
}
// 6つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][5] ) {
$the_content = str_replace($h2s[0][5], $ads.$h2s[0][5], $the_content);
}
// 7つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][6] ) {
$the_content = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
}
}
}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');
上記のコードの5行目あたりに、自分のAdSenseのコードをコピペしてください。
また、そのままコードを張ると広告が横に飛び出るので、4行目に記述している以下の記述で飛び出さないように整えています。
<div style="padding-left:20px;padding-right:80px;margin-top:50px;margin-bottom:50px;">
また、上記のコードは記事内で設定したH2
タグ見出しについて、7つまで上部に広告が出るように設定しています。
※広告数が多い場合は、削除したい順の下記のコードを削除してください。
// 7つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][6] ) {
$the_content = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
}
参考WordPressで記事中にアドセンスを自動挿入する方法【ツール不要】
【マナブログ】ワードプレス『Minimal』をさらに使いやすく快適にしたカスタマイズ
Minimalのブログ運用を快適にするために実装したカスタマイズを紹介します。
お問い合わせページの設置

お問い合わせページの設定方法は、『Manablog Copy まとめ』で詳しい解説をしています。
【マナブログコピー(WordPress)】お問い合わせページの設定方法
Manablog Copyでのお問合せページの設置方法について紹介します。 お問合せページは、Googleフォームの機能を活用して、ブログにフォームを簡単に埋め込むことができます。
設置したお問合せページはこちらです。
ADquickプラグインの実装方法

Minimal購入時に推奨されている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のバリエーション追加
上記の基本に加えて新しいバリエーションを追加しました。
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なら抜粋に入力するだけで反映されます。

タイムライン機能の詳しい解説は、こちらの記事をご覧ください。
SANGO Gutenberg(サンゴグーテンベルク)を使って、『Minimal』でタイムラインを使う方法
ブログを書いていると時系列で書きたいということはありませんか? そんな時は、WordPress有料テーマSANGOのグーテンベルク機能が便利です。 詳しく解説します。
ツイッター投稿用のOGP設定方法

ツイッターで投稿するときにサムネイル画像を出す方法です。
下記の記事を参考に設定しました。
参考【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
Gutenbergを使っていると画像が横幅いっぱいになってしまう問題を解決
Gutenbergを使って画像挿入すると「wp-block-image」というクラスタグが入ってしまい元々設定されていいたimgへのCSSが効かなくなります。
下記のCSS
を追記して、横幅いっぱいにならないように調整しました。
.wp-block-image {
width: 90%;
margin: 10px auto;
}
最終更新日の表記追加
デフォルトでは、Last-Modified:
となっている部分を最終更新日
という表記に変更しました。

方法は、管理画面>外観>テーマエディター>meta.php
を選んで下記の部分を変更します。

Minimalでのテキスト装飾は、adquickを中心にやっていましたが、グーテンベルグ使っていると、都度クラッシクエディターに切り替えて文字装飾しないといけないので不便です。
特に、最近週主流の蛍光ペン
などは、グーテンベルグ上でサクッと表示するために、プラグイン『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);
シェブロンマーク
[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;
チェックマーク(赤)
[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;
アンダーライン
text-decoration: underline;
キーボードのボタン風
border: solid 1px #777777;
border-radius: 2px;
box-shadow: 2px 2px 2px #DEDEDE;
padding-top: 1px;
padding-bottom: 1px;
background-color: #F9F9F9;
color: #605857;
font-size: .8em;
padding-left: 6px;
padding-right: 6px;
実際に使ってみると、このプラグインはかなり便利です。
文字の色、文字の大きさ、背景色などツールパレッド内でコントロールできます。
※上手く反映しない場合はブラウザのキャッシュクリアをしてみてください。
物販向けアフィリエイト用プラグインRinker設置

Amazonや楽天のアフィリエイトリンクを簡単に設置できる『商品管理用のプラグイン Rinker(リンカー)』の使用方法を紹介しています。
【Manablog Copy】物販用アフィリエイトプラグインの導入
この記事では、アフィリエイトに便利な物販商品を紹介するためのプラグインの導入方法を紹介します。
検索結果のエラーメッセージの修正
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カラムのナビゲーションを追加する

本家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="【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業3選【老後必要資金は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="副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業3選【老後必要資金は2,000万】" itemprop="url">【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな<br>副業3選【老後必要資金は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;
}
こちらの記事でも詳しく解説しています。
【マナブログコピー(WordPressテーマ)】トップページ上部のピックアップ部分の修正方法
この記事では、マナブログコピーのトップページ上部に表示されている『ピックアップ部分』の修正方法が学べます。
【レビュー記事向け】検索画面上で表示される★マーク評価の追加方法
レビュー記事を書いた時、検索画面に表示される★マーク
を出すカスタムを実装しました。

参考プラグインなしでGoogleの検索結果に星を表示する方法【コピペ】
画像最適化プラグイン EWWW Image Optimizerの実装
画像の最適化を自動で実施してくれるプラグイン『EWWW Image Optimizer』を実装しました。
こちらのプラグインは、新規で追加する画像だけでなく、以前アップした画像や使っている画像もボタン一発で最適化してくれる神プラグインです。
参考EWWW Image Optimizer の設定方法と使い方
コードブロック記載用プラグイン Highlighting Code Block実装
コードをキレイに記載するためのプラグイン『Highlighting Code Block』を実装しました。
こんな感じでコードを記載できます。
border: solid 1px #777777;
border-radius: 2px;
box-shadow: 2px 2px 2px #DEDEDE;
padding-top: 1px;
padding-bottom: 1px;
background-color: #F9F9F9;
color: #605857;
font-size: .8em;
padding-left: 6px;
padding-right: 6px;

プラグインの設定は、管理画面>設定>CODE BLOCKです。
設定画面では、フォントサイズや背景色など簡単な設定が可能です。
スマホ画面が横にズレるのを修正
記事によってはスマホのプレビュー画面が横にズレる(横にスクロールする余白ができてしまう)ことがあります。
基本的には、部分ごとにCSSを見直していけば修正できる問題かと思いますが、(めんどくさい人は)下記のCSSを追加するだけで、手っ取り早く直すことができます。
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
シンママさん(@splaxoxo)に事例をアップしていただきました▼
minimalのテーマを愛用したい💓しかしスマホで閲覧すると「横ズレ」が発生していました。
— Naoko💋小学生のシンママ (@splaxoxo) November 25, 2019
再び@Lv1gomakichi さんの記事を参考にさせていただき、横ズレが直りました✨✨
サイトが出来上がっていく過程でエラーが起き萎えそうになりますが、ひとつずつ解決していくのが嬉しい。ありがとうございます✨ pic.twitter.com/CpfAi7Lp5d
タグ検索結果一覧のディスクリプション部分のエラーを修正
タグをクリックすると紐付けしている記事一覧が出ますが、このページのディスクリプション部分にエラーが見つかりました。

Warning: Use of undefined constant _aioseop_description - assumed '
_aioseop_description' (this will throw an Error in a future version of PHP) in
/home/masuo3/monkeychop69.com/public_html/wp-content/themes/minimal_blue
/tag.php on line 38
検索結果画面と同様に私では手に負えないので、制作者のマナブさんに直接問い合わせをしました。
具体的には、管理画面>外観>テーマエディター>tag.phpのファイルを修正します。修正箇所は、38行目あたりのディスクリプションの記述を変更します。

■修正前
<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
■修正後
<?php the_excerpt(); ?>

YouTube動画を埋め込むとスマホでハミ出す現象の改善
YouTube動画を埋め込んだ際に、そのまま埋め込むとスマホでハミ出す現象が起こります。

この現象を回避するために、動画を埋め込む際には以下のコードを使います。
<div style="position: relative; padding-bottom: 56.25%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 90%; height: 90%;"
src="https://www.youtube.com/embed/【youtube動画のID】 "
frameborder="0"
allow="autoplay;
encrypted-media"
allowfullscreen>
</iframe>
</div>
【YouTube動画のID】
の部分に動画のURLの末尾を入れてやればOKです。


参考【コピペでOK】Youtubeの動画埋め込みをレスポンシブ対応させる方法!
目次を追加する方法:プラグイン『Table of Contents Plus』の活用

記事の各項目へのジャンプをスムーズにするために、見出し(H2、H3)を設定した際に自動的に目次が表示されるようにカスタマイズします。
プラグインは、『Table of Contents Plus』を活用します。
※プラグインは管理画面>プラグイン>新規追加>TOC
で検索して画面中間くらいに出ます。
プラグインについては、こちらの記事を参考にさせて頂きました。
参考WordPressで綺麗な目次を作りたい!【Table of Contents Plus】をカスタマイズしてみた
プラグインをインストールした後、設定を以下のようにしました。


上級者設定の項目では、H2、H3で設定した見出しだけ表示されるようにします。
CSSの設定は以下です。


追加するCSSコードは以下です。
#toc_container {
margin-bottom: 40px;
margin-left:auto;
margin-right:auto;
width:90%;
margin-top:50px;
padding: 15px 20px;
background: #fff;
border: 5px solid #F7F7F7;
border-radius: 2px;
color: #666;
text-align: center;
}
#toc_container .toc_title {
text-align: center;
margin-bottom: 35px;
margin-top: 0;
padding-top: 0;
padding-bottom: 0px;
border-bottom: 2px solid #dedede; }
#toc_container ul {
border: initial;
}
#toc_container li {
position: relative;
margin-bottom: 15px;
margin-right:10px;
margin-left: 6px;
line-height: 1.3em;
border:solid 0px;
margin-top:10px;
}
#toc_container li:before{content:"»";
display:inline-block;width:1.5em;
color:#3379B7;
margin-left:0em;
margin-right:-0.7em;
}
文字の細い目次

前述の目次のCSSを下記に変更してください。
#toc_container {
margin-bottom: 40px;
margin-left:auto;
margin-right:auto;
width:90%;
margin-top:50px;
padding: 15px 20px;
background: #fff;
border: 5px solid #F7F7F7;
border-radius: 2px;
color: #666;
text-align: center;
}
#toc_container .toc_title {
text-align: center;
margin-bottom: 35px;
margin-top: 0;
padding-top: 0;
padding-bottom: 0px;
border-bottom: 2px solid #dedede; }
#toc_container ul {
border: initial;
margin-bottom:50px;
}
#toc_container li {
position: relative;
margin-bottom: 15px;
margin-right:10px;
margin-left: 6px;
line-height: 1.3em;
border:solid 0px;
margin-top:10px;
}
#toc_container ul li:before{content:"»";
display:inline-block;width:1.5em;
color:#3379B7;
margin-left:0em;
margin-right:-0.7em;
}
#toc_container a {
font-weight:normal;
line-height:10px;
}
記事最下部に『人気記事』を表示
記事の最下部に

管理画面>外観>テーマエディター>Single post(single.php)を選択して、30行目あたりにソースを追加。

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #ee7917;border-radius: 2px;padding: 8px 8px 7px;">人気記事</span><a href="ここにURL">ここに記事タイトル</a></p>
<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #ee7917;border-radius: 2px;padding: 8px 8px 7px;">人気記事</span><a href="ここにURL">ここに記事タイトル</a></p>
こちらの記事でも詳しく解説しています。
【マナブログコピー(WordPressテーマ)】記事の最下部に人気記事を出す方法
この記事では、記事の最下部に人気記事を出す方法を紹介します。
ページ最下部シェアボタンの追加
本家マナブログのようにページ最下部のSNSのシェアボタンを追加。
※Google+は廃止のため削除、Facebook「いいね」は今後はあまり使われない感じがするのでカットしてます。

管理画面>外観>テーマエディター>sns.phpを選択してソースを書き換えます。

書き換えは、下記のソースに丸ごと書き換えます。
<ul class="sns_button list-unstyled clearfix">
<li class="facebook-btn-icon col-xs-2">
<a class="facebook-btn-icon-link" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank">
<span class="icon-facebook"></span>
facebook
</a>
</li>
<li class="twitter-btn-icon col-xs-2">
<a class="twitter-btn-icon-link" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank">
<span class="icon-twitter"></span>
<span class="sns-share-small_text">Tweet</span>
</a>
</li>
<li class="hatena-btn-icon col-xs-2">
<a class="hatena-btn-icon-link" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
<span class="icon-hatebu"></span>
<span class="sns-share-small_text">hatebu</span>
</a>
</li>
<li class="pocket-btn-icon col-xs-2">
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="pocket-btn-icon-link" target="_blank">
<span class="icon-pocket"></span>
<span class="sns-share-small_text">Read Later</span>
</a>
</li>
</ul>
CSSは、下記のソースをカスタマイザー>追加CSSに入力します。
ul.sns_button {
white-space: nowrap;
}
ul.sns_button li a {
color: #fff;
font-size: 18px;
position: relative;
display: block;
padding: 25px 0;
}
ul.sns_button .facebook-btn-icon {
background: #2B418B;
}
ul.sns_button li {
float: left;
width: 41%;
text-align: center;
margin-right: 10px;
border-radius: 3px;
}
ul.sns_button .twitter-btn-icon {
background: #3D97F1;
}
ul.sns_button .hatena-btn-icon {
background: #0075DD;
}
ul.sns_button .google-plus-btn-icon {
background: #D73220;
}
ul.sns_button .pocket-btn-icon {
background: #ED243E;
}
.single ul li, .single ol li {
margin-bottom: 10px;
text-align: left;
}
アフィリエイト用申し込みボタンの追加
アフィリエイト記事によく使うボタンを実装しました。
実装するとこんな感じになります▼
\チャンス!◯月◯日まで限定/
◯◯◯キャンペーンに申込む 今なら特典◯◯◯◯が付いてくる
お支払いは◯◯◯でも可能!
基本的には、HTMLコードをコピペして使います。
よく使う人は、再利用ブロックに登録をオススメします。

<p style="text-align: center; margin-bottom: 0px;color:#CBCFD7;font-size:140%;"><strong>\今がチャンス!◯月◯日まで限定/</strong></p>
<a href="#" class="btn-gradient-3d-orange">◯◯◯キャンペーンに申込む <li class="fa fa-chevron-circle-right"></li></a>
<p style="text-align:center;font-size:100%;margin-top:10px;"><i class="fas fa-check"></i> 今なら特典◯◯◯◯が付いてくる<br><i class="fas fa-check"></i> お支払いは◯◯◯でも可能!</p>
.btn-gradient-3d-orange {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #c58668;
font-size:140%;
width:90%;
font-weight:bold;
margin-left:10%;
}
.btn-gradient-3d-orange:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
CSSは、カスタマイザー>追加CSSの流れでOKです。
こちらの記事でも詳しく解説しています。
【Manablog Copy(WordPressテーマ)】アフィリエイト用申し込みボタンの追加【グーテンベルグ再利用ブロックの活用】
この記事では、アフィリエイトでよく使う「申し込みボタン」を設置する方法を紹介します。
グーテンベルグの表組み(テーブル)を使う方法
Minimalでグーテンベルグを使った際に、表組み(テーブル)を使う方法を『マナブログコピーまとめ』で紹介しました。
【マナブログコピー(WordPressテーマ)】グーテンベルグの表組み(テーブル)を使う方法
この記事では、マナブログコピーで表組み(テーブル)を使う方法を紹介します。
Minimalでの使い方は基本的に同じですが、当ブログはSANGOグーテンベルグを使っていますので下記のCSSコードを追加しています。
.wp-block-table.is-style-sango-table-responsive{
display: block;
overflow-x: auto;
margin-left: 5%;
margin-right: 5%;
white-space: nowrap;
border: #7B7B7B 1px solid;
}
.wp-block-table.is-style-sango-table-responsive td{
border: #7B7B7B 1px solid;
padding:15px;
}
こんな感じでテーブルが作れます▼(モバイルの横スライドも対応しています)
種類 | カスタム難易度 | 内容 |
Minimal | 高め | Minimalはマナブログの源流となるWordPressテーマです。 |
Manablog Copy | 中 | Manablog Copyはマナブログそっくりなブログを作るために準備されたワードプレステーマです。Minimalよりもカスタムのハードルが下がっています。 |
SANGO | 中 | SANGOはショートコード豊富なワードプレステーマです。デザインが優れたワードプレステーマです。 |
ページTOPに戻るボタンの実装(追記:2019年12月19日)
ページTOPに戻るボタンを実装しました。
※動きの無いシンプルなボタンです。


設置手順は以下です。
管理画面>外観>テーマエディター>footer.phpを開きます。<div class="continer">
の手前辺りに下記のタグを設置します。
<p id="page-top"><a href="#"><i class="fas fa-caret-square-up"></i><br>TOP</a></p>
続けて、カスタマイザー>追加CSSに下記のCSSを追加します。
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 50px;
padding: 10px 0;
text-align: center;
display: block;
border-radius: 5px;
font-size:15px;
}
#page-top a:hover {
text-decoration: none;
background: #212121;
}
スマホのハンバーガーメニュー内に検索窓を設置する方法
Minimalは、スマホで記事が探しにくいのでハンバーガーメニュー内に検索窓を設置することで利便性をアップさせます。
記事が増えてくると、
— ごま吉@アフィリ歴15周年 (@Lv1gomakichi) December 22, 2019
どうしても過去記事に
たどり着きにくい。
スマホは特に😇
なので、
minimalの
ハンバーガーメニューに
✅検索窓つけてみた☺️
マナブログコピーでも応用可能✨
PCでは表示させないようにと、CSSを書く必要があります。
…大分自力付いてきたなぁ😇#minimal#manablogcopy pic.twitter.com/HfC7POKlV1
管理画面>外観>テーマエディター>nav-menu.phpを開きます。
最終行付近の</nav>
の前に下記のコードを追加します。

<div class="mb-hb">
<div class="hb-menu-search ">
<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
<div class="form-group has-feedback">
<input type="text" name="s" id="s" placeholder="Search for..." class="form-control">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
次にカスタマイザー>追加CSSに下記CSSを追記します。
.hb-menu-search {
margin-right:20px;
margin-top:-20px;
}
/*PCの場合*/
.pc-hb { display:inline!important; }
.mb-hb { display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc-hb { display:none!important; }
.mb-hb { display:inline!important; }
}
参考レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの?【PCとスマホで改行位置や画像を切替える方法】
Googleサーチコンソールのパンくずリストのエラー修正方法
パンくずリストのエラー修正方法については、マナブログコピーまとめの方で詳しく解説しています。(※コードや修正箇所は同じです)
【マナブログコピー(WordPress)】パンくずリストエラーの修正方法【Google Search Console Error】
この記事では、Google Search Consoleに出たパンくずリストエラーの修正方法について紹介します。
ManablogCopy(マナブログコピー)でクラシックエディターをやめてグーテンベルクで運営する方法
マナブログコピーもMinimal同様に、グーテンベルグエディターを使うことができます。(※但し公式には推奨されていません)
運営中の『アフィリの手帖』の方で利用方法の記事を書きましたのでご紹介します。
ManablogCopy(マナブログコピー)でGutenberg(グーテンベルク)を使う方法【WordPress初心者がレビュー】
スーパーアフィリエイターのマナブさん(@manabubannai)が先日リリースされたWordPressテーマ …
副業ブログのノウハウ
01副業ブログを始める最短ルート
02副業ブログの作り方【基本手順】
03応用編:収益化ブログの作り方
04失敗しないキーワード:3つの考え方
05稼げる広告(案件)の探し方
06稼げるジャンルの決め方
07検索順位チェックツールGRCの使い方
08キーワード検索ツールの使い方
09ブログ初心者が稼げない5つの理由
10無料画像加工ツールCanvaのテクニック集
11失敗しないブログ本の選び方
12高品質:無料ツール・サービス【まとめ】
13『Minimal』のデザインカスタマイズ
14Add RichText Toolber Buttonの使い方
15ブログ記事の書き方のコツ
人気記事副業ブログのノウハウ
人気記事withコロナ営業のノウハウ