본문 바로가기

티스토리스킨/베이직 디자인 스킨

티스토리 스킨 - 반응형 베이직 딥블랙 2단 스킨 배포합니다.

스킨명 : 반응형 베이직 딥블랙 2단


- 심플하게 글 중심의 기본 블로그를 운영하는데 적합한 2단 블랙 스킨입니다.

- 커버 페이지는 글목록과 같은 디자인으로 된 커버리스트 타입 1가지만 지원합니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 모든 파일들을 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 




스킨 주요 특징

 

스킨 옵션 설정 항목들을 사용해 다양한 레이아웃을 만들 수 있습니다.

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)


  • 카테고리를 탑메뉴에 배치 가능
  • 탑메뉴에 위치하는 카테고리 위치를 헤더 상단과 하단에 선택적으로 배치 가능
  • 목록형, 썸네일형 글 목록 보기 지원




* 이미지를 클릭하면 옵션 항목들을 자세히 볼 수 있습니다.


 

패치 내역

 

  • 2020-01-06 1.0.1 패치 - 오픈그래프 타이틀 및 하위 텍스트 컬러를 흰색으로 조정.




설치 주의사항

 

  • 스킨 적용시 index.xml, script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.




* 체커형 썸네일형 목록형 세가지 목록 타입을 선택할 수 있습니다.





  • 스킨 잘 사용하고있습니다. 감사합니다.
    한가지 궁금한게 있습니다. 이 스킨을 쓰면서 글쓰기를 할때, 링크를 넣으면
    링크 미리보기에 나타나는 설명 글자 색상이 검은색이라 스킨 배경과 겹쳐서 나타나지 않는데..
    혹시 어떤 부분을 수정해야 글자 색상을 바꿀 수 있는지 궁금합니다.

    • "링크 미리보기에 나타나는 설명 글자"라고 하신게 어떤걸 말하는지 모르겠습니다.
      올려놓으신 블로그 기준으로 어느 위치인지 알려주시면 확인해보겠습니다.

    • https://sweco.tistory.com/2
      해당 포스트에서 링크 부분의 미리보기를 확인해주시면 됩니다.
      회색 문장 위에 제목 글의 색상이 블랙이라 안보이게 표시되었습니다.

    • 오픈그래프 박스를 뿌리는 태그에 글자색이 지정되어 있는데, 이게 티스토리 시스템 css에 컬러가 별도로 지정되어 있습니다.

      시스템에서 정의한걸 오버라이드하는게 그닥 바람직하지는 않은데, 스킨 버그라고 봐야하는게 아닌가 싶습니다.
      시스템css가 나중에 적용되기 때문에 변경되지 않도록 강제지정을 해줘야 합니다.
      스킨은 패치가 되어 있습니다.

      스킨 원본기준 2365 라인쯤에

      /* 티스토리 시스템 오픈그래프 패치*/
      figure[data-ke-type='opengraph'] div.og-text p.og-title, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title{
      color: #fff !important;
      }

      요걸 붙여넣으면 오픈그래프 제목을 흰색으로 강제 지정합니다.

    • 감사합니다. 덕분에 링크 미리보기의 글자 색상이 흰색으로 잘 표시됩니다.
      혹시 첨부파일의 제목도 색상을 변경할 수 있을까요? 회색으로 표시되니 조금 어두워서 바꾸고 싶네요.

    • 위에 오픈그래프 css 추가한 밑에

      figure.fileblock .filename, #tt-body-page figure.fileblock .filename{
      color: #fff !important;
      }
      figure.fileblock .size, #tt-body-page figure.fileblock .size {
      color: #fff !important;
      }
      를 추가해주면 파일명과 파일 크기 텍스트 색상이 흰색으로 강제 지정됩니다.

    • 덕분에 마음에 드는 스킨을 잘 사용하게 되었습니다. 감사합니다!

    • 감사합니다.=^^=/

  • 블랙 스킨 찾고 있었는데 여기서 발견하게 되었네요. 감사하게 잘 쓰겠습니다.

  • 제작자님, 이 스킨 사이드바 너비 조정 가능하나요?

    • style.css 너비값을 2개 조정해주면 사이드바 너비는 원하는대로 수정할 수 있습니다.

      전체 레이아웃 너비는 1260px
      본문 970px, 사이여백 40px, 사이드바 250px 구성입니다.

      스킨 원본 기준
      .sidebar{
      검색하면
      사이드바 너비값이
      width: 250px;
      로 속성값이 지정되어 있습니다.(826행)

      본문 너비는
      #content{
      검색(1094행)
      width: 970px;
      로 정의된 너비는 사이드바 넓힌 크기만큼 축소

      해주면 레이아웃이 유지되면서 사이드바를 넓힐 수 있습니다.

    • 자세한 설명 감사합니다. 참고해서 스킨에 적용해보겠습니다.

    • 번거롭게 해서 죄송합니다. 취향에 맞게 꾸미려고 하다보니 style 찾는게 늘 일이라서 조금 편하게 가고자 이렇게 질문 올립니다.

      한가지 질문이 있습니다.

      1.위에 답글을 참고해서 사이드바 너비 조정은 해결했습니다. 근데 Float 사이드바에서는 적용이 안되는 것 같아서 별도로 수정해줘야 하는지 알고 싶습니다.

      미리 감사드리고 자세하지 않아도 되니 단서만 주시면 노력해보겠습니다.

    • float 사이드바라는게 모바일 펼침 메뉴를 말하시는거 같은데...
      늘리는건 어려운게 아닌데..
      모바일 기기 해상도가 낮은 것들도 있기 때문에 사이드바를 너무 늘리면 우측 끝이 잘려 보이게 되는 경우가 생길 수 있습니다.

      그래서 대충 오른쪽에 조금 남도록 크기를 정하는 것입니다.

      style.css 568행에
      #header .menu 가 모바일 펼침 메뉴입니다.
      속성을 2개 수정해야 합니다.

      left: -308px;
      width: 308px;

      width 크기만큼 left에 마이너스값으로 입력해주면 됩니다.

    • 자세한 설명 감사합니다. 답변을 통해서 조금씩 바꿔가고 있습니다.

      설연휴 잘 보내세요.

  • 블랙 스킨에 플러그인으로 본문에 구글광고 넣고 모바일에서 테스트 해보니 잘리는 현상이 있더라구요. 혹시해서 현재 apost님 쓰고 계시는 스킨도 테스트 해보니 잘리는 것 같습니다.

    잘은 모르지만 광고 일부가 패딩값 사이로 겹쳐지는 것 같아요.

    스킨 만드시는데 참고될까 싶어서 글 남깁니다.

    • 배포하는 스킨과 무관한 문제입니다.

      현재 티스토리 플러그인으로 붙는 애드센스는 반응형 지원이 정상적으로 되지 않습니다.

      마찬가지 이유로 모바일 환경에서도 사소한 레이아웃 상의 문제들이 있습니다.

      티스토리 플러그인 일부는 배포된지 몇년동안 업데이트가 없어서 달라진 웹 환경에 대응이 안되는 것들이 있습니다.

      티스토리 플러그인으로 애드센스를 붙이지 말고, 애드센스 페이지에서 붙여넣는 코드를 가져다 붙여넣기를 해보시기 바랍니다.

    • 그런긴한데 apost님 쓰시는 스킨도 동일한 현상이길래 글 올리게 됐습니다.

    • 생각해보니 배포하시는 스킨이랑 구글광고랑은 무관한데 제가 간밤에 괜한 소리를 한 것 같습니다.

      스킨 만드실 때 참고되실까 했는데 오지랖이었던 것 같아요. 사과드립니다.

    • 그럴거 까지는 아니구요...

      님 말고도 비슷한 문제로 같은 질문이 종종 올라옵니다.

      현재 배포하는 스킨들은 이런 질문들 덕분에 호환성이 많이 개선되어 배포가 되고 있는 것이고, 또 문제의 원인에 대한 대응이 빠르게 될 수 있는 기반이 된 것입니다.

      다른 스킨 이용자들은 이런 댓글과 해결책 덕분에 같은 질문과 시행착오를 피해갈 수 있는 것입니다.

      사소한 댓글이지만 이 스킨을 쓰는 누군가에게는 같은 문제로 골머리를 앓고 있었던 문제를 해결해주는 힌트가 될 수도 있습니다.

      현재 티스토리에서 제공하는 애드센스 플러그인은 반응형 웹이 일반화되기 전에 배포하던 티스토리 스킨을 기준으로 제작된 것입니다.
      고정 크기값이 코드에 포함되기 때문에 반응형 웹 스킨에 적용할 경우 레이아웃상의 배치 문제들이 나타날 수가 있습니다.

      해당 플러그인은 현재 티스토리가 배포하는 공식 스킨에서도 이런저런 자잘한 충돌 문제가 있습니다.

      그래서 가능하면 반응형 웹 지원이 잘되는 구글이 애드센스 코드를 가져다 쓰는 것을 추천합니다.

      댓글은 항상 감사할 따름입니다.

    • 문득 광고 때문에 블로그를 하나 있나 싶을 정도로 그 날 하루는 구글 애드센스가 뭔가 싶더라구요. 열을 식히고 나니까 죄송한 생각이 들어서 사과하러 갔었습니다. ㅎㅎㅎ

      없는 지식으로 명절내내 쥐어짜다가 포기한 게 두가지입니다.

      1. 네비게이션 메뉴 버튼을 하단에 배치하는 것이랑

      2. 사이드바 1단 숨김과 프로필 숨김과 상관없이 검색 버튼 헤더에 항상 떠있게 하기

      입니다. 정말 하루를 노가다로 수정해봤는데 안되더라구요.

      가능한다면 한 번 더 답변 부탁드리겠습니다.

    • 1.
      아마도 모바일 메뉴 버튼을 말하는거 같은데 보통 모바일 디자인 레이아웃에서는 좌상단에 버튼이 있는 것을 추천합니다.
      좌하단으로 내려가면 메뉴를 방문자들이 못찾는 경우가 생깁니다.
      그래도 옮기고 싶으시면...
      스킨 원본기준
      style.css에
      329행
      .mobile-menu {
      속성중에
      top: 10px;
      ->
      bottom: 10px;
      로 바꿔주면 좌하단에 고정으로 붙습니다.
      이렇게 하면 우하단의 스크롤탑 화살표랑 크기가 안맞아서 어색해지는데...
      1204행
      .btn-top {
      클래스 속성의
      width: 56px; -> 46px;
      height: 56px -> 46px;
      로 줄여주고
      그 밑의 1216행
      .btn-top i {
      클래스의
      padding: 10px; -> 5px;
      로 줄여주면 비슷하게 맞춰집니다.


      2.
      2456행의
      .narrow-header #header {

      에 아래 속성 2개를 추가

      max-width: 970px;
      margin: 0 auto;

      151행
      #header > .nav {

      클래스에 아래 속성 3개를 추가
      position: fixed;
      background-color: rgba(0,0,0,0.75);
      z-index: 999;

      하면 탑의 메뉴아이콘과 검색 아이콘이 모바일처럼 상단에 고정됩니다.

    • 답변 감사합니다. 상세하게 적어주셔서 별문제 없이 잘 해결했습니다. (2번 검색 버튼 항상 보이기는 안되는 것 같아서 포기 ^^)

      적어주신 내용을 보니, 멋모르는 제가 어찌 고쳐서 해결할 수 있는게 아니었네요.

      좋은 스킨이랑 친절한 답변으로 만족스로운 스킨을 얻은 것 같습니다. 감사합니다.

  • 애쓰신 덕에 블로그를 한층 업그레이드 할 수 있겠습니다. !
    감사합니다. !


닫기