워드프레스 블로그 사진 그림자 넣기
워드프레스 블로그 사진 그림자 넣기 – 블로그 성장 일기 열여섯 번째 이야기
워드프레스 블로그 글 작성시 그림자 효과가 있으면 좋을 것 같다는 생각을 한 적이 있었습니다. 이유는 백색 바탕의 사진 또는 그림일 경우 글과의 경계가 모호해지기 때문입니다.
워드프레스에서 이미지 처리
수익형 블로그를 운영키 위해 도메인 확보, 웹호스팅, 워드프레스 설치 절차 후, 본격적으로 글을 쓰게 됩니다.
이때 글과 관련한 이미지 또는 사진을 사용하게 됩니다. 사진을 넣지 않아도 크게 문제되는 것은 없지만, ‘사진 한 장이 백 마디 말보다 낫다‘라는 말처럼 한 장의 사진으로 명확하게 설명되는 경우가 많습니다.
그런데 워드프레스에서 이미지를 처리하는 기능은 상당히 단순한 편입니다. 사진을 넣고 정렬하거나, 설명문을 넣거나, 이미지를 동그랗게 처리하거나, 특성 이미지를 설정하는 기능 외에 특별한 기능이 없습니다.
제 경우 언제 아쉬움을 느꼈느냐면, 사진 영역과 글 구분이 모호할 때였습니다. 이미지 배경색이 흰색일 때 특히 그렇습니다. 아래 상황을 보면 쉽게 이해가 될 것 같습니다.
그럴때 이미지를 외곽선 처리를 하거나 그림자 효과를 추가한다면 간단히 해결 될 문제인데 늘 그게 약간의 아쉬움이었습니다. 아래 상황을 보면 쉽게 이해가 될 것 같습니다.
위 이미지를 보시면 아시겠지만, 그림자 효과를 넣었더니 글과 그림 영역이 명확히 구분됩니다. 그런데 이미지 속의 내용을 보면 이야기는 달라집니다.
이해를 돕기 위해 위 이미지에 글 영역과 이미지 영역을 연두색 박스로 표시를 했습니다. 이미지에 어떤 효과를 포함 시키지 않았을 때 글과의 구분이 모호해, 어디까지가 이미지인지 구분이 안 된다는 것입니다.
워드프레스 블로그 사진 그림자 넣기
워드프레스 기본 기능만 사용할 경우, 사실 방법은 없습니다. 이의 해결을 위해 플러그인을 설치하면 간단히 해결될 수 있습니다.
그런데 워드프레스 사용자들이 유의해야 할 것 중 간과해서는 안되는 것이 플러그인 과다 설치입니다. 플러그인이 쌓이면 사이트 속도가 저하되고, SEO에도 영향을 미치게 됩니다.
그렇다면 플러그인을 설치하지 않고 해결하면 됩니다. 바로 CSS를 이용하는 것입니다. 아래의 코드를 카피한 후 CSS에 추가하면 간단히 해결 됩니다.
/* 이미지 그림자 테두리 시작 */
.entry-content img {
box-shadow: 1px 1px 10px 3px rgba(1,10,0,0.33);
border: 0px solid rgb(228, 229, 236);
}
/* 이미지 그림자 테두리 끝 */위 내용을 그대로 복사한 후 워드프레스 대시보드 – 디자인 – 사용자 정의하기 – CSS 추가 부분에 붙여 넣으면 간단히 해결 됩니다. 결과는 아래 그림과 같습니다.
어떻습니까, 코드만 넣었을 뿐인데, 글 영역과 그림자 영역이 구분되는 그림자 효과가 적용된 것을 확인할 수 있습니다. 위 코드 수정을 통해 그림자 색깔이나 굵기 등을 변경할 수도 있습니다.
이상으로 ‘워드프레스 블로그 사진 그림자 넣기’에 대한 설명을 마치도록 하겠습니다.
