AddQuickTagの使い方実践編「第３回：枠・ボックス」

この記事では、WordPressプラグインのAddQuickTagで枠・ボックスを挿入する方法を解説します。※この後の説明では呼び方を枠に統一します。

「まだAddQuickTagをインストールしていない方」や「AddQuickTagってなに？という方」は、AddQuickTagの設定方法と使い方の記事を読んでみてください。インストール方法や基本的な使い方について説明しています。

この記事の目次

枠はどうやって挿入するの？
枠用のCSSクラスを作成する
AddQuickTagに枠用のタグを設定する
エディターで枠を挿入してみよう

枠はどうやって挿入するの？

枠を挿入する手順は次の通りです。

枠用のCSSクラスを作成する
エディターで枠で囲みたい文字列をdivタグで囲む
divタグに枠用のCSSクラスを設定する

Web上での実際の表示とエディターでのHTMLは次のようになります。

Web表示（例）

枠タイトルなし
タイトル
枠タイトルあり

HTML（例）

<div class="box1">枠タイトルなし</div>

<div class="box2"><div class="box-title">タイトル</div>枠タイトルあり</div>

AddQuickTagを使えば、「❷文字列をdivタグで囲む」のと「❸divタグへのCSSクラスの設定」を１クリックで行ってくれます。そのため、手入力するのに比べて何倍も早く作業が行えます。

またCSSクラスの設定内容によって、枠の色や線の種類、ラベルのつけ方などさまざまな枠を挿入することが可能です。

Web表示（例）

枠１

タイトル

リスト１
リスト２
リスト３

枠用のCSSクラスを作成する

まず、マーカーに使用するCSSクラスを作成します。今回紹介するのは先ほど例にも出したタイトルなしの枠とタイトルありの枠です。

今回紹介するデザイン

枠タイトルなし
タイトル
枠タイトルあり

次のコードをテーマのスタイルシートに追加してください。

CSS（例）

/* タイトルなしの枠 */
.box1 {
    padding: 1em;
    margin: 2em 0;
    border: solid 2px #fba848;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/* タイトルありの枠 */
.box2 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #ff9f43;
    background: #fffbf4;
}
.box2 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #ff9f43;
    color: #ffffff;
    font-weight: bold;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

スタイルシートの編集方法がわからない方は、WordPressでCSSを編集する方法の記事を参考にしてください。