지난해부터 티스토리의 스킨을 반응형으로 사용하다 보니 블로그의 메인 화면을 어떤 방식으로 나타나게 할지 고민이 많았다. 이전에는 티스토리에서 제공하는 태터테스크를 이용해 첫 화면 꾸미기를 하였지만 반응형으로 오고부터는 태터데스크를 지원하지 않기도 하고 반응형에서 태터테스크를 하게되면 화면이 뒤죽박죽 되곤 한다.
그래서 단순하게 생각해낸 방법은 블로그의 어느 특정 페이지를 블로그의 첫 화면처럼 꾸며서 리디렉팅을 하면 좋겠다였다. 게시글을 첫페이지로 하기때문에 모바일같은 반응형 화면으로도 제격이다.
아래는 스퀘어 스킨을 사용할 당시 적용한 것이며 다른 스킨도 방법은 비슷하다. 일단 하나씩 해본다.
1 블로그 주소 리디렉팅하기
주소를 리디렉팅하는 방법은 너무 간단하다.
스킨의 HTML 에서 <head> 바로 다음줄에 캡춰한 문구를 입력하면 된다.
아래 문구를 보면.. http://sonylove.tistory.com 이나 sonylove.tistory.com (본인의 블로그 주소) 의 주소가 입력되면 아래의 /928 페이지 (첫 페이지로 사용할 게시글)로 이동하게 된다. 같은 블로그내의 주소라면 앞의 sonylove.tistory.com 이란 주소는 다시 적을 필요는 없다. 간단하게 페이지 주소인 /928 만 입력하면 된다. 같은 블로그의 게시글이 아닌 경우에는 주소 이름 전체를 입력하면 된다.
리디렉팅을 구현하는 방법은 여러가지가 있지만 가장 간단하고 쓸만하다.
이제 주소창에 블로그 주소 sonylove.tistory.com 을 입력하게 되면 자동으로 http://sonylove.tistory.com/928 이란 페이지로 이동한다.
2 첫페이지 화면 꾸미기
< + 현재는 글 자체에 스타일을 추가해서 display: none 을 활용해서 감추고 있다. 어떤 경우는 클래스에 hidden-xs 를 활용하기도 한다. 특정 부분을 변경해서 표현할수도 있고... 아래 글은 지금 생각해보면 그동안 너무 어렵게 생쇼한거였다.>
첫페이지는 자주 사용하는 카테고리의 이미지를 만들어서 링크하는 방식으로 상단에 배치하고 내용은 기존에 사용하던 공지사항의 내용으로 일단 만들었다. 그런데 아직 몇가지 맘에 들지 않는게 있다.
첫페이지인데 제목도 거슬리고 댓글도 없었으면 좋겠고, 페이지 숫자 부분도 없으면 좋겠다.
그래서 아래와 같이 스킨의 HTML 가장 마지막 부분에 스크립트를 추가했다.
만약 928 페이지라면 (블로그 첫화면) 보고 싶지 않았던 항목을 보이지 않게 하라는 것이다.
스크립트의 두번째 줄
document.all.head.style.display='none';은 head (제목)이 보이지 않게 하는 것이다. 세번째줄의 communicate 는 댓글창을 첫화면에서는 보이지 않게 한 것이다. 네번째줄의 paging 은 이름 그대로 페이지 숫자가 보이지 않도록 한것이고..
이 명칭은 html에서 div id로 정의한 명칭을 사용하면 된다. 스킨마다 이름이 약간 다를 수 있다.
만약 사이드바가 첫화면에서 보이지 않게 하고 싶다면.. 항목을 더 추가하면 된다.
document.all.sidebar.display='none'; 이런식으로 말이다.
지금의 스킨은 아니지만 지난해 스퀘어 스킨을 사용하면서 위의 스크립트를 적용한 화면이다. 지금 사용하는 스킨과 비교해서 보니 전체적인 분위기는 비슷하다. 스킨이 바뀌어도 동일한 게시글을 계속 첫페이지로 사용하다보니 디자인에 일관성이 있어 좋다. ㅋㅋ 그때도 뭐 나름 괜찮았던거 같다. 사이드바만 왼쪽에서 오른쪽으로 이동한 것처럼 보인다. -.-;
Square 스킨
현재의 블로그 첫화면(실제 맨 처음 사진과 같은 주소의 페이지를 이용한것이다.)
왠만한건 다 보이지 않도록 했다. 깔끔하긴 한데.. 너무 횅한가..
지금은 다시 테터데스크 플러그인을 이용해 첫페이지를 사용하고 있다. 테터데스크도 잘만 사용하면 너무 좋은 도구이다.
