はてぶカスタマイズ★文章を目立たせるボックスを設定する - SPARKCLIP

はてなブログで文章を目立たせるためのボックスをつくってみました。

ちょっと工夫するだけでグッと読みやすくなるんじゃないかと思います。
ご利用中のテーマやブラウザによっては、正しく設定しても表示が崩れてしまうかもしれませんのでご了承ください。色替えなどカスタマイズは各自でよろしくお願いいたします。

その１

シンプルに囲むだけ。

「#fff2f2」が背景色、「#ef9e9f」が枠の色です。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content p.box_notes {
	background: #fff2f2;
	padding: 15px;
	border: 1px solid #ef9e9f;
	border-radius: 3px;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<p class="box_notes">Lorem ipsum dolor sit amet…</p>

その２

文字をどどーんと強調したい時に。

「#ffd1d2」が見出し文字の色、「#ef9e9f」が枠の色です。
「CHECK IT OUT!!」の部分はお好きな文字に変更してください。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content p.box_notes {
	position: relative;
	padding: 30px 10px 10px 10px;
	border: 1px solid #ef9e9f;
}
.entry-content p.box_notes::after {
	position: absolute;
	content: 'CHECK IT OUT!!';
	font-size: 35px;
	font-weight: bold;
	color: #ffd1d2;
	top: -27px;
	left: 0;
	text-shadow: 0 1px 0 #ef9e9f, 1px 0 0 #ef9e9f, 0 -1px 0 #ef9e9f, -1px 0 0 #ef9e9f, 1px 1px 0 #ef9e9f, -1px 1px 0 #ef9e9f, 1px -1px 0 #ef9e9f, -1px -1px 0 #ef9e9f;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<p class="box_notes">Lorem ipsum dolor sit amet…</p>

その３

丸い感じ。

「#fefff2」が背景色、「#ef9e9f」が枠と見出し文字の背景色です。
「INFORMATIONS」の部分はお好きな文字に変更してください。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content p.box_notes {
	position: relative;
	background: #fefff2;
	padding: 30px 10px 10px 10px;
	margin-left : 12px;
	border: 1px solid #ef9e9f;
	border-radius: 10px;
}
.entry-content p.box_notes::after {
	position: absolute;
	content: 'INFORMATIONS';
	background: #ef9e9f;
	font-weight: bold;
	color: #fff;
	padding: 2px 12px;
	border-radius: 25px;
	top: -12px;
	left: -12px;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<p class="box_notes">Lorem ipsum dolor sit amet…</p>

その４

シンプルに目立たせたい時に。

「#fff2f2」が見出し背景色、「#ef9e9f」が枠の色です。
「POINT」の部分はお好きな文字に変更してください。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content p.box_notes {
	position: relative;
	padding: 35px 10px 10px 10px;
	border: 1px solid #ef9e9f;
}
.entry-content p.box_notes::after {
	position: absolute;
	content: 'POINT';
	background: #fff2f2;
	font-weight: bold;
	text-align: center;
	width: 100%;
	top: 0;
	left: 0;
	border-bottom: 1px dotted #ef9e9f;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<p class="box_notes">Lorem ipsum dolor sit amet…</p>

その５

Q and A形式。色分けすると見やすいんじゃないかな。

デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content p.box_Q {
	position: relative;
	background: #fff2f2;
	padding: 35px 10px 10px 10px;
	border: 1px solid #f64f61;
}
.entry-content p.box_Q::after {
	position: absolute;
	content: 'Q';
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	background: #f64f61;
	color: #fff;
	height: 30px;
	width: 30px;
	top: 0;
	left: 0;
}
.entry-content p.box_A {
	position: relative;
	background: #eaf8f8;
	padding: 35px 10px 10px 10px;
	border: 1px solid #60bfbf;
}
.entry-content p.box_A::after {
	position: absolute;
	content: 'A';
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	background: #60bfbf;
	color: #fff;
	height: 30px;
	width: 30px;
	top: 0;
	left: 0;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください（Question）  -->
<p class="box_Q">Lorem ipsum dolor sit amet…</p>

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください（Answer）  -->
<p class="box_A">Lorem ipsum dolor sit amet…</p>