티스토리 뷰


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


#.기타 문의

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



저작자 표시
신고
댓글
  • 이전 댓글 더보기
  • 프로필사진 Hun E 답변 감사합니다. 정말 예쁘게 잘쓰겠습니다.

    좋은 밤 되시구 내일도 좋은 하루 보내세요!! 굿밤입니다.
    2017.03.27 22:47 신고
  • 프로필사진 비밀댓글입니다 2017.03.28 01:54
  • 프로필사진 donza 써주셔서 감사합니다~~ 2017.03.28 19:16 신고
  • 프로필사진 비밀댓글입니다 2017.03.29 21:57
  • 프로필사진 donza 제가 들어가니 잘 보이는데요 ㅠㅠ 혹시 아직 안보이시면 컨트롤 F5로 소스까지 완전히 새로고침 해보세요~ 2017.03.29 23:06 신고
  • 프로필사진 몽스부인 다른분 문의한거 보고 새로고침 해서 해결했습니다! 감사합니다. 지금 이것저것 수정하고 있는데 워낙 기본 틀이 좋아서 너무 맘에 들어요. 잘쓰겠습니다. 감사합니다^^ 2017.03.30 01:01 신고
  • 프로필사진 donza 네~ 잘 써주셔서 감사합니다 2017.03.30 08:57 신고
  • 프로필사진 비밀댓글입니다 2017.03.30 10:30
  • 프로필사진 donza 작성시간은 티스토리에서 내려오는 치환자를 그대로 쓰는거라 다른 방법은 저도 모르겠습니다.

    썸네일 크기를 키울경우 우측의 내용물이 들어갈 자리가 훨씬 협소해집니다.

    썸네일을 키우고 내용까지 다 보이게하려면 썸네일을 풀사이즈로 쓰고 하단에 내용물이 뜨게 바꿔야합니다.

    그런 형식의 스킨을 사용하시길 권합니다.

    또한 제목 밑의 요약내용으로 포스팅의 내용을 알려준다기보다 호기심을 자극해서 포스팅을 읽으러 들어오는 용도라고 생각하시고 어떤게 좋은 방법일지 고민해보시기 바랍니다.

    제 스킨은 어떤식으로 바꿔서 쓰셔도 무방하지만 주문제작급의 질문은 저도 난처합니다.
    2017.03.31 21:30 신고
  • 프로필사진 비밀댓글입니다 2017.03.30 11:17
  • 프로필사진 donza 분명 덮어쓰기 하셨다면 ^^
    새로고침을 해보세요
    그냥 새로고침하시면 리소스는 캐쉬에 그대로 남습니다.
    위에 많은 댓글에 있듯 컨트롤 누른채로 F5를 누르시면 내부 모든 소스가 새로고침됩니다.

    정말로 정상적인 업로드가 됐다는 가정하에선 되실거에요~
    2017.03.31 21:13 신고
  • 프로필사진 행복에서이 예쁜 스킨 공유해주셔서 감사합니다.
    다음이 아니라 현재 이 스킨을 적용해서 사용하고 있는데요. 모바일에서 좌우로 약간씩 밀리는 경향이 있습니다.
    #1 스킨을 적용하면 좌우로 밀리지 않고 딱 고정이 된채로 보여지는데, 이 스킨을 사용했을때는 모바일에서 글의 화면을 좌우로 밀면 고정되지 않고 흔들리는 것처럼 밀어집니다. 왜 그러는지 답을 찾지 못해 문의 드립니다. 수고스럽더라도 답변 좀 부탁드립니다 ㅠㅠ
    2017.03.31 19:56 신고
  • 프로필사진 donza 밀린다는 페이지가 따로 있나요? 링크좀 부탁드릴게요
    제가 람세스님 페이지를 몇군데 봤는데 아무데도 밀리는데가 없어서요

    컨텐츠 중간에 강제적으로 좌우폭을 넘어가버리는 요소가 있었을 거예요 잘 찾아서 확인 부탁드려요
    2017.03.31 21:14 신고
  • 프로필사진 행복에서이 구글 본문 광고가 336사이즈다 보니 강제로 밀렸나 봅니다. #1를 적용했을때는 336사이즈여도 이게 잡아져서 고정이 되는데, log by 1.0에서는 그게 안되서 좌우로 밀면 약간씩 글이 흔들리듯이 밀리는 것 같습니다. 좌우 여백을 좀더 늘려야 되는 걸까요? 귀찮게 해서 죄송합니다. 그리고 답변 감사합니다 ^^ 2017.03.31 21:32 신고
  • 프로필사진 donza 댓글 확인이 늦었네요
    반응형 광고를 써보시고 336사이즈를 꼭 써야하는 이유가 있다면 가로스크롤을 막아버리는 방법도 있습니다.
    css에서 body{} 태그라던지 광고 감싸는 아무개체에나 overflow-x:hidden을 적용하면 되지 싶어요.
    2017.04.04 19:55 신고
  • 프로필사진 비밀댓글입니다 2017.04.05 11:19
  • 프로필사진 비밀댓글입니다 2017.04.05 11:26
  • 프로필사진 봄처녀 안녕하세요! 예쁜 스킨 공유해주셔서 너무 잘쓰고 있어요! 다름이아니라 카테고리?여는 아이콘 색상이 흰색인데 색을바꿀 수 있나요? ㅠ 헤드색상을 흰색으로 하려는데 잘안보여서요..ㅠㅠㅠ 2017.04.05 16:53 신고
  • 프로필사진 donza 반갑습니다~
    헤더 바탕을 완전히 흰색으로 하게 된다면 ico_skin.png 파일의 제일 좌측 위에 있는 흰 줄 세개를 색상을 넣어 고치는 게 최선일 것 같습니다. 기존에 있는 흰 버튼에 검은 바탕을 깔아주는 것도 방법이지만 깔끔하진 않겠네요. 해결점을 못찾으신다면 또 질문 주세요~
    2017.04.05 23:30 신고
  • 프로필사진 노루꿍댕이 감사히 잘쓰겠습니다! 2017.04.06 17:42 신고
  • 프로필사진 donza 반갑습니다~~ 잘쓰세요~! 2017.04.07 19:37 신고
  • 프로필사진 리메이크 코리아 답글이 늦어습니다.
    여러모로 좋은 스킨이라 여기면서
    잘 쓰도록 하겠습니다.

    멋진 봄 되세요!
    2017.04.08 02:24 신고
  • 프로필사진 donza 넵~ 잘 써주셔서 감사합니다~ 2017.04.09 12:09 신고
  • 프로필사진 비밀댓글입니다 2017.04.19 00:04
  • 프로필사진 donza 잘 써주셔서 감사합니다~
    폰트는 유료폰트라 안되지만 나머진 로고에 활용하셔도 괜찮습니다~

    인스타는 티스토리에 기능이 구현됐는지 잘 모르겠습니다.
    전 기본스킨에 있던 세가지 SNS에만 그림을 바꿔서 씌워놨거든요.

    관리>플러그인 에서 해당 SNS서비스 플러그인이 있는지 확인해보시는 것도 방법일 것 같습니다.
    2017.04.27 10:42 신고
  • 프로필사진 Jaicy 우선 스킨 코드 공유 감사합니다:)

    이제 막 스킨 받아서 코드 수정해보는 중인데 logo파일을 수정해서 업로드 했더니 창 크기가 800px 미만일 때는 로고가 잘 보이다가 그 이상으로 커지면 로고가 안보이더라구요ㅜㅜ

    어떻게 해결하면 좋을까요?
    2017.05.01 22:56 신고
  • 프로필사진 donza 우클릭을 막아두신 것 같은데 풀어주시면 제가 한번 적용하신 소스를 볼게요 2017.05.01 23:05 신고
  • 프로필사진 donza 지금 봤는데 제 기본 샘플처럼 480 720으로 만드셔야 제대로 나옵니다.
    윗부분은 모바일용 아랫부분은 pc용이거든요
    2017.05.01 23:07 신고
  • 프로필사진 Jaicy 로고 사이즈 수정하고 background-position:center;로 줬더니 해결됐습니다 XD 2017.05.01 23:14 신고
  • 프로필사진 너굴맨이 처리했어 감사합니다 잘쓰겠습니다 ㅎ 2017.05.12 11:45 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~ 2017.05.17 00:13 신고
  • 프로필사진 비밀댓글입니다 2017.05.22 11:32
  • 프로필사진 donza 반갑습니다~
    스타일시트 49번줄 근처에
    .hd_visual .blog_ttl {
    width: 100%;
    height: 400px;
    display: table;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    }
    rgba 제일 뒤의 항목이 투명도입니다~
    2017.05.22 15:56 신고
  • 프로필사진 뭐 어때 안녕하세요!
    무료로 배포해주신 스킨 너무너무 잘 쓰고 있습니다!ㅎㅎㅎ

    다름이 아니라 저번에 댓글 내용 중에 글 제목과 본문 사이 여백을 늘리는 방법이 있어서 그 방법대로 늘렸었는데 다시 줄이고자 댓글을 찾아보니 없어져서 줄이는 방법에 대해 문의합니다...
    2017.06.12 11:09 신고
  • 프로필사진 donza 안녕하세요~
    스타일 137번줄 근처에
    .skin_view .area_title {
    margin-bottom: 29px;
    padding: 68px 0 45px;
    border-bottom: 1px solid #ebebeb;
    text-align: center;
    }
    여기서 margin-bottom 값이 하단여백입니다. 늘이면 늘어나고 줄이면 줄게 되겠습니다~!
    2017.06.12 17:54 신고
  • 프로필사진 뭐 어때 댓글 감사합니다!

    혹시 하단 여백말고 상단 여백은 어떤건지 여쭤봐도 괜찮을까요?
    margin-top: 일까 싶어서 검색해봤더니 너무 많아서 모르겠네요ㅠㅠㅠ
    2017.06.14 15:54 신고
  • 프로필사진 donza 맞습니다~
    요전에 보여드렸던 소스 안에
    margin-top:33px 이런식으로 추가해주시면 됩니다! 옵션 사이엔 ; 세미콜론 구분자가 들어가야 올바르게 인식됩니다~
    2017.06.16 14:02 신고
  • 프로필사진 manijang2 덕분에 좋은 스킨 받아갑니다.
    이정도 디자인에 반응형이면 스킨 업데이트 해서 유료로 판매해도 될 퀄리티인데..
    나중에 기능 더 추가해서 판매하신다면 반드시 구매해서 사용하도록 하겠습니다.

    감사합니다.
    2017.06.29 01:00 신고
  • 프로필사진 donza 반갑습니다~
    잘 써주셔서 고맙습니다~!
    2017.06.29 11:43 신고
  • 프로필사진 siwon 좋은 스킨 배포해주셔서 너무 감사합니다. ^^
    한가지 수정하고 싶다면 블로그 메뉴얼이 화면당 3개로 나눠지고 있는데 이걸 좀 늘리는 방법이 있을까요?
    2017.08.03 01:09 신고
  • 프로필사진 donza 안녕하세요~
    휴가 다녀오느라 댓글확인이 늦었습니다

    블로그 메뉴얼이란게 뭔지 잘 모르겠습니다 ㅠㅠ 어느 부분인지 다른 방법으로 설명해주시면 바로 알려드리겠습니다!
    2017.08.07 08:54 신고
  • 프로필사진 토리랑 네이버 블로그에서만 서식하다가 티스토리로 오늘 이사왔습니다.
    아직 이것저것 뭘 건드려야 될지 몰라 스킨부터 찾고 있었는데 다 유료인줄 알고 쫄았다가
    이렇게 괜찮은 스킨이 있어 너무 감동했습니다.
    이것저것 건드려보다 모르는 거 있으면 질문하러 방문하겠습니다. ^^
    2017.08.10 17:47 신고
  • 프로필사진 donza 방문해주셔서 감사합니다 ^^
    CSS 관련해서 궁금하신것 물어보세요~
    2017.08.11 08:56 신고
댓글쓰기 폼