YOLOCOBI BLOG

一度きりの人生、好きなことをして楽しく生きるためのブログ

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

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

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

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

 

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

 

 

 

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

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

 

ポイント

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

 

 

〜補足〜 HTMLとCSSとは?

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

 

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

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

 

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

HTML+CSS

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

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

 

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

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

 

ラベル風ボックスデザインの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;

}

 

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

 

デザインCSSに埋め込みができれば、CSSの設定は完了です。 

 

手順2:HTMLタグをブログ記事内に書き込む


次にブログ記事の中、HTML欄にラベル風ボックスデザインの内容を書き込んでゆきます。以下のHTMLタグを入れます。

 

入れたい内容に合わせたHTMLタグを記載しておきますので、選んでみてコピペしてみてください。(赤字部分は、カスタマイズする部分です)

 

1)文章だけのラベル風ボックスデザイン

 <div class="box27">

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

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

</div>

 

 <完成イメージ> 

ここにタイトル

ここに文章

 

もし、文章が2行以上になる場合は、<p>ここに文章</p>の部分を2行にすれば、開業して入力することができます。

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

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

 

 <完成イメージ> 

ここにタイトル

ここに文章

ここに文章

2)URLリンクをつけるラベル風ボックスデザイン

もしURLリンクをつけたい場合は、以下のHTMLタグをコピペしてみてください。

 

 <div class="box27"><span class="box-title">ここにタイトル</span>
<p><a href="ここにURL(https://www.xxxxxx.xxx">ここにタイトル</a></p>

</div>

 

  <完成イメージ>

ここにタイトル

ここにタイトル

 

はてなブログでのHTML編集への入れ方

はてなブログでは、「HTML編集タブ」を選んで入力してゆきます。

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

 

いかがでしたか?うまく入力できましたか?

 

入力内容の確認・注意事項

ボックスデザインの入力内容を確認する場合、

「編集見たまま」の画面ではデザイン内容は確認できません。

必ず「プレビュー」画面から確認してみてください。

 

あと注意してほしいことですが、

ボックス内の文言編集は、必ず「HTML編集」画面内で直接編集してください。

 「編集見たまま」の画面でボックス内の文言内容を修正すると、ボックスデザインが壊れてしまいますのでご注意ください。

 

Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】

最後に

今回は、はてなブログを楽しくするための、ラベル風ボックスデザインのカスタマイズを書いてみました。

はてなブログでもWordpress並みの楽しいサイトカスタマイズができる!というのをこれからもご紹介してゆきたいと思います。

いろいろカスタマイズすると、自分オリジナルのブログ映えする楽しいブログができてかなと思います。

是非皆さんも試してみてくださいね。

 

You Only Live Once...(人生は一度きり)

PS もし良かったら、是非いいね♩お願いします!(読者フォロー募集中です)

 

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