WordPress HTMLタグだけで囲み枠が使える [CSS不要]

かつっぺ

みなさん、こんにちは。
記事のレイアウトセンスがなくて残念なかつっぺです(^^ゞ

これまでWordPressテーマ「エマノン・シリーズ」で使える文字装飾をいくつか紹介してきました。

囲み枠については、「エマノンシリーズで[デザイン囲み枠]を追加する方法」という記事も書いていました。

が、さらに調べたところ[CSSコード]を使わずHTMLタグだけでも使えることが分かりました。

検索したら一発でした(^^;

本記事は備忘録的な意味合いで書いていますが、お使いのWordPressテーマでデザイン囲み枠の機能がない場合の参考になる内容です。

CSSコードなしで使える囲み枠HTMLタグの一例

本ブログの基本カラーはブルーなので、今後多用するであろう囲み枠

かつっぺblogよろしくです。

[HTMLタグ]
<div style=”border: 5px solid #add8e6; padding: 10px; border-radius: 10px; background: ##ffffff;”>かつっぺblogよろしくです。</div>
引用元: みーこの自宅でネットビジネスさん

元タグはみーこの自宅でネットビジネスさんで紹介されているタグを使用させていただきました。

枠の幅を小さくしたいときは、「width: 80%;」を加えます（80部分の数字で調整できます）。

[HTMLタグ]
<div style=”border: 5px solid #add8e6; padding: 10px; border-radius: 10px; background: ##ffffff; width: 80%;”>かつっぺblogよろしくです。</div>

かつっぺblogよろしくです。

コードの属性とカスタマイズ方法

枠の横幅を小さくできたように、枠自体を簡単にカスタマイズすることもできます。

具体的には、HTMLタグ内のコードを把握して、線種の変更や数値の変更を行います。

枠の色を変えたいとき「border: 5px solid #add8e6;」の#以下を原色大辞典を参照に変更

線の種類を変えたいとき「border: 5px solid #add8e6;」のsolodを次のように変更
・点線「dotted」
・二重線「double」

線の太さ変えたいとき「border: 5px solid #add8e6;」の「5px」を変更
・点線「dotted」
・二重線「double」

テキスト枠の角の丸みがいらない場合「border-radius: 10px」を「border-radius: 0px」に変更

背景色を変えたいとき「background: ##ffffff;」の#以下を原色大辞典を参照に変更

枠内側の余白幅を変えたいとき「padding: 10px;」の10pxの数字を変更。

太さ、幅など数字を変えたい場合、数字が大きさに比例して太さ、幅が変わります。

まとめ

いかがでしたか。

私みたいな初心者でもHTMLタグで簡単に囲み枠を使うことができちゃいます。

よく使うタグはプラグイン『AddQuicktag』でタグを登録しておけばよいです。

こちらで登録方法を説明しています。
「あわせて読みたい」囲み枠をAddQuicktagに追加する

いちいちコード変更が面倒くさいなという方は、私が参考にさせていただいた
「みーこの自宅でネットビジネスさん」にHTMLタグ一覧がありますので、そちらをご参照ください。

検索順位トップ10へ中小企業様に“エマノン・ビジネス”をお勧め