* 울현님 목록형 스킨(Feel 스킨) 을 기반으로 했습니다 (다시한번 더 울현님 감사합니다!)
220327 코드 전반적인 수정 했습니다 😥 html에 대해 기본적인 지식없이 작성하였기 때문에 지금와서 보니 뒤죽박죽 설명도 엉망인 글이였더라구요 . . . 이 글을 계속 방치해두면 혹시 따라하시다 불상사가 발생할까봐 이제와서라도 고쳐보려고 해요 😭
1. <s_list>~</s_list> 사이에 '<div class="searchTitle"></div>' 만 나두고 삭제한다.
|
1
2
3
|
<s_list>
<div class="searchTitle"></div>
</s_list> <!-- search list close -->
|
cs |
2. <s_article_rep>~</s_article_rep>사이 코드를 잘라낸다. (Ctrl+X)
*<s_article_rep>, </s_article_rep> 치환자는 복사 안함!
3. </s_list> 밑에 아래 코드를 넣어준다.
|
1
2
3
4
5
6
7
8
9
|
</s_list>
<div class="list_wrap">
<s_article_rep>
<s_permalink_article_rep>
</s_permalink_article_rep>
</s_article_rep>
</div>
|
cs |
4. <s_permalink_article_rep> </s_permalink_article_rep> 사이에 위 잘라낸 코드(<s_article_rep>~</s_article_rep> 사이 코드) 를 넣어준다.
그리고 body에 id값 추가하기
|
1
|
<body id="tt-body-page">
|
cs |
5. <s_article_rep>밑에 <s_index_article_rep></s_index_article_rep> (인덱스 페이지) 치환자를 만든다.
6. <s_index_article_rep> </s_index_article_rep>(인덱스 페이지) 사이에 밑 코드를 넣어준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<s_index_article_rep>
<div class="list_category">
<a href="/442" class="list_box">
<div class="list_thumb">
<s_article_rep_thumbnail>
<img class="gal_img" src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/998E11335A00043911">
</s_article_rep_thumbnail>
</div>
<div class="list_txt">
<div class="list_title">[팁 ] 티스토리 목록형에서 갤러리형으로 바꾸기 (22.03.27 ver)</div>
<span class="list_date">
<script type="text/javascript">
var TDate = '2017. 11. 5. 18:17';
YY= TDate.substr(2,2);
MMDD= TDate.substr(5,5);
document.write(YY+"."+MMDD);
</script></span>
</div>
</a>
</div>
</s_index_article_rep>
|
cs |
7. css 붙여넣기 + 반응형 소스 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* 갤러리 */
#tt-body-category .list_wrap {position:relative; overflow: hidden; background-color: #fefefe;border-radius:0px 0px 20px 20px; padding: 35px;}
.list_category {float:left; width:33.33%; padding:9px 30px; box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.list_category .list_box:hover .list_txt .list_title {color:#fd999e;}
.list_category .list_thumb{font-size:0; overflow:hidden; display:block;border-radius:50%}
.list_category .list_thumb img{width:100%; display:block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.list_category .list_thumb img:hover{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-webkit-filter: grayscale(0%); filter: none;}
.list_category .list_box .list_txt{text-align:center; line-height:20px; padding:0px 0px; margin-top:10px;}
.list_category .list_box .list_txt .list_title {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: #8e7b7c; font-weight: 500;}
.list_category .list_box .list_txt .list_date{ display: block; font-size: 1em; font-family: 'Montserrat', sans-serif; color: #fd999e;}
/* mq */
@media screen and (max-width:550px) { /* 2단형 */
#tt-body-category .list_wrap {padding:20px;}
.list_category {width:50%; padding:9px 30px;}
}
|
cs |
🔔 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
|
<div class="list_wrap">
<s_article_rep>
<s_index_article_rep>
<div class="list_category">
<a href="/442" class="list_box">
<div class="list_thumb">
<s_article_rep_thumbnail>
<img class="gal_img" src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/998E11335A00043911">
</s_article_rep_thumbnail>
</div>
<div class="list_txt">
<div class="list_title">[팁 ] 티스토리 목록형에서 갤러리형으로 바꾸기 (22.03.27 ver)</div>
<span class="list_date">
<script type="text/javascript">
var TDate = '2017. 11. 5. 18:17';
YY= TDate.substr(2,2);
MMDD= TDate.substr(5,5);
document.write(YY+"."+MMDD);
</script></span>
</div>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
// 코드
</s_permalink_article_rep>
</s_article_rep>
</div>
|
cs |
더보기
3. <s_permalink_article_rep>, </s_permalink_article_rep> 사이에 잘라낸 코드(<s_article_protected>~<s_article_protected> 사이 코드)를 넣는다.
📌 비밀글 소스
1. 위와 똑같은 방법으로 <s_article_protected>~<s_article_protected> 사이 코드를 잘라낸다.
*<s_article_protected>~<s_article_protected>는 삭제 X
2. <s_article_protected> 밑에 아래 소스를 넣어준다.
|
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
|
<s_article_protected>
<s_index_article_rep>
<div class="list_category">
<a href="/442" class="list_box">
<div class="list_thumb">
<s_article_rep_thumbnail>
<img class="gal_img" src="./images/비밀글이미지.png">
</s_article_rep_thumbnail>
</div>
<div class="list_txt">
<div class="list_title">[팁 ] 티스토리 목록형에서 갤러리형으로 바꾸기 (22.03.27 ver)</div>
<span class="list_date">
<script type="text/javascript">
var TDate = '2017. 11. 5. 18:17';
YY= TDate.substr(2,2);
MMDD= TDate.substr(5,5);
document.write(YY+"."+MMDD);
</script></span>
</div>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
</s_permalink_article_rep>
</s_article_protected>
|
cs |
더보기
🎨 이미지 없을시 뜰 대표 이미지 설정하기
js 업로드 후, </body> 아래 소스를 넣어준다.
*썸네일 사이즈보다 작아야 한다. (오류 때문에 여백이 생겨 밀려남)
noimg.js
0.00MB
|
1
2
3
4
|
<script>
m = '<img src="./images/이미지주소.png">';
</script>
<script src="./images/noimg.js"></script>
|
cs |
