この記事では、私自身がWordPressブログのデザインをカスタマイズをする上でメモしておきたい内容として、「引用文の文字の大きさだけ変えたい」場合のカスタマイズ方法を記載しました。
ブログ記事の文章の文字の大きさは変えず、引用文章の文字だけ大きさを変えたい方は参考になるのではないでしょうか。
真似していただければお好みの文字のサイズに調整できるのではないかと思うので、お悩みの方は参考にしてみてください。
文字の大きさだけではなく、行間などもカスタマイズできるようにしています。
注意
ブログのデザインに関しては素人であり、独学で試しながらやっているものなので参考程度にしてみてください。
ブログで引用文の文字の大きさだけを変える方法
任意の子テーマに下記のコードをコピペするだけで反映させることができます。
親テーマの影響でうまく反映しない場合は、私は「!important;」で対応しています。
「font-size: 13px;」⇨「font-size: 13px!important;」
文字の大きさと行間を変えるコード
/* 引用文章文字サイズ */
.post blockquote p {
font-size: 13px;/* 文字の大きさ */
line-height: 23px;/* 行間 */
}文字の大きさと行間は、任意の数字に書き換えることでサイズ調整できます。
その他の引用に関するカスタマイズ
引用マークの大きさと位置を変えるコード
/* 引用マーク */
.post blockquote::before {
top: 12px;/* 引用マークの上下位置 */
left: 14px;/* 引用マークの左右位置 */
font-size: 10px;/* 引用マークの大きさ */
}引用欄全体のデザインコード
/* 引用デザイン */
.post blockquote {
padding-top: 30px;/* 文章の始まりの位置(上下) */
padding-right: 14px;/* 文章折り返しの余白 */
padding-left: 14px;/* 文章左側の余白 */
padding-bottom: 15px;/* 文章終わりの下の余白 */
margin-top: 10px;/* 引用欄の上の余白 */
margin-right: 0px;/* 引用欄の右の余白 */
margin-bottom: 9px;/* 引用欄の下の余白 */
}全てまとめたコード
/* 引用デザイン */
.post blockquote p {
font-size: 13px;
line-height: 23px;
}
.post blockquote::before {
top: 12px;
left: 14px;
font-size: 10px;
}
.post blockquote {
padding-top: 30px;
padding-right: 13px;
padding-bottom: 15px;
padding-left: 14px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 9px;
}コードの入力方法
上のカスタマイズするために記載したコードをどこへコピペすればいいかわからない方に向けて、簡単ですがテーマへコピペする流れを記載しておきます。
私はエックスサーバーでワードプレスを運営しているため、エックスサーバーを使用した方法で説明させていただくのでご了承ください。
サーバーへログイン
まずはエックスサーバーへログインし「ファイル管理」を開きます。
フォルダを選ぶ
ログイン先にはフォルダが並んでいるので、編集したい自身のブログのフォルダを選ぶ。
私のこのブログであれば「cf-room.com」です。
そこからはファイル内を下のように進んでいきます。
「public_html」⇨「wp-content」⇨「themes」⇨「任意の子テーマ」⇨「style.css」
コピペする場所は「style.css」です。
コピペする
一番下にある「style.css」を選択して「編集」を押してください。
「style.css」のファイルが開かれるので、全体もしくはPCのみ・スマホのみ・タブレットのみなど、任意の場所へコードを記述します。
以上が手順です。
まとめ
今回はWordPressでブログの記事に載せる「引用文」の文字の大きさだけを変えたい場合のカスタマイズ方法をまとめました。
紹介した方法であれば、ブログ記事の本文に影響なく引用文の部分だけ文字のサイズを変えることができるので、自分のブログでも試してみたい方は試してみてください。
＼現在使用中のテーマ／