티스토리 오디세이 스킨 "카테고리의 다른글" 더보기 만들기 및 수정하기

티스토리 오디세이 스킨 "카테고리의 다른글" 더보기 만들기 및 수정하기

 

안녕하세요. 사람사물상황입니다.

 

1. 서론

이번엔 카테고리의 다른글을 만들겁니다. 원래 기본적으로 티스토리에서 플러그인해서 제공되는, 이 기능은 오디세이 스킨에서는 구현 되지 않게 설정이 되어있습니다. 아마도 다른식의 다른글 보기를 밀기 위해서 그런것 같은데요.

오디세이에서 적용된 다른글 더보기는 (이전글 현재글 다음글) 총3개뿐으로, 저는 이 부분이 많이 보여야 된다고 생각하고 있습니다. 이 부분에서 들어온 분이 어떤글들이 있는지 쉽고 빠르게 알 수 있기 때문입니다. 그리고 약간 제가 느끼기에는 이 부분도 검색 노출에 포함되는 것 같습니다. 

검색 노출이 아니여도 이 부분은 내 블로그안에서 다른 글로 순환시키거나, 내 블로그가 어떤 블로그인지 쉽게 알 수있습니다. 그래서 필수라 생각합니다.

 

2. 본론

가. 카테고리 다른글을 활성화 시킨다.

나. 그리고 이쁘게 만든다 .

 

 

 

 

가. 카테고리 다른글을 활성화 시킨다.

스킨편집-css 에서 다음을 찾아갑니다. 

 

.another_category {
    display: none;
}

 

여기서 none을 삭제하면 카테고리 다른글이 표현이 됩니다.

 

    display: 

 

 

 

 

 

 

그리고 플러그인에 가서 카테고리 다른글을 활성화 시킵니다.

 

 

 

 

 

활성화가 되면 다음과 같이 보이게 됩니다.

 

 

 

 

 

나. 그리고 이쁘게 만든다 .

저기서 셀들을 나타내는 저 칸들이 없는게 저는 깔끔해 보이더라구요. 그래서 검사에서 만져서 설정값을 알아내고 css에가서 바꾸려는데 태그가 없는겁니다? 그래서 알아보니 css에서는 보이지 않게 스타일이 설정된다합니다. 해결 방법은 보이지않는 그값보다 먼저 우리가 새로운 태그를 만들어서 넣어야 한다고 합니다. 

이리저리 방법을 알아보다 마지막으로 어렵게 커뮤니티에서 답을 얻었습니다.

 

아무튼 다음의 태그들을 넣어줍니다.

 

css 504 근처

.another_category {
    margin-bottom: 56px !important;
}
.article-view .another_category {
/*margin: 60px 0 57px !important;*/
/*padding: 16px 20px 14px;*/
}
.article-view .another_category h4 {
margin: 0 0 13px !important;;
padding: 0 !important;
border-bottom: 0px !important;
font-size: 0.875em !important;
}
.article-view .another_category table {
margin: 0 !important;
border: 0px;
}
.article-view .another_category th {
padding: 2px 0 !important;
font-size: 0.875rem !important;
}
.article-view .another_category th a.current {
text-decoration: underline !important;
font-weight: 400;
color: #333 !important;
border: 0px !important;
}
.article-view .another_category tr,
.article-view .another_category tr th {
border: 0px;
}
.article-view .another_category td {
padding: 2px 0 !important;
border: 0px;
font-size: 0.75rem !important;
}

.article-view .another_category a {display:contents;}


/* area_paging */ 이라고 된 부분 위에 태그를 삽입합니다.

코드는 텍스트문서로 첨부하였습니다. 다운해서 쓰세요.

 

새 텍스트 문서.txt

0.00MB

 

 

 

 

 

 

 

이렇게 하면 요렇게 깔끔하게 폰트크기가 조절되고 선들이 없어졌습니다.

 

 

 

 

 

 

 

하지만 저는 여기서 이부분에서

.article-view .another_category h4 {
    margin: 0 0 13px !important;
    padding: 0 !important;
    border-bottom: 0px !important;
    font-size: 0.875em !important;
}

 

    padding: 0 !important;
    border-bottom: 0px !important;

이걸 삭제를 해줍니다. 그럼 이렇게 제가 원하던 모양이 만들어졌습니다. 

 

저게 지금은 글이 적어 그렇지만 글이 많아지면 구분선 한개가 딱있는게 더 깔끔하게 잘 보이더라구요. 다만 이렇게 할경우에 어떤 오류가 생길수도 있습니다. !important 이부분을 삭제하지 말라는 말이있는데 저는 그냥 삭제하며 수정 해봤거든요. 문제가 될 경우 처음 태그를 추가하는 정도까지만, 하시면 되겠습니다.

 

 

 

 

 

 

3. 결론

그래서 일단은 카테고리 더보기를 볼 수 있는 것에 아주아주 만족하구요. 깔끔하게 마무리 된 것 같네요.

이렇게 함으로써 사실상 오디세이 스킨에서 제가 원하던 모든것을 바꾸게 되었습니다. 이 글이 아마도 마지막이 될 것 같네요. 부가적으로 바꿀 것도 있긴하지만 제가 생각할 때 중요한것은 여기까지 입니다.

 

스킨을 수정하면서 뭔가 스킨 만드는걸 공부 할 수 있을줄 알았는데, 그냥 아는 정도까지만 끄적이는 수준이더라구요. 스킨을 만들어보거나, 다른 스킨을 사용하기 전까진 굳이 스킨 수정을 다시는 손대지 않을것 같습니다.

정말 너무 오래 걸려서 지쳤거든요. 별거 아닌거 아는데도. ㅎㅎ. 코드를 만들줄 모르니까 한계가 있어서 찾아보고 일일히 수작업으로 맞춰보는게 좀 답답~했습니다. 

그래서 제가 수정했던 글들이 혹시 님들에게 도움이 되었으면 합니다. 왜냐면 님들도 답답~~하실것 같아서요.ㅎㅎ

 

그럼 20000