티스토리 북클럽 스킨 HTML 편집 - 최근길/인기글, 관련글 썸네일 정방향 설정 및 기본 이미지 등록 소스코드

최근글/인기글

html

line 650 : <!-- 최근글/인기글 --> 부터

<!-- 최근글/인기글 -->
								<div class="post-list tab-ui">
									<div id="recent" class="tab-list">
										<h2>최근글</h2>
										<ul>
											<s_rctps_rep>
												<li>
													<a href="">	
														<s_rctps_rep_thumbnail>	
															<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" alt="" onerror="this.src='./images/bg_thum.jpg'"/>
														</s_rctps_rep_thumbnail>
														<span class="thum"></span> <!-- 신규 코드 추가(최근글) -->
														<span class="title"></span>
														<span class="date"></span>
													</a>
												</li>
											</s_rctps_rep>
										</ul>
									</div>
									<div id="popular" class="tab-list">
										<h2>인기글</h2>
										<ul>
											<s_rctps_popular_rep>
												<li>
													<a href="">
														<s_rctps_rep_thumbnail>
															<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" alt="" />
														</s_rctps_rep_thumbnail>
														<span class="thum"></span> <!-- 신규 코드 추가(인기글) -->
														<span class="title"></span>
														<span class="date"></span>
													</a>
												</li>
											</s_rctps_popular_rep>
										</ul>
									</div>
								</div>

 

css

line 1957 : .sidebar .post-list ul li img { 부터

.sidebar .post-list ul li img {
	float: right;
	width: 58px;
	height: 58px;
	margin: 2px 0 0 20px;
} 

/* 아래 소스코드를 추가해주세요 */

.sidebar .post-list ul li img + span{
	display : none;
}

.sidebar .post-list ul li .thum {
	float: right;
	width: 58px;
	height: 58px;
	margin: 2px 0 0 20px;
	background: url(./images/bg_thum.jpg) no-repeat;
	background-size : cover;
}

---

관련글

HTML

433

<div class="related-articles">
									<h2>관련글</h2>
									<ul>
										<s_article_related_rep>
											<li>
												<a href="">
													<figure>
														<s_article_related_rep_thumbnail>
															<img src="//i1.daumcdn.net/thumb/C120x120/?fname=" alt="">
														</s_article_related_rep_thumbnail>
													</figure>
													<span class="title"></span>
												</a>
											</li>
										</s_article_related_rep>
									</ul>
								</div>

C120*120으로 변경

 

CSS

1387

.related-articles ul li figure {
	display: block;
	width: 100%;
	height: 0;
	margin-bottom: 9px;
	padding-bottom: 100%; /* 100%로 변경 */
	background-color: #f8f8f8;
    /* 아래 신규코드 추가 */
	background: url(./images/bg_thum.jpg) no-repeat;
	background-size : cover;
}

---

포스트 상단 커버 기본이미지 등록

.post-cover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
	background-position: 50% 50%;
	background-image : url(./images/Posting_Title2_default.jpg);
	background-size: cover;
}

opacity 25%로 파일업로드 해서 등록해줌

---

디테일 설명은 나중에~_~

오랜만에 개발하니 재밌넹ㅎㅎㅎ