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

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

この記事の主な流れ

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

スポンサーリンク

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

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

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

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

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

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

②：コードを入力する

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

こちらがコピペ用のコード ↓

<div style="border: 3px solid #CCC; padding: 10px; border-radius: 10px;">ここに文章を記載する</div>

上記をコピーして、エディタに貼り付けましょう。

できたらビジュアルモードに切り替えて、枠線がついてるか確認してみてください。

囲み枠がついてないんだけど、、、という方は

コピペをしてみると、場合によっては上記のコードがうまく反映されない場合があります。

原因は「”」の全角と半角。

なのでこの場合は、テキストモードの時点で全角の「“」を半角に変えてあげればOK。

これで反映されるハズです。

③：文章を入力する

最後に囲み枠の中の文章を編集しておきましょう。

ビジュアルモードに切り替えた時に「ここに文章を入力する」という部分を編集してあげればOKです。

たったこれだけで完成。文章に囲み枠がついた記事ができました。

とはいえ、「この囲み枠じゃサイトのデザインにイマイチ合わない」という方もいると思います。

なのでここからは、このデザインをベースにカスタマイズしていく方法をお伝えしていきますね。

囲み枠のデザインをカスタマイズする方法

囲み枠のデザインは、コードをちょっといじるだけで変えることができます。

ここで紹介する囲み枠のカスタマイズの内容が以下です。

どれもほんの一部を変えるだけの簡単カスタマイズです。というわけで、それぞれ解説していきます。

カスタマイズ①：枠線の色を変える

色を変更する場合は「#〇〇;」という部分を変更すればOK。

具体的には以下のイメージですね。

ちなみにカラーコードは原色大辞典とかで調べられるので、そちらから好きな色を選んでみてください。

カスタマイズ②：枠線の太さを変える

線の太さを変更する場合は「border:5px」という部分を変更すればOK。

具体的には以下のイメージですね。

数字が大きければ太く、小さければ細いというイメージです。

ブログでは１〜３くらいが一般的じゃないかと思います。

カスタマイズ③：枠線の角の丸みを変える

角の丸みを変更する場合は「border-radius: 10px;」という部分を変更すればOK。

具体的には以下のイメージですね。

０の場合は丸みなしで、数字が大きくなるほど丸くなるという感じです。

カスタマイズ④：枠線を点線に変える

枠線を点線に変える場合は「solid」という部分を「dashed」に変更すればOK。

具体的には以下のイメージですね。

ちなみに枠線をつけたくない場合は、「border:1px solid」→「border: none;」にすればOKです。

カスタマイズ⑤：枠線内の背景色を入れる

枠内に背景色を入れる場合は「background:#〇〇;」というコードを追加すればOK。

具体的には以下のイメージですね。

ここに関してもカラーコードで好きな色を選べるので、サイトのデザインに合わせて選ぶといいですね。

カスタマイズ⑥：囲み枠をテキストに合わせる

囲み枠の幅をテキストに合わせたい場合は「display:inline-block;」というコードを追加すればOK。

具体的には以下のイメージですね。

一応紹介しましたが、個人的にはあまり使わないものなのかなと思います。

囲み枠を効率的に使うための３つの方法

最後に囲み枠を効率的に使いたいという方のために、方法を３つほど紹介しておきます。

当たり前の方法とかもありますが、それぞれ参考に確認してみてください。

作成したコードをメモに保存しておく

コードを保存していつでもコピペできるようにしておくというのが、今すぐできる効率化の方法です。

具体的な例としては以下の感じです。

上記は一例なので、自分のやりやすい形式でOK。

使うメモには注意

ちなみにですが、この方法で効率化を図る場合「メモ選び」は重要です。

ひとまずはコードに対応したエディタであれば何でもOKなので、好きなものを探してみてください。

»参考：【Mac】プログラミング初心者におすすめのエディタは２つです

プラグインを使う

２つ目はプラグインを使った方法です。

プラグインを使わないためにやってきたのに、結構プラグインかよって思った方、、、スイマセン。

でも、「謎のプラグイン」を入れて枠線をつけるより「安心な効率化プラグイン」なので一応紹介させてください。

どういったモノかというと、コードをWordPress内に保存しておいて、エディタ上で簡単に引き出せるようにするというプラグインです。

使い方は多様なので、超便利。

詳しい使い方は別の記事で紹介しているので、興味がある方は確認してみてください。

»参考：【効率化】WordPress記事の装飾プラグイン「AddQuicktag」の設定方法と使い方：タグ例付き

ちなみにですが、他にどんなプラグインは入れてOKなの？って疑問がある方は、おすすめを書いているのでそちらもどうぞ。

»参考：【初心者向け】WordPressに入れておきたいおすすめプラグイン６＋５選

有料テーマを使う

最後にWordPressの有料テーマを使った方法です。

有料テーマには「ショートコード」というものが用意されていることが多く、これが記事作成の効率を爆速にしてくれます。

具体的には以下のようなことが、簡単にできるという感じです。

控えめにいってマジで便利なので、記事の作成だけに時間を使いたいという方は、無理のない範囲で購入してみるのもありだと思います。

おすすめテーマに関しては過去にも紹介しているので、そちらを参考にしてみてください。

»参考：【初心者ブログにおすすめ】ワードプレスの有料テーマ５選＋無料テーマ１選【選ぶコツも紹介します】

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

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

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

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