티스토리 뷰


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


#.기타 문의

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



저작자 표시
신고
댓글
  • 이전 댓글 더보기
  • 프로필사진 란다해피 예쁜 스킨 공유해주셔서 감사합니다.
    다음이 아니라 현재 이 스킨을 적용해서 사용하고 있는데요. 모바일에서 좌우로 약간씩 밀리는 경향이 있습니다.
    #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 신고
  • 프로필사진 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 신고
댓글쓰기 폼