#Blogger
Bloggerの引用スタイルをカスタマイズします。
FontAwesomeのアイコン用のコードを使用します。
HTMLの編集
念のためバックアップ
1）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"/>
<!-- ここまで引用スタイル 機能 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- ここまで引用スタイル 機能 -->
2）引用のデザインコードの変更
- テーマ ＞ HTMLの編集 ＞「blockquote」を検索
変更前
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:x-large;
text-align:center
}
変更後
フォントサイズ、テキスト位置を変更します。
blockquote{
color:$(blockquote.color);
font:$(blockquote.font);
font-size:medium;
text-align:left
}
3）CSSの追加
テーマ→カスタマイズ→上級者向け→CSSを追加
<!-- ここから 囲み枠 機能 -->
blockquote {
position: relative;
padding: 10px 12px;
box-sizing: border-box;
font-style: italic;
color: #464646;
border-left: solid 40px #c4c4c4;
background: #f3f3f3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}
blockquote:before{
display: inline-block;
position: absolute;
top: 50%;
left: -32px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
font-family: "Font Awesome 5 Free";
content: "\f10d";
color: #FFF;
font-size: 22px;
line-height: 1;
font-weight: 900;
}
blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
<!-- ここまで 囲み枠 機能 -->
0 件のコメント:
コメントを投稿