初心者が読むべき500のノウハウ記事のまとめ

【ブログで便利なテキスト装飾12選】WordPressグーテンベルグから1発でテキスト装飾する方法【CSS苦手な人向け】

この記事はこんな人におすすめです
  • WordPressのテキスト装飾が毎度めんどくさい
  • 見出しの装飾はこだわっているけど、テキスト本文の装飾は無関心
  • CSSとかマジ苦手

こんにちは!
アフィリエイトの超ノウハウコレクターごま吉(@Lv1gomakichi)です。

皆さん、有名なブロガーさんやアフィリエイターさんのブログを見てると

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

テキスト装飾の細かな部分が・・・オシャレさん

と思ったことはありませんか?


具体的に言うとこんなやつです ↓


公式公式マーク 参考参考マーク

index.htmlmain.html

code コード文字



私はずっと真似したいと思っていたテキスト装飾がいくつもあったのですが…

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

CSSとか、もう出来れば見たくもないし
触りたくもない

そう思って断念してました(´・ω・`)

しかし、先日マサオカさんのこちらの記事で神プラグインであるAdd RichText Toolber Buttonを知りました。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

このプラグインが、、マジ神。

こちらのプラグインを使って私のテキスト装飾問題は一気に解決しました!

今日はプラグイン【Add RichText Toolber Button】の使い方と、私が特に使っている(今後使いたい)テキスト装飾を集めてみましたのでご紹介します。

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

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


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

公式Add RichText Toolber Button

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

プラグイン『新規追加』をクリック

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

プラグインの設定

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

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

設定箇所は4つです。

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

プリセットがあるので、クリックすれば自動的にCSSコードが入ります。自分で記述する必要はありません。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

パーセンテージやカラーナンバーを変更すれば、自分好みにカスタマイズできます。

Add RichText Toolber Buttonの使い方

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


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

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

プラグインを入れると、文字のカラー選択、背景色、文字の大きさもツールパレッドから選べるようになって、超便利です。

プラグイン【Add RichText Toolber Button】で登録しておきたいてきテキスト装飾12選

と題しまして、私が独断と偏見で1即使いたいテキスト装飾を13個選びました。
普段参考にしているブログから参考に真似させて頂きました。

参考にさせて頂いたブログ
https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

CSSコードを、コピペで設定すれば使えますよ( ゚д゚ )クワッ!!

蛍光ペン赤

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

蛍光ペン(黄色)

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

蛍光ペン(青)

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

蛍光ペン(緑)

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

チェックマーク

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;

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

ファイルマークの階層構造

index.htmlmain.html

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;

フォルダマークの階層構造

desktopmain folder

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;

オレンジのボックス

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;

公式公式マーク(丸)

上記の装飾は丸の中のテキスト変更すれば、【参考マーク】としてもアレンジできます。(2文字までです)

参考参考マーク

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

code コード入れる文字ボックス

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

公式公式マーク(横)

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;
https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

以下のボックスも登録しておくと便利ですよ

青ベースのグレー枠

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

青枠(点線)

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

グレー枠

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

緑のボタン風の枠

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

追記 2019年8月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;

追記 2019年8月11日

シェブロンマーク

[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: #80CBC4;

チェックマーク(赤)

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

追記 2019年8月24日

アンダーライン

text-decoration: underline;

追記 2019年8月27日

キーボードのボタン風

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;

いかがでしたでしょうか?
私はツールボックスに登録しておくと、3倍位作業は早くなる気がしてます。

ぜひチャレンジしてみてください♪(´ε` )

▼こちらも合わせてご覧ください▼

【保存版】アフィリエイト初心者にオススメする「質の高い」無料素材や無料ツール・サービスのまとめ【2020年版】