マナブログ風チェックマーク | マブログ https://mablog.org 30代のサラリーマン、OLがネット広告で簡単に月1万円稼ぐ方法 Sun, 23 May 2021 08:54:48 +0000 ja hourly 1 https://wordpress.org/?v=6.3.8 https://mablog.org/wp-content/uploads/2020/07/cropped-favicon_ma-32x32.png マナブログ風チェックマーク | マブログ https://mablog.org 32 32 【初心者向け】マナブログ風チェックマーク、ボックスを表示する方法【Cocoon＋Gutenberg】 https://mablog.org/manablog-style-checkmark-and-white-box/ https://mablog.org/manablog-style-checkmark-and-white-box/#comments Sun, 23 May 2021 08:46:26 +0000 https://mablog.org/?p=2407

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

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

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

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

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

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


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

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

　こんなやつです。


マナブログ風ボックスは

こんなやつです。


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

  • こんな
  • やつ
  • です


そうそう。

これこれ。


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

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

  • １）
    Gutenbergエディターを開く
  • ２）
    「＋」アイコン（ブロックを追加）をクリックする。
    マナブログ風チェックマーク-2_ブロックを追加
  • ３）
    「ブロックの検索」に”html”と入力すると「カスタムHTML」が表示されるのでクリックする。
    マナブログ風チェックマーク-3_ブロックの検索
  • ４）
    「カスタムHTML」ブロックが表示されるので、以下の文字を入力する
    <span style="font-size: 120%;"><strong><i class="fa fa-check" style="color: #6c9fce;"></i>　マナブログ風チェックマーク</strong></span>
    マナブログ風チェックマーク-4_カスタムHTML

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

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


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

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

前準備から説明します。


Step1 前準備

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

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


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

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

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

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


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

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

手順を説明します。

  • １）
    WordPressの管理画面で「外観＞テーマエディター」をクリックする。
    ボックスカスタマイズcss-1_外観＞テーマエディター
  • ２）
    一番下に以下をコピペし、「ファイル更新」をクリックする。

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

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

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




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

2通り説明します。

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

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

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

できました。

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



マナブログ風リストボックスを実現する方法（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」が表示されるのでクリックする。
  • ４）
    「カスタムHTML」ブロックが表示されるので、以下の文字を入力する
    <div class="manablog-listbox">
<ul>
<li>マナブログ風リストボックスA</li>
<li>マナブログ風リストボックスB</li>
<li>マナブログ風リストボックスC</li>
</ul>
</div>


  • ５）
    プレビューするとマナブログ風リストボックスが表示される。

この方法だと好きな場所だけにマナブログ風リストボックスを使えますね！



まとめ

マナブログ風にカスタマイズする方法を解説しました。

  • マナブログ風チェックマーク
  • マナブログ風ボックス
  • マナブログ風リストボックス（ボックスにリストを入れる方法）
  • マナブログ風リストボックス（Class定義する方法）

以上です。

]]> https://mablog.org/manablog-style-checkmark-and-white-box/feed/ 3