「ワードプレスを使ってブログを書いているけど、文章に囲み枠を付けたい。プラグインはあまり使いたくないけど、何かいい方法はないのかな。」
こういった人に向けた内容です。
結論ですが、文章にこういった囲み枠をつけるのは、テキストエディターのみでも可能です。
この記事の主な流れ
- WordPressの文章に囲み枠をつける方法
- 囲み枠のデザインをカスタマイズする方法
- 囲み枠を効率的に使うための3つの方法
この記事では囲み枠をつける方法からカスタマイズ方法までを、初心者でもできるように丁寧に解説していきます。
スポンサーリンク
目次
WordPressの文章に囲み枠をつける方法
早速本題ですが、WordPressの文章に囲み枠をつける手順は以下のとおりです。
- ①:テキストエディタに切り替える
- ②:コードを入力する ← コピペOK
- ③:テキストを入れる
それぞれ順に解説していきます。
①:テキストエディタモードに切り替える
WordPressには「ビジュアル」と「テキスト」の2つのエディタモードがあり、囲み枠を入れる場合はテキストエディタの方を使用します。
上記のようにエディタのテキストをクリックすればOK。
②:コードを入力する
囲み枠を入れたい場所に、以下のようなコードを追記します。
<div style=”border:3px solid #CCC;padding:10px;border-radius:10px;”>ここに文章を記載する</div>
こちらがコピペ用のコード ↓
1 |
<div style="border: 3px solid #CCC; padding: 10px; border-radius: 10px;">ここに文章を記載する</div> |
上記をコピーして、エディタに貼り付けましょう。
できたらビジュアルモードに切り替えて、枠線がついてるか確認してみてください。
囲み枠がついてないんだけど、、、という方は
コピペをしてみると、場合によっては上記のコードがうまく反映されない場合があります。
原因は「”」の全角と半角。
エディタとかの影響によって、ここが崩れちゃってコピペできていないって感じですね。
なのでこの場合は、テキストモードの時点で全角の「“」を半角に変えてあげればOK。
これで反映されるハズです。
③:文章を入力する
最後に囲み枠の中の文章を編集しておきましょう。
ビジュアルモードに切り替えた時に「ここに文章を入力する」という部分を編集してあげればOKです。
たったこれだけで完成。文章に囲み枠がついた記事ができました。
とはいえ、「この囲み枠じゃサイトのデザインにイマイチ合わない」という方もいると思います。
なのでここからは、このデザインをベースにカスタマイズしていく方法をお伝えしていきますね。
囲み枠のデザインをカスタマイズする方法
囲み枠のデザインは、コードをちょっといじるだけで変えることができます。
ここで紹介する囲み枠のカスタマイズの内容が以下です。
- 色を変える
- 太さを変える
- 角の丸みを変える
- 点線に変える
- 背景の色を変える
- テキストの幅に合わせる
どれもほんの一部を変えるだけの簡単カスタマイズです。というわけで、それぞれ解説していきます。
カスタマイズ①:枠線の色を変える
色を変更する場合は「#〇〇;」という部分を変更すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
↓
<div style=”border: 3px solid #4169e1; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
ちなみにカラーコードは原色大辞典とかで調べられるので、そちらから好きな色を選んでみてください。
カスタマイズ②:枠線の太さを変える
線の太さを変更する場合は「border:5px」という部分を変更すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
↓
<div style=”border: 1px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
数字が大きければ太く、小さければ細いというイメージです。
ブログでは1〜3くらいが一般的じゃないかと思います。
カスタマイズ③:枠線の角の丸みを変える
角の丸みを変更する場合は「border-radius: 10px;」という部分を変更すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;“>ここに文章を記載する</div>
↓
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 0px;“>ここに文章を記載する</div>
0の場合は丸みなしで、数字が大きくなるほど丸くなるという感じです。
カスタマイズ④:枠線を点線に変える
枠線を点線に変える場合は「solid」という部分を「dashed」に変更すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
↓
<div style=”border: 3px dashed #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
ちなみに枠線をつけたくない場合は、「border:1px solid」→「border: none;」にすればOKです。
カスタマイズ⑤:枠線内の背景色を入れる
枠内に背景色を入れる場合は「background:#〇〇;」というコードを追加すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
↓
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px; background: #dcdcdc;“>ここに文章を記載する</div>
ここに関してもカラーコードで好きな色を選べるので、サイトのデザインに合わせて選ぶといいですね。
カスタマイズ⑥:囲み枠をテキストに合わせる
囲み枠の幅をテキストに合わせたい場合は「display:inline-block;」というコードを追加すればOK。
具体的には以下のイメージですね。
<div style=”border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
↓
<div style=”display:inline-block; border: 3px solid #CCC; padding: 10px; border-radius: 10px;”>ここに文章を記載する</div>
一応紹介しましたが、個人的にはあまり使わないものなのかなと思います。
囲み枠を効率的に使うための3つの方法
最後に囲み枠を効率的に使いたいという方のために、方法を3つほど紹介しておきます。
- 作成したコードをメモ帳に保存しておく
- プラグインを使用する
- 有料テーマを使う
当たり前の方法とかもありますが、それぞれ参考に確認してみてください。
作成したコードをメモに保存しておく
コードを保存していつでもコピペできるようにしておくというのが、今すぐできる効率化の方法です。
具体的な例としては以下の感じです。
上記は一例なので、自分のやりやすい形式でOK。
使うメモには注意
ちなみにですが、この方法で効率化を図る場合「メモ選び」は重要です。
コードに対応していないメモ帳を使うと、崩れてしまうこともありますので。
ひとまずはコードに対応したエディタであれば何でもOKなので、好きなものを探してみてください。
»参考:【Mac】プログラミング初心者におすすめのエディタは2つです
プラグインを使う
2つ目はプラグインを使った方法です。
プラグインを使わないためにやってきたのに、結構プラグインかよって思った方、、、スイマセン。
でも、「謎のプラグイン」を入れて枠線をつけるより「安心な効率化プラグイン」なので一応紹介させてください。
ここでお伝えするのは「AddQuicktag」というもので、僕も入れていますし多くのWordPressユーザーが使用しているものです。
どういったモノかというと、コードをWordPress内に保存しておいて、エディタ上で簡単に引き出せるようにするというプラグインです。
使い方は多様なので、超便利。
詳しい使い方は別の記事で紹介しているので、興味がある方は確認してみてください。
»参考:【効率化】WordPress記事の装飾プラグイン「AddQuicktag」の設定方法と使い方:タグ例付き
ちなみにですが、他にどんなプラグインは入れてOKなの?って疑問がある方は、おすすめを書いているのでそちらもどうぞ。
»参考:【初心者向け】WordPressに入れておきたいおすすめプラグイン6+5選
有料テーマを使う
最後にWordPressの有料テーマを使った方法です。
有料テーマには「ショートコード」というものが用意されていることが多く、これが記事作成の効率を爆速にしてくれます。
具体的には以下のようなことが、簡単にできるという感じです。
- 囲み枠
- 吹き出し
- ボタン
控えめにいってマジで便利なので、記事の作成だけに時間を使いたいという方は、無理のない範囲で購入してみるのもありだと思います。
おすすめテーマに関しては過去にも紹介しているので、そちらを参考にしてみてください。
»参考:【初心者ブログにおすすめ】ワードプレスの有料テーマ5選+無料テーマ1選【選ぶコツも紹介します】
というわけで今回の内容は以上となります。
この記事の内容を参考に、読者の方にとって読みやすい記事を作成してみてください。
コメントを残す