HTML
ブログで記事を書いていると、文字を大きくしたり色を付けたり下線を引いたりといろいろと装飾したり強調したくなりますよね。ワードプレスでは「TinyMCE Advanced」というプラブインを入れることで簡単に文字の強調や装飾などが出来るようになります。

しかし、記事の一部の文章を枠で囲んだり色をつけて強調するにはHTMLタグを使う必要があります。 誰もが一度は枠で囲って強調したい、と考えたことがあるのではないでしょうか?

そこで今回は、ワードプレスで使える文章を枠で囲む方法をご紹介します。 この方法はワードプレスだけでなく、無料ブログで記事を書くときにも使えます。

コピペで使えるのでぜひ使ってみてくださいね。

HTMLとは

「そもそもHTMLってなに?」
という人も多いのではないでしょうか?

HTMLとはワードプレスや無料ブログなども含めたWEBページを構成する半角英数字の文字列です。 文字を大きくしたり色を付けたりするにはHTMLをいじらないと出来ません。

ワードプレスでは「TinyMCE Advanced」のプラグインを使うことで、文字を装飾するときにHTMLタグを入力する必要がありません。

しかし、記事内の文章の一部を枠で囲んだり色をつけたりするには「TinyMCE Advanced」だけでは設定することができないので、HTMLタグを入力する必要があります。

では早速、文章を枠で囲む方法をご紹介していきます。

ワードプレス記事を枠で囲んで色をつける方法

ここに文章を入力します。

例として、赤い枠とピンク色の背景で文章を囲んでみました。

こちらが上記の赤い枠とピンク色の背景のHTMLコードになります。 コピペして使うことができます。

HTMLの解説

こちらでは上記のHTMLの色や枠の太さなどの変更する方法をご紹介していきます。

◆padding:

枠の幅を表す数値です。 padding: ○pxの○部分の数字を上げることで枠が広がります。

◆border:

枠の種類を表しています。 
上記のHTMLではborder: solid 2px #FF0000

solidは上記のような一般的な枠

dottedは点線

doubleは二重線

dashedは幅広の点線

noneは枠線なし

2pxは枠線の太さを表し、#FF0000は枠線の色を表しています。

◆border-radius:

枠の角を丸くします。数値を上げることでより角が丸くなります。 角を丸くしたくない場合は、border-radius自体を消してください。

◆background-color:

背景色を表します。

◆margin-topとmargin-bottom

枠の余白部分の幅を表します。 数値を上げることで余白の部分が広がります。

※色の設定は原色大辞典を参考にしてください。

まとめ

記事の装飾をすることで、読んでもらいたい部分をしっかり読んでもらうことができますし、読者もメリハリが出て読みやすくなるという、両者にとってメリットが出てきます。

色や枠の太さ、種類は各自好みが分かれるので、いろいろと数値や色を変更して使ってみてくださいね♪

確実に稼げる!「アフィリエイトスタートアップマニュアル」無料プレゼント中!

「アフィリエイトってなに?」
「さまざまな副業やネットビジネスを探している方」
「アフィリエイトやってみたいけど、どうやったらいいのかわからない」
「アフィリエイトって本当に稼げるの?」

このような悩みをお持ちの方が、アフィリエイトで稼ぐのに欠かせない基礎知識を身につけ、実際にアフィリエイトで稼いでもらうための「アフィリエイトスタートアップマニュアル」をご用意させていただきました。

「アフィリエイトスタートアップマニュアル」は、以前9,800円で販売していましたが、今だけ期間限定特典として9,800円⇒0円でプレゼントしています。

LINE@に登録していただいた方の限定プレゼントなので、興味のある方はぜひ登録してプレゼントをGETしてくださいね♪

【アフィリエイトスタートアップマニュアル】
・稼ぐために必須の基礎知識
・初心者が最も成果が出やすく稼ぎやすい「トレンドアフィリエイト」のノウハウ
・初心者でも即稼げる○○アフィリエイトのシークレットノウハウ

特に「○○アフィリエイトのシークレットノウハウ」は、本当に初心者でも簡単に稼げてしまうので、
「アフィリエイトって本当に稼げるの?」といった不安を解消させます!!

 

無料プレゼントは、一定数に達したら終了しますので、無料でもらえる今のうちに、LINE@に無料登録してゲットしておいてくださいね♪

↓↓↓スマホの方はコチラ↓↓↓
友だち追加

↓↓↓PCの方はスマホで読み取ってください↓↓↓