Howto

【JINカスタマイズ】css-引用を見やすく

JINの引用、初期状態ではかなりシンプルなので、少し見やすくしたいと思いました。

モフ子

最近、「引用」を使うことを覚えました!

今回はCSS勉強中の方にもわかりやすいように、段階的に説明してみることにしました。

カスタマイズの注意事項

必ず「子テーマのstyle.css」に追加してください。

JIN デフォルトの引用ボックス

↑これを段階を追ってカスタマイズしていきます。

背景色を変更する

css
.cps-post-main blockquote {
background: #f2faff;
}

背景色を変えただけですが、だいぶ印象が変わりました。

マークを変更する

css
.cps-post-main blockquote:after {/*左上のマーク*/
bottom: 5px;/*表示位置*/
right: 5px;/*表示位置*/
font-size: 3rem;/*マークの大きさ*/
}
.cps-post-main blockquote:before {/*右下のマーク*/
top: 5px;/*表示位置*/
left: 5px;/*表示位置*/
font-size: 3rem;/*マークの大きさ*/
}

❝❞のマークを1段階小さくしてみました。合わせて位置も変更。

中の要素を変更する

css
.cps-post-main blockquote p {/*ボックスの文章部分*/
padding: 0;
margin: 7px 0;
line-height: 1.7;/*行間*/
}
.cps-post-main blockquote cite{/*ボックスの参照先部分*/
display: block;/*ブロック要素にして*/
text-align: right;/*右寄せに*/
margin:0;
}

見た目をもう少しおしゃれに

css
.cps-post-main blockquote {/*ボックス全体*/
padding: 1em 1.5em 1em 3em;/*ボックスの中のアキ調整*/
background: #f2faff;/*最初に設定した背景色*/
border-left: 4px solid #9dd4ff;/*左に線を引く*/
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);/*少し影をつける*/
}

どうでしょうか。キレイ目のパーツになりました。

モフ雄

読みやすくなったよね!

そのカスタマイズした「引用」を使用してみたのがこちらの記事です。
ページ下部の方にあります。

【簡単料理】ハンドブレンダーで簡単ポタージュ
【簡単料理】ハンドブレンダーでポタージュスープ 離乳食、介護食作りにもハンドブレンダーを使った簡単ポタージュやバナナジュースの作り方を説明しています。またハンドブレンダーの紹介もしています。...