티스토리 홈화면 인덱스페이지 만드는 방법::어나일언덕

현재 티스토리에서 제공하고 있는 스킨 39개중에 가장 인기 있는 스킨 top3은 기본 제공스킨 두개와 Square 스킨이다.

기본 제공 스킨 # 1은 블로그를 생성하면 디폴트로 제공되는 스킨이라 제일 인기가 많을 수 밖에 없다.

2, 3위인 #2스킨과 Square 스킨은 의외다. 심플한 것이 장점이긴 하지만 요즘 모니터는 1920px 와이드화면이 대세인데 이 두스킨은 와이드화면에서 왼쪽으로 치우쳐 별로 보기 좋지 않은 화면 배치를 만든다.

그럼에도 불구하고 인기가 많다는 것은 보이지 않는 뭔가가 있는 것인가에 대한 생각은 집어치우고 Square스킨은 한가지 더 마음에 들지 않는 것이 있는데 바로 홈화면이다.

홈화면을 선택시 최근에 쓴 글이 표시가 된다. 블로그 방문자 대부분이 검색에 의한 유입이고 해당 페이지를 읽고 나서 바로 뒤로 가기를 누르는 경우가 대부분이라 홈화면을 꾸미는데 그다지 에너지를 소비하지 않아도 될듯 싶긴 하지만 이왕이면 다홍치마라고 꾸미고 싶어진다. 그렇게 꾸며 놓은 스킨도 많으니깐!!

티스토리에서 홈화면을 알아서 꾸미라고 티에디션을 제공하고는 있지만 이것도 영 마음에 들지 않는 것은 마찬가지이다.

이 블로그의 기본 베이스 스킨은 Flatinum 스킨인데 이 스킨 역시 홈화면이 없다. 그래서 티에디션 없이 블로그 홈화면에 글 리스트로 꾸미는 방법을 소개하겠다.

티에디션 없이 블로그 홈화면 꾸미기

이글에서는 Square 스킨을 변경해 보도록 하겠다. 다른 스킨에서도 적용방법 별반 다르지 않다. 단지 블로그에 맞게 색상이나 배치 정도를 바꿔줄 수는 있겠다.

HTML 편집기를 열어 [ s_article_rep ]를 검색

바로 아래에 [ <s_permalink_article_rep> ]를 추가해 준다.

시작을 했으니 끝을 내기 위해 [ /s_article_rep ] 를 검색하면 뭔가 오류가 났다고 빨갛게 표시가 되어 쉽게 눈에 뛸것이다.

바로 위에 [ </s_permalink_article_rep> ]를 넣어 준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<s_index_article_rep><!-- 인덱스 페이지 -->
                         
<div class="list_content">
  <s_article_rep_thumbnail>
    <a href="/123" class="thumbnail_post"><img src="https://t1.daumcdn.net/cfile/tistory/2662073C5907F6C106"></a>
    </s_article_rep_thumbnail>
    <a href="/123" class="link_post">
      <strong class="tit_post">티스토리 홈화면 인덱스페이지 만드는 방법</strong>
        <p class="txt_post">현재 티스토리에서 제공하고 있는 스킨 39개중에 가장 인기 있는 스킨 top3은 기본 제공스킨 두개와 Square 스킨이다. 기본 제공 스킨 # 1은 블로그를 생성하면 디폴트로 제공되는 스킨이라 제일 인기가 많을 수 밖에 없다. 2, 3위인 #2스킨과 Square 스킨은 의외다. 심플한 것이 장점이긴 하지만 요즘 모니터는 1920px 와이드화면이 대세인데 이 두스킨은 와이드화면에서 왼쪽으로 치우쳐 별로 보기 좋지 않은 화면 배치를 만든다. 그럼에도 불구하고 인기가 많다는 것은 보이지 않는 뭔가가 있는 것인가에 대한 생각은 집어치우고 Square스킨은 한가지 더 마음에 들지 않는 것이 있는데 바로 홈화면이다. 홈화면을 선택시 최근에 쓴 글이 표시가 된다. 블로그 방문자 대부분이 검색에 의한 유입이고 해당 ..</p>
    </a>
    <div class="detail_info">
      <a href="/category/Virtual%20Life/Blog%20Management" class="link_cate">Virtual Life/Blog Management</a>
        <span class="txt_bar"></span>2017. 5. 2. 20:00
    </div>
</div>
</s_index_article_rep><!-- 인덱스 페이지 끝-->
Colored by Color Scripter
cs

HTML.txt

처음의 [ <s_article_rep> ] 와 [ <s_permalink_article_rep> ] 사이에 위의 HTML 코드를 아래와 같이 넣어준다.

새로고침을 해보면 이제 글 목록이 보인다. 기본 화면이 최근 글였을 테니 이렇게 해도 리스트에 하나씩 밖에 보이지 않을 것인데

화면 설정에서 기본화면의 글 갯수를 바꿔주면 여러개가 보이게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.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}
Colored by Color Scripter
cs