프롤로그
티스토리 북클럽 스킨은 많은 사람들이 사용할 만큼 장점이 많지만 시인성과 정독성을 높이기 위해서는 몇 가지 수정이 필요합니다. 이 번 글에서는 포스트 커버와 관련된 다양한 디자인 수정과 변경 방법에 대해 알아보도록 하겠습니다.
스킨 변경 시 주의 사항
스킨 편집은 블로그 관리 모드에서 '꾸미기/스킨 편집/html 편집'으로 이동하여 'HTML' 또는 'CSS'를 클릭하고 해당 행 번호로 직접 이동하거나 'Ctrl+F'를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다.
수정 사항들이 누적되면서 추가/삭제한 행들이 블로그마다 다르므로 행 번호는 참조만 합니다. 수정이 잘 못되어 오류가 생길 경우 다시 되돌릴 수 있도록 HTML, CSS 파일을 백업하고 작업을 하는 것이 좋습니다.
포스트 커버 이미지 이동
CSS 파일의 446행 부근에서 아래와 같은 코드를 찾은 후 아래와 같이 화살표로 표시된 'position: absolute'를 relative로 변경하고 오른쪽 위의 '적용' 버튼 클릭하면 포스트 커버 이미지가 상대 좌표가 되면서 이동하게 됩니다.
#tt-body-page .post-cover {position: relative; <--------top: -1px;left: 0;width: 100%;}
포스트 커버 상단의 여백 삭제
포스트 커버 위쪽의 간격을 삭제하여 불필요한 여백을 없애기 위해서는 CSS 파일의 440행 부근에서 아래와 같이 화살표로 표시된 'padding-top: 339px'를 0px로 변경 후 '적용'합니다.
#tt-body-page #container {padding-top: 0px; <-------}
포스트 커버 이미지 높이 변경
포스트 커버의 이미지가 너무 커서 높이를 작게 조정할 필요가 있습니다. 이를 위해서는 CSS 파일의 1046행 부근에서 아래와 같이 화살표로 표시된 'height: 340px'를 0px로 변경 후 '적용'합니다.
.post-cover {position: relative;z-index: 20;display: table;width: 100%;height: 0px; <-------background-position: 50% 50%;background-size: cover;box-sizing: border-box;}
|
|
| 북클럽 포스트 커버 수정 전(위), 수정 후(아래) |
포스트 커버 이미지 삭제
포스트 커버 이미지를 근본적으로 삭제하는 방법은 CSS 파일이 아니라 HTML 파일을 수정해야 합니다. HTML 파일의 412행 부근에서 취소 선으로 표시된 내용을 삭제 후 업데이트 '적용'하면 됩니다.
<s_permalink_article_rep><div class="post-cover"<s_article_rep_thumbnail> style="background-image:url()"</s_article_rep_thumbnail>><div class="inner"><span class="category">설명서</span><h1>티스토리 북클럽 - 포스트 커버 위치, 크기, 이미지 수정</h1><span class="meta">
포스트 커버 배경 컬러 수정
포스트 커버 이미지가 삭제되었으니 이제 배경 컬러도 없애거나 다른 색상으로 변경해야 합니다.
만약 원하는 다른 배경 컬러가 있다면 삭제하지 말고 #cbcbcb와 rgba(0,0,0,0.25)의 코드 값 변경을 통해 원하는 색으로 변경하고 '적용'하면 됩니다.
CSS 파일의 1047행, 1060행 부근의 '.post-cover'로 시작되는 코드에서 'background-color:' 행을 삭제하면 배경 컬러가 없어집니다.
.post-cover { position: relative; z-index: 20; display: table; width: 100%; height: 0px;
background-size: cover; box-sizing: border-box; }
.post-cover:before { content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;background-color: rgba(0,0,0,0.25)}
카테고리, 글제목, 글쓴이, 날짜 폰트 변경
포스트 커버 이미지와 배경 컬러를 제거하면 화이트 계열의 글자 폰트도 변경해야 보이게 됩니다.
'font-size: 숫자em'에서 숫자를 줄이거나 늘이면 글자의 크기도 변경할 수 있습니다.
CSS 파일의 1074행, 1082행, 1096행 부근으로 이동하거나 키워드 찾기 기능으로 이동하여 블랙이나 다른 원하는 글자 색상으로 폰트를 변경한 후 '적용'을 눌러 업데이트합니다.
카테고리
아래 화살표로 표시된 'color: #fff' 를 'color: black'으로 변경하면 글자 색상이 블랙 컬러가 됩니다.
red, yellow, green으로 변경하면 적색, 황색, 녹색으로 변경되는데 다른 복합 컬러는 #code를 찾아 넣어야 합니다.
.post-cover .category { display: block;max-width: 1080px;margin: 0 auto 13px;font-size: 0.875em;color: #fff; <-------}
글제목
카테고리와 동일하게 'color: #fff' 를 'color: black'으로 변경하면 글자 색상이 블랙 컬러가 됩니다.
red, yellow, green으로 변경하면 적색, 황색, 녹색으로 변경되는데 더 미세한 컬러는 #code를 찾아 넣어야 합니다.
.post-cover h1 { max-width: 1080px;margin: 0 auto;font-weight: 400;font-size: 2.125em;line-height: 1.2352;color: #fff; <-------}
글쓴이, 날짜
아래 화살표가 가리키는 'color: rgba(255,255,255,0.6)'를 'color: rgba(0,0,0,0.6)'으로 변경하면 글자 색상이 진한 회색이 됩니다. 다른 색은 괄호 내 숫자를 변경하면 됩니다.
.post-cover .meta { display: block;max-width: 1080px;margin: 34px auto 0;font-size: 0.875em;color: rgba(255,255,255,0.6); <-------}
포스트 커버 하단에 구분선 추가
포스트 커버 이미지와 배경까지 삭제하면 다소 밋밋할 수가 있는데 경계 부근에 구분 선을 넣어주면 개선됩니다. 위에서 작업했던 CSS 파일의 1096행 부근의 '.post-cover .meta'로 가서 다음 사항들을 수정한 후 '적용'합니다.
먼저 margin: 34px auto 0' 행에서 34px를 24px로 변경합니다.
border-bottom: 1px solid #eeeeee; padding: 0 0 20px 0; 여기서 1px는 선 굵기 픽셀 사이즈로 나타낸 것이고, solid는 실선 타입 그리고 #eeeeee는 연한 회색 컬러를 의미합니다.
또한 'padding:' 다음의 숫자는 순서대로 위쪽, 오른쪽, 아래, 왼쪽의 간격 크기를 의미합니다.
구분 선 설정을 위해 다음 내용을 삽입합니다.
.post-cover .meta {display: block;max-width: 1080px;margin: 34px auto 0; <-------font-size: 0.875em;color: rgba(255,255,255,0.6);
border-bottom: 1px solid #eeeeee; <-------- padding: 0 0 20px 0; <-------}
이전 포스팅 글도 참조하시기 바랍니다.
