티스토리 뷰


log by 1.0

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


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


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


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


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


Logby(2019-04-09).zip

▲스킨 다운로드


# 2019년 1월 23일 변경 내용 (메뉴 버튼 클릭 영역을 키워서 메뉴가 쉽게 눌리게 변경하였으며, https 관련 스크립트 로드 차단 내용 수정하였습니다.)


# 2019년 4월 9일 변경 내용 (티스토리 에디터 바뀐 후로 모바일에서 사진이 작게 출력되는 현상 수정)




스킨 고쳐쓰기

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로 완전새로고침해서 확인하세요!)


#.기타 문의

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





댓글
  • 이전 댓글 더보기
  • 프로필사진 오늘의 엠마 확인해주셔서 감사합니다. ^^
    어떻게 설명드려야 할지 몰라서 그냥 제 블로그에 이미지를 첨부한 글을 올렸습니다.
    그냥 폰에서 어떻게 스크롤이 보이는지 화면 캡쳐한 것 뿐이구요, 사용 기종은 아이폰8입니다.
    아이폰 6s에서도 딱 저정도의 스크롤만 생겨요.
    http://todayz-emma.tistory.com/entry/%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%99%94%EB%A9%B4-%EC%BA%A1%EC%B2%98
    2018.02.12 14:30 신고
  • 프로필사진 donza 제가 지금 아이폰이 있는 상태는 아니고 아이폰환경으로 시뮬레이션 하는 모드로 봤을땐 문제가 없거든요 이거 내일 회사가서 동료 아이폰으로 한 번 보겠습니다. 브라우저 자체적으로 줌인이 조금 되어있다거나 그런건 아닐까 그런 생각도 드는데요
    싸파리 말고 크롬이나 네이버앱 같은 다른 브라우저로도 한번 해보세요. 저도 내일 아이폰으로 한 번 보겠습니다.
    2018.02.12 22:58 신고
  • 프로필사진 donza 깜빡하고 있었네요
    설 연휴 전날 퇴근직전에 사무실 동료 아이폰으로 확인해봤는데 말씀하신 스크롤바가 생기는 현상이 있습니다. 아이폰 자체기능인지 사파리 기능인지 모르겠지만 좌우로 쫄깃쫄깃 넘길랑 말랑 하면 스크롤바가 생기더군요. 시간이 없어서 다른 브라우저랑 스킨으로는 못봤는데요 이건 조만간 제가 아예 아이폰을 섭외해서 좀 봐야겠습니다.
    2018.02.19 09:26 신고
  • 프로필사진 오늘의 엠마 쫄깃쫄깃ㅋㅋㅋㅋㅋ 신경써주셔서 감사합니다^^ 2018.02.19 15:09 신고
  • 프로필사진 와니. 맘에 쏘~옥! 드는 스킨을 보고 그냥 지나칠 수가 없던 차였는데, 스킨 나눔까지~ 너무너무 감사합니다.
    수년간 사용하던 묵은 스킨을 드디어 벗어던지니 속이다 후련했답니다. ㅎㅎ
    2018.02.20 18:10 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~ 2018.02.21 00:22 신고
  • 프로필사진 에디터D, 에디 스킨 너무나 잘 쓰고 있습니다!! 정말 감사드립니다
    지금 스킨에 여러가지 변형을 시도하고 있는데, 메인과 포스트의 카테고리 이름의 색상을 붉은 색에서 다른 색상값으로 바꾸고 싶습니다!
    방법 알려주시면 감사하겠습니다ㅠㅠ
    2018.03.29 15:46 신고
  • 프로필사진 donza 안녕하세요~ 잘 써주셔서 감사합니다!

    어떤 요소들을 고치고 싶다 할때 크롬 브라우저에서 해당 요소를 우클릭 > 검사 누르시면 우측에 개발자화면이 뜨면서 해당 요소의 소스 위치와 아래에 속성들이 뜹니다.

    예를들어 어떤 글씨 색상을 바꾸고 싶다 하면 그걸 우클릭해서 우측 개발자화면에 뜨는 색상을 보고 으흠 style.css 14번째줄에 이런 속성들이 있구나 보실 수 있습니다 한번 해보세요
    2018.03.29 17:42 신고
  • 프로필사진 에디터D, 에디 감사합니다!!! 이런식으로 다 수정할수있겠네요 2018.03.29 18:48 신고
  • 프로필사진 비밀댓글입니다 2018.04.25 11:40
  • 프로필사진 donza 비밀댓글이었군요~
    방문해주셔서 감사합니다!
    2018.07.04 13:31 신고
  • 프로필사진 종현이 아~정말 깔끔한 스킨~ 원하던 스킨입니다..ㅎ
    감사합니다.
    잘 쓰겠습니다~
    2018.07.13 17:15 신고
  • 프로필사진 donza 잘 써주셔서 고맙습니다~ 2018.07.13 21:00 신고
  • 프로필사진 오래된창고~! 원하던 스킨 찾았습니다.. ㅎ 잘 쓰겠습니다.
    bg파일 어둡게 안하는 방법 찾았습니다.ㅎ
    2018.07.30 17:57 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~ 2018.07.31 23:20 신고
  • 프로필사진 비밀댓글입니다 2018.07.30 22:43
  • 프로필사진 donza 잘 써주셔서 감사합니다~
    제가 포스팅 하나씩만 나오는 기본스킨을 가지고 개조해 만든거라 해당 기능 불러올 코드가 있는지 잘 모르겠네요 ㅎㅎ
    2018.07.31 23:22 신고
  • 프로필사진 noel_chant 안녕하세요 좋은 스킨 무료 배포해주셔서 정말 감사합니다 덕분에 마음에 드는 스킨 찾아서 쓰게 됐네요
    감사의 인사와 함께 모르는 것이 있어 여쭤보려고 댓글 답니다
    다름이 아니라 스킨을 적용하고 딱히 건든 게 없는데 공지사항을 어디서 볼 수 있는지 알 수가 없어서요 티스토리를 시작한 지 얼마 안 돼서 이것저것 헤매네요 쉬운 질문이어도 답변 부탁드리겠습니다
    다시 한 번 좋은 스킨 감사합니다!
    2018.08.05 01:14 신고
  • 프로필사진 donza 안녕하세요~
    블로그에 공지사항 기능이 있었나요?
    혹시 티스토리 알람기능을 말씀하시는 거라면 티스토리 사이트에서 로그인하셔야 뜰거에요
    2018.08.06 09:26 신고
  • 프로필사진 연구원1호 제 맘에 꼭 드는 예쁜 스킨이네요!
    한 가지 궁금한게 있는데 메인화면과 카테고리 등에서
    '글+사진'이 아니라 그냥 사진으로만(갤러리형)으로 표시할 수 있는 방법은 없을까요?
    사진을 주로 올리는 블로그를 하다보니...갤러리형이 저에게 필요해서요
    좀 귀찮을 수도 있으시겠지만 답변해주시면 감사하겠습니다:)
    2018.08.05 08:42 신고
  • 프로필사진 donza 안녕하세요~
    안타깝지만 갤러리형은 완전히 손을 보시거나 본래 갤러리형인 스킨을 이용해주시는 편이 좋을 것 같습니다 ㅠㅠ
    2018.08.06 09:22 신고
  • 프로필사진 noel_chant 안녕하세요 답변 주셔서 감사합니다! 블로그 관리에 들어가보니 공지 관리 라는 게 있더라구요 한 번 써보려고 했을 뿐 그리 중요한 건 아니니 신경 안 쓰셔도 될 것 같아요 예쁜 스킨 다시 한 번 감사드리고 좋은 하루 되세요~!! 2018.08.06 13:03 신고
  • 프로필사진 donza 잘써주시니 제가 더 감사합니다~~
    좋은 하루 되세요
    2018.08.06 13:15 신고
  • 프로필사진 N은 너무 멋진 스킨입니다.^^마음에 들어요~
    한가지 여쭤봐도 될까요? 티스토리 어려워서 오랫동안 망설이다가 해볼려고 하는데요.
    제목이나 글자 폰트색상은 제가 마음대로 바꿔도 되나요?
    일단 마음에 드는 상단 배경화면 얼른 찾아 바꿔서 적용해봐야겠습니다.
    다시 한번 멋진 스킨 감사합니다.
    2018.08.09 00:41 신고
  • 프로필사진 donza 네 글자든 폰트색상이든 다 바꾸고 고쳐서 쓰셔도 상관없습니다. 배경화면은 자동으로 어둡게 처리되니 일부러 어둡게 해서 올리실 필요는 없습니다 ^^ 2018.08.09 08:42 신고
  • 프로필사진 N은 답변 바로 주셔서 감사합니다.
    정말로 멋진 스킨 나눔에 행복하네요~^^
    좋은 하루 되세요~
    2018.08.10 00:50 신고
  • 프로필사진 yoana kim 감사해요 잘쓸게요 ! :) 넘넘 맘에 드는 스킨이에요 <3
    그런데 제가 원래 스킨에서 홈화면 이미지랑 로고를 삭제했는데 왜 메뉴 버튼을 눌러도 메뉴가 안나오는 지 모르겠네요. ㅠㅠ 그 부분은 건드리지 않은 것 같은데 말이죠. 그냥 원래 배포해 주신 그대로 스킨 설정하면 메뉴가 잘 나오는데..ㅠㅠ 그 부분 (navi) 의 코드는 같은데 혹시 로고부분이나 홈화면 어둡게 하는 부분에서 무언가 잘못된 걸까요 ..?
    2018.09.21 06:11 신고
  • 프로필사진 donza 안녕하세요~ 확인이 늦었습니다.
    해연님 페이지 들어가서 확인해보니 일단 스크립트 오류가 발생하고있는데요. 원래 스킨대로 돌려놓고 이미지를 그냥 투명한 png를 넣어버리시는 식으로 수정해서 사용하시면 좋을 것 같습니다.
    2018.09.26 02:46 신고
  • 프로필사진 yoana kim 감사해요! 안전하지않은 스크립트?가 뜨긴하지만 해결됐어요 :) 감사합니당 <3 2018.10.09 06:16 신고
  • 프로필사진 E-SEARCHER 안녕하세요, donza님
    이번에 블로그를 처음 시작하게된 유저입니다.
    일단, 좋은 스킨 무료로 공유해주신 점 감사드립니다 ^^
    "log by" 스킨이 마음에 들어서 해당 스킨을 적용하다보니 한 가지 문제 발생 및 해결 방법에 대해 알려드리고자 댓글을 남깁니다.
    아시겠지만 티스토리가 지난 8월 31일부터 SSL(https)를 도입하였습니다. 그러다보니 이 스킨도 약간의 영향을 받게 되었네요.
    자바 스크립트를 로드할때, 링크가 http로 되어있다보니, SSL이 적용된 블로그에서는 이를 불러오지 못하여 메뉴를 열 수 없는 상황이 발생합니다.
    이미 해결법도 잘 아시겠지만, https로 바꾸면 그만입니다 ^^;;
    요즘은 블로그 생성시, 보안접속이 기본 적용된 상태라 안내와 수정이 필요할거 같습니다 ㅎ
    2018.09.29 15:40 신고
  • 프로필사진 yoana kim 오 그래서였군요ㅇ0ㅇ 2018.10.11 06:13 신고
  • 프로필사진 VisualRadio 무료로 배포해주셔서 감사합니다.~~~~~

    컨텐츠가 사진이 주라서 기존의 스킨에서는 올린 사이즈로 보였는데 포스팅 후 사진 사이즈가 줄어들어서 문의 드립니다.

    폭을 넓게 변경 가능한가요?

    미리 감사드립니다.


    2018.10.11 23:16 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~
    물론 폭을 넓게 고칠 순 있지만 코드 수정할 곳이 많습니다. 반응형이다보니 모바일쪽도 생각해야 하구요. 와이드한 사진에는 아쉽지만 썸네일은 기존 4:3 비율로 출력되게 사용하시는 편이 좋겠습니다. 이미 수정해서 사용중이신 것 같지만요 ^^;
    2018.10.17 08:54 신고
  • 프로필사진 에디터D, 에디 이 스킨을 정말 잘 쓰고 있습니다! 그런데 다음 애드핏을 화면 우측에 띄우고 싶은데 아예 밑이나, 타이틀과 게시글 사이에 뜨네요. 방법이 없을까요? 2019.01.07 15:37 신고
  • 프로필사진 donza 물론 얼마든지 방법은 있는데요
    쉽게 설명드릴 방법이 없습니다 ㅠㅠ 자유롭게 손질해서 사용하시길 바래요
    2019.01.16 14:46 신고
  • 프로필사진 Dlayer 안녕하세요 스킨을 무료로 배포해주셔서 감사합니다.
    따로 커스텀해서 너무 잘쓰고 있습니다. 다시 한번 이쁜 스킨 만들어주셔서 감사합니다.
    2019.01.28 12:26 신고
  • 프로필사진 donza 잘써주셔서 감사합니다 ^^ 2019.01.28 16:09 신고
  • 프로필사진 Thumbelina93 몇시간이고 다른곳에서 배포를 받다가 잘 안되서 해매고 진빠진 사람인데 이렇게 친절하게 올려주셔서 정말 감사합니다ㅠㅠ 와 이제 마음에 쏙드는 메인을 찾았네요! 감사합니다 donza님! 2020.03.26 12:43 신고
  • 프로필사진 비밀댓글입니다 2020.05.01 10:24
댓글쓰기 폼