ロゴ

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

web ブログ

こんにちは、ごま吉(@Lv1gomakichi)です。


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

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

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

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


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

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

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

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

というわけで

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



参考マナブログコピーについてのカスタマイズをお探しの方は、こちらのブログで方法をまとめていますのでご参考ください。

Manablog Copy まとめ



注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。Minimalと合わせて運用すると効果大です。

【月3,000円着実に稼ぐ】一騎当千SEO



注目Minimalで検索上位を狙うならこちらもチェック▼

この記事の目次

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

マナブログ風に使うための最低限のカスタマイズは以下です。


グローバルナビゲーションの設定については、『Manablog Copy まとめ』の記事で詳しく解説しています。



サイドバーに人気記事を出したり、他カスタムを学ぶことができます。

  • 人気記事をサイドバーに出す
  • 高速化したい
  • トップに戻るボタンをつけたい

参考WordPressテーマMinimalの便利な設定【人気記事表示・ブログ高速化など】


画像が横幅いっぱいになるのを修正する方法


デフォルトでは画像が横幅いっぱいになるので修正します。
修正方法は『Manablog Copy まとめ』で詳しく解説しています。


ブログ名を画像にする方法(追記:2019年12月8日)


ブログ名を画像にする方法は、『Manablog Copy まとめ』の方で詳しく解説していますので手順はこちらをご覧ください。


スマホについても下記のように、別の画像を使うことも可能です。


ちなみに上記『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を、もっと綺麗にしたメーカー

URLを入力してエンターキーを押すだけで

マナブログそっくりのリンクカードが作れます。


実装方法は、以下です。

ShareHtmlを、もっと綺麗にしたメーカーが出力してくれるCSSをコピーします
ワードプレスログイン状態で上部の『カスタマイズ』メニューをクリック
『追加CSS』内にコピーしたCSSをペーストします。

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

HTMLコードをコピーします

投稿画面の『カスタムHTML』というメニューを選択して、HTMLソースをペーストします。

グーテンベルグを使っている人は、投稿画面のカスタムHTMLを選択して、フィールドにソースをコピペします。

完成するとこんな感じです▼ 
美しいですね。

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;
}


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


引用ボックスの調整引用マークを出しました。
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 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 まとめ』で詳しい解説をしています。

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

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グーテンベルグならタイムラインが使えます

タイムライン機能の詳しい解説は、こちらの記事をご覧ください。


ツイッター投稿用のOGP設定方法


ツイッターで投稿するときにサムネイル画像を出す方法です。
下記の記事を参考に設定しました。

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

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

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

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

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


最終更新日の表記追加

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


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


グーテンベルグで自由にテキスト装飾できるプラグイン『add-richtext-toolbar-button』の追加

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);

シェブロンマーク 

[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(リンカー)』の使用方法を紹介しています。


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;
}

こちらの記事でも詳しく解説しています。


【レビュー記事向け】検索画面上で表示される★マーク評価の追加方法

レビュー記事を書いた時、検索画面に表示される★マークを出すカスタムを実装しました。


参考プラグインなしで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;

公式Highlighting Code Block


プラグインの設定は、管理画面設定CODE BLOCKです。
設定画面では、フォントサイズや背景色など簡単な設定が可能です。

スマホ画面が横にズレるのを修正

記事によってはスマホのプレビュー画面が横にズレる(横にスクロールする余白ができてしまう)ことがあります。

基本的には、部分ごとにCSSを見直していけば修正できる問題かと思いますが、(めんどくさい人は)下記のCSSを追加するだけで、手っ取り早く直すことができます。

@media screen and (max-width : 767px){
 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }
}

シンママさん(@splaxoxo)に事例をアップしていただきました▼


タグ検索結果一覧のディスクリプション部分のエラーを修正

タグをクリックすると紐付けしている記事一覧が出ますが、このページのディスクリプション部分にエラーが見つかりました。

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】をカスタマイズしてみた

プラグインをインストールした後、設定を以下のようにしました。

4箇所調整



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

CSSの設定は以下です。

上部メニューより『カスタマイザー』を選択


『追加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;
}


記事最下部に『人気記事』を表示

記事の最下部に人気記事を表示します。


管理画面外観テーマエディター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>
 
 

こちらの記事でも詳しく解説しています。


ページ最下部シェアボタンの追加

本家マナブログのようにページ最下部のSNSのシェアボタンを追加。
※Google+は廃止のため削除、Facebook「いいね」は今後はあまり使われない感じがするのでカットしてます。


参考Minimal購入者に無料配布された『マナブログコピー』の元ソース参照

管理画面外観テーマエディター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です。

    こちらの記事でも詳しく解説しています。

    グーテンベルグの表組み(テーブル)を使う方法(追記:2019年11月29日)

    Minimalでグーテンベルグを使った際に、表組み(テーブル)を使う方法を『マナブログコピーまとめ』で紹介しました。

    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 CopyManablog Copyはマナブログそっくりなブログを作るために準備されたワードプレステーマです。Minimalよりもカスタムのハードルが下がっています。
    SANGOSANGOはショートコード豊富なワードプレステーマです。デザインが優れたワードプレステーマです。


    ManablogCopy(マナブログコピー)でクラシックエディターをやめてグーテンベルクで運営する方法

    マナブログコピーもMinimal同様に、グーテンベルグエディターを使うことができます。(※但し公式には推奨されていません)

    運営中の『アフィリの手帖』の方で利用方法の記事を書きましたのでご紹介します。

    ワードプレス『Minimal』の記事ライティング方法

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


    ワードプレス『Minimal』のSEO性能について

    MinimalのSEO性能を僕の体験談を交えてまとめています。
    結果的に検索エンジン上位表示(1ページ目への表示)が出来ました。
    具体的な方法などをこちらで解説しています。

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

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

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

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

    • どこも似たり寄ったりのブログデザインの中で、独自性を出せる
    • WordPress、HTML、CSSのことを学びながら運用できる
    • 何よりデザインがシンプルでカッコいい。心地よい

    これがMinimalです。

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


    人気記事【マナブログSEO】わずか2ヶ月で上位表示を実現したワードプレスMinimalの実力【ミニマルのSEOが凄い件】

    人気記事【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業3選【老後必要資金は2,000万】