今回、趣味用に立ち上げたseesaaブログの引用ボックスをカスタマイズしてみました。
その方法を記録しておきたいと思います。
カスタマイズをする際は、必ずバックアップを取った上でのカスタマイズをオススメします。
seesaaブログの引用ボックスをカスタマイズするぞ
デフォルトのCSS
- シンプル・まとめシリーズ
シンプルＡ～のシリーズやまとめシリーズのデザインテンプレートを使用している場合、デフォルトで設定されている引用のCSSはこちらです。（多分。笑）
cssblockquote {
padding: 20px;
color: #666;
background-color: #ddd;
}
padding: 20px;
color: #666;
background-color: #ddd;
}
- Standard_2018シリーズ
standard2018シリーズではアイコンにFont Awesomeが使用されています。
css.Article__content blockquote {
position: relative;
margin: 0;
padding: 30px;
background: #f2f2f2;
font-style: italic;
}
.Article__content blockquote:before {
content: “”;
display: none;
font-family: “Font Awesome 5 Solid”;
}
.Article__content blockquote:after {
content: “”;
display: none;
font-family: “Font Awesome 5 Solid”;
}
.Article__content blockquote .fa-quote-left {
position: absolute;
top: 10px;
left: 10px;
color: #999;
}
.Article__content blockquote .fa-quote-right {
position: absolute;
right: 10px;
bottom: 10px;
color: #999;
}
position: relative;
margin: 0;
padding: 30px;
background: #f2f2f2;
font-style: italic;
}
.Article__content blockquote:before {
content: “”;
display: none;
font-family: “Font Awesome 5 Solid”;
}
.Article__content blockquote:after {
content: “”;
display: none;
font-family: “Font Awesome 5 Solid”;
}
.Article__content blockquote .fa-quote-left {
position: absolute;
top: 10px;
left: 10px;
color: #999;
}
.Article__content blockquote .fa-quote-right {
position: absolute;
right: 10px;
bottom: 10px;
color: #999;
}
seesaaデザインからCSSを開く
①seesaaの管理画面からデザインを選択
②CSS/HTML編集をクリック
③使用しているデザインタイトルをクリック
1095行目に引用のCSSがありました。
シンプルシリーズで使用されている
blockquote{〜
だけの場合、298行目にありました。
ここを触ってカスタマイズするのも大丈夫ですが、スタイルシートの1番最後に変更したいCSSを追加した方が、元に戻しやすいのと分かりやすいです。
（スタイルシートの下に追加したものから反映される仕組みになっています。）
私が使用しているデザインの引用セレクタは
.Article__content blockquote {
だという事が分かりました。
引用の背景色を変える
背景色や文字色を変更する場合は下記のCSSにあるカラーコードを変更していきます。
.Article__content blockquote {
position: relative;
margin: 0;
padding: 30px;
background: #f2f2f2; /*背景色*/
font-style: italic; /*フォント*/
}
position: relative;
margin: 0;
padding: 30px;
background: #f2f2f2; /*背景色*/
font-style: italic; /*フォント*/
}
上記には文字のfont-color がないので{ }の中に追加します。
因みに私の場合ですが
変更後のCSS.Article__content blockquote {
position: relative;
margin: 0;
padding: 30px;
background: #fff;
font-style: italic;
border: solid 2px #464646;
}
position: relative;
margin: 0;
padding: 30px;
background: #fff;
font-style: italic;
border: solid 2px #464646;
}
背景色の background: を白に変更
border: solid 2px #464646; で、枠線を追加しました。
↓ 変更後
何か変ですね(笑)
多分、また変えると思います。
多分、また変えると思います。
引用の上下にある「❝」←この記号の色は .Article__content blockquote .fa-quote-leftとrightのセレクタにあるcolorを変更していきます。
CSS.Article__content blockquote .fa-quote-left {
position: absolute;
top: 10px;
left: 10px;
color: #999; ←ここ
}
.Article__content blockquote .fa-quote-right {
position: absolute;
right: 10px;
bottom: 10px;
color: #999; ←ここ}
position: absolute;
top: 10px;
left: 10px;
color: #999; ←ここ
}
.Article__content blockquote .fa-quote-right {
position: absolute;
right: 10px;
bottom: 10px;
color: #999; ←ここ}
引用デザインのサンプルをまるっとコピペしちゃうのも手
シンプルシリーズなどの「blockquote」だと、デフォルトでは引用ボックスによくある「❝」この記号すら付いていない簡素なものなので、ガツンとカスタマイズしたい場合は、公開されているサンプルのCSSをまるっとコピペしちゃうのも一つの手です。
CSSをコピペしてくる場合、セレクタまで変えてしまわないように注意しましょう。
cssの最初にある.Article__content blockquote やblockquote が合っていないと使用できなくなるため、コピペするのは｛｝内だけにします。
そのため自分のデザインは何のセレクタを使用しているのか知る必要があるわけです。
カスタマイズがんばってね！
スタイルシートを見ていると英数字や記号が羅列してあり、少し間違えるだけでエラーになってしまうので難しそうなイメージですが、要領を得てしまえば簡単にカスタマイズすることが出来ます。
自分好みのサイトになるまで一緒にコツコツ頑張りましょう！