blockquoteに引用符のアイコン画像を追加
- 公開日:2020年10月18日
blockquoteに引用符アイコンを追加したい
外部リンクの後ろにアイコン画像を追加が、思いのほかうまくいったため、返す刀で、blockquoteに引用符の画像も追加してみようと思います。
こちらも、一目見ただけで、引用だと分かるようにしておきたい。
引用符の画像も、icooon-monoさんから、"引用符のアイコン"を借用。
疑似要素とrelative&absolute
上記のサイトに紹介されているコードをベースに作成開始。疑似要素afterとbeforeの詳細は下記のリンクへ。
positionのrelativeとabsoluteが複雑で、ぼんやりとしか理解できていなかったんですが…。
こちらのサイトの説明が超分かりやすかったです。タイトルだけで8割ぐらい説明しきれているのがすごい。
relativeってabsoluteが動く範囲を指定していたんですね。頭の中が整理できました。
HTMLとCSSのコード
そして、上記に挙げたページのおかげで、何の苦労もすることなく完成。
サンプル
ウィキペディア(英: Wikipedia)は、世界中のボランティアの共同作業によって執筆されるフリーの多言語インターネット百科事典である。収録されている全ての内容がオープンコンテントで商業広告が存在しないことを特徴とし、主に寄付に依って活動している非営利団体「ウィキメディア財団」が所有・運営している。
HTMLのコード
おそらく大丈夫だとは思うんだけど、<cite>の使いかたに自信がありません。注意してください。
<blockquote>
<p>ウィキペディア(英: Wikipedia)は、世界中のボランティアの共同作業によって執筆されるフリーの多言語インターネット百科事典である。収録されている全ての内容がオープンコンテントで商業広告が存在しないことを特徴とし、主に寄付に依って活動している非営利団体「ウィキメディア財団」が所有・運営している。</p>
<p class="quote">引用元:<cite><a href="https://ja.wikipedia.org/wiki/3%82%A6%E3%82%A3%E3%82%AD%E3%83%9A%E3%83%87%E3%82%A3%E3%82%A2">ウィキペディア - Wikipedia</a></cite>
</blockquote>
CSSのコード
paddingでblockquote内部の上下にスペースを作って、引用符の画像を設置する感じ。
blockquote {
background-color: #fafad2;
margin: 20px 5px 20px 10px;
padding: 50px 5px 50px 0px;
border-left: 5px solid #6d6d5c;
position: relative;
}
blockquote:before {
content: url("image/quotation-mark.png");
position: absolute;
top: 10px;
left: 10px;
}
blockquote:after {
content: url("image/quotation-mark.png");
position: absolute;
right: 5px;
bottom: 0px;
}
.quote {
text-align: right;
margin-top: 30px;
}
cite {
font-style: normal;
}
z-index
これで終わりと思いきや、右隅にあるトップページボタンの画像が、blockquoteの下をくぐってしまう事案が発生。
blockquoteは"position:relative"、トップページボタンは"position:fixed"。positionをいじると、こんなことが起きてしまうのか。
ただ、これを制御するCSSが存在することは知っていたので、慌てずにすみました。まぁ、使うのは初めてなんですけど。
初期値は0なので、トップページボタンのz-indexを1以上にするだけで解決。