QUATRE(キャトル)の庭

アシュタンガヨガをしているヨギーニのQUATRE(キャトル)です。生活のヒントになるような情報や疑問に思ったことの調べごとメモを発信しています。

コピペで使える おしゃれボックスデザイン はてなブログをカスタマイズ 初心者編

f:id:QUATRE:20200107083010j:plain

こんにちは、QUATRE(キャトル)です。

はてなブログをはじめて5ヶ月が経ちました。スターブックマークをつけてくださっているみなさんに、本当に感謝です。記事を更新するのでいっぱいいっぱいで読みにくい記事なのに、ありがとうございます!

さて、みなさんのはてなブログのようにおしゃれにアップグレードしたいなと思いつつ、勉強がのばしのばしになってたので、熱が冷めないうちに、今日からとりかかります。

今回のテーマは、ボックスデザインの作り方です。

作り方の手順を順番にメモしていきます。(内容は随時更新していきます。)

ボックスデザイン(囲み枠)を作る方法

ボックスデザインを挿入する方法は2種類あります。

  1. HTMLコードを挿入するだけ
  2. CSSでデザインを設定させた後、HTMLコードを挿入する

それぞれに、メリットとデメリットがあります。

HTMLコードを挿入するだけ

○ 簡単に挿入することができる

× 編集画面のコードが長いので、編集するときに見にくい

とりあえずこのパターンを使おうというときにおすすめです。

CSSの設定をする方法

× 最初にひと手間かかる

○ 編集画面のコードが短いので、編集するときに見やすい

何度も繰り返し使いたいお気に入りのデザインがある場合におすすめです。

今回は、HTMLコードを挿入するだけでボックスデザインが使える方法をまとめてみました。

step 1 囲み枠を選ぶ

タイトル

<fieldset style="border: 3px double #色のコード;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>

step 2 HTMLをコピペ

編集画面(見たまま)をHTML編集に切り替えます。

囲み枠を挿入したい箇所に、選んだ囲み枠のHTMLタグをコピペします。

編集画面(見たまま)に戻すと、このようなボックスが表示されているはずです。

タイトル

ここに文章

step 3 色のコードを選ぶ

このままだと地味なので、色を自分好みの色に変えてみます。

まず、色のコードを選びます。

 

色とコードのサンプルが一覧表になっていているこちらのサイトが選びやすくおすすめです。

WEB色見本 原色大辞典 - HTMLカラーコード

今回はこのサイトからこの色を選んでみました。

f:id:QUATRE:20200107110946p:plain

(上段)色の名前(下段)色のコード

さらに細かく色を指定したい場合は、こちらが、おすすめです。

step 4 色のコードを変更

step 1で選んだボックスデザインのサンプルの赤い文字#色のコードのところを、step 3で選んだ文字色(#c71585)に変えます。

<fieldset style="border: 3px double #色のコード;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>

 ↓

<fieldset style="border: 3px double #c71585;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>

すると、自分が選んだ色にボックスの色が変わります!

 タイトル 

ここに文章

あとは、いつもどおりの編集(見たまま)画面で、記事を書いていきます。

文字入力の注意点

囲み枠内で改行する場合、Enterのみで改行すると枠外にはみ出るので、Shift+Enterで改行します。 

ボックスデザイン一覧|タイトルなし

<div style="background: #fff; padding: 10px; border: 2px solid #色のコード;">ここに文章</div>
<div style="padding:10px;border:3px dotted #色のコード;">ここに文章</div><br>

ボックスデザイン一覧|タイトルあり

ボックスデザイン集

タイトル

<fieldset style="border: 3px double #文字色;"><legend><span style="font-weight: bold;">タイトル</span></legend>
<p>ここに文章</p></fieldset>

タイトル
<div style="background: #タイトルのバーの文字色; border: 1px solid #タイトルバーの枠の文字色; padding-left: 10px;"><span style="color: #タイトルの文字色; font-weight: bold;">タイトル</span></div><div style="border: 1px solid #本文の文字色; padding: 10px;">ここに文章</div>

ボックスデザインサンプル|ピンク系

色のサンプルを入れたコードです。

HTML編集画面を開いて、枠内のコードをコピペしてご利用くださいね! 

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #タイトルバーの色コード; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #囲い枠の色コード; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

 

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ffb6c1; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ffb6c1; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
 
タイトル

<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ff69b4; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ff69b4; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #c71585; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #c71585; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

ボックスデザインサンプル|緑系

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #74DF00; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #74DF00; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;"><span style="color: #ff0000;">本文</span></div>
タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #adff2f; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #adff2f; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

ボックスデザインサンプル|青系 

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #a59aca; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #a59aca; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #00008b; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #00008b; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

ボックスデザインサンプル|茶色系 

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #544a47; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #544a47; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #946243; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #946243; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #d8a373; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #d8a373; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

ボックスデザインサンプル|オレンジ 

タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #FF4000; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #FF4000; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
タイトル
<div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #ffa500; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #ffa500; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>
タイトル
 <div style="height: 12px;"><span style="margin-left: 8px; padding: 6px 10px; background: #dc143c; color: #ffffff; font-weight: bold; border-radius: 5px;">タイトル</span></div>
<div style="border: 2px solid #dc143c; padding: 25px 12px 10px; font-size: 1em; border-radius: 5px;">本文</div>

ボックスデザインサンプル|ぬりつぶし

<div style="background: #f2e2ee; box-shadow: #f2e2ee 0 0 10px 10px; -webkit-box-shadow: #f2e2ee 0 0 10px 10px; -moz-box-shadow: #f2e2ee 0 0 10px 10px; padding: 10px; margin: 20px;">
<p>本文</p>
</div>

<div style="background: #e6e6fa; box-shadow: #e6e6fa 0 0 10px 10px; -webkit-box-shadow: #e6e6fa 0 0 10px 10px; -moz-box-shadow: #e6e6fa 0 0 10px 10px; padding: 10px; margin: 20px;">
<p>本文</p>
</div>