peamon.net

blockquoteに引用符のアイコン画像を追加

blockquoteに引用符アイコンを追加したい

外部リンクの後ろにアイコン画像を追加が、思いのほかうまくいったため、返す刀で、blockquoteに引用符の画像も追加してみようと思います。

こちらも、一目見ただけで、引用だと分かるようにしておきたい。

引用符の画像も、icooon-monoさんから、"引用符のアイコン"を借用。

疑似要素とrelative&absolute

上記のサイトに紹介されているコードをベースに作成開始。疑似要素afterとbeforeの詳細は下記のリンクへ。

positionのrelativeとabsoluteが複雑で、ぼんやりとしか理解できていなかったんですが…。

こちらのサイトの説明が超分かりやすかったです。タイトルだけで8割ぐらい説明しきれているのがすごい。

relativeってabsoluteが動く範囲を指定していたんですね。頭の中が整理できました。

HTMLとCSSのコード

そして、上記に挙げたページのおかげで、何の苦労もすることなく完成。

サンプル

ウィキペディア(英: Wikipedia)は、世界中のボランティアの共同作業によって執筆されるフリーの多言語インターネット百科事典である。収録されている全ての内容がオープンコンテントで商業広告が存在しないことを特徴とし、主に寄付に依って活動している非営利団体「ウィキメディア財団」が所有・運営している。

引用元:ウィキペディア - 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以上にするだけで解決。