티스토리 스킨 만들기 #14 카테고리 내 다른글

카테고리 내 다른글

기본 적으로 티스토리 플러그인(카테고리 글 더 보기)로 인해 다음과 같은 목록이 글본문 마지막에 나오고있다. 하지만 가독성도 좋지않고 블로그와 하나되는 느낌이 없기 때문에 티스토리에 있는 치환자들로 이용해서 만들어줄 생각이다. 플러그인은 해제하면된다.

티스토리에서 기본제공되는 플러그인의 모습

 

치환자

<s_article_related_rep> 카테고리 글 더보기 영역 그룹치환자

글 주소 값치환자

글 제목 값치환자

글 발행시간 값치환자

<s_article_related_rep_thumbnail> 썸네일 그룹치환자

썸네일 주소 값치환자

 

그리고 추가적으로 이전시간에 사용했던

티스토리 관리/티스토리 스킨 만들기 카테고리 명 값치환자

/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EA%B4%80%EB%A6%AC/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%20%EB%A7%8C%EB%93%A4%EA%B8%B0 카테고리 링크 값치환자

를사용해서 현재 카테고리와, 카테고리 목록으로 갈수있게끔 해주려고한다.

 

html 작성

<article>

    <!-- 글목록 리스트형 -->

    <s_article_rep>
        <!-- 글목록 내용형-->

        <s_permalink_article_rep>
            <!-- 글 본문 -->

            <s_article_related>
                <div class='related'>
                    <div class='related-title'>
                        <h2>티스토리 관리/티스토리 스킨 만들기</h2>
                        <p><a href='/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EA%B4%80%EB%A6%AC/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%20%EB%A7%8C%EB%93%A4%EA%B8%B0'><i class="icon-plus-sign-alt"></i> 더보기</a></p>
                    </div>
                    <ul class='related-list'>
                        <s_article_related_rep>
                            <li>
                                <a href=''>
                                    <div class='related-thumb'>
                                        <s_article_related_rep_thumbnail>
                                            <div
                                                style="background-image:url('https://i1.daumcdn.net/thumb/C144x81/?fname=');">
                                            </div>
                                        </s_article_related_rep_thumbnail>
                                    </div>
                                    <div class='related-text'>
                                        <p class='related-article-title'></p>
                                        <p><i class="icon-calendar"></i> </p>
                                    </div>
                                </a>
                            </li>
                        </s_article_related_rep>
                    </ul>
                </div>
            </s_article_related>

        </s_permalink_article_rep>

    </s_article_rep>
</article>

 

설명은 그림으로

 

css 작성

article .related {
	margin-top: 10px;
}

article .related .related-title {
	box-sizing: border-box;
	background: #ddd;
	padding: 10px 20px;
	margin-bottom: 5px;
}

article .related .related-title h2 {
	display: inline-block;
	width: 77%;
	font-size: 1.375rem;
}

article .related .related-title p {
	display: inline-block;
	width: 22%;
	text-align: right;
	vertical-align: bottom;
	color: #ff9999;
}

article .related .related-title p a {
	text-decoration: none;
}

article .related .related-title p a:hover {
	text-decoration: underline;
}

article .related .related-title p a i {
	font-size: 1.25rem;
}

article .related ul {
	list-style: none;
	background: #fff;
}

article .related li {
	box-sizing: border-box;
	padding: 5px 10px;
	border-bottom: 1px solid #ddd;
}

article .related li a {
	text-decoration: none;
}

article .related li:hover a p {
	text-decoration: underline;
}

article .related .related-thumb {
	display: inline-block;
	vertical-align: middle;
	width: 20%;
	min-width: 70px;
	max-width: 140px;
	height: 70px;
	background-image: url('https://i1.daumcdn.net/thumb/C144x81/?fname=https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png');
	background-position: center;
	margin-right: 10px;
	border: 1px solid #ddd;
}

article .related .related-thumb div {
	width: 100%; 
	height: 70px; 
	background-position: center;
}

article .related .related-text {
	display: inline-block;
	vertical-align: middle;
	width: 74%;
}

article .related .related-text .related-article-title {
	font-size: 1.125rem;
}