成長因子 育毛薬

【囲み枠コード】ワードプレス記事内の文章を枠で囲み背景色を付ける方法

 

ワードプレス記事内の文章を枠で囲み背景色を付けたのを
見かけられたことはないだろうか?

 

なんかプラグインなんかでチャチャとできそうな
気がしませんか?

 

夢見るファンタジー思考で調べてみましたが
どうもできそうにありません(笑)

 

地味に囲み枠コードで囲むしかなさそうです。

 

 

囲み枠コードの基本型

 

【囲み枠コード】

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。</div>

 

上記コードは下記になります。

 

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

一般的に使うとしたら文字を原色に近い色で囲み
背景色は囲んだ色よりトーンを落とすみたいな感じが
多いのではないでしょうか?

 

色コードも地味に合わすしかありません。

 

Web色見本原色大辞典はこちら

 

参考サイトはこちら(青色 – color-sample.com)

 

 

 

囲み枠コードのborderは枠の種類です。
border: solidは一般的な枠(実線)になります。

 

 

これをborder: doubleにしてみます(二重線)

 

 

<div style="padding: 16px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。</div>

 

二重線に変わりました。

 

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

 

 

その他にも

●dotted(点線)

●dashed(幅広の点線)

●none(無し)

●border-radiusは枠の角を丸くする記述です。数値を上げることでより丸みが出ます。角があったほうが良い方は消してください。

●background-colorは背景色です。

●margin-topとmargin-bottomは枠の余白部分の幅になります。

 

 

特殊な囲み枠コードもあります。

 

 

<div style="border: 10px outset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

 

 

囲みの中の文章

 

 

 

色々研究されるとサイトにメリハリがつき訪問者も楽しめるのでは
ないでしょうか?

 

 

 

 

Affiliate AZ club(AAC)無料メルマガ

メルマガの詳細を確認する

コメントを残す

サブコンテンツ

管理人について

ヒロです。兵庫県でアフィリエイトしています。
長年不動産の仕事をしていました。
ネットビジネスで迷える人
の最後の砦になりたい
と思っています

 

詳しいプロフィールはこちら

無料メルマガ配信中

再現性の高いノウハウと 実践手順を示したメルマガを始めました。

 

 

体験したい方は下記から

 

 

Affiliate AZ club(AAC)

 

お問い合わせフォーム

質問・相談困ったこと
いつでもお気軽にご連絡ください。

迅速に返信させて頂きます。

お問い合わせ

このページの先頭へ

%d人のブロガーが「いいね」をつけました。
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status