티스토리 #1스킨 수정한 내용 정리

티스토리 스킨 중 #1을 메인스킨으로 사용기 위해 수정한 내용을 정리해 봅니다.

이 포스팅은 계속 업데이트 될 예정이며 마지막 업데이트 날짜를 표시 해 둘 예정입니다.

 

 

 

티스토리 스킨 수정 - #1스킨

마지막 업데이트: 2020/08/15

 

 

이미지 둥글게 나타내기

이미지 모퉁이를 둥글게 나타내는 것만으로도 블로그 분위가 변합니다.

참고사이트: https://www.mojimoji.co.kr/574

 

CSS의 아래 내용을 찾아서 붉게 밑줄친 부분만 추가 하면 됩니다.

.skin_view .area_view img { max-width:100%; height:auto; border-radius:10px } /*이미지 둥글게 20200815*/

 

 

 

썸네일 카테고리

본문 하단에 카테고리내 관련글을 썸네일로 나오게 하는 소스 입니다.

참고사이트: https://boogong.tistory.com/54

 

1) html 코드 소스 추가

아래와 같이 article_rep_desc 를 찾아서 아래와 같이 추가 해 줍니다.

<!--썸네일 카테고리 목록 20200815-->
<s_article_related>
   <div class="area_related" style="margin-top:0px">
      <strong class="tit_related">'<a href="/category/Web%EC%A0%95%EB%B3%B4"><b><font color=#3DB39E>Web정보</font></b>'</a> Related Articles</strong>
	  <ul class="list_related">
	     <s_article_related_rep>
		   <li class="">
		     <a href="" class="link_related">
			 <s_article_related_rep_thumbnail>
			   <span class="thumb_related">
			      <img src="//i1.daumcdn.net/thumb/C185x200/?fname=" class="img_related" alt="">
			    </span>
			 </s_article_related_rep_thumbnail>
			 <span class="txt_related"></span>
			 <span class="date_related"></span>
			 <span class="frame_related"></span>
			</a>
		</li>
	  </s_article_related_rep>
    </ul>
    <a href="/category/Web%EC%A0%95%EB%B3%B4" class="link_more">more</a>
</div>
</s_article_related>
<!--썸네일 카테고리 목록 끝-->

 

2) CSS 추가

제일 하단 부분에 아래와 같이 소스를 추가 합니다.

 

/* 썸네일 관련기사 20200815*/
.area_related {position:relative;width:820px;margin-top:54px}
.area_related .tit_related {font-weight:normal;font-size:20px;color:#222}
.list_related {overflow:hidden;margin-top:15px}
.list_related li {position:relative;float:left;margin-right:20px}
.list_related li:last-child { margin-right:0}
.list_related .link_related {display:block;overflow:hidden;position:relative;width:185px;height:200px;margin:0 auto;border:1px solid #e8e8e8;background:#fafafa;font-size:13px;;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff;border-radius:20px}
.list_related .thumb_type .link_related {width:185px;height:200px;border:0 none;border-radius:20px}
.list_related .frame_related {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:.4;filter:alpha(Opacity=40)}
.thumb_type .frame_related {display:block}
.list_related .thumb_related {position:absolute;left:0;top:0;width:100%;height:100%}
.list_related .txt_related {display:block;display:-webkit-box;overflow:hidden;position:relative;left:0;top:0;z-index:10;max-height:80px;padding:27px 20px 0;color:#5c5c5c;text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-wrap:break-word}
.list_related .link_related:hover .txt_related {text-decoration:underline}
.list_related .date_related {position:absolute;left:0;bottom:20px;z-index:10;width:100%;color:#a7a7a7}
.list_related .thumb_type .txt_related {color:#fff}
.list_related .thumb_type .date_related {color:#fff; opacity:0.7}
.area_related .link_more {position:absolute;right:20px;top:10px;font-size:13px;color:#a7a7a7;border-bottom: 1px solid #a7a7a7;text-decoration:none}

/*썸네일 카테고리 리사이징 20200815*/
@media only screen and (max-width:738px){
.area_related {width:100%;margin-top:47px}
.area_related .tit_related {display:block;padding:0 15px;font-size:14px} 
.list_related {padding:0 10px;margin-top:1px} 
.list_related li {width:50%;margin:10px 0 0;padding:0 5px;-webkit-box-sizing:border-box;box-sizing:border-box} 
.list_related .link_related {width:100%;height:100%;min-width:137px;min-height:150px} 
.list_related .thumb_type .link_related {width:100%;height:100%} 
.list_related .thumb_related .img_related {width:100%} 
.list_related .txt_related {padding:18px 10px 0;font-size:14px;line-height:17px} 
.list_related .date_related {font-size:13px;bottom:14px} 
.list_related .txt_related { color:#222 } 
.list_related .txt_related, 
.list_related .date_related { font-family:applesdgothicneo-ultralight } 
.area_related .link_more {right:15px;top:0}
}

@media only screen and (min-width:738px) and (max-width:1262px){ 
.area_related {width:100%;margin-top:54px} 
.list_related {margin:15px -10px 0} 
.list_related li {width:25%;margin-right:0;padding:0 10px;webikit-box-sizing:border-box;box-sizing:border-box} 
.list_related .link_related {width:100%;max-width:183px} 
.list_related .thumb_type .link_related {width:100%;max-width:185px} 
.area_related .link_more {top:12px;right:0} 
}
/*썸네일 카테고리 리사이징 20200815*/

 

 

결과 미리보기

아래와 같이 가로로 4개가 보입니다.

 

 

 

계속 추가 될 예정 입니다.