はてなブログ　HTML編集で記述してCSSで装飾する方法入門編

成功例

ボックスのタイトル

箇条書きにしたい内容①
箇条書きにしたい内容②
箇条書きにしたい内容③

普段は適当に記事を書いているのですが、最近、最強でんでんの記事を書いていてその記事の閲覧がほんのちょっとだけ伸びているのでおしゃれに作りたいと思いました。どのようにして書けるのか検索しましたが、コピペでどうにかなる物が見つかりませんでした。ということで、今回はそれを準備しました。

惜しいサイトがありましたがコピペではどうにもならなかったので、ちゃんとどうにかなるようにして置いておきます。具体的には<style></style>でCSS分を囲むのを怠っていました。

//以下の部分のコピペし、はてなブログHTML編集に打ち込めば上記の記述が可能です

<div class="box27"><span class="box-title27">ボックスのタイトル</span>
<ul>
<li>箇条書きにしたい内容①</li>
<li>箇条書きにしたい内容②</li>
<li>箇条書きにしたい内容③</li>
</ul>
</div>
<style>
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title27 {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
</style>

//以上です

上手く表示されればこれを軸にいろいろ試すことが可能です。

入門としてこの塊は参考になるでしょう。

解説としては<div></div>で囲われた範囲はHTMLの記述部分です。

<span>タグでHTMLでCSSでの修飾先を指定します。

.box27ではボックスの枠線を指定してしています。

.box27 .box-title27ではボックスのタイトル部分を指定しています。