あひるの化粧品と戯れる日記

化粧品開発者が化粧品やそれに関する知識、情報などを発信していくブログです。たまに無関係なことも書きます。

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

スポンサーリンク

 

どうも、あひるです。

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

当記事で取り扱うのは、

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

となります。

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

 

 

 

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

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

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

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

文字を囲うコード(html)その1

<div class="box1">

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

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

</div>

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

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

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

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

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

CSSの貼り付け場所は、

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

変更を保存してOKです。

 

ボックスデザインコード(CSS)その1

.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)その2

<div class="box2">

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

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

</div>

 

ボックスデザインコード(CSS)その2

.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)その3

<div class="box3">

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

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

</div>

 

ボックスデザインコード(CSS)その3

.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)その1

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

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

#は、飛ぶ先のURLを、

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

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

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

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

CSSの貼り付け場所は、

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

変更を保存してOKです。

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

ボタンのコード(CSS)その1

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)その2

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

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

ボタンのコード(CSS)その2

.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

 

 

 

最後に

ボックス、ボタンの設置方法について、記載しました。

貼り付けるだけなので、簡単かと思います。

自分なりにアレンジして、カスタマイズを楽しみましょう!

その他のカスタマイズは、こちら。

www.ahiru-nonnbiri-blog.work

 

最後までお読みいただき、ありがとうございました。

 

 

 

ホームへ戻る