WN-SKIN2 티스토리스킨 내용수정 방법

안녕하세요, 와니닷컴 입니다. 

WN-SKIN2 티스토리 스킨의 내용을 수정 하는 방법을 알려 드리겠습니다. 

먼저, 수정 가능한 부분은 슬라이더 이미지 바로 아래 아이콘 수정 하는 방법과, 문구 수정

About 내용 표시가 된 부분의 내용수정과 이미지 수정, 블로그 가로폭 을 수정 하는 방법을 알려 드리겠습니다. 

1. 아이콘 수정방법

• html/css 편집 에서 수정 할 부분을 먼저 보겠습니다. 
• 아이콘을 수정 하는 방법은 font Awesome Icons 를 이용한 아이콘 수정 방법과, 작업된 이미지 파일을 올리는 방법이 있습니다. 
• font awesome 으로 수정 하는 방법은 

와 같은 소스의 <span class=“fa fa-users icon”></span>  부분의 소스를 변경 해 주시면 되는데요 ~ 

사이트 http://fontawesome.io/icons/ 에 들어오시면, 제공되는 아이콘들 이 있습니다. 

원하시는 아이콘의 값이 있습니다. 그래프 모양으로 변경 하실 경우 fa fa-bar-chart 로 class=“fa fa-bar-chart icon” 로 값을 수정 하시면

아이콘 이미지가 변경 됩니다. 

다른 방법으로 직접 만든 아이콘 이미지로 변경 하고자 할 경우에는 이전에 슬라이더 이미지 를 변경 할때 처럼 준비된 아이콘 이미지를 업로드 해줍니다. 

파일명은 잘 알아 볼 수 있는 아이콘 파일명으로 올려 줍니다. 

<span class="fa fa-users icon"></span> 의 소스를 <span><img src=“./images/아이콘이미지파일명.확장자” alt=“”></span>

형태로 변경 해 주시면, 준비하신 아이콘 이미지로 변경 되어집니다. 

2. 사이트 내 문구 수정방법

관리자에서 html/css 편집 메뉴에 들어오시면, html 소스에서 아래와 같은 부분을 발견 하실 수 있습니다. 

 위 내용이 위에서 설명한 아이콘 수정 되는 부분의 소스 인데요~ 아이콘을 먼저 수정 하셨으면, 

<div class="h3 title">텍스트</div> 부분에 문구를 수정 해 주시면 됩니다. 

또는 <p class="description">내용</p> 의 내용 부분을 수정 해 주십니다. 

위 표시된 부분의 텍스트를 수정 해 주시면, 아래 이미지 처럼 메인화면이 변경 되는 것을 확인 하실 수 있습니다.

다음은, 제일 상단의 이메일 부분과 전화번호 부분, SNS 아이콘 부분의 수정 방법 입니다. 

먼저 이메일과, 전화번호 부분의 소스는 아래와 같습니다. 

이메일 부분의 내용을 수정 하시고, 클릭시 이메일로 바로 연결 하시려면, <a href="#"> 부분을 

<a href="mailto:메일주소"> 로 변경 하시면, 클릭시 메일을 보내 실 수 있도록 링크 됩니다. 

SNS 아이콘 부분의 <a href="#" 부분에 해당 SNS 주소를 넣어 주시면 클릭시 페이스북, 트위터, 구글 등에 링크 됩니다. 

메인페이지 하단에 About 부분의 내용 편집 관련된 내용 입니다. 

이 부분의 문구를 수정 하실 수 있는 소스는 아래와 같습니다. 

표시된 부분의 내용을 수정 해 주시면, 메인페이지에서 About 내용 부분의 제목이 변경 됩니다. 

위 소스 내용 중에 <img src="./images/profile.png" 부분을 변경 하시면, 원하시는 이미지로 변경 가능 하십니다. 

다음으로, Daily Blog, Gallery, SNS 부분의 타이틀과 내용도 수정 해 주시면, About 내용을 변경 하실 수 있습니다. 

마지막으로, 사이트의 맨 하단 footer 부분 내용을 수정 하는 곳 입니다. 

맨 하단의 로고 부분을 변경 하실 수 있습니다. 

타이틀 내용을 수정 하시거나, 준비된 로고파일이 있을 경우, 이미로 변경 하시면 됩니다. 

footer text의 <p class="test"> 내용 </p> 의 내용을 수정 하시면, 하단의 내용을 변경 하실 수 있습니다. 

SNS 부분의 링크도 <a href="#" 의 주소부분을 추가 해 주시면 SNS 링크를 추가 하실 수 있습니다. 

3. 사이트 가로폭 수정 하는 방법

html/css 편집 페이지 에서 css 를 클릭 합니다. 

소스 맨 하단에 다음과 같은 소스를 추가 합니다. 

@media (min-width: 1200px){ .container{ width:1170px;} }

@media (min-width: 992px){ .container{ width:970px;} }

@media (min-width: 768px){ .container{ width:750px;} }

위 밑줄 친 부분의 값을 수정 하시면서 메인페이지의 컨텐츠 가로폭을 수정 하시면 됩니다. 

메인 슬라이드 이미지, 내용을 변경 해서 개성있는 블로그를 표현 하실 수 있습니다. 

파일에서 사이드바 위치도 오른쪽, 왼쪽 두가지로 나누져 있고, 리스트 스타일도 일반형, 썸네일형 으로 되어 있습니다. 

원하시는 소스로 입맛에 맞추어 티스토리 블로그 스킨을 수정 하실 수 있으니 잘 활용 해 주세요 ^^