Markdownテキストの引用(blockquote)をスタイリッシュに見せる

このブログはMarkdownに対応させているので、投稿はほぼすべてMarkdown記法で書いている。
そして、スタイルはbootstrap(バージョン3)を使っているので、MarkdownテキストがHTMLに変換されると、bootstrapのスタイルが適応されるという按配だ。
ただ、Markdownで引用(blockquote)をした時のスタイルがbootstrap標準だと素っ気無さ過ぎだったので、改めてスタイルし直してみた。

まず、Markdownで引用をしてみる。

次に、bootstrap標準の引用(blockquote)タグのスタイルで表示してみる。

Blockquote style by bootstrap

まぁ、シンプルではあるが、かなり素っ気無い。

では、bootstarapスタイルに独自スタイルをオーバーライドしてみよう。

ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。
Wikipediaより

だいぶスタイリッシュになった。
出典リンクを表示しない場合は下記のように表示される。

ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。

bootstrapスタイルをオーバーライドしたCSSは下記の通りだ。

Leave a Reply

Your email address will not be published.