【はてなブログカスタマイズ】ボックスデザイン、ボタンの設置方法

宜しければ、読者登録、お願いしますm(_ _)m

当サイトの記事には、広告・プロモーションが含まれます

どうも、あひるです。

ブログカスタマイズ、第３弾です。

当記事で取り扱うのは、

ボックスデザインの作成方法
ボタンの作成方法

となります。

みんなもカスタマイズを色々と楽しみましょう！！

ボックスデザイン（文字を囲う）を作る方法
押せるボタンの設置方法
最後に

ボックスデザイン（文字を囲う）を作る方法

大事なポイントや、強調したい部分などを線で囲いたくはないでしょうか？

これも、htmlとCSSを使用すれば、簡単にできてしまいます。

この記事でも、コード部分は、囲っています。

文字を囲うコード（html）その１

<p>ここに文章</p>

</div>

こちらは、htmlのコードです。

赤字は、自由に書き換えてOKです。

記事を書く際に、html編集が上部にあるかと思います。

そこに上記コードをコピペすれば使用可能です。

下記のCSSでデザインを整えれば完成です。

CSSの貼り付け場所は、

デザイン　⇒　カスタマイズ　⇒　デザインCSS

変更を保存してOKです。

ボックスデザインコード（CSS）その１

.box1 {

position: relative;

margin: 2em 0;

padding: 0.5em 1em;

border: solid 3px #95ccff;

border-radius: 8px;

}

.box1 .box-title {

position: absolute;

display: inline-block;

top: -13px;

left: 10px;

padding: 0 9px;

line-height: 1;

font-size: 19px;

background: #FFF;

color: #95ccff;

font-weight: bold;

}

.box1 p {

margin: 0;

padding: 0;

}

ボックスデザインコード（html）その２

<span class="box-title">ここにタイトル</span>

<p>ここに文章</p>

</div>

ボックスデザインコード（CSS）その２

.box2 {

position: relative;

margin: 2em 0;

padding: 0.5em 1em;

border: solid 3px #62c1ce;

}

.box2 .box-title {

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;

}

.box27 p {

margin: 0;

padding: 0;

}

ボックスデザインコード（html）その３

<span class="box-title">ここにタイトル</span>

<p>ここに文章</p>

</div>

ボックスデザインコード（CSS）その３

.box3 {

position: relative;

margin: 2em 0;

padding: 25px 10px 7px;

border: solid 2px #FFC107;

}

.box3 .box-title {

position: absolute;

display: inline-block;

top: -2px;

left: -2px;

padding: 0 9px;

height: 25px;

line-height: 25px;

font-size: 17px;

background: #FFC107;

color: #ffffff;

font-weight: bold;

}

.box3 p {

margin: 0;

padding: 0;

}

参考にしたのは、こちら。

saruwakakun.com

押せるボタンの設置方法

押せるボタン、ほしくないですか？（笑）

ボタンを押して、別ページへ飛んだりするの、いいですよね？

それも、htmlとCSSで作ることが可能なんです。

赤ボタン

ボタンのコード（html）その１

<a href="#" class="cp_btn">button</a>

上記の赤ボタンコードです。

#は、飛ぶ先のURLを、

buttonは、自由に記載してOKです。

こちらのコードは、記事を書く際に、html編集が上部にあるかと思います。

そこに上記コードをコピペすれば使用可能です。

下記のCSSでデザインを整えれば完成です。

CSSの貼り付け場所は、

デザイン　⇒　カスタマイズ　⇒　デザインCSS

変更を保存してOKです。

CSSのカラーコードを変更すれば、何色にでも、変更することは可能です。

ボタンのコード（CSS）その１

a.cp_btn {
display: block;
width: 275px;
padding: 0.3em 1em;
text-align: center;
text-decoration: none;
color: #EC407A;
border: 2px solid #EC407A;
border-radius: 3px;
transition: .4s;
}
a.cp_btn:hover {
background: #EC407A;
color: #fff;
}

青ボタン

ボタンのコード（html）その２

<a href="#" class="btn-flat-border">BUTTON</a>

上記の青ボタンのコードになります。

ボタンのコード（CSS）その２

.btn-flat-border {
display: inline-block;
width: 275px;
padding: 0.3em 1em;
text-align: center;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
}

.btn-flat-border:hover {
background: #67c5ff;
color: white;
}

参考にしたのは、こちら。

saruwakakun.com