본문 바로가기

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

마크쿼리 - Spider’s Web 반응형 스킨 카테고리, 메인 이미지 수정하기

마크쿼리 - Spider’s Web 반응형 스킨 카테고리, 메인 이미지 수정하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

마크쿼리 스킨 설치 글을 올려 드렸지요.

 

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

 

이번에는 메인 타이틀 이미지 수정, 카테고리 수정을 하는 방법을 알아 보겠습니다. 블로그를 새로 개설하신다면 천천히 해도 되는 작업이지만 블로그를 운영중에 Spider’s Web 반응형 스킨으로 교체를 원하신다면 일단 급한게 카테고리 수정, 메인 타이틀 이미지 수정이라고 생각합니다.

 

스킨을 수정 전 꼭 백업을 해주셔야 합니다.

 

 

카테고리 수정하기

 

카테고리부터 수정해 보겠습니다.

 

상단에 보이는 부분이 카테고리 입니다. 수정을 위해 티스토리 관리 -> HTML/CSS 편집을 선택 하세요.

 

'Ctrl + F'키를 눌러 찾기 창을 열어 'Category'를 입력하세요.

 

위 부분이 검색되는데 이미지 참고 하시면 이해가 빠를듯 합니다. Category를 선택하면 나오는 서브 메뉴부분을 먼저 수정해 보겠습니다.

 

<li role="presentation"><a role="menuitem" href="/category/book">Book</a></li>

 

book은 링크 주소 입니다.

Book은 카테고리 목록에 보여지는 제목 부분입니다. 카테고리 주소부분을 알아내는 방법을 소개 할께요.

 

카테고리 제목에 마우스커서를 두고 오른쪽 버튼 -> 속성(윈8.1 기준)을 선택하면 창이 뜨는데 표시한 부분이 카테고리 주소입니다. 빨간 선 부분을 복사하셔서 book 자리에 넣어 주시면 됩니다.

 

Book은 카테고리 이름이니 그대로 카테고리에 보이는 이름을 넣어주시면 되는데 전 '카테고리1'로 되어 있으니 그대로 넣겠습니다.

 

   <li role="presentation"><a role="menuitem" href="/category/카테고리/카테고리1">카테고리1</a></li>

 

이렇게 변경하시면 됩니다. 이러한 방법으로 카테고리를 모두 변경해 주시면 됩니다. 옆에 테그, 방명록등 티스토리 자체에서 제공하는 메뉴도 같은 방법을 이용하시면 수정이 가능합니다.

 

메인 타이틀 이미지 수정하기

 

마크쿼리 - Spider’s Web 반응형 스킨을 설치하고 적용된 화면을 보면 위 타이틀 이미지가 나옵니다.

 

자신이 운영하는 블로그에 맞지않는 이미지가 되겠습니다. 이 부분을 수정해 보겠습니다. 위 이미지는 'cover.jpg'파일로 지정되 있고 사이즈는 가로 1170, 세로 400픽셀로 만들어져 있습니다.

 

스킨의 폭 수정을 안한상태이니 가로 1170은 그대로 사용하고 세로 사이즈는 원하시는 크기만큼 지정하셔서 cover.jpg를 만들어 주세요.

 

전 글의 이해를 돕기위해 세로 69픽셀로 만들었습니다. 만든 커버이미지를 올리주시고 HTML편집을 해 보겠습니다.

 

만약 세로 400픽셀을 그대로 사용하면서 이미지만 새로 만들었다면 소스 수정없이 바로 이미지 파일(cover.jpg)만 올려 주시면 됩니다.

 

티스토리 관리 - HTML 편집을 선택 하시고 Ctrl + F를 눌러 찾기 창을 열어 주세요. 찾기 창에 'cover.jpg'을 입력하면 하단 'style.css'란에 딱 한군데 나오는데 그곳에서 타이틀 이미지 보여주는 부분을 수정할수 있습니다.

 

padding-top: 34.18%;  란 부분이 타이틀 이미지 세로길이를 지정하는 부분인데 이 부분을 %로 지정되 있어 사용자가 수정한 이미지 세로를 지정하기 힘듭니다,

 

그래서 전 그냥 픽셀로 지정해 봤습니다. 제가 만든 타이틀 이미지 세로가 69이니 69px로 변경해서 저장하고 확인을 해 보겠습니다.

소스 수정은 padding-top: 69px;로 해 주면 됩니다.

 

마크쿼리님께서 ' padding-top: 34.18%; '으로 이미지 사이즈 값을 준 이유는 반응형 스킨에 맞게 이미지도 반응형 대응으로 % 값을 사용하셨다고 합니다.

 

이미지 세로 사이즈 %값을 구하는 공식은 세로 사이즈에 가로 사이즈를 나누면 됩니다.

 

마크쿼리 - Spider’s Web 반응형 스킨에 기본으로 적용된 메인 세로 400 / 가로1170 이미지값을 나눠보면 0.34188034188 이 나오는데 소수점을 푼 단위로 내리면 34.18이 되고 이 값이 퍼센트로 사용됩니다.

 

제가 이 글에서 만든 메인 이미지는 가로1170, 세로 69이니 이 값으로 %값을 구해 보면 1170 / 69=0.05897435897 가 나오고 소수점을 풀면 05.89%로 지정하면 되겠네요.

 

타이틀 이미지가 수정되것을 확인할수 있습니다.

 

타이틀 이미지 사용 안하기

 

혹시 타이틀 이미지를 아예 사용안하실려면 소스 삭제를 하시면 되는데 삭제보다는 나중에 사용할수도 있으니 소스를 주석 처리 로 읽어들이지 못하게 해두고 나중에 사용할때 주석을 지우면 다시 사용이 가능하게 하는게 좋습니다.

 

'style.css'란에

/* site cover
-------------------------------------------------- */
.cover {
  padding-top: 69px; 
  *height:auto;
  background-image: url(./images/cover.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.cover hgroup h1,
.cover hgroup h2 {
  margin: 0;
  padding:0;
  font-size:0;
  text-indent:-9999px;
}
위 소스를  아래 처럼 해 주세요.

 

/* site cover 주석 시작

.cover {
  padding-top: 69px; 
  *height:auto;
  background-image: url(./images/cover.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
.cover hgroup h1,
.cover hgroup h2 {
  margin: 0;
  padding:0;
  font-size:0;
  text-indent:-9999px;
}
주석 끝  */

읽어들이지 못하게 할 소스 끝 부분에 */ 를 넣어 주면 됩니다.  그리고 skin.html 란에 소스도 수정을 해주면 되는데 찾기 창에 ' <figure class="cover"> '을 넣고 찾으시면 아래 소스가 나옵니다.

 

<section class="container skeleton-header">
<div class="row col-nospace">
<div class="col-sm-12">
 <figure class="cover">
  <hgroup>
  <h1><a title="home" href="[##_blog_link_##]">[##_title_##]</a></h1>
  <h2>[##_desc_##]</h2>
  </hgroup>
 </figure>
</div>
</div>

 

위 소스를 아래 처럼 주석 처리 해 주시면 됩니다.

 

<!--  주석 시작
<section class="container skeleton-header">
<div class="row col-nospace">
<div class="col-sm-12">
 <figure class="cover">
  <hgroup>
  <h1><a title="home" href="[##_blog_link_##]">[##_title_##]</a></h1>
  <h2>[##_desc_##]</h2>
  </hgroup>
 </figure>
</div>
</div>

주석 끝 /-->

 

이렇게 해 주시고 저장을 눌러 확인해 보시면 타이틀 이미지가 안보이는것을 확인하실수 있습니다.

 

나중에 타이틀 이미지를 사용하실때 주석만 지워 주시면 바로 사용이 가능하니 소스를 삭제 하는것보다 주석 처리를 해주시는게 좋습니다.

 

 

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

 

글과 이 글을 참고하셔서 마크쿼리 - Spider’s Web 반응형 스킨을 설치, 사용하신다면 기본적인 부분에서 불편없이 사용 가능하겠습니다.

 

나중에 시간이 난다면 디자인을 수정하는 부분을 다뤄볼까 합니다.

Comments

  • 감사합니다. 도움많이됬네요^^

  • 포스팅 도움 잘 받았습니다. 감사합니다 :)

  • 이리저리 알아보디가 여기서 도움을 받네요 ㅠㅠ. 디자인수정글도 기대 됩니다.

  • 네 ㅎㅎ

  • 안녕하세요. 마크쿼리 스킨 적용하려고 찾아보다가 도움 많이 받았습니다.
    타이틀 이미지를 사용하지 않으려고 적어두신 본문의 내용 대로
    css와 html에 주석 처리로 적용을 했는데 그렇게 하고 나니
    이미지만 없어진 게 아니라 타이틀 이미지 바로 아래의 폭도 좁아졌습니다.

    제 블로그에 와보시면 타이틀 이미지 아랫단 폭이 좁아지면서
    그 안에 있던 페북/트윗/구글 아이콘과 검색 등이 위로 밀린 걸 보실 수 있는데요,
    다른 분 블로그(http://samyeon.tistory.com/)에 들어가보니
    똑같이 상단 이미지를 없애고 아래 폭도 그대로 있더라구요.

    한번 살펴봐주시고 어떻게 해결을 해야 할지 조언 부탁드립니다.

    • 안녕하세요.
      방금 제 테스트 블로그에 제가 작성한 글대로 주석처리해서 확인을 해 보니 정상적으로 잘 나옵니다.

      기존 소스 수정이나 타이틀 숨기기 소스 적용시 뭔가 실수를 하신듯 합니다.

      테스트 블로그 만드셔서 수정안한 스킨을 올려서 제 글대로 한번 해 보세요.

      전 잘 적용됩니다.^^

      제 테스트 블로그 입니다.
      http://testblog7.tistory.com/

    • 아, 테스트까지 해주시고 정말 감사합니다.
      제가 하다가 뭔가 실수를 한 모양이에요.
      지금 해보니 제대로 나오네요. 죄송합니다^ ^;;

      그리고 질문 몇 가지만 더 드릴게요.

      1. 오른쪽 카테고리에 상위 밑 하위 카테고리 글씨가 너무 작은데
      혹시 이 글씨를 좀 크게 할 수 있는 방법은 없을까요?

      2. 반응형 애드센스를 달았을 때 모바일에서 한 화면을 꽉 채우는 것 때문에 코드 수정을 해주는 것 등, 조금 복잡하고 적용시키기가 어려워서 반응형이 아닌 예전 스킨에서처럼 그냥 일반형으로 삽입을 했습니다. 반응형 웹에 일반형 애드센스를 달아도 별 관계는 없는 건지요? 그리고 모바일로 보니 변화가 있는 게 아니라 제가 예전에 설정해뒀던 작은 광고만 문제없이 나오고 있더라구요. 그럼 이상없이 잘 되고 있는 거 맞는 건가요?

      그저 깔끔한 스킨이 마음에 들어서 바꾼 것 뿐인데 너무 초보이다 보니
      기초적인 질문만 드리는 것 같네요. 답변 부탁드립니다^^

    • 1.
      style.css편집창에서
      .widget-inner li li li a {font-size:10px;}
      를 검색해서 아래와 같이 수정 하시면 됩니다.
      .widget-inner li li li a:before {font-size:6px;}

      2.
      반응형 스킨을 사용하시면서 일반 애드센스코드를 적용하시면 모바일 접속시 사이즈 변경이 안되 그대로 애드센스가 보입니다.

      제가 제 스마트폰을 접속을 해보니 애드센스가 모드 화면을 벗어나네요.

      물론 가로 모드로 보면 다르게 보이겠지만 세로 모드도 있으니 ....

      모바일 스킨에는 반응형이 맞습니다.

      복잡하셔도 애드센스는 반응형을 사용하시는게 좋을듯 합니다.

      정 힘드시면 당분간 모바일 스킨사용을 하셔서 모바일 접속시 반응형 스킨 적용이 안되게 하시는것도 방법입니다.

      그리고 반응형 애드센스를 이해하셨다면 그때 모바일 스킨사용을 해제하시는게 좋을듯 합니다.^^

    • 블로그 접속을 해서 카테고리를 누르니 게시물이 여러개가 펼쳐 보이게 설정되 있네요.

      애드센스를 달았으니 이렇게 하시면 정책 위반으로 광고 중단될수 있습니다.

      애드센스 정책에 보면 " 화면에 보이는 광고3개 "란 정책이 있습니다.
      지금처럼 게시물 한개에 애드센스 3개를 넣으셨고 펼쳐 보이는 게시물은 5개 이니 애드센가 15개가 출력되는것입니다.

      물론 3개,4개 이상은 화면에 보이지않고 빈 공간으로 보이지만 애드센스측은 이 부분도 정책위반으로 간주하니 참고 하세요.^^

    • 가온누리 님 덕분에 어렵지 않게 폰트 사이즈 바꿨네요^^

      모바일이랑 반응형 애드센스는ㅜㅜ 좀 더 공부를 해보고 적용을 시키는 쪽으로 해봐야겠어요. 한번에 게시물 5개 보이도록 해놓은 게 문제가 된다는 건 아예 생각도 못 하고 있었어요. 부랴부랴 변경했습니다.

      상세한 답변 정말 감사드려요. 많은 도움이 되었어요^^

    • 조금천천히 가는것이 도움이될때가 있답니다.^^
      주말 잘 보내세요.

  • 마크쿼리님에 반응형 스킨 설치법 대로 해봤었는데요.
    타이틀 적용법 부터는.. html 이 너무 많이 바껴서 주석 처리를 어디에 해야 될지 모르겠습니다.
    padding-top 치면 html에는 없고 css에서만 11개 정도 있네요.
    많이 바뀌어 진거 같습니다 ㅠ.ㅠ

    • 안녕하세요.
      주석처리 하실려면 html은 <figure class="cover"> 검색하시구, css란은 .cover {를 검색하시면 됩니다.

      본문 하단 글을 참고 하시면 됩니다.^^

    • <figure class="cover"> 도 cover 도 html에 검색하면 존재하지가 않네요. 마크쿼리님이 업그레이드 하면서 이름 같은걸 바꾸셨는지.. ㅠㅠ

    • 어?
      업데이트가 있었는지 확인을 못했답니다.

      제가 작성할때 스킨 버전이 3.0.5 버전이였습니다.

      마안키님 께서 설치하신 스킨버전 확인해 보세요.^^

    • 엇 ! 확인해보니 버전이 1.2.2 라고 되어있네요.. 으어 ㅠㅠ 버전이 낮은걸 다운 받은건 가요?

    • 3.0.5 버전으로 다시 깔면 잡다한 세상 님에 포스팅 대로 따라 갈수 있었음 합니다. html 매우 어렵네요. ㅠ.ㅠ

    • 이야~ 3.0.5 로 변경하니 전에 암걸렸던 부분들이 다 해결이 되네요 !!
      이야~ 잡다한 세상님에 간결하고 상세한 포스팅 보고 놀라움을 금치 못하고 있네요.

    • 버전 차이로 발생한 문제였군요.
      다행입니다.

      마크쿼리 스킨 정말 좋은듯 하네요.
      즐거운 주말 보내세요.^^

  • 비밀댓글입니다

  • 가온누리님 제가 타이틀사이즈를 1170*800으로 잡아서 padding-top: 68.37%로 하고 cover이미지도 넣었는데 안바뀌네요 ..이건 어떻게 해야될까요?ㅠㅠ

    • 800사이즈라면 왠만한 화면크기인데 그정도 크기를 스킨에서 처리못하는지 그건 잘 모르겠네요.

      기본 제공되는 사이즈를 다른이미지로 올려서 적용해 보시고 차츰 늘려보세요.

      메인타이틀 이미지를 세로800으로 사용한다는 생각을 못해서 질문글이 조금은 새롭네요.^^

    • 결국 포기하고 다른스킨을 썼네요 ㅎㅎ 답변감사합니다 ~ 반응형은 너무 어렵네요 ㅠㅠ

    • 그러셨군요.
      반응형이 어렵긴 하지만 장점도 많습니다.
      또 스킨에 따라 조금씩 다르니 ...

      알찬 블로그 운영하세요

  • 안녕하세요.
    지난번 질문에 상세하게 답변해주신 덕분에
    반응형 광고도 모두 적용시켜두었어요.
    질문 한가지 더 드리려고 다시 방문했어요^^

    제가 가로 800픽셀의 사진을 올릴 땐 깨지지 않더니
    사진을 900으로 늘렸더니 이미지가 약간 뭉개지는 현상이 발생하네요.
    그래서 본문 사이즈를 좀 늘리고 싶은데 어디를 어떻게 수정하는 게 좋을까요?

    답변 부탁드릴게요. 감사합니다^^

    • 안녕하세요.
      본문폭이 800인데 이미지 사이즈는 900이라면 본문폭에 맞게 자동으로 리사이즈 해서 보여주기때문에 이미지가 깨져 보입니다.

      이미지를 클릭하면 새로운 창으로 원본 이미지를 보여 주지요.

      본문폭 조절은
      http://markquery.com/community/relevant_material/1312

      링크를 참고해 보세요.
      좀더 쉬운 방법이 있었던거 같은데 기억이 안나서 검색으로 찾았네요.^^

  • 안녕하세요,
    마크쿼리 3.0.5를 사용하고자 검색을 통해 이 블로그로 와서 여러 글들을 일고 도움받고 있습니다.
    그런데 제 블로그가 이상한지 모바일 화면에서 맨위에 제 블로그 이름이 보이지않고 그냥 흰빈칸으로 보입니다.
    이를 해결하고자 일주일째 알아보고 있지만 검색으로는 한계가 있네요.
    혹시 가능하시면 답변 부탁드립니다.
    그럼, 감기 조심하세요~