どうも、あひるです。
ブログカスタマイズ、第3弾です。
当記事で取り扱うのは、
- ボックスデザインの作成方法
- ボタンの作成方法
となります。
みんなもカスタマイズを色々と楽しみましょう!!
ボックスデザイン(文字を囲う)を作る方法
大事なポイントや、強調したい部分などを線で囲いたくはないでしょうか?
これも、htmlとCSSを使用すれば、簡単にできてしまいます。
この記事でも、コード部分は、囲っています。
文字を囲うコード(html)その1
<div class="box1">
<span class="box-title">タイトル</span>
<p>ここに文章</p>
</div>
こちらは、htmlのコードです。
赤字は、自由に書き換えてOKです。
記事を書く際に、html編集が上部にあるかと思います。
そこに上記コードをコピペすれば使用可能です。
下記のCSSでデザインを整えれば完成です。
CSSの貼り付け場所は、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
変更を保存してOKです。
.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;
}
<div class="box2">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>
.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;
}
<div class="box3">
<span class="box-title">ここにタイトル</span>
<p>ここに文章</p>
</div>
.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;
}
参考にしたのは、こちら。
押せるボタンの設置方法
押せるボタン、ほしくないですか?(笑)
ボタンを押して、別ページへ飛んだりするの、いいですよね?
それも、htmlとCSSで作ることが可能なんです。
<a href="#" class="cp_btn">button</a>
上記の赤ボタンコードです。
#は、飛ぶ先のURLを、
buttonは、自由に記載してOKです。
こちらのコードは、記事を書く際に、html編集が上部にあるかと思います。
そこに上記コードをコピペすれば使用可能です。
下記のCSSでデザインを整えれば完成です。
CSSの貼り付け場所は、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
変更を保存してOKです。
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;
}
<a href="#" class="btn-flat-border">BUTTON</a>
上記の青ボタンのコードになります。
.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;
}
参考にしたのは、こちら。
最後に
ボックス、ボタンの設置方法について、記載しました。
貼り付けるだけなので、簡単かと思います。
自分なりにアレンジして、カスタマイズを楽しみましょう!
その他にもカスタマイズに関して、記事を書いています。
- 「【Minimalismカスタマイズ】グローバルメニューの設置方法」
- 「【はてなブログカスタマイズ】文字サイズ変更、マーカー、見出しの変更方法」
- 「【Minimalismカスタマイズ】サイドバーの色変更、アイコンの設置」
- 「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」
- 「【はてなブログカスタマイズ】トップ画面をホームページへ変える方法」
- 「【はてなブログ】ブログ回遊率(PV数)を上げる方法」
また、オススメのアイテムについても書いていますので、良ければ参考程度に。
「【これで決まり!】Macbookキーボードカバー( moshi clearguard MB)」
「【オススメの良品】シャトルデイパックスリム(ノースフェイス)」
「【モバイルバッテリー】Anker PowerCore 13000」
最後までお読みいただき、ありがとうございました。