【ブログの文字装飾】テキスト装飾プラグイン【副業ブログのノウハウ #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が有効かどうか
を選んでチェックを入れます。
次に、設定管理＞新規追加を選択します。
設定箇所は４つです。
- タイトル自由で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;
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ファイル
【Add RichText Toolber Button】おすすめテキスト装飾例
以下はこのプラグインを使ってよく使う装飾例です。ご参考まで。
◎ディレクトリ案内
フォルダA＞フォルダB＞ファイル
◎メモ
メモ書きのテキストをこんな感じで入れます。背景もつけます。
◎注意書き
注意：このポイントに注意しましょう。
背景とテキストの色も赤くするのがコツです。選択する順番を背景→アイコン→色の順に設定します。
◎ポイント
ここがポイント！
1.まずは「ここがポイント」を装飾
2.次に背景設定
◎検索窓
慣れるとスピーディーに使えるようになります。ぜひチャレンジしてみてください。
副業ブログのノウハウ
01副業ブログを始める最短ルート
02副業ブログの作り方【基本手順】
03応用編:収益化ブログの作り方
04失敗しないキーワード：３つの考え方
05稼げる広告（案件）の探し方
06稼げるジャンルの決め方
07検索順位チェックツールGRCの使い方
08キーワード検索ツールの使い方
09ブログ初心者が稼げない5つの理由
10無料画像加工ツールCanvaのテクニック集
11失敗しないブログ本の選び方
12高品質:無料ツール・サービス【まとめ】
13『Minimal』のデザインカスタマイズ
14Add RichText Toolber Buttonの使い方
こちらも合わせてどうぞ
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。収益が出なくて悩んでいる人におすすめのnoteです。
人気記事【無料あり】VODおすすめ比較表：どこよりも分かりやすい動画配信サービスのまとめ
人気記事【ポケットwifi】GMOとくとくWiMAX：speed wi-fi next w06をレビュー【ストレス激減】