今回はワードプレスのビジュアルエディタで「囲み枠」を付ける方法についてご紹介します。

と言ってもその方法は非常に簡単で、AddQuicktagというプラグインを使えば誰でもすぐにできてしまいます。

実際の活用例についてここで紹介していきます。

ビジュアルエディタで囲み枠を付けるために

ワードプレスの場合、基本的にビジュアルエディタから枠線を付ける事ができません。簡単な文字装飾であればビジュアルエディタから操作可能ですが、囲み枠を付ける場合は「テキストエディタ」を使用しなければならないのです。

これが少々面倒な訳ですね^^;場合によってはレイアウトが崩れたりする事もあるし。。。

常にビジュアルエディタで編集ができたら非常に便利です。そんな時に活躍するのが「AddQuicktag」です！！

AddQuicktagを使った「囲み枠」

では実際にAddQuicktagを使用して「囲み枠」の文字装飾をしてみましょう。

AddQuicktagでは様々なタグを指定する事ができます。しかし、やはり囲み枠のために使われるケースが非常に多いと思います。簡単な文字装飾であれば、ワードプレス本来のエディタで大抵できますから。

わざわざタグをいじるのではなく、ワンクリックで囲み枠を使用できたらすごく便利です。本来であれば、少々面倒なのですがAddQuicktagを使用する事で簡単に作る事ができます。

実際に囲み枠を作ってみましょう。

ビジュアルエディタでのタグの使い方

まずはAddQuicktagで指定したタグをビジュアルエディタで使用する方法だけ紹介しておきます。

と言っても、その方法は簡単で、AddQuicktagの画面でタグを指定し、ビジュアルエディタの「チェックボックス」にチェックを入れればＯＫです。

■AddQuicktag画面

ここでチェックを入れると、ビジュアルエディタを開いた時に「Quicktags」というプルダウンが表示されますので、そこから大賞のタグを指定する事ができます。

■ビジュアルエディタ画面

ビジュアルエディタのメニューの中に「Quicktags」というプルダウンが出現します。

囲み枠のスタイル設定

AddQuicktagの操作に入る前に、まずは囲み枠の色や形を決めましょう。WEBページの場合、色の使い方は非常に重要ですので、基本的な事を覚えておきましょう。

文字の装飾はstyleで定義するのですが、その際に文字色や背景色なども自分で定義します。囲み枠を作る場合はborderを使えばＯＫです。以下の様に記載すると囲み枠を定義する事ができます。

ここでは枠線をスタイリングする場合に必要な最低限の知識を解説します。

囲み枠のスタイリング

囲み枠のスタイリング方法を紹介しておきます。

枠線の指定 ～ solid

solidというのは１本の単純な線、5pxの部分は線の太さになります。

背景色の指定 ～ background-color

背景色も指定できます。特に指定しなければ白抜きの背景色になりますが、カラフルにしたい場合は自分で色を設定する事も可能です。

文字の周りの幅 ～ padding

文字の周りの幅も自分で指定する事ができます。幅はpaddingで指定します。

色について

色の指定についてはここでは詳しく語りませんが、最近は#に6桁の数字で色指定するのが一般的です。

RGBを6桁で表記する場合⇒1,2桁：赤色、3,4桁⇒緑、5,6桁⇒青

その他

今回は文字色などは指定していませんが、必要に応じて文字色や、他のスタイリングをしてもＯＫです。

タグの作り方

実際にどの様なタグを作ればいいかも押さえておきましょう。

といっても以上に簡単で、以下の様に開始タグ、終了タグを作ればＯＫです。

■開始タグ

■終了タグ

直接ベタ書きで囲み枠を作る場合

さて、AddQuicktagの中に直接スタイルをベタ書きする方法からご紹介します。一番オーソドックスな方法です。

AddQuicktagに設定

「プラグイン」⇒「AddQuicktag」を選択します。

すると以下の様な画面が出ます。必要な箇所に文字を入力、チェックを行い、最後に「変更を保存」のボタンを押します。
※入力値については以下で説明しています。

■AddQuicktag画面

・ボタンのラベル、ダッシュアイコンラベル名：ビジュアルエディタで囲み枠を使用する場合の名前です。分かりやすい名前を付けましょう。

・開始タグと終了タグ：先ほどの様な開始タグ、終了タグをそれぞれ入力します。

・ビジュアルエディタ：チェックを入れます。

ビジュアルエディタでの指定

ビジュアルエディタ上で、囲み枠を付けたい文字を範囲選択して「Quicktag」のプルダウンから対象の囲み枠を選択します。

ビジュアルエディタ上でも囲み枠が表示されます。

結果

結果は以下の通りとなります。
※ここでは枠線が「赤」で、背景色が「薄い水色」を設定してみました。

囲み枠を使用しています。

いかがでしょうか？この囲み枠はビジュアルエディタからワンクリックで指定できるのです。本当に便利ですよ。

CSSを使って囲み枠を作る方法

次はCSSを使って囲み枠を作る方法です。

後々でスタイリングを変更したい場合などはこの方法を使うと便利です。

CSSを用意

まずは以下の様なCSSを用意します。

■CSSコード

CSSの追加設定

次にワードプレス上でCSSの追加設定を行います。

テンプレートによって追加設定方法が異なりますので、以下を参考にして下さい。

「外観」で「CSS編集」を選択できる場合

「外観」⇒「CSS編集」⇒「追加CSS」をクリックして、CSSを追加

「外観」で「CSS編集」が選択できない場合

CSS編集という項目が選択できない場合は、以下の方法でCSSを追加します。

①「外観」⇒「テーマの編集」⇒「スタイルシート」にCSSを追加
※ワードプレスのスタイルシートをいじる事になるので、推奨はされていません。

②ビジュアルエディターでCSSを指定する場合は「外観」⇒「テーマの編集」⇒「ビジュアルエディターのスタイルシート」にもCSSを追加します。ビジュアルエディターでも使用できるととっても便利なのでオススメです。
※テンプレートやワードプレスのバージョンによっては名前が異なる事があります。

AddQuicktagに設定

「プラグイン」⇒「AddQuicktag」を選択します。

ベタ書きで指定する場合と同じ様にAddQuicktagに設定を行います。

直接指定の場合と異なるのは、「開始タグ」で、追加CSSで設定したid（classでもOK）を指定します。

■AddQuicktag画面（項目名は直接指定の場合を参照して下さい）

・ボタンのラベル、ダッシュアイコンラベル名：分かりやすい名前を付けましょう。

・開始タグと終了タグ：追加CSSで設定したid（classでもOK）を開始タグに入れ、終了タグはdivでOKです。

・ビジュアルエディタ：チェックを入れます。

ビジュアルエディタでの指定

ビジュアルエディタ上で、囲み枠を付けたい文字を範囲選択して「Quicktag」のプルダウンから対象の囲み枠を選択します。

ビジュアルエディタ上でも囲み枠は確認できません。プレビュー画面を表示すると囲み枠が付いている事が分かると思います。

結果

結果は以下の通りになります。

囲み枠を使用しています。（CSS指定）

 

この方法には以下のメリットとデメリットがありますので、直接指定と比較して好きな方を選択して下さい。

・メリット：後からCSSで編集が可能。

・デメリット：ビジュアルエディタ上で確認ができない。改行コードが上手く入らない事がある。

まとめ

さて、AddQuicktagを使い、ビジュアルエディタで囲み枠を作る例についてご紹介しました。

AddQuicktagというプラグインは非常によく使う事になると思います。
※特にビジュアルエディタ上で装飾をすべて完了させたい場合は

囲み枠を作る方法も、「直接指定する方法」「CSSから指定する方法」の２種類ありますが、基本的には分かりやすい直接指定が良いかなと思います。

色々なタグを指定して、文字の装飾を試してみて下さいね。