#Blogger
Bloggerの引用スタイルをカスタマイズします。
FontAwesomeのアイコン用のコードを使用します。
HTMLの編集
念のためバックアップ
Font Awesomeの設定方法
bloggerカスタマイズページ ＞ テーマ ＞ HTMLの編集。
- 「Ctrl」＋「F」で検索ボックスを出し「/head」を検索。
- </head>が黄色くハイライトされるので1行上にFontAwesomeの下記コードを張り付けます。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- ここまで引用スタイル 機能 -->
引用のデザインコードの変更
テーマ ＞ HTMLの編集 ＞「blockquote」を検索- 「Ctrl」＋「F」で検索ボックスを出し「blockquote」を検索。
- 背景色が黄色の部分に背景色がピンク色の部分のコードを貼り付ける
- 「Ctrl」＋「F」で検索ボックスを出し「blockquote」を検索。
- 背景色が黄色の部分に背景色がピンク色の部分のコードを貼り付ける
変更前
#single-content blockquote{
margin: 1em;
display: flex;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
margin-top: -.25em;
line-height: 1;
}
margin: 1em;
display: flex;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
margin-top: -.25em;
line-height: 1;
}
変更後
#single-content blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
background: #efefef;
color: #555;
}
#single-content blockquote:before{
display: inline-block;
position: absolute;
top: 18px;
left: 15px;
content: "\f10d";
font-family: FontAwesome;
color: #cfcfcf;
font-size: 30px;
line-height: 1;
font-weight: 900;
}
参考サイト▶https://cadbiyori.blogspot.com/2019/09/qooq_24.html
投稿
0 件のコメント:
コメントを投稿