티스토리 스킨 만들기 강좌 #001 - 1단 스킨(6) 본문 디자인 수정하기

이제 본문 디자인을 수정합니다.

저는 본문과 댓글란만 존재하도록 만들고 디자인을 수정하겠습니다.

 

1. (선택) 태그, 관련 글 영역 삭제하기

• 태그 영역을 지우려면, area_tag 를 검색하고, 영역을 지워줍니다.
• 관련 글 영역을 지우려면, related_type related_type_view 를 검색하고, 영역을 지워줍니다.
• 공감/공유 영역과 CCL 영역은 지울 수 없습니다. 티스토리 운영정책 위반입니다.

 

HTML 탭에서 area_tag 를 검색하고, <s_tag_label> </s_tag_label> 영역을 지워줍니다.

바로 아래에 관련 글 영역이 있습니다. <s_article_related> </s_article_related> 영역을 지워줍니다.

2. 카테고리의 다른글 영역 디자인 수정하기

• .another_category를 검색하여 코드를 추가합니다.
• .article_view table 를 검색하여 border 부분을 지웁니다.
• .article_view table tr 를 검색하여 관련 코드를 지웁니다.

 

이제 카테고리의 다른 글 영역 박스에 있는 선을 제거하고 글 제목만 보이도록 수정하겠습니다.

.another_category 를 검색하여 다음 코드를 추가합니다.

 

.another_category {
  border: 0 !important;
  padding: 0 !important;
}
.another_category table th a {
  border: 0 !important;
  text-decoration: none !important;
}
.another_category table th a.current {
  border: 0 !important;
}
.article_view .another_category h4 {
  border: none !important;
  padding: 0 !important;
}
.article_view .another_category h4 a{
  text-decoration: none;
}

//아래 코드는 댓글 수를 안보이게 하는 코드입니다.
.another_category th a + span{
  display: none;
}

//아래 코드는 날짜를 안보이게 하는 코드입니다.
.another_category th + td {
  display: none;
}

.article_view table 를 검색하여 border 부분을 지웁니다.

 

 

.article_view table tr 를 검색하여 캡처에 있는 코드를 전부 지웁니다.

 

이제 적용해서 보면, 글 제목만 남아있습니다!

3. 제목 영역 디자인 수정하기

• .area_view_content .view_info_post 를 검색하여, display:none 를 추가합시다.
• .area_view_content .admin 을 검색하여, display:none 을 추가합시다.
•  .area_view_content .article_content 코드를 삭제하여 여백을 줄입니다.
• .category_content_area .area_view_content 를 검색하여, 코드를 수정합시다.

 

현재 디자인에서 제목 크기를 줄이고, 카테고리명과 올린 날짜를 없애겠습니다.

작성자만 볼 수 있는 수정 삭제 영역도 과감히 삭제하려고 합니다.

 

.area_view_content .view_info_post 를 검색하여, display:none 를 추가합니다.

.area_view_content .admin 을 검색하여, display:none 을 추가합니다.

 

 

@media screen and (min-width: 821px) { 괄호 아래에 있는 .area_view_content .article_content 코드를 삭제합니다.

@media screen and (min-width: 821px) { 괄호 아래에 있는 .area_view_content .article_content 코드를 삭제합니다.

한번 더 검색하면 나오는 코드가 있습니다. 이 코드도 삭제합니다. (이 코드는 모바일에서의 글 제목 사이 간격입니다.)

.category_content_area .area_view_content 를 검색하여, 코드를 수정합니다.

.category_content_area .area_view_content {
  padding: 20px 0;
}

 

제목만 남고 여백도 줄어들었습니다.

 

4. (선택) 글자 크기 수정하기

여기서부터는 취향의 영역이므로, 숫자를 자유롭게 수정하면 됩니다.

 

먼저 제목 크기를 수정하기 위해서는 코드 추가가 필요합니다.

.article_content .info_post .link_title {
  font-size: 20px;
}

 

 

그리고 .article_view p 를 검색하면 아래로 쭉 코드가 나오는데요.

다음과 같습니다. 취향껏 폰트 사이즈를 변경하시면 됩니다.

 

• p : 본문 글자 사이즈
• h1~h4 : 문단 모양에서 제목 1,2,3, 본문 1
• blockquote : 인용
• ul : 리스트
• figure : 이미지 영역
• pre : 코드 영역
• hr : 구분선

 

 

이 부분입니다. .article_view hr 이 나오는 부분까지.

 

저의 경우 아래 코드로 수정했습니다.

.article_content .info_post .link_title{
  font-size: 20px;
}

.article_view p {
  font-size: 12px;
  margin: 0 0 20px;
}
.article_view h1,
.article_view h2,
.article_view h3,
.article_view h4 {
  padding-bottom: 5px;
  margin: 10px 0;
  font-weight: bold;
  border-bottom: 1px solid #000;
}

.article_view h1 {
  font-size: 18px;
  line-height: 1.33;
}

.article_view h2 {
  font-size: 16px;
  line-height: 1.38;
}

.article_view h3 {
  font-size: 14px;
  line-height: 1.4;
}

.article_view h4 {
  font-size: 13px;
  line-height: 1.33;
}

.article_view blockquote {
  margin: 0;
  border-left: 1px solid #4167d9;
  font-size: 14px;
  line-height: 1.75;
}

.article_view ul,
.article_view ol {
  margin: 0;
  padding: 0 0 0 23px;
}

.article_view ul li,
.article_view ol li {
  float: initial;
  width: initial;
  height: initial;
  list-style: unset;
  overflow: initial;
}

.article_view ul {
  margin-top: 18px;
}

.article_view ul li {
  font-size: 12px;
  line-height: 16px;
  word-break: break-all;
}

.article_view ol {
  margin-bottom: 32px;
}

.article_view ol li {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  word-break: break-all;
}

.article_view figure {
  margin: 0;
  border: 1px solid #000;
}

.article_view figure figcaption {
	border-top: 1px solid #000;
	padding: 0;
}

.article_view table {
  border-collapse: collapse;
}

.article_view table thead tr {
  background: rgba(0, 0, 0, 0.05);
  font-size: 14px;
  color: #000;
}

.article_view pre {
  background: rgba(0, 0, 0, 0.05);
  font-size: 12px;
  line-height: 16px;
  color: rgba(34, 85, 51, 0.87);
  white-space: pre-wrap;
  padding: 20px;
  border: 1px solid #000;
}
.article_view pre code.hljs {
  padding: 20px;
}

.article_view .cap1 {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
}

.article_view hr {
  margin: 30px 0;
}

 

 

글자 크기까지 수정하고 난 모습입니다!

조금씩 완성되어가고 있네요.

 

 

 

 

다음 글에서 계속 적겠습니다.