前回に引き続き、画像や文字などの枠線について。おさらいも含めます。
次の回の「見出し」にも関係してくるので書いておきます。
線を引く場所や太さ、色
どこの線？
囲む border
border:solid red 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
※paddingは文字のまわりの余白。前回の記事で紹介したmarginを加えてもOK！ しかも－(マイナス)の数字も設定可能ですよ。
上だけ border-top
border-top:solid blue 5px;
padding: 8px 8px 8px 8px;"
あかさたなはまやらわ
右だけ border-right
border-right:solid orange 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
下だけ border-bottom
border-bottom:solid green 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
左だけ border-left
border-left:solid pink 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
左と下 border-leftとborder-bottom
border-left:solid pink 5px;
border-bottom:solid green 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
線の太さ
border-width
border:solid red;
border-width:2px 4px 6px 8px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
線の種類
none 枠線なし
※ボーダーの幅の値は強制的に０となります
border:solid none 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
solid 実線
border:solid blue 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
double 二重線
border:solid double 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
dotted 点線
border:dotted blue 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
dashed 破線
border:dashed blue 5px;
padding: 8px 8px 8px 8px;
あかさたなはまやらわ
色
【#D22C2C】
border:solid #D22C2C 5px;
あかさたなはまやらわ
【#23a887】
border:solid #23a887 5px;
あかさたなはまやらわ
「カラーコード」で検索すれば色々なサイトがみつかります。
私がお世話になったサイトはこちらです。ありがとうございます。
WEBカラーチャート HTML・CSSで使える色の見本一覧 - PEKO STEP
【推奨】デザインCSSや、スマホの記事下等に設置する
出来上がった設定は、デザインCSSや、スマホの記事下等に設置しましょう。
設置場所、設置方法はこちら。
文字サイズと行の高さを変更 - 雪ん子’s report
例）デザインCSS ページ全部に適用
.entry-content {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
例）デザインCSS 画像のみに適用
.entry-content img {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
例）スマホ記事下 ページ全部に適用
<style type="text/css">
.entry-content {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
</style>
例）スマホ記事下 画像のみに適用
<style type="text/css">
.entry-content img {
background-color: lightblue;
padding: 8px 8px 8px 8px;
border:ridge blue 20px;
}
</style>
スマホの記事下に設置する際は
<style type="text/css">
</style>
で挟むのを忘れずに。
文中で設定する場合
一時的に使用するなら文中に直接入力してもいいと思います。
例）文字のまわりだけ
<span style="border:solid #23a887 5px;padding: 8px 8px 8px 8px;">あかさたなはまやらわ</span>
あかさたなはまやらわ
例）文字のあるブロックごと
<div style="border:solid #23a887 5px;padding: 8px 8px 8px 8px;">あかさたなはまやらわ</div>
たぶん一部だけ変える方法も、もっと簡単なのがあるはずですので探してみます。
追記）一部だけ変える方法もCSSで設定できることを発見。こちらで紹介しています。
デザインCSSやスマホ記事下に設定をオススメする理由はこちら。
見出しをカスタマイズ - 雪ん子’s report
以上、参考にしてみてくださいね。
