文字装飾を簡単に行う – プラグイン「AddQuicktag」の使い方

記事を書くにあたって、

文字を赤くしたり、アンダーラインを引いたり、といった文字装飾は大事です。

重要な箇所を強調したり、記事が格段に見やすくなったりしますから！

コクーンは最初からかなり使いやすい機能を搭載していますが、

・文字の色を毎回選んだり

・毎回自分でcssを調整したり

こんなことをしていると大変です。

でも、このプラグインがあれば、もうそんな必要はありません！

選ぶだけで一発装飾です！

AddQuicktag を有効化する
AddQuicktag を設定する
- cssの設定
- AddQuicktag の設定
AddQuicktag を使ってみよう！

AddQuicktag を有効化する

***********　作業開始　***********

➊ 左メニューの「プラグイン」→「新規追加」をクリック

➋ 右上のキーワードに「AddQuicktag」と入力し、検索。

→ 表示されたプラグインを「今すぐインストール」

➌ インストールが終わったら、「有効化」をクリック

これで、有効化は完了です！

AddQuicktag を設定する

つづけて、設定を行います。

css と AddQuicktag の両方の設定が必要です。

ちょっと面倒ですが、これさえやれば一気に楽になるので、頑張りましょう！

cssの設定

➊ 左メニューの「外観」→「テーマファイルエディター」をクリック

➋ 「子テーマ用のスタイルを書く」の下にコードを書いていきます。

▲ヘッダーロゴのときと、同じ場所

よく使うコードを載せておきます。よければコピペして使ってください

◇文字の色を変える

.font-○○{　　　　/*←名前です。○のなかには色を書きます*/
color: #○○○○○○; 　/*←○の中にカラーコードを書きます*/
}
——▼たとえば、こんな感じ——
.font-blue{
color: #0000ff;
}

カラーコードは、こちらのサイトが便利です！

日本の伝統色和色大辞典 - Traditional Colors of Japan

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

◇文字の色を変える＋少し文字を大きくする

/*フォント*/
.font-blue{
color: #0000ff;
font-weight: bold; /*文字の太さ*/
font-size: 1.2em; /*文字の大きさ*/
line-height: 3em; /*行の高さ*/
}

◇アンダーラインを引く

/*アンダーライン*/
.text-underline-yellow{
background: linear-gradient(transparent 90%, #ffff00 0%); /*線の太さ、色*/
font-weight: bold; /*文字の太さ*/
margin: 10px; /*文字の外側の空白*/
line-height: 2.5em; /*行の高さ*/
}

◇囲み枠をつくる

/*ボックス（囲み枠）*/
.text-box-green{
border:1px solid; /*線の太さ、種類*/
color: #008000; /*色（ここでは線も文字も同じ色）*/
padding: 10px 10px; /*線の内側の空白*/
margin-top: 25px; /*線の外側（上）の空白*/
margin-bottom: 25px; /*線の外側（下）の空白*/
border: double; /*二重線にする*/
border-radius: 5px; /*角に丸みをつける*/
font-weight: bold; /*文字の太さ*/
}

/*○○*/
▲これはコメントといって、コードに書いてもページには表示されないようにするもの。
○の部分に大切なことを書いておくと、メモ代わりになります。
コードの先頭に何のためのコードか書いておくと、あとで見たとき分かりやすい！

➌ コードをコピペしたら、一番下の「ファイルを更新」をクリックして保存します。