【HTML】ワードプレスで囲み枠を作る方法

スポンサーリンク

ワードプレスで囲み枠を作る

 

ブログを書いていく上で欠かせないのが、「記事の見やすさ」です。囲み枠を記事に取り入れることで、文章の大事な部分や強調したいところを閲覧者に伝えることが出来ます。

 

囲み枠って何ぞや?

 

よくブログ記事を見ているとこんな風に、文字を四角で囲われている部分を見かけると思います。

 

【記事作成のポイント】

・画像を取り入れよう
・見出しをつけよう
・大事な部分は強調する!

囲み枠で囲われている文章は「大事な部分」です。伝えたい要点を文章を閲覧している人に分かりやすく伝えることが出来ます。

【注意】ワードプレス新エディタでは作成できない

 

ワードプレスは2019年にVer.5.0にアップデートされました。アップデートによって、記事作成のエディタが新しくなりました。つい最近ブログを始めたというかたはきっと「新エディタ」だと思います。

旧バージョンと記事作成画面が全く異なり、方法も新しくなりました。いまから紹介する囲み枠の作成は、新バージョンではできません!ですので、囲み枠を記事に取り入れたいという方は、別記事で紹介している「旧バージョン(クラシック)」への戻し方を参照ください。

 

【旧エディタへの戻し方】https://benrinet.work/2020/02/02/636/

【ワードプレス】新エディタで囲み枠を作れない!対策は?
ワードプレス5.0から強制的に新エディタに ワードプレスVer5.0にアップグレードしてからだいぶ経ちました。 アップグレードによって、Ver5.0以前までとは違ったエディタに変わりました。 旧バージョンでは実際にブロ...

 

囲み枠を設置する手順

 

では、早速囲み枠の作り方を紹介していきます。HTMLタグを自分で作る必要はなくて、コピペだけで設置することが出来ます。

今から紹介する手順で、チャレンジしてみて下さい。

 

テキスト表示にする

 

クラシックエディタの右上にある「テキスト」をクリックします。

 

すると初心者にとってよく分からぬ記号が沢山出てきます。

では、赤枠で囲った部分に今から囲み枠を設置することにします。

 

 

HTMLタグを挿入する

 

囲み枠を作りたい部分に、「HTMLタグ」を挿入します。

※HTMLタグはこの後の文章で紹介します。

 

 

赤枠で囲った部分に、HTMLタグを挿入しました。そしたら、テキスト表示からビジュアル表示に戻してみます。

 

 

こんな感じで、囲み枠を作ることに成功しました。手順はたったこれだけです。

 

囲み枠のHTMLタグ

 

ここからは囲み枠のHTMLタグを紹介していきます。お好みのタグを見つけて、先ほど紹介した手順でHTMLタグを挿入して、囲み枠をつくっていてください。

 

四角い囲み枠(背景なし)

 

ごくシンプルなデザインです。

 

直線枠

 

ココに文章を入力

 

【HTMLタグ】

<div style=”border: 1px solid#eddbff; padding: 10px;”>
ココに文章を入力
</div>
直線枠(ちょっと太め)

 

ココに文章を入力
【HTMLタグ】
<div style=”border: 3px solid#eddbff; padding: 10px;”>
ココに文章を入力
</div>
直線・角が丸い

 

ココに文章を入力

 

【HTMLタグ】

 

<div style=”padding: 10px; border: 1px solid #555555; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;”>
ココに文章を入力
</div>

点線枠

 

赤い点線枠

 

ココに文章を入力
【HTMLタグ】
<div style=”background: #fff; padding: 10px; border: 2px dotted#ff0000;”>
ココに文章を入力
</div>

コメント

  1. […] 【HTML】ワードプレスで囲み枠を作る方法 […]

  2. […] 【HTML】ワードプレスで囲み枠を作る方法 […]

  3. […] […]

  4. […] […]

%d人のブロガーが「いいね」をつけました。
タイトルとURLをコピーしました