티스토리 blockquote 인용 css 디자인 수정, 편집하여 꾸미기

이전에 쓴 글(링크)을 살펴보다보니, 변경한 블로그 스킨을 인용글 디자인이 기본으로 되어있는 것을 확인할 수 있었습니다. 티스토리 css를 편집해서 blockquote 인용 styel 1의 디자인을 다르게 변경해보려고 합니다.

티스토리 html, css 수정하기

▼ 티스토리 blockquote 인용 styel 1 기본 디자인의 모습은 다음과 같습니다. 구글 크롬 기준으로 수정할 곳 위에 마우스 커서를 올려두고, 마우스 우클릭을 하고 [검사]를 클릭하면 html과 css를 볼 수 있는 개발자모드로 들어가게 됩니다. 개발자 모드에서 마우스를 올려두면 어떤 부분의 수정할 소스인지 확인할 수 있습니다.

인용글의 소스는 blockquote로 css에서 살펴보면 #tt-body-page blockquote[data-ke-style='style1']와 #tt-body-page blockquote에서 값이 정해져 있는 것을 확인할 수 있습니다.

▼ 수정할 곳

#tt-body-page blockquote[data-ke-style='style1']

#tt-body-page blockquote {
    margin: 20px auto 0;
}

변경할 티스토리 인용글(blockquote) 디자인

▼ 참고한 티스토리 인용글(blockquote) css 디자인(출처: https://codepen.io/cliftwalker/pen/XJaEXY)을 일부 수정하여 티스토리에 맞게 변경하였습니다.

#tt-body-page blockquote[data-ke-style='style1']{
  text-align:left!important;
  font-size: 1.4em!important;
  width:60%!important;
  margin:50px auto!important;
  color: #555555!important;
  padding:1.2em!important;
  border-left:8px solid #1a5490!important;
  line-height:1.6!important;
  position: relative!important;
  background:#EDEDED!important;
}

#tt-body-page blockquote span{
  color:#333333!important;
  font-style: normal!important;
  font-weight: bold!important;
  margin-top:1em!important;
}

인용글의 왼쪽 외각선 색상을 변경하고 싶다면 #1a5490 색상 값을 수정하면 됩니다.

배경색을 수정하고 싶다면 #EDEDED의 색상을 변경하면 됩니다.

글자 색상을 변경하려면 #555555과 #333333 색상을 수정하시면 됩니다.