[티스토리] #1 반응형 관련글 리스트 만드는 방법 (초간단)

본문 아래에 나오는 관련글 리스트를 위와 같이 만드는 방법입니다. 코딩 지식이 없어도 충분히 가능합니다.

1. 티스토리 관련글 리스트 HTML 수정

<div class="area_etc"> 바로 위줄에 코드 붙여넣기

<!--관련글 시작-->
<s_article_related>
    <div class="area_related">
        <strong class="tit_related">'💻 Information/Computer' Related articles</strong>
        <a href="/category/%F0%9F%92%BB%20Information/Computer" class="link_more">more</a>
        <ul class="list_related">
            <s_article_related_rep>
                <li class="">
                    <a href="" class="link_related">
                        <div class="related_item">
                            <s_article_related_rep_thumbnail>
                                <img src="//i1.daumcdn.net/thumb/C200x200/?fname=" class="img_related">
                            </s_article_related_rep_thumbnail>
                            <a class="related_info" href="">
                                <span class="txt_related"></span>
                                <span class="date_related"></span>
                                <span class="related_category">💻 Information/Computer</span>
                            </a>
                        </div>
                    </a>
                </li>
            </s_article_related_rep>
        </ul>
    </div>
</s_article_related>
<!--관련글 끝-->

2. 티스토리 관련글 CSS 수정1

 @media only screen and (max-width:820px) 바로 윗줄에 코드 붙여넣기

/* 관련글 영역 */
.tit_related {
    font-size: 16px;
    font-weight: normal;
}
.related_item {
    padding: 15px 0 20px;
    max-width: 820px;
    border-bottom: 1px solid #ebebeb;
    margin-right: 15px;
}
.img_related {
    float: right;
    height: 133px;
    width: 133px;
    border-radius: 4px;
}
.related_info {
    display: block;
    padding: 20px 0;
}
.related_info:hover {
    text-decoration: none;
}
.txt_related {
    display: block;
    font-size: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.txt_related:hover {
    color: #3db39e;
}
.date_related {
    display: block;
    color: #666;
}
.related_category {
    display: block;
    color: #0F4B87;
}
.link_more {
    color: #3db39e;
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px;
}
.link_more:hover {
    text-decoration: none;
}

3. 티스토리 관련글 CSS 수정2

@media only screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5) 바로 윗줄에 코드 붙여넣기

/* 관련글 영역 */
.tit_related {
    font-size: 14px;
    font-weight: bold;
}
.area_related {
    padding: 0 0 20px 15px;
    color: #333;
    font-family: applesdgothicneo-semibold;
    font-weight: bold;
}
.related_item {
    padding: 0;
}
.related_info {
    font-size: 14px;
}
.txt_related {
    padding-right: 30px;
    font-size: 18px;
    font-family: applesdgothicneo-semibold;
    font-weight: bold;
}
.img_related {
    margin-top: 15px;
    height: 82px;
    width: 82px;
}
.link_more {
    font-size: 13px;
}

위 코드를 모두 담은 텍스트 파일입니다.

다운 받아 사용하세요.

관련글.txt

※ 스킨 백업 후 진행하시기 바랍니다.