ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログのカスタム【タイトル付きボックスデザイン(囲み枠)を表示させる!】


スポンサーリンク

f:id:twistinhaurin:20200919191916p:plain

こんにちは、ハウリンです (*^^*)

カスタムシリーズです。

今回はタイトル付のボックス表示が出来る様にします。

 

 

 

コードをCSSとHTML画面に入れていきます。

 

ボックスデザイン1 

POINT

こんな感じに表示されます。

ここがPOINTだと思う事を入れる事が出来ます。

CSSにコードを貼り付ける 

下のコードをコピーします。 

/* POINTのBOXデザイン */
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .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;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

 

 

「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」と開き、にコードを貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

f:id:twistinhaurin:20200602154654p:plain

CSSにコードを入れただけでは何も変わらないんですよ(´・ω・`)

次のコードを入れていきます!

 

HTML編集画面にコードを入れる

下のコードをコピー。

<div class="box28"><span class="box-title">POINT</span>
<p>こちらに文章をいれます</p>
</div>

 

 

HTML編集画面でボックスを表示させたい所にカーソルを合わせて貼り付けます。 

f:id:twistinhaurin:20200904135420p:plain

  

★「POINT」とタイトルなってますが変更できます。

★定型文はブログごとに15件(はてなブログProは100件)まで登録可能なので使うと便利です。

★定型文の上限は10,000字まで、タイトルは100字までです。 

 

ボックスデザイン2

f:id:twistinhaurin:20200924211009p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

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

 

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box27">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

「ここにタイトル」にPOINTなど好きなタイトルを入れます。

  

思った通りに表示されたでしょうか?

続けていきます!

 

ボックスデザイン3

f:id:twistinhaurin:20200924211024p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .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;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

  

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

 

 

ボックスデザイン4 

f:id:twistinhaurin:20200924211036p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

.box29 {
    margin: 2em 0;
    background: #eee8aa;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #9acd32;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

 

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box29">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>

中央寄せと合わせてみました。

www.haurin-zatunenlife.com

 

 

以上のデザイン、サルワカさんのサイトを参考にさせて頂きました。

他にたくさんのボックスデザイン紹介されてます。凄いですねー

saruwakakun.com

 

 

あとがき

今まで、蛍光ペン風アンダーライン吹き出しで会話形式表示文字装飾などの分かりやすくメリハリが付く様なカスタムを紹介しましたが、

このボックスデザインもかなり使えて便利です。 

色も変えると面白いかと思います (^O^)/

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

 

 

\読者登録してもらえると嬉しいです/