枠

今回紹介するのは、「文字を枠で囲む方法」です。

こんな感じに、記事の見た目をよくしたり、強調したりすると、とても読みやすくなりますよね。

 
やり方は簡単で、「このタグを使いたいところにコピペしてね」という感じに教えることはできますが、それではつまらないです~。

ということで

記事を書く時、ボタン1つで簡単に「枠で囲める」ようにしたいと思います。
使うのはワードプレスで、こんな感じです。

addquicktagの見た目  

ワードプレスで文字を囲うボタンを作る方法

今回は「Addquicktag」というプラグインを使います。
「Addquicktag」は、ワードプレスの記事を書く画面で、タグを挿入するボタンを追加できるプラグインです。

テキストモード

今回は、たまたま「文字を囲うボタン」ですが、やり方を覚えれば凄く便利に応用できるので、ぜひマスターしちゃってください。

Addquicktagの導入

ワードプレスのダッシュボードの左のメニューより 「プラグイン」⇒「新規追加」をクリック

Addquicktag導入1

「Addquicktag」と書いて、「インストール」をクリック

Addquicktag導入2

「インストール」が「有効化」に変わるのでこれをクリック

Addquicktag導入3

無事プラグインに追加されました。

Addquicktag導入4

Addquicktagの設定

ワードプレスのダッシュボードの左のメニューより 「設定」⇒「AddQuicktag」をクリック

Addquicktag導入5

設定は①、②、③を記入して最後に「変更を保存」をクリック

Addquicktag導入6

① ボタン名

ボタンの名前です。自分が分かりやすい名前を付けます。 今回は「文字に囲い」にしました。

② 「開始タグ」と「終了タグ」

HTMLの「開始タグ」と「終了タグ」です。
「開始タグ」のところに以下をコピペしてください。詳細はのちほど。

「終了タグ」はこちらです。

③ ボタンの設置場所

ボタンの設置場所ですが、全部チェックを入れとけばOKです。

Addquicktag導入7

Addquicktagの使い方

「ビジュアルモード」でも「テキストモード」でも、どちらでも「AddQuicktag」が使えるようになっています。

私は、ほとんど「ビジュアルモード」は使わないのですが、初心者の方のために今回は「ビジュアルモード」での使い方です。

といっても、ボタンを押すだけですが。 (#^.^#)
まず記事を書きます。

Addquicktag導入8

囲みたいところを選択します。

Addquicktag導入9

「Quicktags」から「文字を囲む」を選びクリック

Addquicktag導入10

リストの部分が枠で囲まれ、見やすくなりました。

Addquicktag導入11

背景や枠の色を変える

今回、囲んだときの背景色や枠の色は適当に選んだものなので、色の変え方を説明します。自分の記事にあったスタイルを作ってください。

「開始タグ」のところを書きかえれば色などいろいろ変えることが出来ます。

  1. 囲んだ背景の色
    #f7f7f7を違うものにすれば背景色は変わります。
  2. 枠と中の文字との隙間
    今回数値は一個なので上下左右10pxの隙間です。数値を変えれば、隙間は変化します。
  3. 枠から外側の隙間
    数値が4つなので、順番に上、右、下、左です。今回のは下に30pxの隙間です。
  4. 角を丸める
    数値を大きくすれば、もっと角が丸くなります。
  5. 枠の設定です。
    今回は2pxの太さで、実線(solid)で、色が#CCCCCCです。「#CCCCCC」を変えれば、枠の色が変わります。点線はdottedです。

 

いろいろと数値をかえたりして試してください。

ではでは^^