티스토리 스킨 수정 : 글보기(뷰페이지) 타이틀 부분 가로폭 줄이기

티스토리 포럼에서 제가 사용하는 스킨 자료를 공개해 주실 수 있느냐는 요청의 글이 있었습니다. 워낙에 많이 바꿔서 소스 전체를 드리는 것은 의미도 없고, 하나씩 공개하자니 끝도 없네요. 우선 한 가지 공개해 봅니다. 도움이 되시면 좋겠네요.

개인적으로 티스토리 북클럽 스킨에서 가장 보기 싫은 부분을 수정해 보았습니다. 뭐, 개인적인 생각입니다. 글보기에서 상단에 두껍게 차지하고 있는 가로 타이틀 배경입니다. 오른쪽 칼럼까지 보이는 것이 너무 넓다는 생각도 들고, 배경에 이미지가 있어서 어수선하기도 합니다. 관리자모드 스킨편집 html 부분에서 아래 내용을 찾습니다.

            <s_permalink_article_rep>
            <div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/Iqpe8/btr0nT8M2u8/vyoXs8KYIdtkkPdvCtKTfK/img.png)"</s_article_rep_thumbnail>>
              <div class="inner">
                  <span class="category">블로그 Tips</span>
                  <h1>티스토리 스킨 수정 : 글보기(뷰페이지) 타이틀 부분 가로폭 줄이기</h1>
                  <span class="meta">
                    <span class="author">by e.스토리</span>
                    <span class="date">2023. 4. 25.</span>
                    <s_ad_div>
                      <a href="">수정</a>
                      <a href="#" onclick="">삭제</a>
                    </s_ad_div>
                  </span>
              </div>
            </div>

위 내용에서 제거해야 하는 부분이 바로 post-cover 부분입니다. 혹시 몰라서 별도의 클래스를 생성해서 관리했습니다. 

	<s_permalink_article_rep>

		<div class="meta-info"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/Iqpe8/btr0nT8M2u8/vyoXs8KYIdtkkPdvCtKTfK/img.png)"</s_article_rep_thumbnail>>
				<span class="category">블로그 Tips</span>
				<h1>티스토리 스킨 수정 : 글보기(뷰페이지) 타이틀 부분 가로폭 줄이기</h1>
				<span class="meta">
					<span class="author">by e.스토리</span>
					<span class="date">2023. 4. 25.</span>
					<s_ad_div>
						<a href="">수정</a>
						<!---- <a href="#" onclick="">삭제</a> ---->
					</s_ad_div>
				</span>
		</div>

혹시 몰라서 우선은 <s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/Iqpe8/btr0nT8M2u8/vyoXs8KYIdtkkPdvCtKTfK/img.png)"</s_article_rep_thumbnail>는 살려 두었지만 실제로는 사용하지 않습니다. 

이제는 post-cover가 있던 부분을 새로운 클래스 meta-info로 css를 바꿔서 넣어줘야 합니다. 

/* 본문 제목 부분 시작 */
.meta-info {
	background-color: rgba(18, 51, 99, 1.0); /* rgba(0,0,0,0.7); */
	border-radius: 5px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);	
	padding: 20px 20px 1px !important;
}
.meta-info .category {
	display: block;
	max-width: 1080px;
	margin: 0 auto 13px;
	font-size: 0.875em;
	color: #fff;
}
.meta-info h1 {
	max-width: 1080px;
	margin: 0 auto;
	font-weight: 800;
	font-size: 1.5em;
	line-height: 1.2352;
	color: #fff;
}
.meta-info a {
	text-decoration: none;
	color: #fff;
}
.meta-info .meta {
	display: block;
	max-width: 1080px;
	margin: 34px auto 30px;
	font-size: 0.875em;
	text-align: right;
	color: #fff; /* 메타정보 색상 */
}
.meta-info .meta a {
	color: #fff; /* 수정 삭제 관련 색상 rgba(0,0,0,0.6); */
}
.meta-info .meta a:before,
.meta-info .meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 8px 0 4px;
	background-color: #fff; /* 가운데 점 색상 */
	vertical-align: middle;
}
.meta-info .meta span:first-child:before {
	content: none;
}
/* 본문 제목 부분 끝 */

모바일 부분에도 바꿔줍니다.

/* 모바일 본문 제목 부분 시작 */
	.meta-info {
		border-radius: 0px;
		background-color: rgba(18, 51, 99, 1.0); /* rgba(0,0,0,0.7); */
		padding: 70px 20px 1px !important;
	}
	.meta-info .category {
		color: #fff;
	}
	.meta-info h1 {
		color: #fff;
	}
	.meta-info .meta {
		color: #fff;
		margin-top: 10px; /* 모바일 글제목과 글쓴이 사이 간격 */
	}
/* 모바일 본문 제목 부분 끝 */

개인적인 기준에 깔끔한 글보기(뷰페이지)가 되었습니다 :)

---