이전 글에서는 티스토리 스킨 Material Kit의 스킨 옵션에 대해 알아봤습니다. 이번 글에서는 메뉴 만드는 방법과 원페이지 사이트 만드는 방법, 글 콘텐츠 보호에 대해 설명합니다.
데모사이트: https://explorer36.tistory.com/
구매 사이트: https://martian.kr/shop/material-kit-2/
1. 메뉴 만들기
메뉴는 티스토리에서 두 가지로 돼있습니다. 하나는 기본 메뉴이고 다른 하나는 카테고리입니다.
기본 메뉴는 관리자 화면에서 위 링크로 가면 나옵니다. 카테고리는 아래와 같습니다.
티스토리는 기본적으로 카테고리는 메뉴바에 나타나지 않고 사이드바에 나오도록 했는데 최근의 커버 기능이 추가된 스킨에서 둘 다 메뉴바에 나오도록 했습니다. 카테고리가 많으면 메뉴바가 복잡해지므로 메가메뉴로 나타나도록 설정했습니다. 카테고리 메뉴에서 부모카테고리는 6개 이상 만들 수 있지만 폭이 1200픽셀이므로 가능한한 6개 이내로 하는 것이 좋습니다.
넓은 폭을 사용하므로 부모 카테고리가 두개이면 1200픽셀의 반씩 사용하게 됩니다.
최상위 카테고리인 "분류 전체보기"를 "블로그"로 수정합니다.
위처럼 부모 카테고리와 자식 카테고리를 정리해줍니다.
그러면 블로그 메뉴를 클릭했을 때 위처럼 나옵니다.
2. 원페이지 메뉴 만들기
메뉴를 클릭하면 같은 페이지 내에서 해당 메뉴의 콘텐츠로 이동하는 것을 원페이지 사이트(One Page site)라고 합니다. 원페이지의 구성은 우선 이동했을 때 최상단의 헤더부분과 아래에 콘텐츠 영역으로 구분됩니다. 헤더로 사용할 수 있는 커버 아이템은 슬라이더, 메인 리스트, 와이드 패널이 있습니다.
슬라이더는 최상단에 하나만 사용하세요. 두 개 이상 사용하면 스킨 구조상 제대로 안나옵니다. 메인 리스트와 와이드 패널을 이용해 여러 개의 헤더를 만들고 적절한 곳에 배치합니다. 헤더 영역 바로 아래에 콘텐츠 영역을 다른 커버 아이템을 이용해 만들고 배치합니다. 위처럼 만들면 데모 사이트와 같이 나옵니다.
메뉴바는 이전의 메뉴를 모두 제거하고 새로 만듭니다. 메뉴 추가를 클릭하고 원페이지의 헤더 부분 제목을 입력합니다. 링크는 자신의 홈페이지 URL 다음에 /(슬래시)를 추가하고 상단부터 #sections0, 1, 2, 3을 입력합니다. 이렇게만 하면 나머지는 자동으로 구성됩니다. 위 메뉴는 한번 만들면 수정하는 기능이 없으므로 조심해서 입력하고 잘못되면 삭제하고 다시 입력해야 합니다. 또한 페이지에서 커버 아이템의 위치가 변경되면 위 메뉴의 제목도 달라지고 sections의 숫자도 달라지므로 다시 만들어야 합니다. 순서를 잘 지키세요.
3. 콘텐츠 보안
블로그의 콘텐츠를 훔쳐서 자신의 블로그에 처바르는 인간들이 많습니다. 구글은 복제된 사이트에 불이익을 주지만 네이버는 그렇지 못합니다. 콘텐츠 보호를 위해 몇 가지 기능을 추가했습니다.
우선 클릭드래그해서 콘텐츠를 복사하고 다른 곳에 붙여넣으면 금지 문구가 상세하게 나오도록 했습니다. Copyright © 다음에 나오는 글자는 스킨 옵션에 있는 "하단 카피라이트"에 있는 글자입니다. 따라서 이곳에 꼭 자신의 사이트 이름이나 원하는 것을 입력하세요.
이미지 카피가 안되도록 블로그 글 영역에서 관리자 외에 우클릭 방지를 해놓았습니다. 블로그 글 영역 외의 페이지에서는 이미지 우클릭이 가능합니다.
전체를 우클릭 방지해놓는 것은 글자를 선택해 검색하거나 코드를 복사해야 하는 경우 방문자가 상당히 불편하기 때문에 좋지 않습니다. 해외의 사이트를 많이 이용하는 필자는 우클릭 방지를 해놓은 사이트를 하나도 본적이 없습니다. 국내에서 특히 네이버 블로그는 모조리 우클릭 방지더군요. 구글에 의해 지배되는 해외 사이트는 콘텐츠 복제 사이트란 있을 수 없는 일이기 때문입니다.
4. 기타
글 콘텐츠 중에 대표이미지로 사용할 만한 좋은 이미지가 없으면 글 목록에서 모양이 좋지 않습니다. 멋진 이미지가 있으면 방문자가 글을 클릭하게 만들 수 있습니다. 일종의 낚시입니다. 글 편집화면 하단에 이미지를 추가하고 HTML 편집화면으로 갑니다.
<p style="text-align: center; clear: none; float: none;" class="no">
</p>
위처럼 p 태그에 class="no"를 추가하고 이 이미지를 대표이미지로 선택합니다. 그러면 블로그 글 영역에서는 나타나지 않지만 글 목록에서는 이 이미지가 대표이미지로 나타나게 됩니다.
