こんにちは、久川和人です。

前回は、WordPressのプラグインであるAddQuicktagの設定方法と使い方についてお話いたしました。
↓↓↓
AddQuicktagの設定方法と使い方~記事作成を効率化させるタグも紹介

AddQuicktagを使うと、ビジュアルエディタやテキストエディタにタグを割り当てることができて記事作成の効率が上がります。

AddQuicktagだけでも便利なのですが、CSSと組み合わせると、お洒落な囲み枠・ボタンを作成したり、文字にマーカーを引いたり、できることが広がります。

今回は、AddQuicktagとCSSを組み合せて使う方法についてお話していきます。AddQuicktagとCSSを組み合せれば、魅力的な文字装飾ができるだけでなく、記事作成の効率もさらにアップさせることも可能です。

AddQuicktagのインストールや使い方についてはこちらの記事をご覧ください。
↓↓↓
AddQuicktagの設定方法と使い方~記事作成を効率化させるタグも紹介

CSSの使用方法

AddQuicktagでCSSを使用するには、つぎのような手順になります。

  1. style.css(または、追加CSS)にコードを書き込む
  2. AddQuicktagにstyle.css(または、追加CSS)で書き込んだコードを登録する
  3. 記事を書く際に、AddQuicktagを使い、コードを書き込む

この手順を、例としてつぎのような「黄色いマーカー」を作ることをしてみます。

例)これが黄色いマーカーです。

style.css(追加CSS)にコードを書き込む

黄色いマーカーを引くためのCSSは次のようになります。

/*黄色いマーカー*/
.marker_yellow {
background: linear-gradient(transparent 50%,yellow 50%)
}

このコードを”style.css”または”追加CSS”に書き込みます。Jetpackをインストールしている場合やWordPressテーマによっては、”追加CSS”というCSSを自由に記載できる場所があります。

”追加CSS”がある場合は、”style.css”に書き込まず、”追加CSS”に書き込むことをおすすめいたします。”style.css”に書かれている内容を削除、書き換えたりすると、WordPress画面が真っ白になって表示されなくなるなど危険があるからです。

”style.css”と”追加CSS”に書き込む方法を説明いたします。

”style.css”に書き込む場合

1.WordPress管理画面の左メニューの【外観】⇒【テーマの編集】をクリックします。
テーマの編集をクリック

2.右側のテーマファイルから、【style.css】をクリックします。
style.css

3.一番下に、先ほどの黄色いマーカーのCSSをコピーして貼り付け、【ファイルの更新】をクリックします。
CSS張り付け

”追加CSS”に書き込む場合

1.WordPress管理画面の左メニューの【外観】⇒【CSS編集】をクリックします。
CSS編集に移動

※CSS編集がない場合は、【ウィジェット】⇒【追加CSS】をクリックします。

2.追加CSS画面が表示されます。先ほどの黄色いマーカーのCSSをコピーして貼り付け、【公開】をクリックします。
追加CSS張り付け

AddQuicktagにstyle.css(または、追加CSS)で書き込んだコードを登録する

追加したCSSをAddQuicktagに設定します。

1.WordPress管理画面の左メニューの【設定】⇒【AddQuicktag】をクリックします。
AddQuicktag

2.AddQuicktagを設定します。
①タグの名前を入力:ここでは、”マーカー(黄色)”としました。
②開始タグ:<span class=”marker_yellow”>と入力
③終了タグ:</span>と入力
④チェックボックス:チェックします。
⑤【変更を保存】をクリックします。
AddQuicktag設定

AddQuicktagを使いコードを書き込む

テキストエディタとビジュアルエディタで実際に記事を書いていきます。

テキストエディタの場合

①テキストエディタを開き、文字を入力し、入力した文字を選択します。
②【マーカー(黄色)】をクリックします。
テキストエディタ

タグが挿入されます。
テキストエディタ

ビジュアルエディタの場合

①ビジュアルエディタを開き、文字を入力し、入力した文字を選択します。
②【Quicktags】プルダウンにある【マーカー(黄色)】をクリックします。
ビジュアルエディタ

ビジュアルエディタ上では【マーカー(黄色)】が反映されません。プレビューで確認をします。
プレビュー

 ビジュアルエディタで反映させたい場合は、”editor-style.css”にも記載する必要があります。
①テーマの編集画面で【editor-style.css】をクリックします。
CSSを貼り付けます
③【ファイルを更新】をクリックします。
editor-style.css

CSSをいじるのはちょっと・・・ってときは

CSSは正確にコードを入力しないと、意図しない動作になったり、ブログが表示されなくなったりとリスクが伴います。

そんなときは、【TinyMCE Advanced】というプラグインを使うことで、文字装飾を行うこともできます。

TinyMCE Advancedの使い方はこちらをご覧ください。

 

おわりに

今回は、AddQuicktagとCSSを組み合せて使う方法をお話いたしました。

CSSを利用することで、AddQuicktagだけではできなかったこともできるようになり、AddQuicktagだけよりもより効率よくブログを書くことができるようになります。

今回は、黄色いマーカーを引くだけの紹介でしたが、違う色のマーカーを引いたり、カラフルな囲み枠を作成したりと便利に使うことができるので、ぜひ利用してみてくださいね。

 

プレゼント付き!メルマガ登録はこちら♪

メルマガ登録

久川和人のうつ病克服への日記を別のブログで書いています。読んでもいいよって方は、以下をクリックしてみてくださいね♪
日記
好きなことを仕事にできるブログライティングが身に付く教科書”ドリームライティング”
ドリームライティング

趣味ブログから始めて、
あなたの好きな場所で、好きな時間に、好きなことを仕事にできるブログライティングを身に付けてみませんか?
そんな夢が叶う教科書が”ドリームライティング”です。
今なら僕の特典も付いています。

Twitterでフォローしよう

おすすめの記事