このブログはMarkdownに対応させているので、投稿はほぼすべてMarkdown記法で書いている。
そして、スタイルはbootstrap(バージョン3)を使っているので、MarkdownテキストがHTMLに変換されると、bootstrapのスタイルが適応されるという按配だ。
ただ、Markdownで引用(blockquote)をした時のスタイルがbootstrap標準だと素っ気無さ過ぎだったので、改めてスタイルし直してみた。
まず、Markdownで引用をしてみる。
> ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。
> [Wikipediaより](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD%E3%83%9A%E3%83%87%E3%82%A3%E3%82%A2 "by Wikipedia"){.origin.pull-right}
>
次に、bootstrap標準の引用(blockquote)タグのスタイルで表示してみる。

まぁ、シンプルではあるが、かなり素っ気無い。
では、bootstarapスタイルに独自スタイルをオーバーライドしてみよう。
ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。
Wikipediaより
だいぶスタイリッシュになった。
出典リンクを表示しない場合は下記のように表示される。
ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。
bootstrapスタイルをオーバーライドしたCSSは下記の通りだ。
blockquote {
position: relative;
display: table;
margin: 1rem;
padding: 2.3rem 2.3rem;
width: calc(100% - 2rem);
font-style: oblique;
font-size: 1rem;
border: dotted 1px #ececec;
border-radius: 4px;
background-color: #f0f0f0;
}
blockquote:before {
position: absolute;
left: 4px;
top: 1.5rem;
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
font-size: 56px;
color: #d0d0d0;
content: '\0201C';
}
blockquote:after {
position: absolute;
right: 12px;
bottom: -1rem;
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
font-size: 56px;
color: #d0d0d0;
content: '\0201D';
}
blockquote * {
font-style: oblique;
font-size: 1rem;
color: #555;
}
blockquote .origin {
display: table-cell;
width: 100%;
margin: 1rem 0 0;
padding: 6px 4px 0 6px;
border-top: dotted 1px #e0e0e0;
text-align: right;
font-size: 0.857rem;
font-style: normal;
color: #909090;
}
blockquote .origin:before {
margin-right: 10px;
letter-spacing: -2px;
font-weight: 100;
color: #ddd;
content: '\02500\02500';
}
blockquote .origin:link, blockquote .origin:visited {
color: #999;
text-decoration: none;
}
blockquote .origin:hover, blockquote .origin:active {
color: #07c;
text-decoration: none;
}