WriteFreely 블로그에 썸네일과 요약문을 만들어볼까요?
개요
기본적으로, 제 블로그와 같은 WriteFreely 블로그는 메인화면에 포스트의 모든 내용을 다 보여줍니다.
저는 개인적으로 목록형 / 웹진형 블로그를 선호하는 편이어서 이게 불편했습니다.
서로이웃 때문에 플랫폼을 옮기지는 못했지만, 네이버 블로그 시절부터 목록형 블로그나 웹진형 블로그를 동경했으니까요.
지금까지 운영하던 WriteFreely 블로그의 경우 아예 내용부분을 접어놓는 방식으로 이를 해결했지만(그냥 display: none 해주면 됩니다!),
요번 블로그의 경우 아무래도 개발 블로그다보니, 내용의 일부인 썸네일하고 요약문까지 대략적으로 보여줄 수 있으면 좋을 것 같다는 생각이 들었어요.
기본준비
각 포스트에서 썸네일로 지정할 이미지들을 준비해 주세요.
이미지를 맨 위에 첨부합니다. 마크다운 문법 대신 아래의 HTML 코드를 사용합니다.
# 제목
<img src="{url}" class="thumbnail">
물론, 썸네일이 없는 포스트도 존재할 것입니다. 그런 경우 그냥 남겨 두시면 됩니다.
또한, 각 포스트의 요약문을 인용구로 작성해 주세요. 요약문은 썸네일용 이미지 바로 아래쪽에 첨부하는 게 제일 이상적인 듯 합니다.
# 제목
<img src="{url}" class="thumbnail">
> 요약문
CSS 적용
{인스턴스 주소}/me/c/{블로그ID} 에서 블로그의 커스텀 CSS 를 변경합니다.
일단 지금 썸네일 이미지하고 요약문이 적용된 블로그 요소들을 보시면,
이런 식입니다.
즉 이미지는 .book 클래스 아래의 p 아래에 img.thumbnail,
요약문은 .book 아래에 blockquote 아래에 p 로 지정하면 됩니다.
.book 은 포스트의 본문 내용 전체가 들어가는 부모요소 입니다.
그러므로 우선 .book의 자식요소 중 p와 첫번째 blockquote를 제외한 모든 요소를 보이지 않게 합니다.
.book > *:not(p, blockquote:nth-of-type(1)) {
display: none;
}
그리고 p 중에서도 자식요소로 .thumbnail을 가지고 있지 않은 요소는 보이지 않게 합니다.
.book > p:not(:has(.thumbnail)) {
display: none !important;
}
여기까지 처리했으면 썸네일로 지정했던 이미지와 요약문 말고 모든 본문 내용이 사라져 있을 것입니다. 이제 이미지와 요약문이 보다 웹진형 블로그 처럼 보이도록 너비와 높이를 고정해 줍니다.
.book blockquote {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
}
.book img {
display: block !important;
height: 200px;
width: 100%;
object-fit: cover;
border-radius: 20px;
}
위 CSS를 적용하면 다음과 같이 보입니다.
포스트 내부 CSS 적용
이제는 블로그 내부의 포스트에 CSS를 적용해 볼 것입니다. 이미지와 요약글이 맨 위에 올라가 있어서 포스트 초반이 조금 지저분해 보일 수 있기 때문입니다.
그래서, 우선은 썸네일 이미지를 포스트 제목 뒤로 빼 줍니다. 메뉴바를 제외한 포스트 상단에 딱 붙이고요.
높이와 너비를 지정해서 마치 포스트 제목의 구성요소인 것처럼 보이게 만듭니다.
마지막으로 밝기를 줄여줍니다.
#post-body .thumbnail{
position: absolute;
top: 70px;
left: 0;
z-index: -1;
height: 180px;
width: 100vw;
object-fit: cover;
filter: brightness(50%);
}
여기까지 적용했다면, 저처럼 밝은 테마를 쓰시는 분들은 포스트 제목과 날짜가 잘 보이지 않으실 겁니다.
포스트 제목과 날짜에 배경과 색을 적용해서, 썸네일 이미지가 있을 때와 없을 때를 모두 대응합시다.
#post-body #title {
margin-top: 50px !important;
color: white;
background: linear-gradient(90deg, black, transparent);
}
#post-body time {
color: white !important;
background: linear-gradient(90deg, black, transparent);
}
마지막으로 요약문 역시 포스트 헤더의 일부로 보이도록 CSS를 변경해 주었습니다.
이 요약문 부분은 그대로 두어도 꽤 예쁘기 때문에, 적용하지 않으셔도 상관없습니다.
#post-body > .e-content > blockquote:nth-of-type(1) {
padding-top: 20px;
padding-bottom: 10px;
position: relative;
top: -50px;
z-index: -2;
display: block !important;
border-bottom: 2px solid #ddd;
border-right: 2px solid #ddd;
border-left: 2px solid #ddd !important;
border-radius: 0 0 20px 20px;
}
여기까지 적용하셨으면 포스트 내부도 이렇게 깔끔하게 보이게 됩니다.
WriteFreely가 텍스트 중심인 블로그여서, 이미지 관련 기능은 거의 없다시피 하지만 CSS와 마크다운을 적절히 활용하면 불가능한 것도 아니어서 다행입니다.
