본문 바로가기

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

iNove 티스토리 스킨 Ver 2.2 본문 폭 조정하기

iNove 티스토리 스킨 Ver 2.2 본문 폭 조정하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

iNove 티스토리 스킨을 적용하고 제일먼저 본문 폭을 넓히는 작업을 했습니다.

 

기본으로 제공하는 전체적인 레이아웃이 깔끔해서 수정없이 사용해도 문제는 없지만 제 블로그는 가독성을 생각해서 폰트 사이즈가 기본보다 크게 나옵니다.

 

 

폰트 사이즈야 Html열어서 수정하면 간단하지만 본문 폭이 좁은 상태에서 폰트 크기가 커지면 조금 어수선하게 보이더군요.

 

그리고 무엇보다 제 블로그에 애드센스 광고가 달려있는데 본문폭 수정없이 사용하면 상단에 설치할수있는 광고 사이즈가 한정된다는것도 제겐 문제로 다가 왔습니다.

 

그래서 본문 폭을 애드센스 광고 720 X 90사이즈를 설치할수 있게 수정했습니다.

 

본문 폭을 넓히실려면 일단 얼마나 넓게 사용하실것인지 미리 염두해 두고 수정을 하세요.

 

iNove 티스토리 스킨 본문 폭 조정하기

 

먼저 사용하시는 스킨을 수정하기전에 꼭 백업을 먼저 하세요. 설정한번 잘못했다 망하는 수가 생깁니다.

 

관리자 메뉴를 들어가서 스킨 을 선택하시고 "스킨저장"을 눌러 현재 사용중인 스킨을 저장합니다.

이렇게 해두면 만약 수정중 오류로인한 문제가 생겨도 바로 복원을 하실수 있습니다.

 

iNove 티스토리 스킨 Ver 2.2 기본 본문 넓이는 605px입니다. 전 본문 넓이를 720짜리 애드센스 광고가 보이게 할려고 하니 120px를 넓히겠습니다.

 

관리자 -> HTML/CSS 편집을 선택하시고 Ctrl + F를 누르시면 브라우저 창에 "찾기"창이 생깁니다.

 

"찾기" 창에 /* main START */ 을 입력하면 style.css 란에 한개 나옵니다. width:605px;를 width:725px;로 수정합니다.

 

그리고 블로그 화면을 보시면 본문 폭이 늘어난것을 확인하실수 있습니다. 근데 오른쪽을 보시면 사이드바가 안보이지요. 본문폭이 늘어난 만큼 전체 레이아웃도 커져야 하는데 레이아웃 크기는 안커졌으니 사이드바가 자리를 못 잡고 하단으로 밀리는 현상이 생겼습니다.

 

전체 레이아웃 크기도 키워야 겠지요. 찾기에 #container { 를 입력하세요.

width:936px;를 width:1056px;으로 수정하시면 전체 레이아웃이 수정됩니다. 저장하시고 블로그를 접속하시거나 접속되 있다면 새로고침을 눌러보시면 본문과 사이드바가 정리된것을 확인하실수 있습니다.

 

 

본문과 사이드바는 제자리를 잡았지만 이미지를 사용한 부분은 어긋나 있는것을 보실수 있습니다. 일단 이부분은 무시하시고 소스 수정을 계속 진행 하겠습니다.

 

방명록 글쓰기 폼,댓글 쓰기 폼을 확인해 보세요.

 

위 이미지처럼 빈 공간이 생겼을 겁니다. 글쓰기 폼도 넓혀줘야 하겠지요.

 

찾기에 #comment {을 입력 하세요.  

width:601px;를 width:721px;로 수정하세요. 저장후 방명록 글쓰기 폼,댓글 쓰기 폼을 확인해 보시면 본문폭과 같은 사이즈로 보여줄것입니다.

 

이것으로 본문 폭을 넓히는 소스 수정은 끝 났습니다.

 

블로그 화면을 보시면 오른쪽 레이아웃이 이상하지요.. 이 부분은 이미지들이라 그렇습니다. 이미지들은 손수 그래픽 프로그램으로 수정을 하셔야 하는데 제가 디자인 전문이 아니라 이미지 수정 글은 못올리겠습니다. -.-

 

이미지 파일은 light.gif, footer.jpg, header.jpg을 수정하시면 됩니다.

 

 

그리고 검색이나 카테고리 전글을 볼때 위 이미지에 표시한 부분이 제대로 안보일것 입니다. box.gif파일을 수정해 주시면 됩니다.

 

이 글대로 본문을 120px 늘이셨다면 허접하지만 제가 수정한 이미지를 첨부하니 사용하시면 됩니다.

 

light.gif, footer.jpg, header.jpg, box.gif 수정한 이미지 파일:   img.zip.zip

 

만약 사이드 바 넓이도 수정하실려면 본문 넓이 수정시 같이 하세요. 사이드바 넓이 + 본문 넓이 = 해서 이미지 파일 수정을 또 해야 합니다.

  • 오오!! 정말 감사한 포스팅입니다!!
    저 같은 포토샵 까막눈을 위해 첨부파일까지... 구원해 주시네요~ ;)

  • 방금 적용해보았는데...이미지랑 닿는 귀퉁이 부분이 여전히 안맞는 현상이..
    왜그럴까요?? :(

  • 이 스킨 너무 깔끔하고 좋은 것이네요...^^

    • 깔끔하고 수정도 쉽고 아주 정이가는 스킨이랍니다.
      제가 스킨을 4번째 바꾼것인데 아주 맘에 드네요.

      한성민님이 사용하시는 스킨도 깔끔하고 좋아 보입니다.
      댓글 감사합니다.

    • 이 블로그 몇년전에 제가 사용한 스킨입니다...^^
      워드프레스 테마인데 고맙게도 티스토리로 변환해 놓으셨더라구요...

  • 와 스킨 정말 짱이에요. 잘사용하겠습니다.

    • 댓글 보구 순간 놀랬습니다.
      제가 스킨파일을 업로드 한줄알고...^^
      잘 사용하세요.

      미천한 실력으로 만든것이라 맘에 드실지..^^

  • 너무 마음에 들어요. 여기 블로그 최고. 즐겨찾기에 등록해놓았어요. 앞으로 자주 올게요. 저의 블로그에도 방문해주셔서 감사합니다~

    • 에구 칭찬 감사합니다.
      제가 경험한 부분들로 글을 쓰다보니 글 쓰는것에 한계도 있고 방문하시는 분도 꾸준하지 못한 부분도 있고 합니다.

      그래도 자주 들려 주세요.^^

  • 이게 문제였는데 정말좋은 내용감사합니다
    덕분에 수정했네요^^

  • 망망대로 2013.11.23 00:37 댓글주소 수정/삭제 댓글쓰기

    안녕하세요. 이 스킨을 지금 사용하려고 하는데..
    혹시 사이드바를 왼쪽으로 옮기는 방법을 알고 계시나요???
    제가 실력이 부족해서...ㅠ.ㅠ

    혹시 알고 계시면 방법좀 부탁드릴께요...
    따로 포스팅으로 해주셔도 감사합니다. (__)

    • 안녕하세요.
      어제밤 퇴근후 소스를 보니 간단하게 사이드바 이동이 힘들거 같네요.

      이 스킨을 제작,배포하는 곳에 문의 하시는게 빠를듯 합니다.
      도움 못드려 죄송합니다.

  • 잡다한 세상님 덕분에 블로그에 스킨을 잘 적용하였습니다.^^ 깔끔해서 너무 보기 좋아요!

  • 비밀댓글입니다

  • 안녕하세요. 이번에 스킨을 바꾸고 이것저것 수정하는데 많은 도움을 받았습니다. 감사합니다. 다름이 아니라 마지막에 box.gif 이미지 파일을 수정하는 부분에서 문제가 있어서요. 변경전 파일을 열어보니 흰색으로 파인부분이 있는데 이부분을 채우고, 이미지 크기를 본문 사이즈 늘린만큼 늘려주면 되는건가요?

    • 안녕하세요.
      답글이 늦었지요. 제가 요즘 기관지 염증으로 한달째 기침으로 고생을 하고 있습니다.

      오늘도 대학병원 다녀왔네요.

      말씀 하신 box.gif 이미지 수정이 정말 힘듭니다.
      본문폭 넓힌만큼 이미지를 키우면 짤리더군요.

      만약 box.gif 사이즈를 정확히 아신다면 포토샵에서 그 사이즈 크기의 창을 열어주세요.

      그리고 레이어를 만들어 배경색을 빨강이든 파랑이든 찐한색으로 칠하시고 원본의 box.gif 를 새로만든 창에 붙혀넣기 해주세요.

      말씀하신 파인부분이 둥근 테두리 입니다. 이 파인부분이 양쪽으로 정확하게 자리잡아야 합니다.

      설명이 애매하지만 몇번 해보시면 될듯 합니다.^^

      방문 감사합니다.

    • 안녕하세요? ㅎㅎ 알려주셔서 감사합니다. 해보니 무슨 말씀이신지 알겠는데 막상 해보니깐 제가 못해서 그런지 깔끔하게 안나오더라구요 ^^;; 그래서 그냥 직각으로 처리했습니다 ㅋㅋ

    • 답글이 늦었네요.
      블로그 디자인은 자기만족인듯 해요.

      사실 방문자는 자잘한 부분까지 신경안쓰는듯 ㅎ
      알찬 블로그 운영하세요.