ピタッと目が留まる!?ブログの引用部分を黒板風にする方法

記事のタイトルとURLをコピーする

こんにちはコーヘイ(@k3809)です。ブログの引用部分を黒板風にする方法についてまとめてみました。

スポンサーリンク

引用が黒板テイストになります。

ブログ執筆時に何かと引用することが多くなってきました。

実は読んでほしかったり、重要だったりする点を載せているので、目立たせたいと思い一工夫してみました。

ではっ、そぉい!!

スクリーンショット 2016 07 09 10 02 40

▲カスタマイズ前はこんな感じ、一応引用だけどそのままスルーされそう。

スクリーンショット 2016 07 09 10 01 23

▲カスタマイズ後がこんな感じ、黒板にチョークで板書き風になりました。

――――――体は剣で出来ている。

Steel is my body, and fire is my blood.

血潮は鉄で心は硝子。

I have created over a thousand blades. 

幾たびの戦場を越えて不敗。

Unknown to Death.

ただの一度も敗走はなく、

Nor known to Life.

ただの一度も理解されない。

Have withstood pain to create many weapons.

彼の者は常に独り剣の丘で勝利に酔う。

Yet, those hands will never hold anything.

故に、生涯に意味はなく。

So as I pray, unlimited blade works.

その体は、きっと剣で出来ていた。

出典 :月姫研究室より引用

▲上記2つはスクショ画像だったので本文もコチラに!!

現在は、元の引用フォーマットに戻しています。

下記のコードをコピー&ペーストでOK

黒板風の引用にする方法は、style.cssシートに下記コードを書き込みます。

/*引用黒板風*/
blockquote {
border-width: 5px;
border-color: #573310;
border-style: ridge;
background-color: #1a5c09;
color: #fcfcfc;
font-size: 17px;
font-weight: bold;
}
blockquote:before {
color: #fce565;
font-family: serif;
font-size: 300%;
left: 38px;
line-height: 1em;
position: absolute;
top: 28px;
}
blockquote:after {
bottom: 0;
color: #fcfcfc;
content: "/ ";
font-family: serif;
font-size: 200%;
line-height: 0;
position: absolute;
bottom: 14px;
}

▲WordPressであれば、下記のコードを「外観」→「テーマ編集」→「スタイルシート(style.css)」に貼り付けて「保存」すれば完了です。

コードの数値は、当ブログ(=Simplicity)に合うように若干調整しております。また、子テーマがある方はそちらにお願いします。

参考:Simplicityの引用部分”blockquote”をcssでお洒落にカスタマイズ。コピペokのテンプレート | みてみた

☞まとめ

ぼくは、黒板風にしてみましたがコードを修正することでまた異なった引用をつくることができます。

あなたのブログもこの機会にカスタマイズしてみませんか!?

引用部分のフレーズが気になった方はコチラ

参考:聖杯戦争を手のひらで!スマホでFate/stay nightが無料で楽しめるぞ!!