皆さん、色々なサイトを見ていると、
枠で囲んである文章などを
見ることがありませんか？？私のブログでも枠はたま〜に登場していますが、
枠で表示を区切る事が出来ると、非常に見やすくなります♪
今日は、
記事の中で説明文の部分を分りやすくしたい時、
ブログ内に、枠で囲んで表示できたらいいのにな〜というものがあった時に、
枠で囲んでしまう、
囲い枠の作り方をお伝えしたいと思います(^-^)
枠は、
自由形式でも、記事でも、ＨＴＭＬを入力できる所なら、
枠をつける事が出来ます(^-^)
まず、
スタイルシートに枠を表示するためのタグを作成します。以下がタグの見本です(^-^)
.tensen{
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
以上、色別に分けて表示した、変更可能な部分ごと、お伝えしますね♪
●
tensen・・・
この "tensen”という部分には、
自分のわかり易い言葉を
半角で入力して下さい。（半角なら、何でも大丈夫です♪）
数字を入力すると、枠が反映されないブラウザがあるようです。ですので、数字は使わない方がいいかと思います(^-^)
●
2px・・・
これは
枠の線の太さ（幅）になります。数値が大きければ、太い線になります。線の種類によってはある程度の太さがないと分り辛いものもあります。
●
dotted・・・
これが
線の種類になります。 下記で種類ごとにタグを表示します(^ｰ^)
●
#ff9966・・・
枠線の色です。自分の好きな色に設定してください。
●
5px 5px 5px 5px・・・
枠の中に入力した文字の位置を指定するための数値です。全て同じ数値にする事で、上下左右、どこも枠から枠内の文字までの
幅が同じ幅となります。(枠をめいいっぱい使って入力した時）
これも、自分の好きなように、設定可能です♪
●
#ccffcc・・・
枠の中の背景色です。枠線の色と同じく、自分の好きな色に設定してください。
●
370px・・・
枠の横幅です。縦は、入力する文字数、行数によって、自動で変化しますが、
横は指定します。
自分のブログのコンテンツ部分（記事を表示する部分など）や、
サイドバーなど、
自分が枠をおきたいところの幅をチェックして、
その幅からはみ出さないように、数値を設定して下さい♪以上でお伝えした部分を自分の好きな様に変更して、設定します♪
例として線の種類がどういった風にそれぞれ表示されるか、
そのタグの例と一緒に表示してみます(^-^)
破線を使った枠です。
.hasen{
border: 2px dashed #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
直線を使った枠です。
.itisen{
border: 2px solid #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
点線を使った枠です。
.tensen{
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
2重線を使った枠です。
.nisen{
border: 3px double #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
これらのタグをそのままコピーして、スタイルシートに貼り付け、
自分が変更したい所だけ削除して入力し直す・・・。というやり方をするのが一番間違いがないかと思います(^ｰ^)
ちなみに２重線は、
3px以上でなければ２重線にならない様です。
2重線を使用したい場合は、
最低でも線の太さは3px以上に設定して下さいね♪
こうして作った枠を、実際にスタイルシートに設定して使うには
どうするか、お伝えしますね(^-^)
続きに行く前に、こちらもポチッとお願いします♪
続きを読む
