FOCUS

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

引用などで使えるBOXデザインの使い方

使い方は簡単。以下コピペして文章部分を変えるだけ

引用マークが左上に飛び出ているタイプ

引用っぽいBOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxqt">
<p>引用っぽいBOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

引用マークが左上に三角形で表示されるタイプ

スタイリッシュな引用っぽいBOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxst">
<p>スタイリッシュな引用っぽいBOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

※IEなど一部ブラウザでうまく表示されないことがあります。

Boxタイトルを黒枠上部に重ねて表示

任意の文字

黒い枠BOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxbk"><span class="box-title">任意の文字</span>
<p>黒い枠BOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

Boxタイトルを赤枠上部に重ねて表示

任意の文字

赤い枠BOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxpk"><span class="box-title">任意の文字</span>
<p>赤い枠BOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

ソリッドな感じの黒枠Box

黒色ソリッドなBOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxbk4">
<p>黒色ソリッドなBOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

上下2本線のBox

上下に2本線BOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxbk2">
<p>上下に2本線BOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

グラデーションによる背景Box

グラデーションで素敵なBOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxgd">
<p>グラデーションで素敵なBOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

左上にタイトルを入れられるBox

ここにタイトル

タイトル部分が内側BOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxti">
<div class="box-title">ここにタイトル</div>
<p>タイトル部分が内側BOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

タイトルをBOX上部中央に表示

ここにタイトル

タイトルが上部中央にあるBOXテキストテキストテキストテキストテキストテキストテキスト

<div class="boxtl">
<div class="box-title">ここにタイトル</div>
<p>タイトルが上部中央にあるBOXテキストテキストテキストテキストテキストテキストテキスト</p>
</div>