hello
▼・ェ・▼デス
おもむろに、Blog Customize の記事を投入。
この日記で、『やりたいことリスト』や『Game Property』を
わかりやすく目立たせてくれている「テキストボックス(囲み枠)」について
▼・ェ・▼の備忘録を兼ねてシェアします。
今回お世話になったサイト
サルワカさんデス。
猿でもわかるようにシェアしてくださっているので
▼・ェ・▼にもできましたありがとうございます!
30個もサンプルがあるので選びたい放題デス!
「やりたいことリスト」の 設定
サルワカさんのサイトで「27.ラベルをつけたようなデザイン」の色や文字サイズを変えてます
HTML
<div class="box27">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>
上記のコードを 日記編集画面の「HTML編集」にて任意の位置に貼り付けます。
表示させたい位置の <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と同じになります。
背景色や、文字の色・サイズを変更したい場合は
コード内の赤字部分を好みの数値・コードに変更すればよいだけ。
ちなみに、▼・ェ・▼が色コードで よく利用するのは以下のサイト。
「このGameのProperty」の設定
サルワカさんのサイトで「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.