＜はてなブログを楽しく＞ラベル風ボックスデザインのカスタマイズ【簡単コピペ】

f:id:YOLO-co-bi:20200307014057p:plain

毎日書くはてなブログ記事を楽しく見えるようにしたくありませんか？

今回は、ラベル風ボックスデザインのカスタマイズ方法を書いてみました。

重要ポイントを伝えたいときに使えると思うので、是非活用してみてください。

ラベル風ボックスデザインの完成見本
- 〜補足〜　HTMLとCSSとは？
手順１：CSSタグをブログサイトに貼り付ける
- ラベル風ボックスデザインのCSSタグ
手順２：HTMLタグをブログ記事内に書き込む
最後に

ラベル風ボックスデザインの完成見本

これが完成形の見本です。

ポイント

HTMLとCSSを使って作ります（コピペでOK）

オススメの記事はこちら

ブログを書くのにプログラミングの知識はいるの？【初心者ブロガーの素朴な疑問】

〜補足〜　HTMLとCSSとは？

初心者の方向けにWebデザインで使用する”HTMLとCSS”について簡単におさらいをしておきます。

HTML→Webページの「文字」「画像」をつくるための言語。いわば、Webページの土台をつくるための言語。

CSS→Webページの「サイトデザイン」「レイアウト」を細かく指定するための言語。

基本的にWebページをつくるためには、

HTML＋CSS

この二つの言語を使って作ります。

f:id:YOLO-co-bi:20200307004347p:plain

この記事ではとりあえずHTMLとCSSがどういうものなのか？理解していればOKです。

それでは、作ってゆきましょう。

手順１：CSSタグをブログサイトに貼り付ける

まず最初に、CSSタグをブログサイトに設定してゆきます。

ラベルボックスの色は自由に変更することができますので、

CSSタグを設定する際に、好きな色をCSS内の＃XXXXXX（色番号）を変更してみましょう。（私のボックスの色は＃62c1ce はサックス色です）

好きな色が選べるよう、カラーパレットをご覧ください。（↓）

ちなみに、私が使用しているはてなテーマは「マテリアルぽっぷ」ですが、楽しいサイトづくりができるのでオススメのテーマです。

「マテリアルぽっぷ」向けに「マテリアルぽっぷな色」も紹介しておきます。

f:id:YOLO-co-bi:20200307121328j:plain

これ以外の色を自分で選びたい方は、このサイトから選ぶといいですよ。

www.color-sample.com

URLはこちら

マテリアルぽっぷ公式テーマ

ラベル風ボックスデザインのCSSタグ

では、実際に以下のCSSタグをデザインCSSへ貼り付けましょう。

　＜CSSの埋め込み場所＞

はてなブログ：（管理画面より）デザイン＞カスタマイズ＞デザインCSS　

Wordpress：（ダッシュボードより）＞外観＞テーマエディター＞右側のバーの[style.css]

赤字部分は、先ほど紹介した通り、好きな色を選んでみてください。

（以下の＃62c1ce はサックス色です）

.box27 {
position: relative;

margin: 2em 0;

padding: 0.5em 1em;

border: solid 3px #62c1ce;

}

.box27 .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;

}