☰
ロゴ

【ブログの文字装飾】テキスト装飾プラグイン【副業ブログのノウハウ #14】

副業ブログ

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


プラグインAdd RichText Toolber Buttonをインストールすれば、具体的にこんな装飾が使えます。

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



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


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


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

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

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


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

公式Add RichText Toolber Button


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


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


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

プラグインの設定


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


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


設定箇所は４つです。

  1. タイトル自由でOK。例）蛍光ペンなど
  2. クラス名自動的に入りますが一応任意で入れたほうが良いです。
  3. グループ名特に分類しない場合は、横の「ペン」ボタンをクリック
  4. スタイルこちらに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;

人気記事

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

蛍光ペン（黄）

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



上記で私が設定しているAdd RichText Toolbar ButtonのJSONファイルはこちらからダウンロードしてお使い頂けます。（解凍してアップロードください）

ご使用は自己責任でお願いします。
ダウンロードはこちら
Add RichText Toolber Button　JSONファイル（ver.2.0.6対応）

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

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

◎ディレクトリ案内

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

◎メモ

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


◎注意書き

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


◎ポイント

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


◎検索窓

ワードプレス　使い方　検索


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

副業ブログのノウハウ
01副業ブログを始める最短ルート
02副業ブログの作り方【基本手順】
03応用編:収益化ブログの作り方
04失敗しないキーワード：３つの考え方
05稼げる広告（案件）の探し方
06稼げるジャンルの決め方
07検索順位チェックツールGRCの使い方
08キーワード検索ツールの使い方
09ブログ初心者が稼げない5つの理由
10無料画像加工ツールCanvaのテクニック集
11失敗しないブログ本の選び方
12高品質:無料ツール・サービス【まとめ】
13『Minimal』のデザインカスタマイズ
14Add RichText Toolber Buttonの使い方



人気記事副業ブログのノウハウ

人気記事withコロナ営業のノウハウ


HOME >  副業ブログ >  【ブログの文字装飾】テキスト装飾プラグイン【副業ブログのノウハウ #14】