ワードプレスで自作テーマ作成-L16 囲み枠を作る-

2020年2月15日

ワードプレスで自作テーマ作成シリーズ
今回は「L16 囲み枠を作る」方法をご紹介します。

この記事を見れば囲み枠を記事中に簡単に挿入できるようになります。

囲み枠があることによって記事にメリハリがでます。また、注目させたい部分を目立たせることができます。

とても簡単2ステップでできます。CSSにコピペして、AddQuicktagというプラグインの設定をするだけ。

AddQuicktagを利用することによって囲み枠を適用する際は、適用したい文章を選択して2クリックで適用できるようになります。

AddQuicktagは他にも使える便利なプラグインなのでぜひいれておくことをおすすめします。

囲み枠のデザインはこちらのブログを参考にさせていただきました。CSSを編集することでお好きなデザインを楽しむことができます。

ぜひいろいろなデザインをためしてみてください！

上記のような囲み枠を記事中に入れられるようにします。

①style.cssの編集

「style.css」に以下を記入してください。

「AddQuicktag」というプラグインを使うことで投稿画面から簡単に囲み枠を挿入できるようになります。

AddQuicktagのインストール

「AddQuicktag」のインストール方法、使用方法については以下の記事で解説しています。
https://realinfojpn.xsrv.jp/addquicktag-673.html

以下のように入力し「変更を保存」をクリックしてください。

ボタン名：ボックス（任意）
ラベル名：ボックス（任意）
開始タグ：<div class=”box”><p>
終了タグ：</p></div>
順番：0

また、ビジュアルエディタ－、post、page、attachment、comment、edit-comments、widgetsにチェックを入れてください。（一番右のチェックマークにチェックを入れると全てにチェックを入れることができます。）

記事の投稿画面で囲み枠を適用したい文章を選択しこのボックスをクリックすると囲み枠が適用されます。投稿画面では適用されていないように見える場合、プレビューで確認してみてください。