タイトル通りですが、1.引用文の背景の色が濃く、引用符の色が薄かったので逆転させました。その後、2.引用文の背景をサイドバーとかの灰色に変えて落ち着かせました。
後は、3.paddingを上下・左右と設定し、引用文が引用符に囲まれてるよ感を出しました。で、4.スマホ・タブレット・PCで表示されているか確認すると、スマホ横向きで 若干おかしくなるので修正して、一応大丈夫かなという感じにおさまりました。
そして、5.引用符の文字スタイルによってスマホ・タブレット・PCとで表示場所が狂っていたので文字スタイルを分けました。そこそこ使うことなので一応、書いてみました。
あと一応、6.blockquote(引用文)とそうでないところの文字の流れ方をちょっと弄ってます。(ちょっと危ういです。これは。。。)文字の大きさも少々変えました。
1.引用文背景色をチェンジ (下段 24・36行目と上段10行目チェンジ)
2.引用文の背景を灰色に変える。(その後#f1f1f1へ)
3.囲まれているよ感を出す。(上段12行目 padding 追加)
2.引用文の背景を灰色に変える。(その後#f1f1f1へ)
3.囲まれているよ感を出す。(上段12行目 padding 追加)
blockquote{ font-size: 12px; font-size: 1.7rem; line-height: 1.75; margin-bottom: 1.75em; margin-top: 1.75em; margin-left: 0em; padding-left: 0.3em; margin-right: 0em; background-color: #f1f1f1; border:0px; padding:30px 30px 30px 30px; } blockquote:before{ content: "“"; font-size: 500%; line-height: 0.8em; font-family:"MS Pゴシック" ,sans-serif; color: #767676; position: absolute; top: 10px; left: 0px; z-index: 2; } blockquote:after{ content: "”"; font-size: 500%; line-height: 0em; font-family: "MS Pゴシック" ,sans-serif; color: #767676; position: absolute; right: 0; bottom: 0; z-index: 2; }
4.文字スタイル分け。5.タブレット手前くらいの幅。(下段1行目)
6.文字の流れ方を変える。(下段1~17行目)
6.文字の流れ方を変える。(下段1~17行目)
@media screen and (max-width: 760px){ br { display:none; } blockquote { font-size: 12px; font-size: 1.5rem; line-height: 1.75; margin-bottom: 1.75em; margin-left: 0em; padding-left: 1.85em; margin-right: 0em; } br { display:inline; } blockquote:before{ content: "“"; font-size: 500%; line-height: 0.8em; font-family:'Times New Roman' , "MS Pゴシック" ,sans-serif; color: #767676; position: absolute; top: 0; left: 0; z-index: 2; } blockquote:after{ content: "”"; font-size: 500%; line-height: 0em; font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif; color: #767676; position: absolute; right: 0; bottom: 0; z-index: 2; }
1からやるというよりは、現在のものを修正して使うとか、そういった場合の修正案みたいなものでした。以上です。それではまた!。
結局めんどくさい事をやっているだけかもしれません。
自分なりのサイトを作成していきましょう。
オリジナルがいいです。真似事よりも。初めは真似事ですが。