구글 블로그 사용법: 바디 메인 콘텐츠 영역 바깥 테두리 그림자 없애거나 조절하는 방법 - content-outer shadow

구글 블로그의 기본 템플릿 (simple template)에는 콘텐츠 영역의 테두리에 그림자 (shadow)가 그려지도록 되어 있다. 블로그의 구조나 색상 등에 따라 유용할 수도 있고 그렇지 않을 수도 있겠다.

테두리 그림자를 없애거나 조절하려면 아래 그림과 같이 HTML 편집창에서 content-outer 를 제어하면 된다.

>> 블로그 대시보드 > 템플릿 (template) > HTML 편집 (Edit HTML)을 눌러 편집창을 연다
>> 편집창의 왼쪽에 있는 행번호의 10번 쯤에 보면 <b:skin> ... </b:skin>있다. 이 행의 왼쪽 행번호 옆의 까만색 삼각형을 클릭하여 숨겨진 부분을 펼친다

>> 쭉 아래로 내려가면, 행번호 220번쯤에 content-outer { ----- }가 있다.
그림자를 아예 없애려면, 해당 코드를 모두 삭제하고, 편집창 맨위에 있는 [Save template] 버튼을 눌러 저장을 하고, [back] 버튼을 눌러 편집창을 닫으면 된다.

그림자의 속성을 조절하여 블로그를 꾸미려면, 숫자 부분을 변경하여 조절하면 된다.


[콘텐츠 영역 테두리 속성 없애기]

[구글 블로그 콘텐츠 테두리 속성 코드]

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}