引用で画像を表示してちょっとオシャレにしてみた
Nプログラマ(@Nprog128)です。
ブログで記事を書いていると、引用する場面が出てきます。
引用する時はテキストで書いていたことが多いのですが、文章と引用の境界線がパッと見て分かりにくい場合もあるので、CSSで見た目を変更した備忘録です。
このブログはbootstrap3を使っているので、それを調整しながら作りました。
作った引用
この記事の冒頭の文章を表示してみます。
こんな感じで表示されます。
結果
ブログで記事を書いていると、引用する場面が出てきます。
html
htmlの構造はこんな感じです。
1<blockquote class="quote">
2 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
3 <p>ブログで記事を書いていると、引用する場面が出てきます。</p>
4 <footer class="text-right">
5 <cite title="[CSS] 引用で画像を表示してちょっとオシャレにしてみた">
6 <a href="https://nprog256.net/post/2020/02/css-quote-display-image/" target="_blank">[CSS] 引用で画像を表示してちょっとオシャレにしてみた</a>
7 </cite>より引用
8 </footer>
9 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
10</blockquote>
css
bootstrap3の使い方を参考にしつつ、少しタグを追加してCSSで見た目を調整しました。
1blockquote {
2 border-left-color: #d0d0d0;
3}
4
5blockquote p {
6 margin: 0;
7}
8
9.quote img:first-child {
10 margin: 0 auto 0 0;
11}
12
13.quote img:last-child {
14 margin: 0 0 0 auto;
15}
画像
上下に表示されている引用符の画像は、 icooon-mono さんの画像を使っています。
どうやって作っていったか？
上のコードを作るまでのメモリアを残しておきます。
基本のコード
まずはBootstrap3に引用の使い方があるので、そちらでhtmlのサンプルを確認します。
Blockquotes
For quoting blocks of content from another source within your document.
サンプルとして紹介されているコードはこんな感じです。(説明のため、一部改変)
1<blockquote>
2 <p>引用する文章</p>
3 <footer><cite title="引用元のタイトル">引用元のタイトル</cite></footer>
4</blockquote>
これを基本として表示したいコードを追加していきます。
ちなみに、カスタマイズする前の引用はこんな感じです。
引用する文章
これでもまったく問題はないんですけどね。。。
画像を上下に表示させる
引用符の画像を表示させたいので、先程のコードにimgタグを上下に追加して画像を表示させました。
引用する文章
ここでのコードはこんな感じです。
1<blockquote>
2 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
3 <p>引用する文章</p>
4 <footer><cite title="引用元のタイトル">引用元のタイトル</cite></footer>
5 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
6</blockquote>
なんか思っていたものと違っていて、画像が中央寄せになっています。
ここはcssにquoteクラスを定義して、そこにぶら下がるimg要素に対してmarginを設定しました。
これで上の画像はひだり寄せ、下の画像はみぎ寄せに表示されるようになります。
1.quote img:first-child {
2 margin: 0 auto 0 0;
3}
4
5.quote img:last-child {
6 margin: 0 0 0 auto;
7}
引用する文章
1<blockquote class="quote">
2 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
3 <p>引用する文章</p>
4 <footer><cite title="引用元のタイトル">引用元のタイトル</cite></footer>
5 <img src="/img/article/common/icon/blockquate.png" alt="blockquoteの画像">
6</blockquote>
微調整
ひだりのボーダー線の色
引用のひだり側にうっすらとボーダー線が表示されています。
自分の目からは色が薄すぎて見えづらかったので、以下のように変更しました。
1blockquote {
2 border-left-color: #d0d0d0;
3}
だいぶと色が濃くなり、見えやすくなったと思います。
pタグのmargin
pタグのmarginを微調整をします。
1blockquote p {
2 margin: 0;
3}
footerの右寄せ
あと、footer部分は右寄せにしたかったので、Bootstrapのtext-rightクラスを使って右に寄せています。
1<footer class="text-right">
2...省略
3</footer>
これで完成となります。
おわりに
今回は、引用の見た目をCSSと画像でちょっとオシャレにしてみた、という内容でした。
テキストのみの引用と比べると、見やすくていい感じですね。
今回は引用タグを直接記述しているので、ちょっと大変でした。
これをHugoのショートコードで作れたらいいな、とか考えています。
それでは、このへんで。
バイナリー！
