WordPress 文章を枠で囲んでみました

WordPressで作成しているサイトで文字や文章を枠で囲むときの方法です。

ポイントになるところを枠で囲むとパッと見て分かりやすくなったり、要点だけ知りたいときに探しやすくなると思います。

今回は、枠で囲む方法をメモっておきます。

WordPressを使っているなら枠で囲む方法は3つ

WordPressを使っているのであれば、プラグインを使った方法を含めて3つほどあるようです。

 1.HTMLコードを使う
 2.CSS+HTMLコードを使う
 3.プラグインを使う

1.HTMLコードを使う
 直にHTMLコードを書いていく方法。
 その時その時で自由にコードが書けるので、どんな枠でもスグに作れる。

2.CSS+HTMLコードを使う
 あらかじめCSSにコードを書いておいて、HTMLでそれを指定する方法。
 よく使うものをあらかじめCSSに書いておけば、スグに使える。

3.プラグインを使う
 プラグイン「Addquicktag」というものがあるそうです。
 プラグインでインストールしておけば、簡単に使えるそうです。

 

枠を囲むコードはとても簡単です

枠を囲むコードはとても簡単です。

たとえば、次のようなコードを書くだけです。

<div> style="padding: 16px; border: double 3px #0200ff; border-radius: 10px; background-color: #009900; margin-top: 30px; margin-bottom: 30px;">
 1.HTMLコードを使う 
 2.CSS+HTMLコードを使う
 3.プラグインを使う  
</div> 


これをWeb画面でみると、このように見えます。

 1.HTMLコードを使う
 2.CSS+HTMLコードを使う
 3.プラグインを使う

 

 

枠で囲む指定はこの1行でOK

枠で囲むには、この1行を書けばいいようですね。

style=”padding: 16px; border: double 3px #0200ff; border-radius: 10px; background-color: #00ff00; margin-top: 30px; margin-bottom: 30px;”

 

 

ちなみに、上のコードを下のように変更すると、このようになります。

style=”padding: 16px; border: dotted 10px #ff00ff; border-radius: 40px; background-color: #ffff00; margin-top: 30px; margin-bottom: 30px;”

 1.HTMLコードを使う
 2.CSS+HTMLコードを使う
 3.プラグインを使う

 

また、下のようなコードだけでもOKなようです。

style=”padding: 5px; border: dotted 2px #ff00ff; border-radius: 60px; background-color: #ffe4e1;

 1.HTMLコードを使う
 2.CSS+HTMLコードを使う
 3.プラグインを使う

 

上の枠をコピペできるようにコードを書いておきましょう。

<div> style="padding: 16px; border: double 3px #0200ff; border-radius: 10px; background-color: #009900; margin-top: 30px; margin-bottom: 30px;">
 1.HTMLコードを使う 
 2.CSS+HTMLコードを使う
 3.プラグインを使う
</div>

 

内容に誤り等がありましたら、ご指摘いただけますとうれしいです。
よろしくお願いいたします。

メール送信はこちらから 
https://koredeji.com/toiawase/