흔한 생활/티스토리

티스토리 #1 스킨 고정 카테고리 만들기

흔한 학생 2024. 11. 23. 16:48

서론

이전과 마찬가지로 #1 스킨을 기반으로 깔끔한 스킨을 만들고 싶어 수정중이다.
제공하는 스킨이 워낙 많아 다들 사용하는 스킨이 다른데 수정하기에는 html, css, js 등 언어를 알아야 수정이 가능한 듯 하여 조금씩 알아보면서 수정하고 있다. 덕분에 웹 공부를 좀 해보는듯?

기존 #1 스킨을 보면 글의 양쪽은 비어있어 허전한 느낌이 들기도 한다.
하지만 공부를 하면서 여러 블로그를 방문하게 되는데 카테고리가 적당한 비율로 떠있을 때 관련 글을 찾아보기도 쉬운 것 같다.
그래서 이번에는 왼쪽의 빈 공간에 카테고리를 넣어보려고 한다. 

카테고리 삽입(HTML)

기존 구조

우선 블로그에서는 어떻게 카테고리를 불러오는지 궁금했다.
html은 고정되어 있는데 카테고리를 추가하거나 없애는 등 수정을 해도 카테고리에 바로 반영이 되기 때문이다.
때문에 기존의 카테고리는 어떻게 구성되어있는지 보았다.

div class를 만들어

를 이용해 카테고리를 불러오는 것이었다. 
이렇게 불러오는 원리는 정확히는 더 알아봐야겠지만 이 치환자(?)를 써보려고 했다.

그리고 f12를 눌러 카테고리 형태를 보면 다음과 같았다.

  • div class "list_cate"
    • ul class "tt_category"
      • link_tit
      • category_list 아래에 li 가 있는 형태 
    • ul class "menu_profile"

편집

아래 코드를 html에 넣어야하는데 [블로그 관리] - [스킨 편집] - [html 편집] 에 들어간다.
그리고 스크롤을 가장 아래로 내려 </body> 위에 아래 코드를 붙여넣는다.

  <div class="left_menu">
    <div class="list_cate">
      


      <ul class="menu_profile">
        <li><a href="https://studentstory.tistory.com/m/guestbook">방명록</a></li>
      </ul>
    </div>
  </div>

카테고리 리스트 아래에 menu_profile 도 들어가 있는데 방명록에 들어갈 수 있도록 한다.
카테고리 안에 방명록이 필요없다면 <ul class="menu_ ... ~ ... </ul> 까지 없애도 될 것이다.

CSS 편집

css를 편집해 카테고리가 어떤 모양으로 나타날지 설정할 수 있다.
사람마다 원하는 형태가 다를테지만 일단 크게 수정하진 않았다.
더 보기좋게 바꿔야지 하면서도 귀찮아서 바꾸지 않고 있다...

기존구조

기존에는 CSS에서
.list_cate ul li 를 수정하는 형태였다. 
나는 가장 하위 요소까지 들어가 직접 수정하는 형태로 수정해보았다.

편집

[html편집] - [CSS] 탭에 들어가 아래 코드를 삽입한다.

/* left_category menu*/
@media screen and (min-width: 1260px) {
    .left_menu {
        position: fixed;
        left: 10px;
        top: 100px;
        width: 180px;
        border-radius: 5px;
        border: 1px solid #dcdcdc;
        border-radius: 5px;
        padding: 15px;
        font-size: 15px;
    }
    .left_menu .link_tit{
      font-weight: bold;
      display: none;
    }
    .left_menu .category_list{
      font-weight: bold;
    }
    .left_menu .sub_category_list {
      border-left: 2px solid #ddd;
      padding-left: 10px;
      margin-bottom: 5px;
      font-weight: lighter;
      font-size: 13px;
    }
    .left_menu .sub_category_list li{
      /*margin-bottom: 4px;*/
      color: #aaa;
    }
}
@media (max-width: 1260px) {
    .left_menu {
        display: none !important; /* !important를 사용하여 다른 스타일 규칙을 무시함 */
    }
}

위 코드를 보면 
1260px 이상의 크기에서
.category_list는 큰 카테고리를 의미하며 굵게만 나타나게 했다.
그 하위 카테고리가 sub_category_list 인데 왼쪽을 띄우고 세로 선을 그어 하위 카테고리임을 알 수 있게 했다. 
그리고 폰트 두께는 얇고 작게 했다.
그리고 아래쪽 margin을 5px 넣어 큰 카테고리 간의 간격이 약간 있게 했다.

그리고 1260 이하에서 메뉴가 보이지 않게 했다.

이를 바탕으로 각 요소를 바꿔가면서 본인의 블로그에 맞게 최적화할 수 있을 것이다.

저작자표시 비영리 변경금지