2019/11/06 (更新日: 2020/05/04)

WordPressで囲み枠をワンクリックで使う方法【簡単2ステップ】

今回は、WordPressで囲み枠をワンクリックで使う方法について解説します。

『毎回コードをコピーして、テキストエディタに貼り付けるのがめんどう…』というお悩みをお持ちの方は必見です。

また、囲み枠をしたことがない方も実践できるのでぜひお試しください。囲み枠をつける事で、自然と読者が読みやすいようなサイトをつくる事ができます。

囲み枠の設定方法

今回囲み枠の設定を説明する際に使用する囲み枠はこちらです。皆さんは自身が設定したい囲み枠でお試しください。まだ囲み枠をしたことがない方はこちらの囲み枠でも設定可能です。下記はこの囲み枠のCSSになります。
.bluebox {
	padding: 20px;
	margin: 20px 0;
	background: #f8f9ff;
	border-radius: 8px;
}

 

では、まず最初にCSSを追加しましょう。WordPressの外観からカスタマイズをクリックします。

その後、メニューにある追加CSSをクリックします。

次に、自身が設定したい囲み枠のCSSをコピペし、右上の『公開』をクリックします。

これでCSSの追加ができました。

 

次に『AddQuicktag』というプラグインをインストールします。

『AddQuicktag』とは、あらかじめ任意のコードを登録することができ、記事内で簡単にコードを挿入することができるようになります。簡単に言うと装飾のお気に入り登録機能のようなものです。

では、インストールしていきましょう。プラグインの新規追加をクリックします。

その後、キーワードに『AddQuicktag』と入力し、今すぐインストールをクリックします。

インストールが完了しましたら、そのまま有効化をクリックして下さい。

その後、設定の『AddQuicktag』をクリックします。

コードを登録していきましょう。まず『ボタンのラベル、ダッシュアイコンラベル名』は設定する囲み枠の名前の入力です。自分の分かりやすい名前を2箇所に記述して下さい。

次に『開始タグ* と終了タグ(s)』ですが【class=”〇〇”】の部分のみ、追加CSSで設定したクラス名を入力してください。その他は下記の通りの入力で大丈夫です。

最後に右端のチェックボタンを押し、変更を保存をクリックして下さい。

これで囲み枠の登録が終わりました。実際に使用して見ましょう。

投稿ページで囲み枠をつけたい文字を選択し『Quicktags』で設定した囲み枠をクリックします。

プレビューするときちんと囲み枠が設定されているのが確認できます。

以上で、設定完了です。

『Quicktags』では複数の囲み枠を登録することができるのでぜひお試し下さい!!

 

おすすめ誰でもわかるWordPressブログの始め方【月額500円】

おすすめAmazonアソシエイト審査に『ブログ開設2週間10記事』で合格した方法

ブログで稼ぎたい方はこちら
誰でもわかるWordPressブログの始め方