ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【ブログの文字装飾】テキスト装飾プラグイン【副業ブログのノウハウ #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が有効かどうか
を選んでチェックを入れます。


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


設定箇所は4つです。

  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 ButtonJSONファイルはこちらからダウンロードしてお使い頂けます。(解凍してアップロードください)

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

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

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

ディレクトリ案内

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

◎メモ

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


◎注意書き

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


◎ポイント

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


◎検索窓

ワードプレス 使い方 検索


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

副業ブログのノウハウ
01副業ブログを始める最短ルート
02副業ブログの作り方【基本手順】
03応用編:収益化ブログの作り方
04失敗しないキーワード:3つの考え方
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をレビュー【ストレス激減】