티스토리 스킨 #1 글 아래 카테고리의 다른글 이미지와 같이 보이기

티스토리 뷰

티스토리 스킨 #1 글 아래 카테고리의 다른글 이미지와 같이 보이기

2018-05-02 일부터 스킨을 티스토리에서 제공하는 스킨 #1 을 사용중인데

너무 깔끔하고 이뻐서 계속 꾸며 주고 싶어

여러가지 찾아보다 보기에 좋고 글읽는 분들 체류시간을 늘려줄 ~~

좋은 부분이 있어서 소개하려 합니다.

화면부터 보여 드릴께요.

아래 보는것 같이 기본은 카테고리의 다른글이 텍스트만 나오고 있었는데

아래 처럼 이미지와 함께 나오는 부분을 볼수 있다.

더욱 보기에 좋다. ㅋ

수정해야 할 부분은 두군데다.

html , css 하나씩 알려드릴께요.~

1. html 부분

<div class="area_related">
    <s_article_related>
        <strong class="tit_related">'이것저것/티스토리' 카테고리의 다른글</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/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_more">more</a>
    </s_article_related>
</div>

위의 html 을 area_reply 바로 위에 넣고. 저장

2. css 는 소스 제일 아래에 집어 넣으면 된다.

/* 관련기사 */
.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}
.list_related .thumb_type .link_related {width:185px;height:200px;border:0 none}
.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}
@media
only screen and (max-width:820px){
  .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 }
  #tt-body-page .area_reply {margin-top:35px}
  .area_related .link_more {right:15px;top:0}
}
@media
only screen and (min-width:820px) 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}
}

도움 필요하신 분은 댓글주시면 도움드릴께요.

감사합니다.

'이것저것 > 티스토리' 카테고리의 다른 글

리얼클릭 Realclick 으로 티스토리 왼쪽 하단에 광고 띄우기 [PC 버전] (0)	2019.04.01
티스토리 스킨 #1 오른쪽 하단에 Top 버튼 넣기 (0)	2019.03.29
티스토리 #1 반응형 스킨 카테고리 글개수 표시하기 (0)	2019.03.25
티스토리 반응형 #1 카테고리 펼치기 (0)	2019.02.25
티스토리 #1 반응형 스킨 댓글창에 이미지 넣기 (4)	2019.02.25