ボックス付コメントの方法
ボックスの上にタイトルを入れることが出来る。これが出来るとブログにメリハリが出ていいです。この方法は「サルワカさん」に教えていただきました。
これは内容の最後に入れた方がデザインが崩れなくて無難です。
ボックス付コメントの方法はまずスタイルシート(mystyles.css)を作成してください。windowsのメモ帳で以下を記入します。枠と題名の色は各々で指定してください。
ピンク #FF00FF オレンジ #FF9966 ブラック #000000 など。
.box26 { position:relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #CCFF66;/***枠の色指定**/
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #CCFF66;/****題名の色指定***/
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
記入が出来たらmystyles.cssとか名前を付けて保存してください。(メモ帳だと.txtになってしまうので.txtファイルをミギクリックして名前の変更から.cssに変更してもOKです)
次にできたmystyles.cssをコントロールパネルからファイルに入れます。この時にフォルダーをmycssなどの名前にしておきましょう。この時にmystyles.cssのアドレスを記入しておく。
次にmystyles.cssを読み込ませなくてはならないので名前の変更(風ろぐの場合)副題を開いて以下を記入します。
<link rel="stylesheet" href="https://先ほどの自分のアドレス.kazelog.jp/mycss/mystyles.css" type="text/css" />
あとはブログを書く時にボックス付コメントを入れたい場所で□HTMLの編集にチェックを入れて以下を入力します。
<div class="box26">
<span class="box-title">題名</span>
<p>内容をここに記入します。</p>
</div>
ブログを公開して出来上がりです。
公開してからブログを確認すれば枠が表れています。
コメント