[Blogger][Vaster2] 引用デザインを変更しました（引用符を付けました）

2022年01月20日更新

2019年04月15日公開

当サイトはアフィリエイト広告を使用しています

引用デザインを変更しましたデフォルトの引用blockquoteがやや寂しく感じたので変更しました。変更の過程でわかったこともあったので備忘録的に書きます。やりたかったこと

引用符（マーク）をつけたい

引用符解説サイトを見るとFontAwesomeで疑似要素をつかってマークをつけているところが多かったです。このブログはFontAwesomeのアイコンをインラインでつかっているのでなかなかうまくいきませんでした。いろいろ試しましたが下記方法でうまくできました。他にもっといいやり方があるかもしれませんが、満足できる結果になりました。作業手順HTMLを編集します。必ずバックアップを取ってから作業してください。

FontAwesomeのアイコンをダウンロード

svg形式の画像を base64形式に変換

変換した画像を、疑似要素 ::before,::afterでbackground-imageとして使用

1. FontAwesomeのアイコンをダウンロードDownload | Font Awesomeの Free for Web をダウンロード解凍（展開）したフォルダーのなかの [svgs] - [solid] にある quote-left.svgとquote-right.svgを使用します。quote-left.svgとquote-right.svgをそれぞれメモ帳などのテキストエディタで開くquote-left.svgの中身<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"/></svg>quote-right.svgの中身<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>2.svg形式の画像をbase64形式に変換変換サービスを行っているサイトをつかいましたこれらのサイトはCSS用の background-imageに変換してくれました。:)SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログSVGをbase64でCSSに埋め込みb64.io - image optimisation & base64 encodebase64 quote-left.svg の中身background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M464%20256h-80v-64c0-35.3%2028.7-64%2064-64h8c13.3%200%2024-10.7%2024-24V56c0-13.3-10.7-24-24-24h-8c-88.4%200-160%2071.6-160%20160v240c0%2026.5%2021.5%2048%2048%2048h128c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48zm-288%200H96v-64c0-35.3%2028.7-64%2064-64h8c13.3%200%2024-10.7%2024-24V56c0-13.3-10.7-24-24-24h-8C71.6%2032%200%20103.6%200%20192v240c0%2026.5%2021.5%2048%2048%2048h128c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48z%22%2F%3E%3C%2Fsvg%3E')base64 quote-right.svg の中身background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M464%2032H336c-26.5%200-48%2021.5-48%2048v128c0%2026.5%2021.5%2048%2048%2048h80v64c0%2035.3-28.7%2064-64%2064h-8c-13.3%200-24%2010.7-24%2024v48c0%2013.3%2010.7%2024%2024%2024h8c88.4%200%20160-71.6%20160-160V80c0-26.5-21.5-48-48-48zm-288%200H48C21.5%2032%200%2053.5%200%2080v128c0%2026.5%2021.5%2048%2048%2048h80v64c0%2035.3-28.7%2064-64%2064h-8c-13.3%200-24%2010.7-24%2024v48c0%2013.3%2010.7%2024%2024%2024h8c88.4%200%20160-71.6%20160-160V80c0-26.5-21.5-48-48-48z%22%2F%3E%3C%2Fsvg%3E')3.疑似要素::before ,::afterで変換した画像をbackground-imageとして使用blockquote { position:relative; padding:10px; border-top:1px solid #7A87B0; border-bottom:1px solid #7A87B0; } blockquote::before { position: absolute; content: '';/* 何も入れないこと */ width: 16px;/* 画像の幅 */ height: 16px;/* 画像の高さ */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDY0IDI1NmgtODB2LTY0YzAtMzUuMyAyOC43LTY0IDY0LTY0aDhjMTMuMyAwIDI0LTEwLjcgMjQtMjRWNTZjMC0xMy4zLTEwLjctMjQtMjQtMjRoLThjLTg4LjQgMC0xNjAgNzEuNi0xNjAgMTYwdjI0MGMwIDI2LjUgMjEuNSA0OCA0OCA0OGgxMjhjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWMzA0YzAtMjYuNS0yMS41LTQ4LTQ4LTQ4em0tMjg4IDBIOTZ2LTY0YzAtMzUuMyAyOC43LTY0IDY0LTY0aDhjMTMuMyAwIDI0LTEwLjcgMjQtMjRWNTZjMC0xMy4zLTEwLjctMjQtMjQtMjRoLThDNzEuNiAzMiAwIDEwMy42IDAgMTkydjI0MGMwIDI2LjUgMjEuNSA0OCA0OCA0OGgxMjhjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWMzA0YzAtMjYuNS0yMS41LTQ4LTQ4LTQ4eiIvPjwvc3ZnPgo8IS0tCkZvbnQgQXdlc29tZSBGcmVlIDUuMy4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tCkxpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgKEljb25zOiBDQyBCWSA0LjAsIEZvbnRzOiBTSUwgT0ZMIDEuMSwgQ29kZTogTUlUIExpY2Vuc2UpCi0tPg==); top: -10px; left: -10px; } blockquote::after { position: absolute; content: '';/* 何も入れないこと */ width: 16px;/* 画像の幅 */ height: 16px;/* 画像の高さ */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDY0IDMySDMzNmMtMjYuNSAwLTQ4IDIxLjUtNDggNDh2MTI4YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDgwdjY0YzAgMzUuMy0yOC43IDY0LTY0IDY0aC04Yy0xMy4zIDAtMjQgMTAuNy0yNCAyNHY0OGMwIDEzLjMgMTAuNyAyNCAyNCAyNGg4Yzg4LjQgMCAxNjAtNzEuNiAxNjAtMTYwVjgwYzAtMjYuNS0yMS41LTQ4LTQ4LTQ4em0tMjg4IDBINDhDMjEuNSAzMiAwIDUzLjUgMCA4MHYxMjhjMCAyNi41IDIxLjUgNDggNDggNDhoODB2NjRjMCAzNS4zLTI4LjcgNjQtNjQgNjRoLThjLTEzLjMgMC0yNCAxMC43LTI0IDI0djQ4YzAgMTMuMyAxMC43IDI0IDI0IDI0aDhjODguNCAwIDE2MC03MS42IDE2MC0xNjBWODBjMC0yNi41LTIxLjUtNDgtNDgtNDh6Ii8+PC9zdmc+CjwhLS0KRm9udCBBd2Vzb21lIEZyZWUgNS4zLjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20KTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSAoSWNvbnM6IENDIEJZIDQuMCwgRm9udHM6IFNJTCBPRkwgMS4xLCBDb2RlOiBNSVQgTGljZW5zZSkKLS0+); right:-10px; bottom:-10px; }疑似要素の部分は場合によってdisplay:inline-block,background-color,vertical-align,background-sizeなどが必要になるかもしれない。またwidth,heightのサイズによってleft,right,top,bottomの数値が変わってきます。参考にさせていただいたサイト