即戦力としての日本語教師になる
実習の多いKEC日本語学院 がオススメ！

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

2023/9/11(月)

 こんばんは！突然ですが、このブログでは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;
}

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

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

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

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

あい

あい

日本の片田舎でコソコソと英検1級の勉強をしているアラフォーママ。学習記録と育児記録を残してます。外国語が大好きで今は英語と韓国語をメインに勉強中。洋書も勉強を兼ねて読んでます💕
Next Post Previous Post
No Comment
Add Comment
comment url

時間がないワーママの救世主！
試験合格のため、隙間時間に「たのまな 日本語教育能力検定試験　完全合格講座」の音声データを聞いて勉強ををしています。

XServerドメイン
独自ドメインでBloggerを運営するなら、
  • 価格が比較的安い
  • 価格設定が分かりやすい
  • 移管しても無料でWhois情報公開代行してくれる
Xserverドメイン がオススメ！