BloggerのテーマJetthemeで引用(blockquote)のマークをSVGで表示する

 こんばんは！突然ですが、このブログではBloggerのJetthemeというテーマ(テンプレート)を使っています。

昨日、記事を書いている時に気づいたんですが、このテーマで「引用」を使ってなにかを書いても、“”の記号が出ない？

カスタマイズが好きですが、詳しくない私。“”マークを使えるようになるまでの道のりが長かった😅←勉強せい。

JetthemeにSVGで引用マークをつけたい

Jetthemeのテーマに""マークが用意されていないようで、カスタマイズすることにしました。

FontAwesomeを使っているカスタマイズ記事ばかりで、コピペで使えそうなSVGアイコンを使ったデザインの記事が見つからず四苦八苦。

SVGアイコンを使っているこのJetthemeのテーマで、あえて表示速度が遅くなるFontAwesomeは読み込みたくないなー。

SVGのアイコンを取り入れようにも、使い方が分からず、出来上がった引用のデザインを防備録として書いておこうとおもいます。

参考元>>SVGアイコンをCSS疑似要素で配置する方法｜IE11にも対応
 

Jetthemeで使用したい引用のデザインを探す

【CSSコピペOK】おしゃれな引用blockquoteデザイン10選の上下のラインに引用符をつけるから使わせて頂いてます。

引用 CSSで検索をして、気になるデザインを選びました。
 

 

SVGでクオテーションマークを見つける

SVGで“”(ダブルクオーテーション)マークがうまく見つけられず、SVG Repoでお借りしました。

1. “はコレ
2. ”はコレ

選んだらEdit Vectorというボタンを押して好みの色とサイズに変更(あんまり良くわかってないです)して、Copy SVGを押して、出たきたながーい文字列をコピーする。

SVGをCSS用に変換する 

出てきたながーい文字列を、URL-encoder for SVGのInsert SVG:と書いてある下に貼り付ける。

大きさを好みのサイズにするため、width="20px" height="20px"と、2つとも数字を変更しました。

Ready for CSS:に表示されたコードをコピーする。

引用デザインのCSSと置き換える

詳しくはわからないですが、試してみた中で引用マークが表示されたコードを残しておきます。

blockquote:before{
    position:absolute;
    background-color:#FFFFFF;
    color:#7A87B0;
    font-family:'FontAwesome';
    content:'\f10d';
    line-height:1;
    text-align:center;
    top:-20px;
    left:-10px;
    padding:10px;
    font-size:20px;
}

修正箇所１

• font-family:'FontAwesome';を消す
• content:'';に変える
• }の上(どこでもいいのかな？)に“のアイコン用にコピーしたものを貼り付ける
• top:-10px;にする

blockquote:after{
    position:absolute;
    right:-10px;
    bottom:-20px;
    background-color:#FFFFFF;
    padding:10px;
    color:#7A87B0;
    font-family:'FontAwesome';
    content:'\f10e';
    line-height:1;
    text-align:center;
    font-size:20px;
}

修正箇所２

• font-family:'FontAwesome';を消す
• content:'';に変える
• }の上に”用に選んでコピペしたコードを貼り付ける
• bottom:-10px;に変更

ブログによって表示が変わってくると思うので、適宜変更してくださいね〜！

私のブログでのコードはコレだ！

blockquote{
    position:relative;
    border-top:1px solid #7A87B0;
    border-bottom:1px solid #7A87B0;
    padding:10px;
}
blockquote:before{
    position:absolute;
    background-color:#FFFFFF;
    color:#7A87B0;
    content:'';
    background-image: url('data:image/svg+xml,%3Csvg fill="%237A87B0" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="-10.47 -10.47 370.02 370.02" xml:space="preserve" stroke="%237A87B0"%3E%3Cg id="SVGRepo_bgCarrier" stroke-width="0"%3E%3C/g%3E%3Cg id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="%23CCCCCC" stroke-width="13.96312"%3E%3C/g%3E%3Cg id="SVGRepo_iconCarrier"%3E%3Cg%3E%3Cpath d="M150.299,26.634v58.25c0,7.9-6.404,14.301-14.304,14.301c-28.186,0-43.518,28.909-45.643,85.966h45.643 c7.9,0,14.304,6.407,14.304,14.304v122.992c0,7.896-6.404,14.298-14.304,14.298H14.301C6.398,336.745,0,330.338,0,322.447V199.455 c0-27.352,2.754-52.452,8.183-74.611c5.568-22.721,14.115-42.587,25.396-59.048c11.608-16.917,26.128-30.192,43.16-39.44 C93.886,17.052,113.826,12.333,136,12.333C143.895,12.333,150.299,18.734,150.299,26.634z M334.773,99.186 c7.896,0,14.305-6.407,14.305-14.301v-58.25c0-7.9-6.408-14.301-14.305-14.301c-22.165,0-42.108,4.72-59.249,14.023 c-17.035,9.248-31.563,22.523-43.173,39.44c-11.277,16.461-19.824,36.328-25.393,59.054c-5.426,22.166-8.18,47.266-8.18,74.605 v122.992c0,7.896,6.406,14.298,14.304,14.298h121.69c7.896,0,14.299-6.407,14.299-14.298V199.455 c0-7.896-6.402-14.304-14.299-14.304h-44.992C291.873,128.095,306.981,99.186,334.773,99.186z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    line-height:1;
    text-align:center;
    top:-10px;
    left:-10px;
    padding:10px;
    width: 1rem;
    height: 1rem;
}
blockquote:after{
    position:absolute;
    right:-10px;
    bottom:-10px;
    background-color:#FFFFFF;
    padding:10px;
    color:#7A87B0;
    content:"";
    line-height:1;
    text-align:center;
    background-image: url('data:image/svg+xml,%3Csvg fill="%237A87B0" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="-20.94 -20.94 390.96 390.96" xml:space="preserve" stroke="%237A87B0"%3E%3Cg id="SVGRepo_bgCarrier" stroke-width="0"%3E%3C/g%3E%3Cg id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"%3E%3C/g%3E%3Cg id="SVGRepo_iconCarrier"%3E%3Cg%3E%3Cpath d="M198.779,322.441v-58.245c0-7.903,6.406-14.304,14.304-14.304c28.183,0,43.515-28.904,45.643-85.961h-45.643 c-7.897,0-14.304-6.41-14.304-14.304V26.64c0-7.9,6.406-14.301,14.304-14.301h121.69c7.896,0,14.305,6.408,14.305,14.301v122.988 c0,27.349-2.761,52.446-8.181,74.611c-5.568,22.722-14.115,42.587-25.398,59.049c-11.604,16.917-26.132,30.192-43.155,39.437 c-17.152,9.304-37.09,14.026-59.267,14.026C205.186,336.745,198.779,330.338,198.779,322.441z M14.301,249.887 C6.404,249.887,0,256.293,0,264.185v58.257c0,7.896,6.404,14.298,14.301,14.298c22.166,0,42.114-4.723,59.255-14.026 c17.032-9.244,31.558-22.508,43.161-39.437c11.29-16.462,19.836-36.328,25.404-59.061c5.423-22.165,8.178-47.263,8.178-74.6V26.628 c0-7.9-6.41-14.301-14.304-14.301H14.301C6.404,12.327,0,18.734,0,26.628v122.988c0,7.899,6.404,14.304,14.301,14.304h45.002 C57.201,220.982,42.09,249.887,14.301,249.887z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
blockquote cite {
    display: block;
    padding-right:30px;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
}

必要ないコードとかもあると思いますが、スマホから編集しているので、ひとつひとつ試していくには時間がかかりすぎてしまいます。

ひとまず、思ったように“”マークが表示できたので、ここで終わらせようと思います。

久しぶりにブログを書き始めましたが、やっぱり楽しいですね！気分転換にもっとブログ書きたいなー。

今回お世話になったサイト様たち

• URL-encoder for SVG ←このサイト様のおかげで、このブログでもSVGアイコンをCSSで簡単に使えるようになりました！
• SVG Repo
• 【CSSコピペOK】おしゃれな引用blockquoteデザイン10
• SVGアイコンをCSS疑似要素で配置する方法｜IE11にも対応