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

目次

• 引用デザインを変更しました
• 引用符
• 作業手順
  • 1. FontAwesomeのアイコンをダウンロード
  • 2.svg形式の画像をbase64形式に変換
  • 3.疑似要素::before ,::afterで変換した画像をbackground-imageとして使用
  • 参考にさせていただいたサイト

引用デザインを変更しました

デフォルトの引用blockquoteがやや寂しく感じたので変更しました。

変更の過程でわかったこともあったので備忘録的に書きます。

やりたかったこと

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

引用符

解説サイトを見るとFontAwesomeで疑似要素をつかってマークをつけているところが多かったです。

このブログはFontAwesomeのアイコンをインラインでつかっているのでなかなかうまくいきませんでした。

いろいろ試しましたが下記方法でうまくできました。

他にもっといいやり方があるかもしれませんが、満足できる結果になりました。

作業手順

HTMLを編集します。必ずバックアップを取ってから作業してください。

1. FontAwesomeのアイコンをダウンロード
2. svg形式の画像を base64形式に変換
3. 変換した画像を、疑似要素 ::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 encode

base64 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の数値が変わってきます。

参考にさせていただいたサイト