【blogger設定】QooQのテンプレートで引用デザインのカスタマイズする方法【コピペで簡単】
bloggerテンプレート「QooQ」を使用しています
デフォルトの「引用」のデザインが味気なかったのでカスタマイズしてみました
デフォルトのデザインはシンプルですがもっとはっきりさせようと思います
調べてみるとコピペでできるようなので、今回は「引用」のデザインを変更する方法を紹介します
デフォルトのデザイン
デフォルトのデザインはこんな感じです
このデザインを変えていきます
カスタマイズ方法
それではカスタマイズをしていきます
こちらのブログを参考にしました
→CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
１、FontAwesomeを使用
今回の使用する引用の「”」マークはFontAwesomeというフォントを使用します
HTMLにコードを追加していきます
HTMLを編集するので事前にバックアップを取っておきましょう
まずはカスタマイズ画面から「テーマ」を選択
</head>が黄色くハイライトされるので
1行上に以下のコードを張り付けます
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
これでFontAwesomeの準備は完了です
２、引用デザインを設定
次に引用のデザインを設定していきます
再度「Ctrl」＋「F」で検索ボックスを表示させて、「blockquote」と検索します
Enterキーを何回か押すと以下の画像のように黄色くハイライトされた箇所が出てきます
ここが引用のデザインに影響をしているところです
ここを編集していきます
コピーするのは｛ ｝の中のみです
コピーしたものを下記の黄色いところに張り付けましょう
私は以下のように変更しました
#single-content blockquote{
margin: 1.8rem;
padding-left: 1.8rem;
position: relative;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
position: absolute;
top: -1.8rem;
left: -1.8rem;
line-height: 1;
}
↓
変更後
#single-content blockquote{
position: relative;
padding: 50px 15px 8px 15px;
box-sizing: border-box;
background: #efefef;
color: #555;
}
#single-content blockquote:before{display: inline-block;
position: absolute;
top: 13px;
left: 15px;
content: "\f10d";
font-family: FontAwesome;
color: #cfcfcf;
font-size: 30px;
line-height: 1;
font-weight: 900;
}
サイトを見てると「blockquote p」や「 blockquote cite 」のコードが乗っていますが、今回私は使用しませんでした
これで完成です
プレビューを見るとしっかりデザインが変わっているのがわかります
だいぶ引用したところがわかりやすくなりました
良い感じです
まとめ
今回は引用デザインのカスタマイズ方法について紹介しました
コードをコピペするだけでできるので、HTMLのことがよくわからない私でも上手くいくできました（笑）
ネット上に色々な引用デザインを紹介している人がいるので、自分の好みにカスタマイズできそうです
自分だけのブログを作り上げていきたいですね
