💻 워드프레스 블로그 운영 시 꿀팁! 💻
포스팅 시 이미지 테두리 손쉽게 설정하기!
간혹가다 블로그 포스팅을 진행하던 중에 발생했던 문제점이다.
촌놈의 꿀팁! 포스팅에는 이미지를 캡처하여 활용해야하는 경우가 많은데
이 때! 테두리가 없이 들어가 가독성이 떨어지는 경우가 있더라!
이미지 테두리 설정 하나로 가독성을 높이는 손쉬운 방법이다!
잘! 따라오도록!
안녕하세요! 강원도 춘천 사는 촌놈 입니다!
블로그를 운영하던 중에
난 이제 뭐 어느정도 포스팅을 했으니
블로그 운영의 중수 정도는 되지 않았을까?
라고 느끼던 시점에 쎄게 현타를 맞았던 내용이다.
촌놈은 제너레이트프레스 테마를 사용중이며
무료버전으로만 연명하고 있다.
유료버전을 사용했다면
그리 어렵지 않게 처리할 수 있겠지만
아직 무료버전으로 살아가고 싶다!
‘촌놈의 일상’ 카테고리에서는
항상 배경이 담겨 있는 사진만 찍어서
포스팅에 활용하기에 간과했던 내용으로
이번에 ‘촌놈의 꿀팁’을 포스팅하면서
이미티 테두리의 절실함을
확 느꼈던 내용에 대해서 포스팅을 하려 한다.
물론 이제는 꿀팁을 흡수해서
어렵지 않게 이미지 테두리를 적용할 수 있으며
간단한 CSS 적용으로 여러분들도 손쉽게 적용할 수 있다.
자 시작한다. 잘 따라오도록!
1. 포스팅에 이미지 추가하기
먼저 포스팅에 이미지를 추가 하겠다.
위에서도 언급했지만
촌놈은 워드프레스 제너레이트프레스 테마를 활용중이다.
만약 다른 테마를 활용한다면
목적 도달은 비슷하겠지만
그래도 방향성이 다를 수 있으니
유심히 살펴보고 하는게 중요하겠다.
이미지 블록을 생성했다면
업로드를 선택하여 이미지를 추가해보자.
위와 같이 이미지를 추가 했다.
흰 바탕이므로 어디가 이미지의 영역이고
어디가 포스팅 작업의 영역인지
분간이 잘 가지 않는다.
물론 글쓰기 페이지에서는
이미지 선택을 하게 되면 표시가 나기는 하는데
글을 작성 후 미리보기나 공개를 하게되면
위와 같이 영역의 구분이 보이질 않는다.
2. 이미지 테두리 CSS 정의하기
관리자 페이지의
[디자인] > [사용자 정의하기] 에 접근한다.
추가 CSS를 작성하기 위함이다.
제너레이트프레스 무료 테마는
추가 CSS를 작성해야만 적용되는 속성들이 많기에
앞으로도 많이 활용할 수 있으니
위치는 잘 기억해 두자!
위에 보이는 바와 같이
[사용자 정의하기] 제일 하단에 위치해 있다.
[추가 CSS]로 진입해 보자
아무것도 추가를 하지 않았다면
공란으로 보일 것이고
기존에 추가를 했다면
추가한 CSS들이 존재할 것이다.
이제 이미지 테두리를 위한
CSS를 추가 하도록 한다.
아래 코드를 복사하여 붙혀 넣어보자.
.border img {
border: 1px solid gray;
}[공개]버튼을 누르면 우선
이미지 테두리를 위한 CSS 설정은 끝이다.
포스팅의 각 이미지에 활용을 하면 되겠다.
그럼 활용하는 방법에 대해서 알아보자!
3. 이미지 테두리 적용하기
앞에 추가 해 두었던
이미지로 돌아가 선택을 한다
그럼 우측의 블록 속성 가장 하단에
[고급]이라는 탭이 보일 것이다.
눌러보자.
[고급] 탭이 펼쳐지면
그 중 [추가 CSS 클래스] 라고 확인이 된다.
그 안에 ‘border’을 입력해보자.
그럼 하나의 이미지에
이미지 테두리 형성이 완료된 것이다.
포스팅에 이미지를 여러개 넣는다면
위와 같은 작업을 각 이미지마다 반복하면 된다.
4. 이미지 테두리 생성 확인하기
빨간 영역 안쪽으로
이미지 테두리가 생긴걸 확인할 수 있다.
테두리가 없었을 때와
확연히 어디 부분까지가
이미지 영역인 표현이 된다.
자! 이제 어떤거 참 쉽지 않은가?
만약 촌놈과 같은 상황에 직면한다면 손쉽게 해결해보자!
추가 CSS 한번 설정으로 border의 클래스를 아주 쉽게 활용할 수 있다!
자! 그럼 다른 꿀팁 가지러 촌놈은 간다.
1 thought on “워드프레스 블로그, 이미지 테두리 설정하는 가장 쉽고 가장 간단한 방법”
Comments are closed.