티스토리 뷰


log by 1.0

이번에 티스토리로 블로그를 시작하면서 맘에꼭드는 스킨이 없어 직접 만들게 됐습니다.


티스토리 #1 스킨을 기본으로 필요 없는 것은 제거하고 필요한 것은 추가해서 (내 입맛에)알맞게 고쳤습니다.


가장 중요한 것은 읽기 편해야 한다는 것, 독자분들께서 메뉴판에서 길을 잃는 일이 없어야 한다는 것.


이틀간 열심히 달려서 만들었는데 아직 모든 환경에서의 테스트는 안됐습니다. 혹시나 원하는 화면처럼 안보이시는 분들은 제보 부탁드릴게요.


티스토리 블로그 스킨 - 로그 바이 - 는 아무나 맘대로 고쳐서 재배포를 해도 상관 없습니다~


logby(2017-03-18).zip

▲스킨 다운로드


무료지만! 너무 맘에들어서 작가를 칭찬해주고 싶으신 분들께선


http://storefarm.naver.com/catory/products/654580677


http://catory.kr


주변에 이 두 곳을 소개해 주세요


제가 직접 손으로 만들고 있는 고양이 가죽 목걸이와,


고양이에 대한 바른 정보를 널리 알리기 위해 만든 커뮤니티 사이트입니다.



스킨 고쳐쓰기

1.설치

블로그 관리에서 [스킨]을 들어가면 우측 상단에 스킨 등록 버튼이 있습니다. 위에서 받은 압축파일을 풀고 모든 파일을 등록하면 됩니다.(하위 폴더에 있는것도 다 올리시면 자동으로 폴더 지정이 되더군요-저도 티스토리 시작한지 이틀돼서..)


등록 후 스킨 - PC보관함 탭에서 업로드 된 스킨의 [적용] 버튼을 누르면 적용!


2.헤더 배경 바꾸기

블로그 관리에서 [HTML/CSS 편집]을 들어가면 우측 코딩창에서 파일 업로드가 가능한데, 여러분께서 원하시는 배경을 bg.jpg라는 이름으로 업로드 해서 저장해주시면 적용됩니다.

배경 사진은 위에 검은 필름지가 적용돼서 자동으로 어둡게 적용되며, 좌우폭이 크고 중앙에 어필할 요소가 있는 사진이면 예쁘게 들어갈 것입니다.

(적용후 다른 창에서 컨트롤F5로 완전새로고침해서 확인하세요!)


3.헤더 로고 바꾸기

[기존 블로그 이름을 로고자리에 출력하기]


[HTML/CSS 편집]에서 우측 CSS탭을 누르시면 CSS수정이 가능한데,


여기 보시는 50번 라인에서 display:block; 을 display:none;으로 고치면 그림로고가 안보이게되고

51번 라인의 display:none; 을 display:table-cell; 로 고치면 블로그 이름이 출력됩니다.

나중에 그림로고를 쓰실경우엔 다시 돌려놓으시면 됩니다.


(적용후 다른 창에서 컨트롤F5로 완전새로고침해서 확인하세요!)



[바탕이 투명한 그림로고 적용하기]


[HTML/CSS 편집]에서 우측 파일업로드에서 logo.png를 본인의 로고로 바꾸시면 적용되는데



이렇게 동일사이즈로 바탕은 투명하게 제거해서 logo.png로 저장하셔야 기존 로고를 정확히 대체할 수 있습니다.


다른 사이즈의 로고를 사용하실 땐 CSS코드를 수정하셔야 합니다.


[바탕이 투명한 PNG로고 만들기] - 누르면 이동


(적용후 다른 창에서 컨트롤F5로 완전새로고침해서 확인하세요!)


#.기타 문의

제가 엄청나게 게으르긴 하지만 한번씩 꼭 필요한 의견들을 선정해서 수정방법을 밑에 계속 추가하겠습니다.



저작자 표시
신고
댓글
  • 프로필사진 SONYLOVE 블로그가 밝고 심플하니 좋아 보여요.
    저도 반응형 스킨1으로 스킨 하나 만들어 보려고 시도했다가 포기했는데 이렇게 잘 만들기가 어렵더라고요.
    2017.02.23 20:48 신고
  • 프로필사진 donza 칭찬 감사합니다~~
    부족하지만 많은 분들께 도움이 되고 싶습니다 ㅎㅎ
    2017.02.24 00:46 신고
  • 프로필사진 행님댁 스킨이 정말 간결하고 깔끔하네요-
    글에 쓰신것처럼 글이 눈에 확 들어오는 스킨이네요~
    2017.02.24 10:21 신고
  • 프로필사진 donza 감사합니다~~
    즐거운 하루 되세요~!
    2017.02.24 13:44 신고
  • 프로필사진 별나라어린이 정말 깔끔하고 마음에 드네요~
    능력이 부럽습니다..@_@
    잘 쓸께요^^
    2017.02.24 17:31 신고
  • 프로필사진 donza 와우~ 적용하셨네요. 궁금하신점은 댓글 주세요~ 2017.02.24 18:37 신고
  • 프로필사진 영덕총각l 스킨 잘 쓰겠습니다 감사합니다:) 2017.02.25 20:47 신고
  • 프로필사진 donza 잘 쓰세요~~ 제가 더 감사합니다 2017.02.27 01:00 신고
  • 프로필사진 215midi 안녕하세요! 스킨 너무 잘 다운받아 쓰고있어요. 그런데 사이드 메뉴바에 방명록을 미노출 할 수 있는 방법이 있나요 ㅠㅠ? 2017.02.27 00:14 신고
  • 프로필사진 donza 블로그관리에서 CSS 수정 들어가시면
    77번 라인 근처에 이런 코드가 있을거예요
    .link_guestbook {
    width: 100%;
    padding-left: 20px;
    display: block;
    font-size: 17px;
    padding-bottom: 7px;
    color: #fff;
    font-weight: normal;
    display: none;
    }

    이것처럼 맨 끝에 display:none;을 추가해주시면 됩니다
    2017.02.27 01:00 신고
  • 프로필사진 215midi 헉! 너무 쉽게 해결됐네요 ㅠㅠ 정말 감사합니다 !! 2017.02.27 01:04 신고
  • 프로필사진 donza 캐토리도 소개해 주시다니 제가 더 감사합니다~! 궁금한것 있으시면 댓글 주세요~ 2017.02.27 02:23 신고
  • 프로필사진 퐁비 " 가장 중요한 것은 읽기 편해야 한다는 것, 독자분들께서 메뉴판에서 길을 잃는 일이 없어야 한다는 것. " 여기서 확 와 닿았습니다. 정말 이쁜 스킨이에요! 2017.02.27 02:40 신고
  • 프로필사진 donza 칭찬 감사합니다 2017.02.27 12:12 신고
  • 프로필사진 donza 카테고리타이틀이 모바일에서 안예쁘게 나온 것, 대댓글 폰트가 너무 작은점 등의 자잘한 문제 수정이 있었습니다.
    새로 업데이트된 파일로 올려놨으니 기존 이용하시던 분들께 업데이트를 권장해드려요~!(CSS만 바꼈으니 CSS만 교체하셔도 됩니다)
    2017.02.27 12:14 신고
  • 프로필사진 sil 무료배포라는게 안믿길정도로 퀄리티가 좋아요! 다만 현재 올라온 파일은 메뉴가 아예 열리지가 않네요. 두개이상의 블로그에 테스트했는데 상단의 三 메뉴를 눌러도 카테고리가 활성화되지 않습니다. 2017.03.07 21:30 신고
  • 프로필사진 donza 블로그를 제가 볼 수 있을까요?

    일단 제가 현재 사용중인 스킨을 다시 저장해서 올려놨습니다.
    2017.03.08 03:15 신고
  • 프로필사진 JINJIN43 정말 제가 이상적으로 생각하는 "깔끔" 그자체네요.. ^^ 군더더기없이, 글에 집중할수 있는 자체가 너무 좋네요~
    딱 한가지, 숨겨진 메뉴판를 열어 메뉴를 보기위해서는 최상단으로 이동하는수밖에 없는건지 궁금합니다.
    하단에 Top 버튼을 통해 바로 최상단으로 이동해서 열어보면 되긴 하지만 글을 읽다 문득 메뉴를 보고 싶을때는... 최상단으로
    이동하는수밖에 없어서... 어떤 방법이 없을까요? (너무 탐나는 스킨이다보니.. 욕심을 더 내어보게 되네요 ^^;;)
    2017.03.11 16:28 신고
  • 프로필사진 donza HTML/CSS 수정 들어가셔서
    CSS쪽 44번줄에
    .area_head에 붙어있는 속성들을 이렇게 바꿔주시면 고정메뉴로 활용하실 수 있습니다

    .area_head {
    position: fixed;
    width: 56px!important;
    height: 66px;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    top: 0;
    left: 50%;
    margin-left: -410px;
    }

    부연설명 드리자면 position:fixed로 메뉴바의 포지션을 고정하고
    width height값으로 메뉴바 크기를 정하고
    background로 흰바탕에서도 메뉴버튼이 보이게 어두운 바탕을 깔고
    margin-left값을 조정해서 바탕을 만든 만큼 컨텐츠폭에 맞게 위치를 조금 이동하는 원리입니다!!

    크롬 브라우저에서 보고 싶으신 개체를 우클릭 해서 검사 항목을 누르시면 개발자모드로 해당 개체의 속성들을 확인하고 수정하면 어떻게 되는지 시뮬레이션도 가능합니다. 어려우신 부분은 또 질문 주세요~
    2017.03.12 12:29 신고
  • 프로필사진 모두가 하.. 하늘에서 내려온 천사이신가요.... 감사히 잘 쓰겠습니다! 2017.03.14 16:04 신고
  • 프로필사진 donza 잘 써주셔서 제가 더 감사합니다!! 2017.03.18 16:32 신고
  • 프로필사진 모피우스 근사한 스킨입니다. 2017.03.18 15:17 신고
  • 프로필사진 donza 칭찬 감사합니다~ 2017.03.18 16:33 신고
  • 프로필사진 최제공 스킨 적용을했는데 메뉴가 안보이면 어떡하죠? 설명글 보면서 했는데 저는 메뉴버튼이 없어요 2017.03.22 00:55 신고
  • 프로필사진 donza 적용해주신 페이지를 주소로 보여주시면 문제파악이 가능하지만 메뉴바가 안뜬다의 단서만으로는 뭐가 문제인지 알 수가 없습니다 ㅠㅠ 2017.03.22 12:38 신고
  • 프로필사진 최제공 오 감사합니다! 추가했습니다 근데 그 버튼이 안눌리는건 왜그런거죠? 2017.03.22 19:18 신고
  • 프로필사진 donza 버튼이 작동을 안하는건 자바스크립트 오류가 있는것입니다.
    images폴더에 js파일이 제대로 업로드가 안됐거나 스킨 외에 불량한 스크립트 소스가 삽입되어서 코드가 꼬이면 그럴 수 있어요.
    2017.03.22 19:20 신고
  • 프로필사진 최제공 다시 삭제했다가 깔면 버튼 눌릴까요? 2017.03.22 19:30 신고
  • 프로필사진 donza 네 소스는 이상이 없으니까요 일단 모든파일이 제대로 업로드 됐는지 확인해보세요. 2017.03.22 19:43 신고
  • 프로필사진 최제공 크롬으로 눌렀을때 안되네요 익스플로러는 눌립니다 2017.03.22 20:09 신고
  • 프로필사진 donza 자바스크립트로 되어있는거라 브라우저를 타진 않을겁니다

    제대로 안된다면 컨트롤F5로 리소스까지 전부 새로고침 해서 다시 확인해보세요~
    2017.03.22 23:28 신고
  • 프로필사진 최제공 넵 감사합니다 2017.03.22 23:29 신고
댓글쓰기 폼
1 ... 8 9 10 11 12 13 14 15 16 ... 27