티스토리 뷰


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


#.기타 문의

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



댓글
  • 이전 댓글 더보기
  • 프로필사진 Toreerang 네이버 블로그에서만 서식하다가 티스토리로 오늘 이사왔습니다.
    아직 이것저것 뭘 건드려야 될지 몰라 스킨부터 찾고 있었는데 다 유료인줄 알고 쫄았다가
    이렇게 괜찮은 스킨이 있어 너무 감동했습니다.
    이것저것 건드려보다 모르는 거 있으면 질문하러 방문하겠습니다. ^^
    2017.08.10 17:47 신고
  • 프로필사진 donza 방문해주셔서 감사합니다 ^^
    CSS 관련해서 궁금하신것 물어보세요~
    2017.08.11 08:56 신고
  • 프로필사진 YRuby 스킨 너무 예뻐요!!! 제가 딱!!! 원하던 스킨이에요 게다가 무료라니 감사합니다! 잘 쓰겠습니당ㅎㅎㅎ 2017.08.20 23:43 신고
  • 프로필사진 donza 예쁘게 써주시니 감사합니다!!
    정말 예쁘게 꾸며주셨네요
    2017.08.21 09:04 신고
  • 프로필사진 비밀댓글입니다 2017.09.01 02:15
  • 프로필사진 donza 잘 써주셔서 감사합니다~

    HTML 100번 줄 정도에
    <div role="navigation" class="area_navi">

    <a href="/notice" class="link_guestbook">공지사항</a>
    <a href="" class="link_guestbook">방명록</a>
    </div>

    이런식으로 수정해서 공지사항 링크를 붙일 순 있는데 치환자로 하는게 아니라 새글 표시가 안뜰거에요

    왜 이렇게되는건지 나중에 시간이 나면 알아보겠습니다 ㅠㅠ

    원래 카테고리에 공지사항이 있는데 그걸 지우고 카테고리를 편집해서 이렇게 되는 것 같기도 하구요
    2017.09.01 09:19 신고
  • 프로필사진 비밀댓글입니다 2017.10.01 09:40
  • 프로필사진 donza 안녕하세요~~ 비밀글이라 확인이 늦었습니다 ㅠㅠ 로그인안하고 들르거든요 늘

    질문하신 내용은 티스토리 소스 자체구조때문에 완벽하지 않을 수 있습니다

    334줄쯤에
    @media only screen and (max-width: 820px)
    style.css?_T_=1504225210:334
    .skin_view .area_view {
    padding: 22px 15px 22px;
    }

    15px부분을 0으로 바꿔주시면 해상도 820px미만의 모바일 환경에서 좌우 15픽셀의 여백이 빠집니다.
    그런데 본문까지 여백이 없어지면 좀 별로일수도있어요

    그래서 336줄쯤에 있는

    @media only screen and (max-width: 820px)
    style.css?_T_=1504225210:336
    .skin_view .area_view p {
    font-size: 16px;
    line-height: 24px;
    color: #333;
    }

    여기에 padding: auto 15px;를 추가해서 본문여백을 다시 주고
    (이때 그림도 다시 여백이 생김)

    그다음

    172번째줄 정도에 있는
    .skin_view .area_view .imageblock
    옵션에

    margin: 0 -15px;
    max-width: none!important;
    이걸 추가해서 이미지 있는 블록만 좌우 마이너스 여백을 넣어서 강제로 늘려주는겁니다

    2017.10.24 09:49 신고
  • 프로필사진 비밀댓글입니다 2017.10.18 16:59
  • 프로필사진 donza 잘 써주셔서 감사합니다~ 2017.10.24 09:04 신고
  • 프로필사진 donza 여러분 특별한 이유가 없다면 질문은 비밀로 하지 말아주세요
    제가 로그인해야만 댓글 남기신걸 볼 수 있기도 하고
    다른분이 궁금해할 질문들도 공유할 수 있게요
    부탁드립니다~
    2017.10.24 09:05 신고
  • 프로필사진 풀탱이 멋진 스킨 감사합니다. 2017.11.28 22:01 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~ 2017.11.29 09:12 신고
  • 프로필사진 궁금 안녕하세요~ 스킨 너무이뻐요~ 궁금한게 있는데 메뉴바 검색창이 밀려 보이는데 어떻게 해결해야 할가요?? 2017.12.22 17:42 신고
  • 프로필사진 donza 답글이 늦었습니다.
    단서가 너무 부족해서 제가 알 수가 없는데요 혹시나 아직도 문제를 해결하지 못하셨다면 블로그 주소라도 좀 알려주세요.
    2018.01.08 17:53 신고
  • 프로필사진 SunRise_1376 안녕하세요? 스킨 배포 정말 감사합니다!
    다름이 아니라, 스킨의 폰트 문제에 대해 질문을 하려합니다.
    몇몇 게시물에서는 스킨에서 설정된 폰트로 정상 출력되지만, 전혀 변경이 되지 않는 글들이 있어 여쭤봅니다~
    noto sans가 마음에 들어서 전체 글들에 적용해보려해도 생각보다 호락호락하지 않군요ㅠㅠ
    2018.01.17 00:21 신고
  • 프로필사진 donza 안녕하세요~
    노토산즈로 출력이 되지 않는 글의 주소를 남겨주시면 확인해보겠습니다~!
    2018.01.17 08:57 신고
  • 프로필사진 SunRise_1376 http://heartgas.tistory.com/53
    글을쓸때 미리 원고에 작성해둔뒤에 티스토리에 옮기는 작업을 하는데요~ 53번 게시물의 게시물은 폰트가 적용이 되지 않았습니다.

    http://heartgas.tistory.com/57
    57번 게시물은 나머지 글들은 폰트가 정상적으로 적용되었으나, 인사말 3줄 정도는 폰트가 적용되지 않았습니다..

    게시물들은 전부 고딕체 설정해서 적용되는 글들은 봐보면 폰트가 너무 작거나, 아예 적용안되는 문제가 있습니다.

    도와주시면 감사하겠습니다!
    2018.01.17 14:57 신고
  • 프로필사진 donza 확인해보니
    단락 자체에 폰트설정이 들어가있습니다.
    html문서에서 설정한 값이 스킨의 css보다 우선순위로 작동하기 때문에
    스킨의 설정으로 작성하기 위해선 에디터 작성 시 글꼴설정을 하지 않아야 합니다.

    텍스트의 크기, 색상 등은 글꼴선정에 영향을 미치지 않기 때문에 상관 없지만 글꼴 설정된 부분은 없애주셔야합니다.
    2018.01.18 08:58 신고
  • 프로필사진 SunRise_1376 아 그렇다면 티스토리 작성할때 폰트설정을 하지 말아야겠군요.. 네이버에서 퍼온글들이 말썽일으켰는데, 잘알겠습니다. 답변 감사합니다! 2018.01.18 10:28 신고
  • 프로필사진 제니김 너무 이뻐요! 잘 쓰겠습니다~ 2018.01.24 18:32 신고
  • 프로필사진 donza 잘 써주셔서 감사합니다~! 2018.01.26 08:57 신고
  • 프로필사진 _야기_ 안녕하세요! 스킨을 적용했는데 메뉴버튼이 보이질 않습니다!
    혹시몰라서 카테고리도 만들어보고 글도 한개 올려봤는데 활성화가 되지않아요
    ccs에서 뭘만져야할지 잘 몰라서 댓글남깁니다 ㅠ
    2018.01.30 22:32 신고
  • 프로필사진 donza 일단 페이지에 스크립트 오류가 생겨서 메뉴버튼이 작동을 안하고 있는 것 같습니다.
    스킨에 있는 이미지 파일도 정상적으로 등록이 되지 않은건지 출력이 되지 않고 있구요
    크롬 개발자모드로 확인하면서 하나씩 수정해보세요 일단 원래스킨에 없던 플러그인들 전부 제거하시고 스킨을 정상화 한 후에 원하시는 기능을 하나씩 추가하면서 완성해보세요
    2018.02.01 09:04 신고
  • 프로필사진 _야기_ 아이고 문제를 찾았네요 바보 같이 이미지 폴더 안에있는건 올리지않아서 이사단이 난것같네요 ㅠㅠㅠ이쁜 스킨 잘쓰겠습니다 감사합니다 2018.02.01 09:33 신고
  • 프로필사진 EMPERROR 혹시 모바일로는 안 되는 건가요? 데스크톱 화면의 스킨은 바꿔서 잘 사용 중인데 모바일로 들어가면 안 되더라구요 2018.02.01 20:47 신고
  • 프로필사진 donza 이 스킨은 기기에 따라서 자동으로 형태가 변하는 반응형 스킨입니다. 모바일 스킨이 따로 작동되게 설정을 하시면 티스토리 기본스킨으로 출력돼버릴겁니다.

    블로그 관리 메뉴중에
    꾸미기 > 모바일 눌러보시면
    티스토리 모바일 웹 자동연결을 사용하지 않습니다로 설정해두셔야합니다
    2018.02.03 20:08 신고
  • 프로필사진 EMPERROR 감사합니다 잘 쓰고 있어요! 2018.02.19 01:44 신고
  • 프로필사진 자망 donza님! 이렇게 멋진 스킨 배포해주셔서 감사합니다!! 정말 깔끔하고 예쁘네요 ㅠ.ㅠ! 정말 감사합니다^^
    한가지 질문이 있어요~! 왼쪽에서 열리는 카테고리 창을 오른 쪽으로 옮기고 싶은데 방법이 있을까요? 카테고리 버튼도 오른 편으로 같이 옮기고 싶습니다! ㅜ 되도록 스스로 해보려고 했는데 역시 어렵네요~~ 답변주시면 정말 감사하겠습니다!
    2018.02.06 20:02 신고
  • 프로필사진 donza left로 위치 지정된것을 right으로만 바꾸면 간단하게 바꿀 수 있는데요.

    일단 버튼은
    45번줄? 정도 근처에
    .area_head .btn_cate {
    position: absolute;
    left: 15px;
    top: 31px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    }

    이런게 보이신다면 left를 right으로 바꾸시면 되구요

    메뉴 본체는 55번줄 정도에
    .wrap_sub {
    display: block;
    position: fixed;
    left: -320px;
    top: 0;
    z-index: 2000;
    width: 320px;
    height: 100%;
    min-height: 100%;
    background: #333;
    transition: left 0.3s;
    overflow: hidden;
    }
    여기서 위에 left를 right으로 바꾸면 -속성이라 오른쪽 밖으로 평소에 320px 나가있는거구요
    transition에 있는 left도 right으로 바꾸면 메뉴가 켜졌다 꺼질때 스르륵 나가도록 트랜지션 효과가 부가됩니다.

    그다음 메뉴가 켜질때의 속성입니다. 아마 58번줄?
    .navi_on .wrap_sub {
    left: 0;
    transition: left 0.3s;
    }

    left 모두 right으로 바꿔주시면
    오른쪽 끝에 0의 위치로 딱 붙는 메뉴가 스르륵 트랜지션 효과를 받으며 등장합니다.

    이렇게 하면 pc에선 제대로 되는데 모바일에서 버튼이 오른쪽으로 달라붙어버릴겁니다.
    모바일에서의 헤더영역을 오른쪽 중심으로 수정해줘야 하는데요

    44번줄정도에
    .area_head {
    position: absolute;
    width: 820px;
    z-index: 1000;
    top: 0;
    left: 50%;
    margin-left: -420px;
    }

    left전부 right으로 바꿔주시고

    304번중정도에 모바일 반응형코드가있습니다.
    @media only screen and (max-width: 820px)
    .area_head {
    width: 100%;
    left: 15px;
    margin: 0;
    }
    여기 left도 right으로 고쳐주시면 아마 다 될겁니다.
    만약에 안되시면 안되는 곳 주소를 알려주셔야 제가 소스를 볼 수 있거든요. 한 번 해보시구요

    모든 개체들의 속성은 크롬에서 우클릭해서 검사 누르시면 각 속성이 어떤 역할인지 다 미리 보실 수 있습니다.
    2018.02.07 09:21 신고
  • 프로필사진 오늘의 엠마 안녕하세요^^ 얼마전에 티스토리를 시작해서 나눠주신 스킨을 사용 중에 있습니다.
    혼자서 이래저래 조금씩 바꾸고 있는데 지금 좀 헤매고 있어서 도움이 필요합니다...ㅠ

    데스크탑에서는 정상적으로 보이는데, 모바일과 태블릿에서 하단의 페이지 넘겨보는 부분이 왼쪽에 쏠려서 보여요.
    태블릿에서는 완전히 왼쪽으로만 쏠려있고, 모바일에서는 쏠림+오른쪽으로 넘기는 아이콘이 한 단 아래로 내려가 있어요.
    어디서 고쳐야할지 모르겠어요ㅜㅜ

    또 데스크탑에서는 똑바로 보이는데 모바일이랑 태블릿에서 페이지가 오른쪽으로 약간 여백이 남아서 하단에 스크롤바가 생겨요.
    아주 조금이긴하지만, 손가락으로 막 아래로 스크롤하다보면 글이 많은 페이지에서는 화면이 자꾸 좌우로 왔다갔다하는게 불편해서요. 좌우여백이 전혀 남지 않게 딱 맞게 조정하고 싶어요.
    overflow-x:hidden를 쓰래서 모바일쿼리 부분에 한번 더 적긴 했는데 여전히 똑같아요. max-width:820px 되어 있던 것도 720 막 이렇게도 줄여봤고 position: relative를 해봐도 똑같고ㅜ 인터넷 검색하면서 찾아가며 해서 중구난방이라 그런지 사실 시키는대로 하면서도 맞는지도 모르겠고ㅋㅋㅋㅋㅋ 혼자서 끙끙대다가 결국 이렇게 질문글을 남기네요.
    2018.02.09 21:52 신고
  • 프로필사진 donza 안녕하세요~ 댓글 확인이 늦었습니다.
    쏠려서 보이는게 문제라기보다는 의도한 형태입니다. 플롯 방식으로 우측 화살표 외의 개체들이 모두 왼쪽플로팅 되어있는 상태로 이렇게 해야 해상도가 어떻든 페이지 갯수가 몇개가 출력되든 대응할 수 있어서요.
    왜 고치려고 하시는지는 알겠습니다.
    불가능한건 아닌데 코드를 많이 손을 대야할 것 같네요.

    두번째 문제는 모르겠습니다. 제가 어떤환경에서도 그런 경우를 본 적이 없어서요.
    지금 세팅하신 페이지 또한 가로스크롤이 생기지 않구요.
    스킨에서 설정한 컨텐츠 좌우폭의 제한을 넘어서는 컨텐츠를 강제로 넣지 않는 이상 가로스크롤이 생기지 않을 것 같습니다.
    이건 어떤 글, 어떤 환경에서 이런 현상이 일어나는지를 먼저 알려주셔야 확인이 가능할 것 같습니다.
    2018.02.12 10:00 신고
  • 프로필사진 오늘의 엠마 확인해주셔서 감사합니다. ^^
    어떻게 설명드려야 할지 몰라서 그냥 제 블로그에 이미지를 첨부한 글을 올렸습니다.
    그냥 폰에서 어떻게 스크롤이 보이는지 화면 캡쳐한 것 뿐이구요, 사용 기종은 아이폰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 신고
  • 프로필사진 디디(DD, Didi) 스킨 너무나 잘 쓰고 있습니다!! 정말 감사드립니다
    지금 스킨에 여러가지 변형을 시도하고 있는데, 메인과 포스트의 카테고리 이름의 색상을 붉은 색에서 다른 색상값으로 바꾸고 싶습니다!
    방법 알려주시면 감사하겠습니다ㅠㅠ
    2018.03.29 15:46 신고
  • 프로필사진 donza 안녕하세요~ 잘 써주셔서 감사합니다!

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

    예를들어 어떤 글씨 색상을 바꾸고 싶다 하면 그걸 우클릭해서 우측 개발자화면에 뜨는 색상을 보고 으흠 style.css 14번째줄에 이런 속성들이 있구나 보실 수 있습니다 한번 해보세요
    2018.03.29 17:42 신고
  • 프로필사진 디디(DD, Didi) 감사합니다!!! 이런식으로 다 수정할수있겠네요 2018.03.29 18:48 신고
  • 프로필사진 비밀댓글입니다 2018.04.25 11:40
댓글쓰기 폼