티스토리 블로그 오디세이 스킨이 참 좋네요
아마 이전 티스토리를 할 때 이 스킨이 있었다면 유료 스킨은 사용하지 않았을 겁니다. 하지만 글을 발행하고 해당 글을 열었을 때 보이는 타이틀 배경은 황당하기까지 했습니다. 어떻게 이렇게 만들 생각을 했을까요. 선택을 할 수 있게 A, B로 보여줄 수도 있었는데, 왜 이렇게 고집을 부렸을까요. 티스토리 블로그 포스팅 타이틀 간격 조절 및 배경 수정해 보겠습니다.
티스토리 블로그는 아직도 블로그 입문용으로 많이 생성하고 있습니다. 네이버에서 티스토리로 넘어오면서 어려워하는데요, 네이버 블로그는 기본적인 세팅 정도에서 글쓰기가 가능하지만, 티스토리 블로그는 어느 정도는 태그를 알아야 합니다. 이것은 단지 어렵다고 하는 것보다는 자신의 블로그를 자신이 의도하는 대로 꾸밀 수도 있다고 생각하면 어느 정도는 합의할 수 있지 않을까 하는데요,
그래서 처음 블로그에 입문하는 분을 위해 티스토리 블로그를 만들고 글을 발행하는 과정을 알아보겠습니다. 티스토리 블로그를 생성하는 과정을 먼저 보여드려야 하는데, 글을 하나 발행하고 보니 포스팅 제목이 너무 넓은 면적을 차지하고 있어 이것부터 수정해야겠다고 느꼈습니다. 타이틀 높이를 줄이고 색상 변경 등을 거쳐 완성된 타이틀을 보여드리겠습니다.
티스토리 블로그 글을 발행하고 해당 포스팅을 열었는데요, 보는 것처럼 포스팅 제목이 너무 넓은 면적을 차지하고 있습니다. 왜 이렇게 만들었을까요. 포스팅 제목은 방문자가 읽을 수 있을 정도면 됩니다. 가장 좋은 것은 제목과 본문이 바로 연결되어야 합니다. 대부분의 방문자는 검색을 통해서 들어오기에 벌써 검색 과정에서 마음에 드는, 원하는 정보가 있을 것 같은 글을 찾았기에 막상 포스팅에 들어왔을 때는 제목은 그다지 큰 역할은 하지 못합니다. 방문자가 검색에서 클릭했던 그 제목이 맞는지 정도만 알면 되니까요.
먼저 포스팅 제목 뒤에 있는 배경 이미지부터 지우겠습니다. 배경 이미지는 본문에서 가져오는데요, 스킨이 제공하는 그대로 사용하는 분도 있는데 어떻게 보였나요, 제목 뒤에 본문 이미지가 나오는 것이 지저분해서 절대로 사용하지 않을 기능입니다. 블로그 포스팅은 일기장이 아니고 정보를 제공하는 문서이기에 방문자가 원하는 정보를 빠르게 제공하는 것이 우선입니다. 뭔가 어수선해 보인다면 체류하고 싶은 마음이 있을까요.
티스토리 관리자 화면에서 HTML, CSS 수정으로 들어가는 과정입니다. 관리자 화면으로 들어와서 왼쪽 스킨편집, 오른쪽에 HTML 편집을 누르면 HTML, CSS 코드를 수정할 수 있습니다.
여기는 상단에 HTML로 들어왔습니다. 스킨을 수정하지 않았다면 왼쪽 198행을 수정하면 되고, 검색 엔진에 등록했다면 Ctrl+F로 <s_permalink_article_rep> 이 클래스 이름으로 찾습니다. 이 클래스를 사용하는 곳이 몇 군데 있는데, 맨 위에 있는 곳만 수정하면 됩니다.
초기 코드는 이렇게 되어있는데요, 이것을 아래로 수정합니다.
<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" style="background-image:url('')">
아래에 있는 이 코드를 그대로 붙여넣으면 됩니다.
<div class="article-header" thumbnail="<s_article_rep_thumbnail></s_article_rep_thumbnail>" style="background-image:none">
이제 타이틀 배경 이미지는 사라졌는데요, 보는 것처럼 배경 이미지가 있던 자리가 그대로 유지하고 있습니다. 배경 이미지 자리를 줄여보겠습니다. 이제는 상단에 HTML 탭이 아닌 CSS로 들어갑니다.
CSS에서 article-header로 검색합니다. 표시된 곳이 배경 이미지를 줄이는 곳인데요, 이곳을 400px에서 200px로 수정합니다.
결과를 보겠습니다. 먼저 배경 이미지 자리를 줄였지만, 전체 배경 크기는 줄어들지 않고 그대로이며, 또 타이틀과 카테고리는 위로 밀려 올라가면서 일부가 잘려버렸네요. 그럼 이렇게 추측할 수 있습니다. 보통은 이미지가 줄어들면 그 여백도 줄어드는데, 그렇게 만들면 안 되는 이유가 있나 봐요. 그래서 배경 이미지가 들어갈 자리 전체를 먼저 확보하고 거기에 이미지를 넣은 겁니다. 그래서 이미지 크기를 줄여도 배경자리는 줄어들지 않았습니다.
먼저 타이틀 위치부터 수정합니다. article-header 글래스로 되어있어 위에서 수정한 그 아래에 있어 찾기는 쉽습니다. 표시된 곳을 56px에서 20px로 수정합니다.
일단 타이틀과 카테고리는 어느 정도 위치를 찾았습니다. 다음은 배경 이미지 자리를 수정해야 하는데요,
이곳은 tt-body-page .main으로 검색합니다. 그리고 타이틀 배경 높이를 400px에서 200px로 수정합니다
높이도 수정되었고 타이틀 글자 색상 변경, 최종 타이틀 배경색까지 수정했습니다. 타이틀 배경 높이는 180px입니다. 160px로 줄이니 타이틀 글자가 가려져서 거기까지 수정하기에는 너무 많은 시간이 소요될 것 같아 여기까지 일단락 짓겠습니다.
타이틀 글자 색 변경 등은 보여드리지 않았습니다만, 아래 코드를 보면서 천천히 수정하면 됩니다. 어차피 이후는 시간 싸움이며, 처음이라면 느긋하게 하나씩 수정하고 결과를 보면서 조금씩 수치를 바꿔보면 됩니다. 티스토리 블로그 관리자 화면, 스킨 편집 화면, 블로그 화면을 같이 띄워놓고 하나 수정하면 결과는 새로고침만 누르면 변경된 내용을 그 자리에서 확인할 수 있습니다. 생각보다는 오래 걸리지 않습니다. 중간에 이상하면 스킨을 다시 받아서 처음부터 수정하더라도 10여 분이면 됩니다.
티스토리 블로그 오디세이 스킨 타이틀 높이 변경, 색상 수정 코드
HTML
<s_permalink_article_rep> 검색
196 이것만 수정하면 됨
초기 코드
<div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" style="background-image:url('')">
이 코드로 수정
<div class="article-header" thumbnail="<s_article_rep_thumbnail></s_article_rep_thumbnail>" style="background-image:none">
CSS
tt-body-page .main 검색
article-header 검색
467
#tt-body-page .main {
padding-top: 180px; /* 타이틀 배경 이미지 자리 */
}
486
@media screen and (max-width: 1060px) {
#tt-body-page .main {
padding-top: 180px; /* 모바일 화면 조절 */
}
2731
.article-header {
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 180px; /* 타이틀 배경 이미지 높이 */
margin-left: -50vw;
padding: 0 20px;
background-size: cover;
background-position: 50% 50%;
}
.article-header:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fceeee; /* 타이틀 배경 색상 */
z-index: 1;
}
.article-header .inner-header {
max-width: 1020px;
margin: 0 auto;
color: #333; /* 타이틀 색상 */
}
.article-header .box-meta {
position: absolute;
bottom: 18px; /* 타이틀 높이 수정 */
width: 100%;
max-width: 780px;
z-index: 2;
}
.article-header .title-article {
display: block;
width: 100%;
max-width: 760px;
margin: 0 0 33px 0;
font-size: 48px;
font-weight: 400;
line-height: 1.0; /* 타이틀과 카테고리 간격 줄임 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: keep-all;
}
티스토리 블로그 생성 후 세팅, 반드시 이렇게 해야 하는 이유