WordPressで囲み枠をワンクリックで使う方法【簡単2ステップ】
今回は、WordPressで囲み枠をワンクリックで使う方法について解説します。
『毎回コードをコピーして、テキストエディタに貼り付けるのがめんどう…』というお悩みをお持ちの方は必見です。
また、囲み枠をしたことがない方も実践できるのでぜひお試しください。囲み枠をつける事で、自然と読者が読みやすいようなサイトをつくる事ができます。
囲み枠の設定方法
.bluebox {
padding: 20px;
margin: 20px 0;
background: #f8f9ff;
border-radius: 8px;
}
では、まず最初にCSSを追加しましょう。WordPressの外観からカスタマイズをクリックします。
その後、メニューにある追加CSSをクリックします。
次に、自身が設定したい囲み枠のCSSをコピペし、右上の『公開』をクリックします。
これでCSSの追加ができました。
次に『AddQuicktag』というプラグインをインストールします。
『AddQuicktag』とは、あらかじめ任意のコードを登録することができ、記事内で簡単にコードを挿入することができるようになります。簡単に言うと装飾のお気に入り登録機能のようなものです。
では、インストールしていきましょう。プラグインの新規追加をクリックします。
その後、キーワードに『AddQuicktag』と入力し、今すぐインストールをクリックします。
インストールが完了しましたら、そのまま有効化をクリックして下さい。
その後、設定の『AddQuicktag』をクリックします。
コードを登録していきましょう。まず『ボタンのラベル、ダッシュアイコンラベル名』は設定する囲み枠の名前の入力です。自分の分かりやすい名前を２箇所に記述して下さい。
次に『開始タグ* と終了タグ(s)』ですが【class=”〇〇”】の部分のみ、追加CSSで設定したクラス名を入力してください。その他は下記の通りの入力で大丈夫です。
最後に右端のチェックボタンを押し、変更を保存をクリックして下さい。
これで囲み枠の登録が終わりました。実際に使用して見ましょう。
投稿ページで囲み枠をつけたい文字を選択し『Quicktags』で設定した囲み枠をクリックします。
プレビューするときちんと囲み枠が設定されているのが確認できます。
以上で、設定完了です。
『Quicktags』では複数の囲み枠を登録することができるのでぜひお試し下さい!!
