【プラグイン不要】WordPressの文章に囲み枠をつける方法【コピペOK】

文章に囲み枠をつけたい人

「ワードプレスを使ってブログを書いているけど、文章に囲み枠を付けたい。プラグインはあまり使いたくないけど、何かいい方法はないのかな。」

こういった人に向けた内容です。

結論ですが、文章にこういった囲み枠をつけるのは、テキストエディターのみでも可能です。

この記事の主な流れ

  • WordPressの文章に囲み枠をつける方法
  • 囲み枠のデザインをカスタマイズする方法
  • 囲み枠を効率的に使うための3つの方法

この記事では囲み枠をつける方法からカスタマイズ方法までを、初心者でもできるように丁寧に解説していきます。



WordPressの文章に囲み枠をつける方法

早速本題ですが、WordPressの文章に囲み枠をつける手順は以下のとおりです。

  • ①:テキストエディタに切り替える
  • ②:コードを入力する ← コピペOK
  • ③:テキストを入れる

それぞれ順に解説していきます。

①:テキストエディタモードに切り替える

WordPressには「ビジュアル」と「テキスト」の2つのエディタモードがあり、囲み枠を入れる場合はテキストエディタの方を使用します。

上記のようにエディタのテキストをクリックすればOK。

②:コードを入力する

囲み枠を入れたい場所に、以下のようなコードを追記します。

<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選【選ぶコツも紹介します】

というわけで今回の内容は以上となります。

この記事の内容を参考に、読者の方にとって読みやすい記事を作成してみてください。

オススメ【初心者向け】WordPress学習におすすめしたい3冊の本

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA