Bloggerテンプレートsimplify2の引用符は、ウェブ上でよく見かけるものと違うので、fontawesomeのアイコンを利用して変更してみます。
これから変更手順を一つ一つ追っていきますが、以下のデザインで十分という方は、お使いのfontawesomeのバージョンをご確認になった上で「変更例」からコードをコピーしてご利用ください。
（simplify2のデフォルトのバージョンはfontawesome４となっています）
（変更を加える前にバックアップを取っておくことをオススメします）
変更前
引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引
変更例１
引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引
引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引用符引
検索ワード .post-body blockquote
アイコンを挿入する前に既定のデザインを変更します。
「テーマ」→「HTMLの編集」と続けてクリックし、ctrl+Fもしくはcommand+Fを押して検索窓に「.post-body blockquote」と入力します。
該当する箇所がいくつか出てきますが、主な変更場所は以下の４箇所なので必要に応じて変更します。
.post-body blockquote{
.post-body blockquote:before,.post-body blockquote:after{
.post-body blockquote:before{
.post-body blockquote:after{
変更箇所
.post-body blockquote{
position:relative;
margin:0 auto;
padding:24px 20px 24px 45px;/*左右の余白を等しくする場合は20pxと45pxの２つの数値を同一にする*/
line-height:24px;/*引用符内の行間の変更*/
text-shadow:0 1px 1px white;
background-color:#f2f6c1;/*背景色の変更*/
background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);/*背景として使用されている枠線を消す場合はここを削除*/
border:1px solid rgba(0,0,0,0.1);/*引用符の枠線。消す場合は削除*/
font-family:cursive/*フォントの種類を指定。削除した場合は本文と同じフォント*/
}
.post-body blockquote:before{
border:4px solid rgba(239,207,173,0.7)/*左の縦線を消す場合は削除*/
}
.post-body blockquote:after{
z-index:-1;
left:0;right:0;
background:rgba(242,246,193,0.9);
border:1px solid rgba(170,157,134,0.7);
transform:rotate(2deg)
fontawesomeのアイコンを追記
すでに疑似要素のセレクタが使用されているので、これを利用してfontawesomeに関する記述を追記・変更します。
.post-body blockquote:before{
top:0;/*上からのアイコンの位置*/
left:20px;/*左からのアイコンの位置*/
content:'\f10d';/*fontawesomeのサイトで調べたアイコンのユニコード*/
font-family:fontawesome;/*フォントオーサムのバージョンが４の場合。バージョンが５の場合は"Font Awesome 5 Free"に変更*/
position:absolute;/*アイコンの位置を絶対位置で指定*/
}
.post-body blockquote:after{
bottom:0;/*下からのアイコンの位置*/
right:20px;/*右からのアイコンの位置*/
content:'\f10e';/*fontawesomeのサイトで調べたアイコンのユニコード*/
font-family:fontawesome;/*フォントオーサムのバージョンが４の場合。バージョンが５の場合は"Font Awesome 5 Free"に変更*/
position:absolute;/*アイコンの位置を絶対位置で指定*/
}
なおfontawesomeのサイトで引用符を探す場合、検索欄に「quote」と入力すると引用符が表示されますが、無料で使えるものは1種類のようです。（2019年3月現在）
fontawesomeのサイト（引用符）
変更例１ fontawesomeバージョン４の場合
手順１
検索窓に「.post-body blockquote」と入力し、
以下の
.post-body blockquote
から
transform:rotate(2deg)}
までを削除します。
.post-body blockquote{
position:relative;margin:0 auto;padding:24px 20px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#f2f6c1;background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);border:1px solid rgba(0,0,0,0.1);font-family:cursive}
.post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}
.post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}
.post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(242,246,193,0.9);border:1px solid rgba(170,157,134,0.7);
transform:rotate(2deg)
}
手順２
削除したところに以下のコードを貼り付けます。
.post-body blockquote{position:relative;margin:0 auto;padding:24px 45px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#FFE8EC;border-radius:5px;}.post-body blockquote:before{top:5px;left:10px;content:'\f10d';font-family:fontawesome;font-size:25px;color:white;position:absolute;}.post-body blockquote:after{bottom:5px;right:10px;content:'\f10e';font-family:"fontawesome";font-size:25px;color:white;position:absolute;
変更例１ fontawesomeバージョン５の場合
手順１
検索窓に「.post-body blockquote」と入力し、
以下の.post-body blockquoteからtransform:rotate(2deg)
}までを削除します。
.post-body blockquote{
position:relative;margin:0 auto;padding:24px 20px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#f2f6c1;background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);border:1px solid rgba(0,0,0,0.1);font-family:cursive}
.post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}
.post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}
.post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(242,246,193,0.9);border:1px solid rgba(170,157,134,0.7);
transform:rotate(2deg)
}
手順２
削除したところに以下のコードを貼り付けます。
.post-body blockquote{position:relative;margin:0 auto;padding:24px 45px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#FFE8EC;border-radius:5px;}.post-body blockquote:before{top:5px;left:10px;content:'\f10d';font-family:"Font Awesome 5 Free";font-weight:900;font-size:25px;color:white;position:absolute;}.post-body blockquote:after{bottom:5px;right:10px;content:'\f10e';font-family:"Font Awesome 5 Free";font-weight:900;font-size:25px;color:white;position:absolute;
変更例２ fontawesomeバージョン４の場合
手順１
検索窓に「.post-body blockquote」と入力し、
以下の
.post-body blockquote
から
transform:rotate(2deg)
}までを削除します。
.post-body blockquote{
position:relative;margin:0 auto;padding:24px 20px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#f2f6c1;background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);border:1px solid rgba(0,0,0,0.1);font-family:cursive}
.post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}
.post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}
.post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(242,246,193,0.9);border:1px solid rgba(170,157,134,0.7);
transform:rotate(2deg)
}
手順２
削除したところに以下のコードを貼り付けます。
.post-body blockquote{position:relative;margin:0 auto;padding:24px 45px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#e2e2e2;border-radius:5px;}.post-body blockquote:before{top:5px;left:10px;content:'\f10d';font-family:fontawesome;font-size:25px;color:white;position:absolute;}.post-body blockquote:after{bottom:5px;right:10px;content:'\f10e';font-family:fontawesome;font-size:25px;color:white;position:absolute;}
変更例２ fontawesomeバージョン５の場合
手順１
検索窓に「.post-body blockquote」と入力し、
以下の
.post-body blockquote
から
transform:rotate(2deg)
}までを削除します。
検索窓に「.post-body blockquote」と入力し、
以下の
.post-body blockquote
から
transform:rotate(2deg)
}までを削除します。
position:relative;margin:0 auto;padding:24px 20px 24px 45px;line-height:24px;text-shadow:0 1px 1px white;background-color:#f2f6c1;background-image:-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);border:1px solid rgba(0,0,0,0.1);font-family:cursive}
.post-body blockquote:before,.post-body blockquote:after{content:'';position:absolute;top:0;bottom:0}
.post-body blockquote:before{left:20px;border:4px solid rgba(239,207,173,0.7)}
.post-body blockquote:after{z-index:-1;left:0;right:0;background:rgba(242,246,193,0.9);border:1px solid rgba(170,157,134,0.7);
transform:rotate(2deg)
}
手順２
削除したところに以下のコードを貼り付けます。
.post-body blockquote{position:relative;margin:0 auto;padding:24px 45px 24px 45px;
line-height:24px;text-shadow:0 1px 1px white;background-color:#e2e2e2;border-radius:5px;}.post-body blockquote:before{
top:5px;left:10px;content:'\f10d';font-family:"Font Awesome 5 Free";font-weight:900;
font-size:25px;color:white;position:absolute;}.post-body blockquote:after{bottom:5px;right:10px;content:'\f10e';font-family:"Font Awesome 5 Free";
font-weight:900;font-size:25px;color:white;position:absolute;}
0 件のコメント:
コメントを投稿