와니닷컴 블로그 에 오신것을 환영합니다.

WELCOME TO WAANEE BLOG

19,727
total
81
today
71
yesterday

블로그스킨

블로그스킨을 제작 배포 합니다.
와니닷컴에서 제작한 블로그스킨을 확인 해보세요.

Read More

포트폴리오

블로그, 웹작업을 한 포트폴리오 입니다.
와니닷컴에서 제작한 포트폴리오를 확인 해보세요.

Read More

방명록

와니닷컴에 소식을 전 할수 있는 방명록 입니다.
전하실 내용을 이곳에서 전달 해주세요.

Read More

BLOG CONTENTS

    티스토리 뷰

    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

    10 Comments

    • BlogIcon Constantine B2 2016.12.04 15:59 신고 Modify/Delete | Reply

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


      BlogIcon 와니닷컴 waanee 2016.12.04 16:58 신고 Modify/Delete

      .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 신고 Modify/Delete | Reply

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

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


    • beautys 2016.12.31 16:32 신고 Modify/Delete | Reply

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


      BlogIcon 와니닷컴 waanee 2016.12.31 16:39 신고 Modify/Delete

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

      beauty 2016.12.31 19:01 신고 Modify/Delete

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

    • BlogIcon 얀손 2017.02.15 12:01 신고 Modify/Delete | Reply

      와니님 스킨 정말 너무 감사하게 잘 쓰고 있습니다!
      <span class="fa fa-users icon"></span> 의 소스를 <span><img src=“./images/아이콘이미지파일명.확장자” alt=“”></span> 로 바꿨는데 이미지 대체가 안 되고 엑스박스가 뜨네요 ㅠㅠ 제가 뭘 잘못한걸까요?


      BlogIcon 와니닷컴 waanee 2017.02.15 12:07 신고 Modify/Delete

      일단 이미지 업로드가 되었는지 먼저 확인 해 보시고, <span>태그는 빼고 수정 해 보세요~
      그리고 브라우저 캐시도 삭제후 확인 해보세요 ^^

    • 2017.03.03 13:55 Modify/Delete | Reply

      비밀댓글입니다


      BlogIcon 와니닷컴 waanee 2017.03.03 13:58 신고 Modify/Delete

      관리자에서 화면설정 > 화면출력 에 기본화면 글 갯수 변경 하시면 됩니다.

    Leave a comment