CreativeCleanDesign

About me Contact
Total
10,372
Today
41
Yesterday
103

Blog


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-chartclass=“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;} }



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




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

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

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



저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License


COMMENTS
  • BlogIcon Constantine B2 2016.12.04 15:59 신고 | md/del Reply

    스킨넓이수정은했는데 그대로인것같아요
    어떻하면되죠 ..........................궁금

    • BlogIcon 와니닷컴 waanee 2016.12.04 16:58 신고 | md/del

      .container {width:1200px}
      @media (min-width: 1200px){ .container{ width:1100px;} }
      @media (min-width: 992px){ .container{ width:100%} }
      @media (min-width: 768px){ .container{ width:100%} }

      위에 .container 를 추가해서 가로폭 사이즈를 먼저 지정해 주세요~

      사이즈는 직접 이렇게 저렇게 수정 해서 테스트 해보세요 ^^;

  • BlogIcon ljwkies 2016.12.18 13:19 신고 | md/del Reply

    스킨 너무 감사하고 예쁘게 잘 사용하고 있습니다 ^^ㅎㅎ

    한가지 궁금한게 있다면, 글 작성시 에디터에서 작성하는 폰트크기가
    완성하고 글 내보내기 후 본문을 들어가 읽어보면 폰트사이즈가 작게 바뀌는데요 ㅎ
    혹시 본문내용 폰트 사이즈는 어디서 조절할수 있는지 알수 있을까요 ^^;;
    그리고 혹시 본문폰트사이즈 조절할경우 모바일에서 같이 더 커져버리는건 아닌지도 궁금하구요 ㅎ

  • beautys 2016.12.31 16:32 신고 | md/del Reply

    Daily Blog, Gallery, SNS 포스트 링크는 어떻게 연결하나요???

    • BlogIcon 와니닷컴 waanee 2016.12.31 16:39 신고 | md/del

      <div class="h3 title">Daily Blog</div>을
      <div class="h3 title"><a href="주소">Daily Blog</a></div>
      방식으로 수정 하시면 됩니다.

    • beauty 2016.12.31 19:01 신고 | md/del

      정말 감사합니다
      스킨이 보면볼수록 예쁘네요~~