2020/04/08

【副業ブログ：文字装飾】ワードプレス初心者向けテキスト装飾プラグイン【文字、色、サイズを変更】

副業ブログ

こんにちは、ごま吉（@Lv1gomakichi）です。

この記事はこんな人におすすめです

WordPressのテキスト装飾がめんどくさい
CSSが苦手…
ワードプレスを便利に使いたい
文字装飾にこだわりたい

この記事は、副業ブログのテキスト装飾に使えるプラグインAdd RichText Toolber Buttonの使い方を解説をしています。

具体的にこんな装飾です（↓）

参考例←タグ
←チェックマーク
公式←公式マーク　

このブログでよく使っている装飾プラグインですが、難しいCSSの設定に頭を悩ませるこなく簡単にエディターから文字装飾できるようになります。

以下は、プラグイン【Add RichText Toolber Button】の使い方と、私が特に使っているテキスト装飾をご紹介します。

動画でも解説していますので合わせてご参考ください。

この記事の目次

1 プラグイン【Add RichText Toolber Button】の使い方
2 プラグイン【Add RichText Toolber Button】テキスト装飾コード
3 【Add RichText Toolber Button】おすすめテキスト装飾例

プラグイン【Add RichText Toolber Button】の使い方

プラグインのダウンロードとインストール

まずは、Add RichText Toolber Buttonの公式サイトへアクセス。

公式Add RichText Toolber Button

矢印部分からプラグインをダウンロードします。

ワードプレスの管理画面＞プラグイン＞新規追加をクリック。

プラグインのアップロードをクリックして、ダウンロードした『Add RichText Toolber Button』のZIPデータをアップロードして展開します。

プラグインの設定

プラグインを追加すると、WordPressの管理画面の左にメニューが出来ます。
管理画面＞ダッシュボード＞Fontawesomeが有効かどうか
を選んでチェックを入れます。

次に、設定管理＞新規追加を選択します。

設定箇所は４つです。

タイトル自由でOK。例）蛍光ペンなど
クラス名自動的に入りますが一応任意で入れたほうが良いです。
グループ名特に分類しない場合は、横の「ペン」ボタンをクリック
スタイルこちらにCSSコードを入れます。

プリセットがあるので、クリックすれば自動的にCSSコードが入ります。自分で記述する必要はありません。パーセンテージやカラーナンバーを変更すれば、自分好みに簡単にカスタマイズできます。

Add RichText Toolber Buttonの使用方法

使い方は簡単です。プラグインをインストールすれば、投稿画面のツールパレッドにボタンが追加されています。

ツールバーをクリックすると、登録したテキスト装飾がでます。装飾をかけたいテキストをドラッグしてから、装飾をセレクトすれば1発で適用されます。

プラグイン【Add RichText Toolber Button】テキスト装飾コード

以下は私がプラグインに設定している内容です。CSSコードをコピペで設定すればすぐ使えますのでご参考ください。

コード

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

アンダーライン

text-decoration: underline;

蛍光ペン（赤）

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, #FFDFEF 0%);
font-weight: 600;

フォルダ

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #616161;
border-radius: 3px;
background-color: rgb(238, 238, 238);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f07c";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #9e9e9e;

ファイル

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #616161;
border-radius: 3px;
background-color: rgb(238, 238, 238);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f15b";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #9e9e9e;

青枠（点線）

display: block;
border: 1px dashed #4865B2;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 1.6;
line-height: 2.3;

タグ

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #616161;
border-radius: 3px;
background-color: rgb(238, 238, 238);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f02c";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #9e9e9e;

青枠

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 2.3;

グレー枠

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #FAFAFA;
line-height: 2.3;

グレー背景

display: block;
border: 2px solid #F8F9F9;
padding: 1.2em 1em;
background-color: #F8F9F9;
line-height: 2.3;

警告

[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: "\f071";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #D50000;

注意枠

display: block;
border: 1px solid #FCE8E6;
padding: 1.2em 1em;
background-color: #FCE8E6;
line-height: 2.3;

ピンク枠

display: block;
border: 1px solid #8888;
padding: 1.2em 1em;
background-color: #FFFAFA;
line-height: 2.3;

色付きタグ（黒）

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #fff;
border-radius: 3px;
background-color: #212121;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f02c";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #fff;

色付きタグ（青）

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #fff;
border-radius: 3px;
background-color: #4765B2;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f02c";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #fff;

色付きタグ（赤）

background-color: #eee;
margin: .3em .5em;
padding: .3em .4em;
font-size: .8em;
color: #fff;
border-radius: 3px;
background-color: #FF7A7B;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

[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: "\f02c";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #fff;

リストマーク（下）

[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: "\f13a";
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #333;

蛍光ペン（青）

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, #CCE5FF 0%);
font-weight: 600;

検索窓

border: solid 1px #777777;
border-radius: 2px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #F9F9F9;
color: #605857;
font-size: .8em;
padding-left: 10px;
padding-right: 10px;

チェックマーク（青）

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;
margin-bottom: -6px;

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

キーボードのボタン

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;

リストマーク（横）

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

オレンジボタン

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;
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;

公式

background: #6fd0de;
color: #fff;
border-radius: 30px;
display: inline-block;
font-size: 12px;
width: 34px;
line-height: 34px;
text-align: center;
margin-right: 10px;

グリーンボタン（100％）

display: block;
border-bottom: 2px solid #148C73;
padding: 0.5em 0.5em;
background-color: #1ABB9A;
text-align: center;
color: #ffffff;
border-radius: 5px;

公式（横）

padding: .3em;
text-align: center;
background-color: #2B418B;
color: #ffffff;
font-size: 90%;
margin-right: 5px;

【Add RichText Toolber Button】おすすめテキスト装飾例

以下はこのプラグインを使ってよく使う装飾例です。ご参考まで。

◎ディレクトリ案内

フォルダA＞フォルダB＞ファイル

◎メモ

MEMO
メモ書きのテキストをこんな感じで入れます。背景もつけます。

◎注意書き

注意：このポイントに注意しましょう。
背景とテキストの色も赤くするのがコツです。選択する順番を背景→アイコン→色の順に設定します。

◎ポイント

ここがポイント！
1.まずは「ここがポイント」を装飾
2.次に背景設定

◎検索窓

ワードプレス　使い方　検索

慣れるとスピーディーに使えるようになります。ぜひチャレンジしてみてください。

こちらも合わせてどうぞ
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。収益が出なくて悩んでいる人におすすめのnoteです。

画像提供
Pikisuperstar – jp.freepik.com によって作成された background ベクトル

アフィリエイトカスタマイズ