블로그스팟(구글블로그) 일부 스킨(템플릿)에 생기는 그림자/테두리 없애기!
일부 템플릿(스킨)에서 발견되는 그림자와 테두리를 제거하는 방법에 대한 내용입니다. 내 블로그는 그런 기능이 없지만, 혹시라도 유료로 구매했는데 이상한 기능땜에 딥빡한 사람을 위한 방안입니다.
그림자/테두리 기능이 드물게 사용하면 좋을 수 있지만 템플릿에서는 약간 과장된 것처럼 보일 수 있습니다, 그러기에 게시물, 이미지 및 헤더에서 그림자를 제거하는 방법을 보여줍니다. 유용하게 사용하시길 바랍니다.
본문에 들어가기전 꼭! 스킨(템플릿)을 미리 백업 해두고 작업하시기 바랍니당 엄근지
(요즘 이런 똥망 구글블로그에 관해서 작성하고 있네;; 댓글도 읍고 못도 읍고 다른 장르를 찾아봐야할듯... 구글 블로그하는 사람들이면 다 알텐뎅)
상자 그림자 및 테두리 제거
그림자 코드는 CSS에 있습니다. 템플릿 > HTML 편집으로 이동 한뒤에 템플릿 코드가 표시됩니다. CSS는 와 사이 <b:skin>에 ]]><b:skin>있습니다. 못찾겠다고...? 오.. ctrl+F 눌러보세요! 그리고 적어보세요... 안나온다? 흐음... 대충 개구리짤
HTML에서 제거하고 싶은 그림자나 테두리가 있는 경우 템플릿의 CSS 섹션에서 해당 요소를 찾으세요. box-shadow또는 border속성을 찾아 값을 0또는 none로 바꿔서 적으세요.
상자 그림자 제거
상자 그림자가 있는 모든 요소를 찾으십시오. 아래처럼 보일 겁니다.
selector { -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 10px #333333; box-shadow: 0 0 40px rgba(0, 0, 0, .15); } |
|---|
템플릿 디자이너 변수를 사용하는 경우 값이 다르게 보일 수 있습니다. 사용하는 경우 다음과 같이 표시됩니다.
selector { -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2); -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2); box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2); } |
|---|
대괄호 안의 선언을 다음으로 교체하여 그림자를 제거하려면 두 변수의 값을 조심히 편집해야 합니다.(미리 백업은 해두세요 중요!)
-moz-box-shadow: none; -goog-ms-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; |
|---|
또는 일반적으로 더 나은 선택에 대한 선언을 모두 삭제~합시다.
텍스트 그림자 제거
다시 템플릿 > HTML 편집으로 이동하여 CSS 섹션을 찾습니다. 컨트롤+F로 text-shadow찾아서 제거하거나 값을 nill로 변경하세요.
예를 들어 헤더의 블로그 제목에서 텍스트 그림자를 제거하려면 찾아 Header h1다음과 같이 변경합니다.
Header h1 { text-shadow:none; } |
|---|
이미지에서 그림자 제거
템플릿 > HTML 편집에서 다음을 찾습니다.
post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img |
|---|
다음과 같이 값을 변경합니다.
post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { -moz-box-shadow: none ; -goog-ms-box-shadow: none; -webkit-box-shadow:none; box-shadow:none; } |
|---|
이미지에서 테두리 제거
아래에 표시된 것과 동일하게 값을 없음으로 변경하거나 코드를 삭제하세요
post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { border: 0px; } |
|---|