Last-Modified: 2019/06/03

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

web webデザイン

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

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

このデザイン、すごくシンプルでカッコいいんですよね。
ワードプレスの有料テーマはたくさんありますが一番スキです。
シンプルで余分なものがなく、何だか心地良いんですよね。

カスタマイズは、購入時点でマニュアルが送られてきてそこにはカスタムに参考になるサイトの情報も掲載されてます。

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

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

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

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

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

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

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

でもね。
初心者同然でもどうしてもこのデザイン使いたいんじゃー！
カッコいいんじゃー！

なんで、

WordPress有料テーマ『Minimal』のカスタマイズを結構な素人さんがまとめてみましたよ。

僕みたいな人は参考にどうぞ。

ワードプレス「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;
}

です。

入力はSANGO Gutenbergを使ってます

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

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

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

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

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

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

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

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

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

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

内部リンク用のブログカードの設置（追記2019/05/14）

内部リンクをブログカードで表示するためのコードを修正しました。

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

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

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

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

.wp-block-image {

width: 90%;
margin: 10px auto;

}

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

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

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

CSSは以下です。

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

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

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

Minimalはそうした有料テーマに比べると、正直めんどくさいです。

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

これがMinimalです。

気になった方はぜひ公式ページもご覧ください。
»ミニマリスト向けのWordPressテーマ『Minimal』を作りました

（完）

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

• facebook
• Tweet
• Read Later