티스토리 블로그
많은 블로거들의 티스토리 블로그 이용목적 중 하나는 자유도일 것이다.
HTML, CSS 및 파일업로드에 대한 제한이 적기때문에 입맛대로 배치하고 다목적으로 활용할 수 있다.
그래서 꾸미는데 도움이 되고자, 극히 주관적으로 추려본 '사람들이 궁금해할 3가지'를 추려봤다.
제목에 언급했듯 첫째는 티스토리 회원이 댓글을 남길 때 발생하는 프로필버튼을 제거해볼 것이고,
둘째는 메인페이지를 설정하여 홈페이지 접속시 자동이동 되도록 설정할 것이다.
끝으로 카테고리 변경방법까지 살펴보겠다.
우선 시작에 앞서 공식 가이드도 있으므로 궁금하다면 살펴봐도 좋다.
물론 본 포스팅의 내용은 없을 것이다.
1. 댓글 프로필버튼 없애기
없애려는 버튼은 바로
버튼이다.
디자인을 해치기도하고 보기에 거슬릴 수도 있으니 지워보도록 하자.
응용할 수 있도록 간단한 원리도 함께 소개해보면,
앞서 '미디어쿼리 :: 반응형 웹 디자인 기초' 포스팅에서 셀렉터에 대해 언급한 바 있다.
셀렉터는 원하는 엘리먼트에 접근할 수 있도록 커서를 옮기는 작업이라고 생각하면 된다.
티스토리 댓글 리스트 구조를 보면 <s_rp_rep> </s_rp_rep> 안에 <span class="name"></span> 와 같은 태그가 존재할 것이다.
아이티-잉 블로그의 소스로 예를 들어보겠다.
<s_rp_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"></span>
<span class="control">
<a href="#" onclick="" class="modify"><span class="icon-cog" alt="수정/삭제"></span></a>
<a href="#" onclick="" class="write"><span class="icon-pencil" alt="댓글쓰기"></span></a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="name"></span>
<span class="date"></span>
<span class="control">
<a href="#" onclick="" class="modify"><span class="icon-cog" alt="수정/삭제"></span></a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
위와 비슷한 형태로 자리하고 있을 것이다. 정작 프로필버튼을 찾아볼 수 없지만, 크롬 개발자도구(F12)를 활용하여 찾아보면 다음과 같다.
commentList 클래스를 보니 댓글 영역이 맞고, name 클래스 위에 위치한 rp_admin 클래스가 앞서 언급한 에 해당한다.
치환자는 로그인/비로그인자에 대한 이름값을 가져오는 치환자다.
계속해서 살펴보면 name 클래스 밑에 span에 해당하는 부분이 프로필버튼임을 알 수 있다.
즉, 프로필버튼에 대한 접근은 셀렉터를 활용하여 .name > span {} 로 볼 수 있다.
이제 안보이게 해볼텐데 크게 3가지 방법이 있다.
첫번째는 실제로 표시하지 않는 것이고, 두번째는 화면 밖으로 내보내는 것(position, left 등 활용),
세번째는 레이어를 두어 위를 다른 요소로 덮는 것(z-index)이다.
가장 간단한건 첫번째 방법으로, css의 visibility 속성 또는 display 속성을 통해 제거할 수 있다.
visibility의 경우 hidden으로 숨기거나 block으로 보이게 할 수 있고, display 또한 none으로 숨기거나 block으로 드러나게 할 수 있다.
.name > span{display: none;}
자, 그러나 위와 같이 이렇게하면 작성한다면 문제점이 발생할 수도 있다.
페이지 내 모든 name 클래스에 속한 span 태그를 표시하지 않겠다는 의미가 되기때문에 구체적인 위치를 지정해주는 것이 좋다.
예를 들면, 위에 이미지에서 commentList 클래스 안에 있는 것을 볼 수 있으므로 아래와 같이 변경해주면 된다.
.commentList .name > span{display: none;}
이래도 불안하거나 제대로 동작하지 않을 경우,
보다 자세한 위치를 살펴보면 commentList 클래스 안의 ol 태그 밑에 li, div를 거쳐 name 클래스에 도착하므로 다음과 같이 변경하면 100% 동작하게된다.
이를 코드로 풀어보면 다음과 같다.
.commentList > ol > li > div > span.name > span{display: none;}
이제 결과를 확인해보자.
이렇게 사라졌다면 성공이다.
2. 메인페이지 설정
준비물이 필요한데, 당연히 메인페이지가 있어야 한다.
따로 웹 문서를 만들어도 좋지만 편하게 공지사항으로 글 하나 작성하자.
그리고 다음 코드를 HTML 문서의 <head></head> 사이에 추가해주자.
<script>
var link = location.href; //변수 link에 현 브라우저의 주소를 저장한다.
if(link=="자신의 블로그주소"){ // 만약 현 위치가 자신의 블로그 주소와 같을 경우,
location.href="이동할 메인페이지 주소"; //메인페이지가 될 주소로 변경시킨다.
}
</script>
원리는 간단하다.
주석으로 처리해놨듯이 브라우저의 현 주소를 받아서 자신의 블로그 주소와 일치할 경우, 지정한 페이지로 이동시키는 것이다.
참고로 이를 리디렉션(Redirection)이라고 한다.
3. 카테고리 변경
입맛대로 카테고리를 만드려면 우선 기본 제공하는 카테고리 치환자를 없앨 필요가 있다.
HTML 문서내 [##_category_##] 치환자 또는 리스트 형식을 사용 중일 경우 [##_category_list_##] 치환자를 지워주면 된다.
이제 원하는 형태로 카테고리를 디자인하여 링크를 걸어주면 끝이다.
티스토리 블로그의 카테고리 접근 방식은 검색과 동일하며 주소 구성도 간단하게 되어있다.
그 형태는 'http://블로그주소/category/카테고리명의 주소'가 된다.
만약 'http://it-ing.tistory.com/category/' 또는 'http://it-ing.tistory.com/category/0' 으로 링크시킨다면
모든 카테고리가 노출되는 방식이다.
예를들어 살펴보자.
알고리즘 카테고리로 이동시키려면 링크 주소를 'http://it-ing.tistory.com/category/IT/알고리즘' 으로 설정하면 된다.
참고로 아래 예제 속 span은 아이콘 폰트를 적용한 예제이며 그대로 이용하려면 사전작업이 필요하다.
보다 자세한 포스팅은 '아이콘폰트 :: Fontello 사용법'을 참고하자.
예제)
<a href="http://it-ing.tistory.com/category/IT/알고리즘"><span class="icon-emo-sunglasses"></span> 알고리즘</a>
결과)
위와같이 링크만 이용하면되므로 이미지나 gif 파일을 활용한 움짤, css 애니메이션 등 원하는대로 맘껏 꾸밀 수 있다.
이러한 형태의 커스텀 카테고리가 되면 단점이 발생하는데, 글의 수나 새글 알람 아이콘을 포기해야한다.
물론 ajax를 이용해 미리 긁어서 포스팅 수를 카운트하여 표기하는 방법도 있겠으나 수가 늘수록 속도에 영향을 주므로 추천하진 않는다.
끝.
'IT > WEB, UI, UX' 카테고리의 다른 글
| [웹 서비스 개발 환경 구축 ①] 이클립스 :: 스프링 프레임워크 설치하기 (0) | 2016.04.29 |
|---|---|
| [UX] UX(User Experience) :: 개념, 목업 및 프로토타입 도구, 와이어프레임 (0) | 2016.04.13 |
| 티스토리 블로그 :: 웹 페이지 로딩속도 최적화하기 (0) | 2016.03.14 |
| 미디어쿼리 :: 반응형 웹 디자인 기초 (0) | 2016.03.03 |
| 아이콘폰트 :: Fontello 사용법 (4) | 2016.01.13 |