Square 스킨 티스토리 스킨 글 제목 위에 카테고리 보여주기

이 스킨은 글 보기 하면 이렇게, 글 제목만 뜨고 카테고리가 뜨지 않는데 개인적으로 보기 불편해서 변경해보았다.

스킨 편집에서 html 탭을 들어간 후

s_article_rep 을 검색하면

<div id="head">
              <h2><a href=""></a></h2>
              <div class="post-meta">
                <span class="author"></span>
                <span class="meta-date"></span>
                
              </div>
              <div class="date"></div>
            </div>

이런 코드가 뜬다.
포스팅 헤더이다.

여기서 <h2><a href=""></a></h2> 이 글 제목이다.

<div><h3><a href=""></h3></div>를 위에 추가해준다.
그냥 h3 태그를 사용하면 줄바꿈이 되지 않아서 큰 수정 없이 줄바꿈하기 위해 div로 나눴다.

 <s_article_rep>
            <div id="head">
            <div><h3><a href=""></h3></div>
              <h2><a href=""></a></h2>
              <div class="post-meta">
                <span class="author"></span>
                <span class="meta-date"></span>
                
              </div>
              <div class="date"></div>
            </div>

이렇게 된다.

h3이 정의되어있지 않으므로 안예쁘게 나올것이다.

css 탭을 켠다.

#head 를 검색한다.

 

h2 태그 서식을 참고해 h3 서식을 꾸며주었다.

 

/* h3서식추가*/

#head h3 {
  display: inline-block;
  margin: 0 0 0px;
  padding: 0 5px 3px;
  font-size: 16px;
  font-weight: 400;
  color: #888;
  line-height: 200%;
  text-shadow: 1px 1px #dedede;
  word-break: break-word;
}

#head h3 a {
  color: #444;
}

#head h3 a:hover {
  color: #d0d0d0;
}

 

이렇게 하면 아래처럼 글 제목 위에 해당 카테고리가 뜨게 된다.

 

바꿀만한 설정👇

margin: 상하좌우 바깥 여백

padding: 상하좌우 안쪽 여백

font-size: 폰트사이즈

font-weight: 굵기

color: 글자색

text-shadow: 그림자 위치, 색 설정

 

[ ##_article_rep_link_## ] 같은 단어(치환자)의 의미는 아래 링크에서 찾아볼 수 있다.

https://tistory.github.io/document-tistory-skin/

소개 · GitBook

 

끝