티스토리 뷰
반응형
티스토리 스킨 중 #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="[##_article_rep_category_link_##]"><b><font color=#3DB39E>[##_article_rep_category_##]</font></b>'</a> Related Articles</strong>
<ul class="list_related">
<s_article_related_rep>
<li class="[##_article_related_rep_type_##]">
<a href="[##_article_related_rep_link_##]" class="link_related">
<s_article_related_rep_thumbnail>
<span class="thumb_related">
<img src="//i1.daumcdn.net/thumb/C185x200/?fname=[##_article_related_rep_thumbnail_link_##]" class="img_related" alt="">
</span>
</s_article_related_rep_thumbnail>
<span class="txt_related">[##_article_related_rep_title_##]</span>
<span class="date_related">[##_article_related_rep_date_##]</span>
<span class="frame_related"></span>
</a>
</li>
</s_article_related_rep>
</ul>
<a href="[##_article_rep_category_link_##]" 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개가 보입니다.
계속 추가 될 예정 입니다.
- TAG
- 스킨#1 편집, 티스토리스킨#1수정, 티스토리스킨편집
댓글