티스토리 #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개가 보입니다.
계속 추가 될 예정 입니다.
반응형
'Web정보' 카테고리의 다른 글
롤 아이디 찾기(롤 계정 찾기) (1) | 2020.08.25 |
---|---|
실시간 티비보기, 지상파, 종편, 케이블 보는방법 (0) | 2020.08.24 |
컴퓨터가 느려졌을 때 해결 방안 (컴퓨터 다운, 컴퓨터 느려짐) (0) | 2009.05.11 |
넷북 MSI u100/u90 바이어스 업데이트 (넷북 usb 부팅 디스크 만들기 편) (0) | 2009.03.23 |
램/ 메모리 카드 추가하기 위한 손쉬운 팁 (메모리 카드 추가 방법) (0) | 2009.03.23 |
댓글 0