FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

Focusで使用しているボタンとバルーンの使い方

ボタンの使い方とカスタマイズについて

ボタンは何らかのリンクを目立たせて配置したいときにしばしば使用されます。例えばランディングページへのリンクなどで使用されます。

標準ボタンデザイン

BUTTON

こんな感じで小さめのボタンを標準で用意しています。

設置方法は以下のコードをコピペして文字を入れ替えて使います。

<p> <a href="任意のURL" class="btnbasic flatbtn2">任意の文字</a></p>

テーマ内CSSはこんな感じです。説明をつけてみました。

/* ボタン*/
.btnbasic {
    margin: .5em .5em .5em 0;/* ボタンの上右下左のスペース*/
    text-decoration: none;
}
.flatbtn2 {
 display: inline-block;
 padding: .3em 1em;/* ボタン内の文字に対する上下のスぺ―ス*/
 border: solid 2px #67c5ff;/* ボタンの枠線の種類・太さ・色*/
 border-radius: 3px;/* ボタンの丸み*/
 color: #67c5ff;/* ボタンの文字色*/
}

.flatbtn2:hover {
 background: #67c5ff;/* マウスオーバーでの背景色*/
 color: white;/* マウスオーバー時のボタンの文字色*/
}

ボタンをカスタマイズもしくは種類を増やしたいとき

ボタンの種類をカスタマイズ・増やしたいときは.flatbtn2に該当する部分を.flatbtn3とか.flatbtn4とか数字を増やしてCSSの要素や値を編集したのち、デザインCSS内に追記すると便利です。

そのうえでHTML内にコピペするコードのclass部分を入れ替えて使用してください。

バルーンの使い方とカスタマイズについて

バルーンは本文中のアクセントとしてしばしば使用されます。

見出しに頼らない構成を行いたいときに便利です。

バルーンデザイン

CHECK!

標準のバルーンデザインはこんな感じです。このバルーンに続いて何らかのコンテンツが続きます。

設置する際は以下のコードをコピペしてください。

<center>
<div class="balloon1">任意文字</div>
</center>

なお、テーマ内のCSSはこんな感じです。

/* バルーン*/
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 0 5px;
    width: 90px;/* バルーンの横の長さ*/
    height: 90px;/* バルーンの縦の長さ*/
    line-height: 90px;
    vertical-align: middle;
    text-align: center;
    color: #FFF;/* バルーン内の文字の色*/
    font-size: 20px;/* バルーン内の文字の大きさ*/
    font-weight: bold;/* バルーン内の文字の強調*/
    background: #70a6ff;/* バルーン内の背景色*/
    border-radius: 50%;/* バルーンの丸み*/
    box-sizing: border-box;
}

バルーンをカスタマイズもしくは種類を増やしたいとき

バルーンをカスタマイズしたいという場合はほとんどの場合、色や大きさになるかと思います。

上記の補足説明部分を参考にコードを修正し、.balloon1の部分を.balloon2などにし、デザインCSS内に追加してください。