티스토리 스킨 수정 방법
티스토리 블로그 스킨 수정 시 HTML 구조와 설정을 이해하면 작업이 수월해집니다. 헤드 태그에서는 메타데이터와 스타일 시트를 설정하며, viewport 메타 태그는 페이지의 확대/축소 및 반응형 디자인을 제어합니다. 제목 태그는 검색엔진 최적화(SEO)에 중요하지만, 페이지에 두 개 이상 존재하면 검색엔진에 혼동을 줄 수 있으므로 하나로 수정하는 것이 좋습니다. 메뉴는 동적에서 고정으로 설정해 레이아웃 문제를 해결할 수 있습니다. HTML 구성도를 참고하여 작업하면 더 효율적인 수정이 가능합니다.
티스토리 블로그 스킨을 수정하는 작업 시 기본적으로 HTML 코드의 구성을 알고 있으면 작업하기 편해집니다. HTML의 기본 구조와 기본적으로 수정해야 할 부분을 알아보겠습니다.
티스토리 블로그 스킨 수정
티스토리 블로그 HEAD
HEAD 코드
HTML에서는 웹페이지의 기본적인 요소를 설정합니다. 주로 메타데이터, 스타일 시트, 스크립트 설정을 합니다. 메타 설정 중 뷰포트 메타는 모바일 기기 등 다양한 기기에서 웹페이지를 접근할 때 화면의 상태를 설정합니다.
그러나 티스토리에 기본적으로 설정된 뷰포트는 사용자가 페이지를 확대할 수 없게 만들어, 시각 장애가 있는 사용자에게 불편을 줄 수 있습니다. 따라서 이 설정을 사용할 때는 사용자를 고려하는 것이 좋습니다.
페이지가 다양한 화면 크기와 해상도에서 잘 보이도록 하려면, 가능한 경우 width=device-width와 함께 적절한 반응형 CSS를 사용하는 것이 좋습니다.
아래는 티스토리의 기본적인설정입니다.
아래는 티스토리의 기본적인 HEAD 설정입니다.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[##_page_title_##]</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<style type="text/css">
</head>이코드에 뷰포인트 코드를 수정해 주시면 됩니다.
뷰포트 태그는 웹페이지가 모바일 기기에서 어떻게 표시될지를 제어하는 중요한 요소입니다. 제공한 코드는 사용자가 페이지를 확대하거나 축소할 수 있는 방식과 뷰포트의 기본 설정을 조정하도록 수정된 코드입니다.
- 반응형디자인: width=device-width 설정은 페이지의 레이아웃이 기기의 화면 너비에 맞추어 조정되도록 합니다.
- 확대/축소기능: initial-scale=1.0은 페이지가 처음 로드될 때 100% 비율로 표시되며, maximum-scale=5.0과 user-scalable=yes는 사용자가 페이지를 확대하거나 축소할 수 있도록 허용합니다.
아래는 수정된 코드입니다.
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0,
maximum-scale=5.0,
user-scalable=yes">HEADER 코드
티스토리 블로그의 HEDADER 부분에는 H1코드가 존재 합니다. H1 코드는 페이지에서 가장 중요한 제목을 나타내는 코드 입니다. 검색엔진은 H1 코드를 통해 페이지의 내용을 이해하는 주제로 판단합니다.
그러나 기본적인 스킨은 모든 페이지의 HAEADER 부분에 H1 테그가 존재합니다. 이 H1태그는 블로그의 제목으로 사용되고 있습니다. 또한 글페이지에도 H1 태그가 동일하게 존재해서 글의 제목으로 사용되고 있습니다.
즉 H1 태그가 항상 2개 존재하며 2개는 블로그명과 글페이지의 제목에 사용됩니다. 이로 인해 검색엔진이 글의 정보를 파악하는데 문제가 발생합니다. 이부분을 P태그로 수정해주시면 됩니다.
아래는 티스토리에 기본적으로 설정된 HAEADER의 H1 태그입니다.
<header id="header">
<div class="inner">
<h1>
<a href="[##_blog_link_##]">
<s_if_var_logo>
<img src="[##_var_logo_##]" alt="[##_title_##]">
</s_if_var_logo>
<s_not_var_logo>
[##_title_##]
</s_not_var_logo>
</a>
</h1>이 <h1> 태그를 <p> 태그로 변경하여 페이지 내에서 <h1> 태그가 1개만 존재하도록 수정해 주시면 됩니다.
<p>
<a href="[##_blog_link_##]">
<s_if_var_logo>
<img src="[##_var_logo_##]" alt="[##_title_##]">
</s_if_var_logo>
<s_not_var_logo>
[##_title_##]
</s_not_var_logo>
</a>
</p>
메뉴 CLS 문제 해결방법
티스토리 블로그에서 제공하는 일부 스킨은 상단 메뉴를 제공합니다. 블로그 관리자 페이지에서 메뉴를 설정하면 치환자를 사용하여 자동으로 운영자가 설정한 메뉴를 불러올 수 있습니다.
이 방식은 운영자가 코드를 수정하지 않고도 메뉴를 편리하게 바꿀 수 있는 기능입니다. 그리고 이러한 메뉴는 모바일에서 사용할 때 스크롤할 수 있는 기능도 제공합니다. 그러나 이 편리한 기능이 검색 최적화에서 레이아웃을 미세하게 흔들리게 하는 요소로 작용할 수 있습니다.
이 메뉴를 동적 메뉴로 설정하지 않고 고정 메뉴로 설정하면 이 문제를 해결할 수 있습니다.
티스토리 블로그에서 사용하는 기본 메뉴 코드입니다.
<nav id="gnb">
[##_blog_menu_##]
</nav>아래 코드는 동적 메뉴를 고정 메뉴로 수동 설정하는 코드입니다.
ul {
list-style: none;
padding: 0;
background-color: #436664;
margin: 0;
display: flex;
justify-content: flex-start;
}
li {
width: 150px;
text-align: center;
padding: 10px;
font-size: 1em;
font-weight: 600;
}
a {
text-decoration: none;
color: white;
}
<ul>
<li><a href="링크 주소">제목1</a></li>
<li><a href="링크 주소">제목2</a></li>
<li><a href="링크 주소">제목3</a></li>
</ul>
블로그 HTML구성
페이지 기본 HTML 구성도
티스토리 블로그의 기본 페이지는 메인 페이지, 글 페이지, 카테고리 페이지입니다. 스킨을 수정할 때 코드만 보면서 작업을 하다 보면 헷갈릴 수 있습니다. 아래 코드 구성도를 참고하시면 됩니다.
아래 코드는 티스토리 BOOK CLUB 코드입니다.
서브 페이지 구성
아래는 메인 페이지, 글 페이지, 카테고리 페이지의 구성도 입니다.
