引用文の背景と引用符の色をチェンジなど



タイトル通りですが、1.引用文の背景の色が濃く、引用符の色が薄かったので逆転させました。その後、2.引用文の背景をサイドバーとかの灰色に変えて落ち着かせました。

後は、3.paddingを上下・左右と設定し、引用文が引用符に囲まれてるよ感を出しました。で、4.スマホ・タブレット・PCで表示されているか確認すると、スマホ横向きで 若干おかしくなるので修正して、一応大丈夫かなという感じにおさまりました。

そして、5.引用符の文字スタイルによってスマホ・タブレット・PCとで表示場所が狂っていたので文字スタイルを分けました。そこそこ使うことなので一応、書いてみました。

あと一応、6.blockquote(引用文)とそうでないところの文字の流れ方をちょっと弄ってます。(ちょっと危ういです。これは。。。)文字の大きさも少々変えました。

1.引用文背景色をチェンジ (下段 24・36行目と上段10行目チェンジ)
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行目)
@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からやるというよりは、現在のものを修正して使うとか、そういった場合の修正案みたいなものでした。以上です。それではまた!。

結局めんどくさい事をやっているだけかもしれません。
自分なりのサイトを作成していきましょう。
オリジナルがいいです。真似事よりも。初めは真似事ですが。


スポンサーリンク
スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です