はてなブログカスタマイズ 引用を強調枠に

他のブログを見ていると「ここがポイント」などタイトルのついた枠をよく見かけます。

正直、憧れますね。

早速作り方を調べてみると、どうやらテンプレートのCSSを編集し、PC版のエディタからHTMLを追加する必要があるようです。

テンプレートのCSSは一度作ってしまえばそれでよいのですが、毎回HTMLいじるの面倒くさい……それにスマホで殆どの編集を終わらせて、パソコンからはリンク貼りと予約投稿だけにしたい。

そうだ、「引用」のCSSを変えてしまおう。

スマホアプリに引用ボタンがある

Android版のはてなブログアプリの編集画面には文章の装飾ボタンが並んでいます。

その中に「引用」もあるのです。

この引用で囲うだけで「ここがポイント！」的なボックスになったらめちゃくちゃ楽だなと発見したのです。

何かから引用して書くことなさそうですからね、このブログ。

あったとしても参考リンクを貼る程度です。

というわけで「引用」のCSSを書きかえることにしました。

引用をPOINTに書きかえてみた

「引用」を表すHTMLは

.entry-content blockquote

なので、それに要素を書き入れました。

また、ボックスの上部に「POINT」の文字をくっつけました。

以下、実際のCSSです。

.entry-content blockquote {
	position: relative;
	margin: 36px 0 16px;
	padding: 16px 10px;
    	background: #ffffff;
	border: solid 2px #f0b77f;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content blockquote::before {
	position: absolute;
	bottom: 100%;
	left: -2px;
	padding: 2px 6px;
	content: "POINT";
	background-color: #f0b77f;
	color: #fff;
	font-weight: bold;
}

border: solid 2px #f0b77f;

の部分が枠線の色、

content: "POINT";

の部分が上部の「POINT」の文字列です。

この「POINT」の文字列をつけるのにこのサイトを参考にしました。

randamlife.hatenablog.com

ありがとうございました。

できるだけ楽が続けるポイント

何かを続けていく上で省ける手間は省いて楽をすることはとても大切なことだと僕は思います。

これでボタン1つでカッコいい枠線ができちゃいます。やったね。

CSSで引用をボックスに。

楽してカッコいいが続けるコツ！

あわせて読みたい