티스토리 구글블로그 본문 이미지 라운드 효과 주기

블로그의 이미지를 좀더 보기 좋게 만드는 효과 중 하나가 라운드 효과입니다. 네모 반듯한 이미지보다 가장자리가 둥글게 라운드로 마감되어 있는 이미지는 부드럽고 깔끔한 이미지를 주죠. 그래서 제 티스토리와 구글블로그 스킨도 라운드 효과를 줘 봤습니다.

 

1. 티스토리 본문 이미지 라운드 효과

블로그에서 가장 중요한 부분은 본문이라고 생각합니다. 대부분 검색으로 유입되기 때문에 방문자가 홈화면까지 보는 경우는 그렇게 많지 않아요. 그래서 저는 본문 이미지만 라운드 효과를 줘보려고 합니다.

/*티스토리 본문 이미지 라운드효과 */
.area_view img {pointer-events: none; border-radius:10px}

티스토리 CSS 편집모드에서 위에 나와 있는 .area_view img 부분을 검색합니다. 제 기준으론 200번째 줄 근처네요. 이 코드에 border-radius:10px을 추가하면 됩니다. 숫자가 커질수록 라운드 효과 면적이 커집니다.

티스토리 본문 이미지 라운드 효과

코드 수정을 마치고 저장하면 위의 사진처럼 가장자리가 둥글게 변합니다.

2. 구글블로그 본문 이미지 라운드 효과

구글블로그도 비슷한 방법입니다. 블로그스팟 html 편집창으로 들어가서 해당 코드를 수정하면 됩니다. 제 구글블로그 스킨은 .post-body img에 속성이 지정되어 있네요. 마찬가지로 이 코드에 border-radius:10px을 추가해주면 됩니다.

/*구글블로그 본문 이미지 라운드효과 */
.post-body img{border-radius:10px; max-width:100%; height:auto; pointer-events: none}

이렇게 구글블로그에도 정상적으로 효과가 적용되었습니다.

구글블로그 본문 이미지 라운드 효과

스킨의 종류에 따라서 본문 이미지 속성을 지정한 곳의 명칭이 다를 수 있습니다. 티스토리는 area_view, 구글블로그는 post-body 인것 처럼요. 이미지 효과는 img를 공통으로 사용하니 코드에서 img를 검색해서 하나씩 바꿔보면 찾을 수 있습니다.

---

본문 이미지에 라운드 효과를 주니 훨씬 보기 좋네요. 기존 포스트는 너무 네모반듯한 이미지 때문에 날카로운 느낌이었거든요. 포스팅 본문 사진만큼은 라운드 효과 적용해 보는거 추천합니다.