【初心者向け】マナブログ風チェックマーク、ボックスを表示する方法【Cocoon＋Gutenberg】

マナブログ風チェックマークやボックスはどうやって実現するの？

CocoonとGutenbergを使った方法だといいな

こういった疑問に答える記事です。

本記事を読めば以下を知ることができ、見た目をマナブログ風のカッコいいブログにすることができます。

マナブログ風チェックマークの実現方法

マナブログ風ボックスの実現方法

マナブログ風リストボックスの実現方法

本記事の信憑性は、月17万円、総収入600万円以上のブログを運営しており、実際にマナブログ風チェックマーク、ボックス、リストボックスを利用しています。

マナブログ風チェックマークやボックスとは？
マナブログ風チェックマークを実現する方法
マナブログ風ボックスを実現する方法
マナブログ風リストボックスを実現する方法
1. マナブログ風ボックスにリストを挿入する方法
2. マナブログ風リストボックスを実現する方法（css class定義）
  1. 前準備
  2. マナブログ風リストボックスの挿入方法
まとめ

マナブログ風チェックマークやボックスとは？

マナブログ風チェックマークは

　こんなやつです。

マナブログ風ボックスは

こんなやつです。

マナブログ風リストボックスは

こんな
やつ
です

そうそう。

これこれ。

マナブログ風チェックマークを実現する方法

Cocoon＋Gutenbergで操作方法で解説します。

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”html”と入力すると「カスタムHTML」が表示されるのでクリックする。

４）

「カスタムHTML」ブロックが表示されるので、以下の文字を入力する

<span><strong><i class="fa fa-check"></i>　マナブログ風チェックマーク</strong></span>

５）
画面右上の「プレビュー＞新しいタブでプレビュー」をクリックする
６）
マナブログ風チェックマークが表示される。

できました！簡単ですね。

マナブログ風ボックスを実現する方法

Cocoon＋Gutenbergで操作方法で解説します。

前準備から説明します。

Step1 前準備

マナブログで使用している背景色（#f8f9ff）と境界線色（#4865b2）を拡張カラーパレットに登録します。

１）
WordPressの管理画面で「Cocoon設定」をクリックする。
２）
「エディター」をクリックする
３）
「エディター」タブが開くので、「拡張カラーバレット色」のところまでスクロールし、「拡張色E」をクリックする。
４）
マナブログ風ボックスの背景色を設定するため、カラーコードに#f8f9ffを入力し、「Select Color」をクリックする。
５）
「拡張色F」をクリックする。
６）
マナブログ風ボックスの境界線色を設定するため、カラーコードに#4865b2を入力し、「Select Color」をクリックする。
７）
「拡張色E」と「拡張色F」が設定される。「変更をまとめて保存」をクリックすればOKです。

Step2マナブログ風ボックスの挿入方法

記事にマナブログ風ボックスを挿入します。

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”box”と入力すると「白抜きボックス」が表示されるのでクリックする。
４）
「ボーダー色」に拡張色Fを選択し、「背景色」に拡張色Eを選択し、”マナブログ風ボックス”と入力します。
５）
画面右上の「プレビュー＞新しいタブでプレビュー」をクリックする
６）
マナブログ風ボックスが表示される。

「カスタムHTML」を使わなくてもできるんですね！

線をもう少し細くしたい、点線にしたい人

テーマエディタで「Cocoon Child: スタイルシート (style.css)」にcssを追加します。

手順を説明します。

１）
WordPressの管理画面で「外観＞テーマエディター」をクリックする。

２）

一番下に以下をコピペし、「ファイル更新」をクリックする。

※線種や線の太さは好みによって修正する。

/*---------------------------------
白抜きボックス（線種、太さ）

線種
  solid  実線
  dashed 破線
  dotted 点線
  double 二重線
  groove くぼみ
  ridge  浮きだし
  inset  立体くぼみ
  outset 立体浮きだし
--------------------------------*/
.blank-box {border: dashed 1.5px;}

マナブログ風リストボックスを実現する方法

2通り説明します。

マナブログ風ボックスにリストを挿入する方法

ボックスの中にリストを挿入する方法です。

１）
「マナブログ風ボックスを実現する方法」で「白抜きボックス」を挿入します。
２）
「白抜きボックス」を選択し、「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”list”と入力すると「リスト」が表示されるのでクリックする。
４）
「白抜きボックス」に・が挿入されますので、文字を入力する。
５）
プレビューするとマナブログ風リストが表示される。

できました。

ボックスの中にリストを入れるんですね。

マナブログ風リストボックスを実現する方法（css class定義）

テーマエディタで「Cocoon Child: スタイルシート (style.css)」にclassを追加する方法です。

手順を説明します。

前準備

１）
WordPressの管理画面で「外観＞テーマエディター」をクリックする。

２）

「Cocoon Child: スタイルシート (style.css)」の一番下に以下をコピペし、「ファイル更新」をクリックする。

余白（padding）は自分の好みで調整してください。

/************************************
** マナブログ風リストボックス
************************************/
.manablog-listbox
{
    background-color: #f8f9ff; /* 背景色 */
    border          : dashed 1px #4865b2; /*境界線の設定(線種 線幅 線色)*/
    padding-top     : 20px;    /* 余白(上側) */
    padding-bottom  : 10px;  　/* 余白(下側) */
    padding-left    : 20px;    /* 余白(左側) */
    padding-right   : 10px;    /* 余白(右側) */
}

マナブログ風リストボックスの挿入方法

１）
Gutenbergエディターを開く
２）
「＋」アイコン（ブロックを追加）をクリックする。
３）
「ブロックの検索」に”html”と入力すると「カスタムHTML」が表示されるのでクリックする。

４）