티스토리 스킨편집 : 제목을 부각시키는 CSS 수정

티스토리 스킨편집 : 제목을 부각시키는 CSS 수정

---

예전부터 다음에서 제공하는 티스토리보다 네이버 블로그를 많이 하던 이유는 이미 만들어진 플랫폼에서 글만 쓰면 된다는 편의성이 가장 컸습니다. 물론 지금처럼 네이버에서 노출이 안되고 그러진 않았을 시절의 이야기죠. 폐쇄적인 정책을 가지고 있는 네이버와는 달리 운영자의 수익구조를 어느정도 인정해주는 티스토리는 현재 네이버 상위노출을 포기했으나 수익구조는 갖고 싶어하는 분들이 선택할 수 있는 유용한 채널입니다.

 

초대장이 사라져서 더 쉽게 접근할 수는 있으나 수익을 창출하기 위해 필요한 세팅을 어려워하는 경우가 아직도 있죠.  자유도를 높혔으나 그 자유도는 스스로 만들어야하는 것이기에 [ 정보 ] 가 필요합니다.

오늘 쓰는 티스토리 스킨편집은 모든 사람에게 필요한 것은 아닙니다. 다만 알아두면 한번 테스트를 해보고 유용하다 생각할 수 있는 내용입니다. 물론 스킨에 따라 일부 필요가 없는 내용도 있습니다.

---

① CSS 수정으로 커버 썸네일 배경 조절

 

 

그림 속 빨간색 박스가 있는 부분은 글의 썸네일 이미지 중앙을 긁어와 제목과 함께 나열하는 이벤트배너입니다. 티스토리 스킨편집 이전에 자신의 스킨이 이와 같다면 적용해볼 수 있는 기능이죠. 커버를 사용하지 않는 경우에는 그다지 필요가 없습니다. 물론 꼭 바꿔야 할 필요성도 없죠. 다만 보기에 따라서 [ 글 > 블랙배경(불투명도조절) > 썸네일이미지 ] 의 구조에서 글이 잘 보이지 않는 경우 답답했다면 따라해보세요.

 

.cover-event ul li a:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.35);

 

관리 > 스킨편집 > HTML편집 > CSS 를 선택한 후 Ctrl+F 로 'cover-event' 를 찾아보세요.

위와 같은 코드가 나온 위치를 찾을 수 있습니다. 스킨이 같다면 1,000번 줄 쯤 위치하겠으나 다르다면 다른 위치에 있을수도 있어요. 여기서 우리가 변경해야하는 것은 바로 맨 마지막줄에 있는 백그라운-컬러입니다.

 

변경하는 것은 0.35 로 표기되어있는 것은 얼마나 조절하느냐의 차이입니다.

해당 스킨의 기본 세팅은 0.15입니다. 그리고 저의 경우에는 0.35로 숫자를 올렸고, 그만큼 어둡게 그림이 가려지며 흰색 글씨가 더욱 선명하게 보이게 되었습니다.

 

▶ 위 내용은 알릭 2(https://alikong.tistory.com/) 님의 댓글 제보로 알게되었습니다.

 

 

글쓰는 것만 신경 쓸뿐 이런건 관심이 없으신 분이라면 그냥 잊고 지내도 되겠으나 티스토리 스킨편집에 대해 궁금해서 들어오신 분이라면 간단한 CSS 수정작업으로 변경이 가능합니다. 일반적으로 사용하는 커버갤러리나 썸네일리스트의 경우 다른 메뉴를 찾아야합니다. 이 경우도 동일하게 찾는 방식이나 찾아야하는 메뉴가 다르겠죠? 

---

② CSS 수정으로 본문 썸네일 배경 조절

 

 

이번엔 많은 분들이 공통되게 적용해볼 수 있는 위치입니다. 바로 썸네일 이미지를 등록하면 자연스레 글 작성 완료시 썸네일 이미지가 제목 부분 배경으로 잡힐 때 그림의 색감에 따라서 글씨가 잘 안보이는 문제가 나타날 수 있죠. 이때 ① 과 마찬가지로 백그라운드 컬러를 티스토리 스킨편집을 통해서 수정할 수 있습니다.

 

.post-cover:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.60);

 

스킨편집 > CSS 까지는 동일하나 이번에 찾아야하는 것은 'post-cover' 입니다.

찾게되면 동일하게 백그라운드 컬러의 마지막 수치를 변경하시면 됩니다. 앞선 이벤트 배너 커버보다 좀 더 불투명도를 높힐 필요가 있겠죠? 너무 높히거 검정색이 되어버리기 때문에 과도하게 높히지는 마세요. 안그래도 적당히 높히면 다 보여요.

 

 

저는 이 과정에서 하고 싶었던 한가지를 더 하게 되었습니다. 바로 그것은 bold 처리입니다.

제목임에도 불구하고 두껍게 표현되지 않아서 그다지 부각되지 않더라고요. 어차피 본문 썸네일 이미지 하단에 다시 제목이 들어가거나 중요 키워드가 들어가기는 하지만 그래도 제목이니까요.

 

.post-cover h1 {
 max-width: 1080px;
 margin: 0 auto;
 font-weight: 550;
 font-size: 2.125em;
 line-height: 1.2352;
 color: #fff;

 

위에 변경한 post-cover 인근에 위치해있는 것으로 뒷부분 h1 이라고 적혀있습니다.

여기에서 font-weight 값을 변경해주시면 됩니다. 숫자로 나와있거나 영어로 나와있는데 아마도 숫자로 표기가 되어있을거예요. 숫자가 올라가면 올라 갈수록 제목의 폰트두께 두꺼워집니다.

 

 

다시 한번 말씀드리지만 티스토리 스킨편집은 의무가 아닙니다. 그냥 글쓰는게 좋아서 시작하신 분들은 이런것까지 만질 필요는 없습니다. 다만 좀 더 정갈되게 꾸미고자 한다면 수정을 해보시는 것을 추천드립니다... 다만.. 애드센스 달고 애드핏까지 달다보면 정갈한 이미지는 많이 사라지는게 어쩔 수 없는 부분입니다. 

 

정말 아무런 광고 없이 깔끔하게 하고 싶다면 .. 티스토리 말고 브런치를 시작해보는 것도 좋을것 같네요.

도움이 될만한 정보였으면 좋겠습니다.