티스토리 블로그 <카테고리의 다른 글> 배경색 수정 및 밑줄 없애기 + 날짜 없애기

오늘은 티스토리 블로그의 <카테고리의 다른 글> 부분에 배경색 수정 및 밑줄 없애기 + 날짜 없애는 방법에 대해 알아보도록 하겠습니다. 최근 필자는 오랜기간 운영했던 네이버 블로그를 떠나 티스토리로 서식지를 옮겼습니다. 처음 티스토리 블로그를 만들면서 이런 저런 스킨을 적용하고 시행착오를 많이 겪었습니다. 이에 대해 시행착오 거친 내용들을 하나씩 정리해서 하나씩 포스팅을 해보려고 합니다. 분명 수정을 했음에도 바뀌지 않는 골치아픈 태그들도 많고 스킨에 따라 전혀다른 내용이 되기도 하고 아무튼 티스토리 어렵더군요. 블로그 팁이라기 보다는 제가 겪었던 문제점만 포스팅해서 저와같이 삽질(?)하지 않았으면 하는 바램에서 올립니다. 또한 다음에 다시 블로그 스킨 바꿀 때, 기억이 안날까봐 기록차원에서 씁니다.

 

 

 

 

카테고리의 다른 글 배경색 수정

 

티스토리 에디터로 작성하지 않과 다른 곳에서 표나 박스를 가져올 경우 지금 제가 쓰고있는 <Life in Mono(Light)>스킨에서는 아래 그림처럼 자동으로 배경색으로 회색이 채워집니다. 애드센스 광고를 삽입해도 회색 테두리가 생기거나 여백에 회색이 채워지는 걸 본 적이 있을거에요. 특히 <카테고리의 다른 글>의 회색배경은 어떤 스킨에도 어울리지 않는다는 치명적인 단점이 있죠. 아래 처럼 표에 회색 배경이 들어가거나 <카테고리의 다른 글> 배경을 바꾸고 싶은 분들은 Follow me ~!

 

 

 

 


 

먼저 [HTML/CSS 편집] 으로 가셔서 Ctrl+F로 'article table'를 검색합니다. Style.css에 있습니다.

검색 결과를 보면 아래 오렌지색 박스의 두 줄에 있는 background-color 색상코드를 바꿔주면 됩니다.

 

 

위 코드중에서 #ccc 와 #eee 를 원하는 색상코드로 바꾸시면 됩니다. 필자는 블로그 스킨의 배경색이 어떤 색이든지 어울리는 투명색(transparent)로 했습니다. #ccc -> transparent 로 바꾸시면 현재 블로그 배경색으로 바뀝니다.(transparent는 앞에 #을 빼고 넣으세요). #ffffff 를 넣으시면 흰색이 됩니다.

 

 

 

 

".imageblock {border:0px...."로 이미지 테두리가 사라지지 않을 때 tip

 

이건 본 포스팅과 상관없는 다른 팁이지만 하나 더 말씀드리면 포스팅에 이미지를 삽입할 때 이미지에 테두리가 생기는 현상을 없애기 위해 보통 style.css 파일에서 '.imageblock { border:0px....'로 하게됩니다. 그런데 특정 스킨에서 이렇게 해도 이미지의 테두리가 없어지지 않는 경우가 있는데요, 정확히 말씀드리면 어떤건 없어지고 어떤건 테두리가 그대로 남는 경우가 있는데 이럴 때는 Style.css에서 .article table td {padding:2px.... 에서 padding:2px 0px 로 바꿔주면 이런 증상이 싹 사라집니다.

 

 

 

 

 

'카테고리의 다른 글' 현재 글 이외 밑줄 없애기 및 날짜 없애기


아래 사진에서 보시는 것 처럼 '카테고리의 다른 글' 목록을 보면 모든 제목에 줄이 쳐져 있어 지금 보는 포스팅이 무엇인지 구별이 잘 안될 때가 있어요. 이럴 때 지금 보는 포스팅 제목에만 밑줄이 있고, 나머지 제목에는 밑줄을 없애 보도록 하겠습니다. 이런 세세한 것 까지 손을 대야하는 것은 티스토리의 장점이자 큰 단점이기도 하지요.

 

 

 

 

 

방법은 매우 쉽습니다. style.css 의 아무 줄에나 아래 CSS코드를 넣어주시면 됩니다.

 

 /* 카테고리의 다른 글 현재 글 이외 밑줄 없애기 */
.another_category a.current { text-decoration: underline; }
.another_category a { text-decoration: none !important; }

 

소스.txt

 

 

 

 

 

 

 

위 사진처럼 style.css 에 소스를 넣고 적용을 시키면 아래와 같이 현재 글에만 밑줄이 가게 됩니다.

 

 

 

 

추가) 위 사진에서 날짜도 빼고 싶은 분들은 Style.css 코드 아래 코드를 삽입해주시면

'카테고리의 다른 글'에서 날짜가 사라집니다.

 

.another_category td {display:none;} /* 날짜 감추기 */

 

 

카테고리의 다른글 부분이 훨씬 깔끔하고 이뻐졌죠?

 

 

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

언젠간날고말거야

언젠간날고말거야™의 여행블로그. 국내여행기, 해외여행기, 영화리뷰 등을 다룹니다.

    이미지 맵

    강좌&IT/블로그 다른 글

    댓글 27

      • 좋은 포스팅 잘봤습니다 덕분에 많은 도움이되었네요 그런데 혹시 카테고리 다른글 목록에 나오는 날자를 삭제나 안보이게 할수 있는 방법이 있을까요?

      • 좋은 포스팅 잘봤습니다 덕분에 많은 도움이되었네요 그런데 혹시 카테고리 다른글 목록에 나오는 날자를 삭제나 안보이게 할수 있는 방법이 있을까요?

      • 좋은 질문이십니다. ㅎㅎㅎㅎ
        Style.css 에 아래 코드를 추가하시면 됩니다.

        .another_category td {display:none;} /* 날짜 감추기 */

      • 안녕하세요 오늘 처음 티스토리 블로그를 시작했습니다 스킨 때문에 머리가 아파서 뒤지다가 좋은 글을 발견했네요^^
        제가 쓰는 블로그 스킨 메뉴가, 포스팅 부분은 흰색이고,카테고리 박스 부분은 회색인데 ,카테고리 박스를 흰색으로는 바꿀 수 없을까요?
        아는 게 없어 헤매이는 초보1인입니다 ㅠ.ㅠ



      • 테두리를 없애고 싶은 모양인데요, style.css 에 아래 한줄 추가해주세요.
        div.another_category { border:0px; background-color:transparent;}

        border:0px 부분을 바꿔주면 테이블 두께가 바뀌는데 0를 주면 사라집니다.

      • 와 친절한 답변 감사드립니다 ^^

        그런데 style.css에 div.another_category { border:0px; background-color:transparent;} 를 추가했는데
        스킨이 여전히 그대로네요 ㅠ.ㅠ
        첫줄에 추가했는데 열을 지정해서 추가해야 하나요? 조금 더 이것저것 해봐야겠습니다.
        하여간 친절한 답변 감사드려요 좋은 하루되세요 ^^

      • 먼저 이 내용이 이미 있는 데 중복으로 적용된 건 아닌지 확인해보시고요, 그리로 위치는 어디에 넣어도 상관없습니다만, 만약 안된다면 div class 가 another_category 맞는지 확인해보세요. 아니면 그 이름에 맞춰서 another_category 를 변경해주시면 됩니다.

    *

    *

    이전 글

    다음 글