티스토리 FLATINUM 스킨 본문을 인덱스 형태(가로)로 바꾸기

안녕하세요 오랜만에 인사드리는 버블입니다.

제가 최근 본업 및 개인적인 사정으로 인해 꽤 긴 기간동안 티스토리 블로그를 포스팅하지 못했었습니다.

하지만 제가 글을 업로드 하지 않음에도 불구하고 많은분들이 블로그를 찾아주셨고

티스토리 스킨 수정 관련해서도 문의를 주셨기 때문에

시간이 나면 다시한번 포스팅을 해봐야겠구나 라고 쭉 생각을 하고 있었습니다.

늦은감이 없지않아 있지만 지금부터라도 다시 티스토리 포스팅을 시작해 볼까 합니다.

댓글로 문의주셨던 내용들, 기타 카테고리 등 하나하나 포스팅 해 드릴 예정이니

이전과 같은 많은 관심 가져주시면 감사드리겠습니다.

이번 포스팅에서는 Flatinum 스킨의 본문, 즉 블로그에 진입하면 처음 보이는 화면을 지금 제 블로그와 같은 형태인

'인덱스(가로 배열)' 형태로 수정하는 방법을 알아보도록 하겠습니다.

제가 블로그 포스팅을 하지 않는 기간에 가장 많이 받은 질문이기 때문에 1순위로 다뤄보려고 합니다.

지난 포스팅을 보지 않으신 분들은 아래 링크를 통해 이전 포스팅들을 보실 수 있습니다.

우선 수정을 하지 않은 Flatinum스킨의 기본 페이지는 아래의 이미지와 같습니다.

인덱스 형태, 카테고리 형 본문은 HTML 수정을 통해 변경할 수 있습니다.

꾸미기의 스킨편집을 클릭해서 스킨편집 창을 열어주신 뒤 우측 상단의 html편집으로 들어가주시면 됩니다.

HTML창 아무곳을 클릭해서 커서를 놔준 뒤 Ctrl + F를 통해 s_article_rep를 검색해 주면 아래와 같이

HTML창에서 빠르게 원하는 부분을 찾고 그 곳으로 이동할 수 있습니다.

s_article_rep를 찾았으면 엔터를 눌러서 한칸을 추가해 주신 뒤 <s_permalink_article_rep>를 추가해 주시면 됩니다.

<s_permalink_article_rep>를 추가한 뒤 다시 Ctrl + F를 통해 /s_article_rep를 검색해보면

글씨가 빨간색으로 표시되어 있는것을 보실 수 있습니다.

빨간 글씨로 표시된 /s_article_rep 앞에 커서를 두시고 엔터를 눌러

그 위에 빈칸을 추가해 주신 뒤 </s_permalink_article_rep>를 추가해 주시면

빨간 글씨가 없어지는 것을 확인하실 수 있습니다.

위 두가지 작업을 완료해섰다면 조금 전 s_article_rep아래에 추가한 <s_permalink_article_rep>를 검색하신 뒤

s_article_rep와 <s_permalink_article_rep>사이를 한칸 띄워주시고 아래의 예제를 삽입해 주시면 됩니다.

예제는 아래의 텍스트를 복사하셔서 사용하시면 됩니다.

<s_index_article_rep><!-- 인덱스 페이지 시작-->  

 <div class="list_content">

<s_article_rep_thumbnail>

<a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-FLATINUM-%EC%8A%A4%ED%82%A8-%EB%B3%B8%EB%AC%B8%EC%9D%84-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%ED%98%95%ED%83%9C%EA%B0%80%EB%A1%9C%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0" class="thumbnail_post"><img src="https://t1.daumcdn.net/cfile/tistory/997DB24A5E74547120"></a>

</s_article_rep_thumbnail>

<a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-FLATINUM-%EC%8A%A4%ED%82%A8-%EB%B3%B8%EB%AC%B8%EC%9D%84-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%ED%98%95%ED%83%9C%EA%B0%80%EB%A1%9C%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0" class="link_post">

<strong class="tit_post">티스토리 FLATINUM 스킨 본문을 인덱스 형태(가로)로 바꾸기</strong>

<p class="txt_post">안녕하세요 오랜만에 인사드리는 버블입니다. 제가 최근 본업 및 개인적인 사정으로 인해 꽤 긴 기간동안 티스토리 블로그를 포스팅하지 못했었습니다.하지만 제가 글을 업로드 하지 않음에도 불구하고 많은분들이 블로그를 찾아주셨고티스토리 스킨 수정 관련해서도 문의를 주셨기 때문에시간이 나면 다시한번 포스팅을 해봐야겠구나 라고 쭉 생각을 하고 있었습니다.늦은감이 없지않아 있지만 지금부터라도 다시 티스토리 포스팅을 시작해 볼까 합니다.댓글로 문의주셨던 내용들, 기타 카테고리 등 하나하나 포스팅 해 드릴 예정이니이전과 같은 많은 관심 가져주시면 감사드리겠습니다. 이번 포스팅에서는 Flatinum 스킨의 본문, 즉 블로그에 진입하면 처음 보이는 화면을 지금 제 블로그와 같은 형태인'인덱스(가로 배열)' 형태로 수정하는 ..</p>

</a>

<div class="detail_info">

<a href="/category/%EA%B3%A0%EB%B6%80%EA%B0%80%EA%B0%80%EC%B9%98%EC%82%AC%EC%97%85%20%EC%9D%B4%EC%95%BC%EA%B8%B0/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%A5%BC%20%EA%BE%B8%EB%A9%B0%EB%B3%B4%EC%9E%90" class="link_cate">고부가가치사업 이야기/티스토리를 꾸며보자</a>

<span class="txt_bar"></span>2020. 3. 20. 16:13

</div>

  </div>

</s_index_article_rep><!-- 인덱스 페이지 끝-->

 위 예제를 삽입해 주셨다면 HTML 편집창 상단의 적용을 눌러주시고 옆의 CSS 편집창으로 이동하겠습니다.

CSS편집창으로 진입하셨다면 제일 위에 한칸을 띄워주시고

아래의 텍스트를 복사하셔서 삽입해 주시면 됩니다.

.list_content {  /* 전체 틀 설정*/

padding:35px 0; 

border-bottom:1px dotted #eee} 

.list_content .thumbnail_post { /* 썸네일 이미지 틀 설정 */

float:left;

height:148px; 

width:148px;

margin:3px 30px 3px 0px } 

.list_content .link_post{ /* 포스팅 제목+내용 요약 틀 설정 */

display:block;

overflow:hidden;}

.list_content .tit_post{ /* 포스팅 제목 설정 */

display:block;

line-height:28px;

font-size:28px;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap}

.list_content .tit_post :hover { /* 제목에 마우스 올렸을 때 설정 */

text-decoration: underline;

color:#3db39e}

.list_content .txt_post{ /* 내용 요약 설정 */

display:-webkit-box;

display:-ms-flexbox;

display:box;

overflow:hidden;

max-height:80px;

margin-top:2px;

font-size:16px;

line-height:28px;

color:#444;

vertical-align:top;

word-break:break-all;

-webkit-box-orient:vertical;

-webkit-line-clamp:3}

.list_content .detail_info{ /* 카테고리링크 + 날짜 틀 설정 */

margin-top:10px;

font-size:12px;

color:#aaa;}

.list_content .detail_info .link_cate{ /* 카테고리링크 설정 */

font-size:12px;

color:#14a3e9}

삽입 완료한 이미지 입니다.

예제를 모두 삽입하셨다 우측 상단의 적용을 눌러주신 뒤 자신의 블로그 첫 화면으로 이동하면

아래와 같이 인덱스 형태의 홈화면이 적용되어 있는 것을 확인하실 수 있습니다.

지금은 CSS의 세부설정을 하지 않은 상태이고 위 CSS예제에 한글로 적용 부분을 표기해 놨으니

해당하는 부분의 숫자를 변경하여 크기 및 양식을 자신의 입맛에 맛게 수정하실 수 있습니다.

하지만 오류를 대비하기 위해 한가지를 바꾸면 바로 적용을 하시고 제대로 적용이 되었는지 확인을 하시면서

진행하는 방법을 강력히 추천드립니다.

아래의 이미지를 보시면서 하시면 도움이 되실겁니다.

추가적인 도움을 드리기 위해 제 버블 티스토리 CSS 설정법도 공개 하도록 하겠습니다.

1. 전체 틀 설정 padding:30px

2. 썸네일 이미지 틀 설정 height:200px width:250px margin:3px 30px 3px 0px

3. 포스팅 제목 설정 line-height:50px font-size:25px

4. 내용 요약 설정 max-height:80px margin-top:2px font-size:13px line-height:21px webkit-line-clamp:4

저와같이 수정을 했다면 아래와 같이 변경된 것을 확인하실 수 있습니다.

썸네일의 크기가 커졌으며 제목의 크기는 약간 줄어들었고

내용요약부분의 글씨크기가 줄어듬과 동시에 4줄로 변경되었습니다.

추가적인 부분은 개인의 취향에 따라 수정, 변경을 진행해 주시면 됩니다.

초보분들의 경우에는 제 포스팅을 보시며 따라하시다 보면 노하우가 생겨 나중에는

자신의 입맛대로 스킨을 변경하실 수 있습니다.

블로그를 처음 접하시는 분들도 제 글을 보고 쉽게 따라하실 수 있도록

알아보시기 쉽게 포스팅을 진행하도록 노력하겠습니다.

스킨을 수정하시다 잘 안되는 부분이나 어려우신 부분들은 댓글로 남겨주시면

제가 아는 한도 내에서 도와드리도록 하겠습니다.