ボタン1つでOK！WordPressブログで文章を枠線で囲う方法

こんにちは、ぐっきんです。

WordPressでブログを運営していると、文字に枠をつけたくなることってありますよね。

例えばこんなの。

枠がつくだけでかなり見やすくなりますよね。

箇条書きなんかも枠で囲んでみましょう。

こうすると要点をまとめる時などに見やすくて非常に便利ですね。

というわけで、今回はこのような便利な枠をボタンひとつで簡単に使えるようにする方法をお伝えしたいと思います。

事前に入れておくべきプラグイン

文章を枠線で囲う際には以下のプラグインが必要になるので、必ず導入しておいてください。

それぞれのリンクをクリックすると解説ページに飛びます。

枠線を表示させる方法

まず基礎知識として知っておいてほしいのが、枠線を表示させるためには、CSSとHTMLの2つのコードが必要になるということです。

それぞれの役割を簡単に説明すると、

となります。

CSSに自分の気に入った枠のデザインを入れておき、HTMLコードでそのデザインを呼び出すという感じですね。

まずは練習として以下の枠を使えるようにしてみましょう。

この枠を使うためのCSSとHTMLは以下になります。

＜CSS＞

＜HTML＞

以下でこれらのコードをどのように使っていくのかを解説ていきたいと思います。

CSSとHTMLの使い方を解説

動画で解説

動画の方が分かりやすいと思いますので、まずはこちらの動画を見ながらやってみてください。

CSSをスタイルシートにコピペ

動画を見れない状況の人のために文章でも解説をしていきたいと思います。

１．まずはブログのダッシュボードに入り、「外観」→「CSS編集」と移動します。（「CSS編集」という項目は、Jetpackを導入していない場合は出てきませんので注意してください）

２．先ほどコピペしたCSSコードをスタイルシートエディタに貼り付けて保存します。

CSSの設定はこれで完了です。

HTMLコードをボタン１つで呼び出せるようにする

CSSを設定したら、次はHTMLコードをボタン１つで呼び出せるように設定していきましょう。

１．ダッシュボードから「設定」→「AddQuicktag」と移動

２．下記の画像のように設定する

HTMLコードの中で必要なのは、赤い部分だけなので、上の部分を開始タグ、下の部分を終了タグのところに入力してください。

ボタン名のところは自分で覚えやすい名前にしてもらってOKです。最後に一番右にチェックを入れるのも忘れないようにしてください。

実際に使ってみよう

１．投稿画面で囲みたい文字をドラッグし、Quicktagsの下矢印をクリック

２．先ほど「AddQuicktag」で作ったボタン名をクリック

３．プレビューでチェックし、文字が枠で囲まれていたら大成功です！

枠線はレシピさえ分かれば誰でも簡単に使える

ここまで実践してもらえれば分かると思いますが、枠線というのはCSSというレシピさえ分かってしまえば、誰でも簡単に使うことができます。

そして、ありがたいことにそのレシピを公開してくださっているサイトは世の中に沢山あります。

「CSS　コピペ　ボックス」と検索すればそういったサイトが沢山出てきますので、ぜひ検索して自分の気に入った枠を使ってみてください。

僕がよく参考にしているサイトもいくつか載せておきますね。

• 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
• CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン
• cssコピペでオシャレな囲み線や枠をメイクキング！
• コピペで可愛く装飾！ CSSのみでデザインする囲み枠（ボックスデザイン）

まとめ

枠線は分かりやすく情報を伝える上で非常に重要な役割を担っています。

ただし、あまり派手過ぎるものを選んでしまうと、逆に見づらくなってしまうので、枠線を選ぶ際には「見やすさ」というの重視して選ぶことをオススメします。

ぜひ見やすくてオシャレな枠をチョイスしてみてください！

オススメ⇒【超保存版】ワードプレスの記事投稿画面の使い方完全マニュアル！