いぬくら。

マイクラの世界をまったりのんびり楽しみます♡

CSS で テキストボックス(囲み枠)を お洒落に魅せる

 

hello

▼・ェ・▼デス

おもむろに、Blog Customize の記事を投入。

 

 

 

 

この日記で、『やりたいことリスト』や『Game Property』を

わかりやすく目立たせてくれている「テキストボックス(囲み枠)」について

▼・ェ・▼の備忘録を兼ねてシェアします。 

 

 

今回お世話になったサイト

 

 

saruwakakun.com

 

 

サルワカさんデス。

猿でもわかるようにシェアしてくださっているので

▼・ェ・▼にもできましたありがとうございます!

 

30個もサンプルがあるので選びたい放題デス!

 

 

「やりたいことリスト」の 設定

 

 

f:id:bless-you:20180918213752j:plain

サルワカさんのサイトで「27.ラベルをつけたようなデザイン」の色や文字サイズを変えてます

 

 

HTML

<div class="box27">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

 

上記のコードを 日記編集画面の「HTML編集」にて任意の位置に貼り付けます。

 

 

f:id:bless-you:20180918215405j:plain

表示させたい位置の <p> タグの間に、コードを貼り付ける

 

 

あとは、見たまま編集画面に戻って

「ここに文章」と表示されている部分にリストを作成するだけ! 

 

 

CSS

/* やりたいことリスト */
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #b88884;/* ラインカラー */
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 15px;/* タイトルフォントサイズ */
background: #b88884;/* タイトル背景カラー */
color: #ffffff;/* タイトルフォントカラー */
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;

 

 

デザイン設定>カスタマイズ>デザインCSS に上記のコードを追加。

 

 

 

上記のコードのまま貼り付けると、▼・ェ・▼のBlogと同じになります。

背景色や、文字の色・サイズを変更したい場合は

コード内の赤字部分を好みの数値・コードに変更すればよいだけ。

 

 

ちなみに、▼・ェ・▼が色コードで よく利用するのは以下のサイト。

 

 

www.colordic.org

 

 

 

「このGameのProperty」の設定

 

f:id:bless-you:20180918220937j:plain

サルワカさんのサイトで「26.枠の途中にタイトル」の色や文字サイズを変えてます 

 

 

*貼り付ける場所・設定・編集の仕方は、上の項目と同じです。

 

 

 HTML

<div class="box26">
<span class="box-title">このGameのProperty</span>
<p>ここに文章</p>
</div>

 

CSS

/* このGameのProperty */
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #767c6b;/* ラインカラー */
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 17px;/* タイトルフォントサイズ */
background: #FFF;/* タイトル背景カラー */
color: #767c6b;/* タイトルフォントカラー */
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}

 

 

 

 

 

ってところで、今日はおしまいデス。
どなたさまも素晴らしいブログライフを! *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

 

゚*。.ღ ⊹⊱ £ονё & βLёss уoц ⊰⊹ ღ.。*゚
Thank you.
I love you.