본문 바로가기

블로그 관련 정보/블로그 꾸미기

마크쿼리 - Spider’s Web 반응형 스킨 설치 알아보기

마크쿼리 - Spider’s Web 반응형 스킨 설치 알아보기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

마크쿼리님께서 만드신 반응형 스킨 tistory-Spider’s Web 설치를 해보겠습니다.

 

반응형 스킨을 이것저것 설치해서 잠깐동안이라도 이 블로그에서 사용해 봤지만 나름 다 좋았습니다.

 

이번에는 Spider’s Web 반응형 스킨을 설치, 사용하다보니( 다른 블로그) 그 매력에 빠지게 되네요. 디자인이 깔끔해서 추가 수정을 해도 잘 받아들인다는 느낌이 강하네요.

 

마크쿼리님 Spider’s Web 스킨 많이 사용하시니 스킨에 관한 설명은 굳이 안하겠습니다.

 

Spider’s Web 스킨을 설치하기 위해 일단 스킨파일을 준비해야 겠지요. 현재 버전은 v3.0.5 입니다.

 

 

위 링크로 이동하시면 텍스트 페이지가 나오는데 스크롤을 아래로 내려보시면 아래 이미지처럼 다운로드 링크가 있습니다.

 

링크를 눌러 spidersweb스킨을 다운로드 하세요.

 

다운로드한 파일 압축을 풀어보면 위 이미지처럼 다양한 폴더 + 파일이 있는데 박스 표시한 파일 +images 폴더안에 파일까지 업로드 해 주시면 됩니다.

 

티스토리 관리 -> 스킨 -> 스킨등록을 선택하시면 위 화면이 나오는데 저장할 스킨 이름을 적어주시고 하단 '추가'를 눌러 주세요.

 

스킨파일을 압축을 푼 폴더로 이동하셔서 위 박스친 모든 파일을 선택 하시고 '열기'를 선택 하세요.

 

그리고 다시 스킨 등록화면에서 '열기'를 눌러서 'images'폴더안에 모든 파일을 올려 주시면 됩니다.

 

파일이 많아 마우스드래그가 불편 하시면 'images폴더안에서 Ctrl+a'버튼을 누르시면 모든 파일이 선택됩니다. 그리고 '열기'을 눌러주시면 됩니다.

 

저장을 눌러 주시면 스킨이 등록됩니다. 스킨 보관함으로 가셔서 방금 올린 스킨을 적용해 주세요.

 

스킨이 정상적으로 설치, 적용된 화면 입니다.

 

마크쿼리 - Spider’s Web  반응형 스킨은 설치 후 바로 몇가지를 수정하셔야 되는 부분이 있습니다. 먼저 수정할 부분은 사이드 바 입니다.

 

설치, 적용후 사이드바를 보시면 위 이미지처럼 신 목록이 두개가 나오는데 이미지를 포함해서 나오는 최신 글은 마크쿼리님 블로그 글을 가져오는것이고 아래 텍스트 제목으로만 나오는 부분이 실제 설치된 블로그 글 목록입니다.

 

이미지를 포함한 최신 글 목록, 텍스트만 나오는 최신 글 목록을 선택 해서 사용 가능한데 이 부분을 알아 보겠습니다.

 

최신 글 목록중 텍스트 제목만 보여주는 것을 사용하고자 하신다면 따로 설정없이 관리 -> 사이드바 메뉴에서 설정만 하시면 됩니다.

그러나 이미지 +제목을 보여주는 최신 글 목록을 사용하고 한다면 소스 수정을 하셔야 하는데 이 부분을 알아 보겠습니다.

 

1. Recent article
2. Recent article(default) 중 2번이 텍스트 제목만 보여주는 최신 글 입니다.

 

이미지 +제목을 보여주는 최신 글 목록을 사용하고자 하니 2번을  - 표시를 눌러 빼주시고 저장을 눌러 주세요. 그리고 HTML/CSS 편집을 눌러 주세요.

 

Ctrl + F를 눌러 찾기 창을 열어 주세요.

 

찾기 창에 'http://markquery.com/feed'을 입력하면 위 이미지처럼 한군데 나오는데 'http://markquery.com/feed'주소를 ' http://블로그주소/rss/xml '로 변경하고 하단 '저장'을 눌러 주시면 됩니다.

 

블로그로 돌아와 새로고침을 해주시면 이미지를 포함한 최신 글 목록이 자신의 블로그 글을 불러오는것을 확인하실수 있습니다.

 

rss 주소를 이용해서 최신 글을 불러오는것이라 가끔은 바로 등록한 글을 못 불러올때 있지만 이 부분은 무시하시고 놔두시면 잘 불러 옵니다.

 

어느정도 시간이 지나야 불러오는 경우가 있는것 같은데 확실하지는 않습니다.

 

마크쿼리 - Spider’s Web  반응형 스킨 설치을 하고 최신 글 부분만 수정을 했습니다.

 

마크쿼리 - Spider’s Web  반응형 스킨은 최신 글 부분, 상단바 카테고리 수정, 타이틀 커버 수정 정도만 해 주시면 사용에 문제 없답니다.

 

HTML수정에 자신이 있으시다면 좀더 다양하게 수정해서 사용이 가능하지만 Spider’s Web스킨이 깔끔하고 간결해서 그냥 사용해도 정말 좋은듯 합니다.

 

다음 글에서는 카테고리 수정부분을 알아 보겠습니다.

  • 마안키 2014.11.05 15:30 댓글주소 수정/삭제 댓글쓰기

    마크쿼리님에 반응형 스킨도 모바일에 광고나 글이 더 잘보이게 되는건가요?

    • 안녕하세요.
      티스토리 일반스킨을 적용시 PC에 최적화 됩니다.
      모바일용 스킨을 따로 사용하셔야 하고 모바일용 스킨 미 사용시 PC용이 보이는데 글,광고등 모든 부분이 모바일 화면에서 PC화면처럼 보이니 작게 보이겠지요.

      반응형스킨을 사용하시면 접속하는 기기 해상도에 맞게 블로그를 적당히 줄여주니 보기가 한결 쉽겠지요.^^

  • 마안키 2014.11.05 15:59 댓글주소 수정/삭제 댓글쓰기

    반응형 스킨 무료배포 해주시는 분들은 알겠는데 설치 방법이 매우 복잡하여 서핑을 하다
    님에 블로그를 들어오게 되었는데요. 깔끔하게 알려주셔서 좋네요.
    근데 티에디션 사용하면 로딩속도가 느려져 리드이지님에 페스트 봇은 사용 안한다던데
    마크쿼리님에 반응형 스킨은 티에디션 적용 안해도 깔끔하게 보이는 걸까요.
    제가 아직 글을 한개도 안쓴 상태가 문득 궁금해집니다.

  • 마지막으로 저 맨위 상단바에 색깔 바꾸는 방법은 없을까요?

    • 관리화면 HTML/CSS 편집 ->style.css 란에 보시면
      /* site navigation 이 있습니다. 이 부분 소스를 수정해 보세요.

      저두 해보지 않아서 어디를 어찌, 어디다 추가하는지 정확히 말씀을 못드리겠네요.

      명령어는 background:#색상코드 입니다.
      수정할 부분도 있고 추가해야할 부분도 있는데 몇번 해보시면 답이 나올듯 합니다.^^

    • 캬~ 감사합니다. 중요한 정보는 다있네요.

    • 가온누리님 됩니다. 님에 말대로 찾아보니 있네요 감사해요 ㅠㅠ
      소소하게나마 광고좀 보고갑니다.

    • 잘 수정하셨는지요..?
      블로그 방문했더니 아무 변화가 없으셔서 ^^

      댓글 감사합니다.