GraySkin_V2.1 반응형 무료스킨 적용과 수정사항
티스토리 블로그를 다시 개장하면서 어떤 블로그 스킨을 사용할까 찾던 중 신난 제이유님을 통해 GraySkin_V2.1을 소개받았습니다.
이름 그대로 짙은 회색 바탕에 내용 부분은 흰색으로 처리되어 깔끔해요. 전반적으로 모노톤이라 가독성도 뛰어나고 함께 올린 이미지도 돋보이죠. 최신글 리스트가 앨범형식으로 메인 화면에 보입니다. 단, 이미지 없이 텍스트로만 된 글은 리스트에 나오지 않아요. Webstoryboy님이 만든 이 반응형 스킨은 감사하게도 무료입니다.
정말 멋진 스킨입니다. 무료로 이렇게 마음에 드는 것은 워드프레스 테마중에서도 아직 발견하지 못했어요. 하지만, 이 블로그에 해당하지 않는 점들이 몇 가지있더군요. 그렇게 수정한 것들을 공유합니다.
수정사항
1. 메인 페이지에서
1) 2단 목록을 3단으로 늘림2) 상단 메뉴에서 '후기 및 질문'을 삭제3) 슬라이더 삭제
2. 애드센스 관련
1) webstoryboy님 광고 지우기2) 내 광고 코드(자동광고) 넣기
3. 본문에서 - 하이퍼링크 색깔 변경
4. 푸터(footer)에서
1) 위젯 조정
가. 삭제 - 공지, 최근걸, 링크, 태그, 캘린더, 글보관함
나. 첨가 - 메인블로그 링크 위젯
2) 저작권 표시
수정방법
수정했던 것을 정리하는 의미에서 되짚어 봤습니다. 지금은 아는 것 같아도 시간이 지나고나면 깨끗이 잊게되죠. 특히 이렇게 컴퓨터나 인터넷에 관련된 내용들은 잘 모르기에 더 잘 잊게 되더군요. 다시 검색하러 돌아다니느니 지금 정리해두는 편이 공부도 되고 훨씬 좋습니다. 이 블로그에 남겨둔 블로그 관련 글이나 다른 블로그에 올리는 글들은 거의 다 그런 기록이에요. 뭘 알아서가 아니라 알아낸 것들을 적어 남기고 있어요. 앞에서 말한 수정사항과는 순서가 조금 다릅니다. 내용이 아니라 작업에 이뤄지는 장소에 따라 순서대로 적어봤어요. 왔다 갔다 하려니 잘 모르는 입장에서는 더 혼란스러웠거든요.
1. html 편집
1) 메타 수정
블로그의 정체성을 나타내는 것으로 문서의 맨 앞쪽에 있어요. 고치지 않으면 스킨을 내려받았던 블로그의 정의가 그대로 유지됩니다. 하늘색으로 표시된 것들이 보이죠? 이 블로그에 해당하는 내용으로 바꿨어요.
2) 광고 수정
블로그에 이 GraySkin을 설치하면 별달리 광고를 넣지 않았는데도 광고가 보여요. 이것은 이 스킨을 만드신 webstoryboy 님의 광고랍니다. 따라서 이 광고를 삭제하고 내 광고 코드를 넣어야 해요.
가. webstoryboy님의 광고 삭제'ad1'과 'ad2'을 찾아서 지웠습니다. <div>...</div>로 묶여있는 부분을 지워줬어요.
나. 내 광고 넣기제가 넣은 광고는 구글 애드센스의 자동광고입니다. 위치며 갯수, 크기... 하나 신경 쓸 것 없어요. 코드를 복사해 <head>와 </head>에 붙여 넣어주면 자동으로 알아서 넣어줍니다. 간단해서 좋아요. 제 경우엔 헤드에 아무리 넣어도 통 작동되지 않길래 찾아봤습니다. 코드구현안내서를 보니 그럴 때에는 <body>에 넣으라더군요. 시키는 대로 아래 사진처럼 붙여넣었더니 잘 작동하고 있습니다. 가끔 뚱단지 같이 본문이나 댓글 사이에 튀어나올 때도 있지만, 제법 자연스럽게 묻어납니다. 그다지 거슬리지는 않더군요.
3) 메뉴 : '후기 및 질문' 삭제
지금 이 블로그 메뉴 중에는 없지만, 원래 스킨에는 '후기 및 질문'이라는 메뉴가 보입니다. 아래 사진에서처럼 category list 아래에 연보라색으로 표시된 부분을 찾아 지웠습니다. 이것으로 끝은 아니고 CSS에서 잊지 말고 해야할 것이 있습니다. 아래쪽 '2. CSS편집' 편에 나옵니다.
4) 슬라이더 삭제
원래 스킨은 지금 제 블로그와는 달리 맨 위에 회색 바탕에 흰색 글씨 슬라이더가 있었어요. 어떤 카테고리나 새 글, 혹은 인기글이 흐르는 것이 아니라 지정된 문구가 고정되어 있어 이 블로그에는 맞지 않아 지웠습니다. 아래 사진처럼 'header-nav'라고 되어있는 부분을 찾아 지웠어요.
5) SNS 글보내기 단추 삭제
<div class='SNS-go"> ...</div> 부분을 찾아 지웠습니다.
6) 저작권 표시
블로그 맨 아래에 copyright 표시가 있습니다. html 문서 아래쪽을 보면 687번째쯤에 있어요. 본인 이름으로 바꿔주면 됩니다.
2. CSS 편집
1) 본문 하이퍼링크 글씨 색깔 변경
14번째 줄에 보면 a {color:#333;text-decoration:none} 라는 곳이 있어요. '333'을 '336699'로 고쳤습니다.
마음에 드는 색깔을 알아내는 방법은 '다른 웹 페이지에서 사용한 색깔을 알아내자'라는 글을 참고해 보세요. 맥 OS가 아닌 윈도우즈를 쓰시는 분들은 '미리보기'대신 '그림판'을 사용하시면 됩니다.
2) 메인 페이지 글 목록을 2단에서 3단으로 변경
원래 스킨에서는 카테고리 목록만 3단이고 메인은 2단으로 되어있습니다. 아래 사진에 하늘색으로 표시된 '2'를 '3'으로 바꾸기만 하면 됩니다.
3) 메뉴 : '후기 및 질문' 삭제
앞에 html 편집에서도 '후기 및 질문' 메뉴 삭제가 있었습니다. 여기서는 그 뒤에 이어서 하는 조치인데요, 간단합니다. 48번째 줄(수정에 따라 위치가 조금씩 달라질 수도 있어요)를 보면
.header-nav .nav .tt_category {margin-right: 150px;} 이라고 되어있는 부분이 있습니다. 이 '150'을 '40'으로 바꿔줬어요.
3. 블로그 관리
이제 떨리는 순간은 지나갔습니다. 이런 쪽으로는 잘 모르니 html이나 CSS 문서 만질 때면 늘 긴장됩니다. 어제도 제목 색깔과 본문 폰트 크기 바꾸려고 CSS를 만지작거렸는데, 뭘 잘못 건드렸는지 꼬여버렸어요. 하는 수 없이 스킨 삭제하고 다시 설치했답니다.
1) 콘텐츠>카테고리 관리>카테고리 설정
블로그 맨 위에 보면 메뉴가 보입니다. 사실 이것은 메뉴가 아니라 카테고리 리스트가 나오는 거에요. 따라서 메뉴 옆에 해당 카테고리 글 수가 괄호 안에 표시되고, 새로운 글이 올라오면 그것도 표시됩니다. 저는 이것이 보기 싫었어요. 진짜 메뉴처럼 보이고 싶었던거죠. 이것을 고치려면 블로그 관리 페이지로 가면 됩니다. 블로그 관리로 가면 왼쪽 사이드 바에 '카테고리 설정'메뉴가 있습니다. 여기서 '카테고리별 글 수'를 '표시하지 않습니다'로, '카테고리별 새 글 발행 여부' 역시 '표시하지 않습니다'로 했어요.
2) 사이드바
블로그 아래쪽을 보면 푸터(footer)처럼 보이는 것들이 있습니다. 실은 푸터가 아니라 사이드바 위젯입니다. 따라서 이것을 내 블로그에 알맞게 고치려면 블로그 관리>꾸미기>사이드바 로 가야 합니다. 불필요한 위젯은 다 빼고 필요한 것만 남기거나 새로 넣으면 됩니다. 저는 공지, 최근글, 태그 클라우드는 빼고 최근 댓글과 방문자 수, 메인 블로그로 연결되는 이미지 위젯만 넣었습니다.
이렇게 해서 일단 블로그 스킨을 가능한 알맞게 꾸며봤습니다. 하지만 더 조정하고 싶은 것들이 있어 질문 남깁니다. 혹시 가능하신 분들께선 알려주시면 감사하겠습니다.
1. 본문 글씨 크기를 지금처럼 14pt로 하고 싶어요. CSS에 보면 14로 되어있는 것 같은데, 편집기에서 글을 쓰려고 보면 12pt로 되어있어요. 2. 글 제목(타이틀)과 본문의 머리말(h1, h2, h3...) 색깔을 녹색(#336699)로 지정하고 싶어요. 3. 맨 위 메뉴를 고정시켜서 항상 보이게 하고 싶습니다.
