본문 바로가기

티스토리스킨/포토블로그 스킨

티스토리 스킨 - 반응형 그리드 블랙&화이트 티스토리 스킨 배포합니다.

스킨명 : 반응형 그리드 블랙&화이트 티스토리 스킨




사이드바 위젯과 프로필 이미지가 표시되지 않는 텍스트 중심읜 단색 스킨입니다.


메인화면 전체 컬러가 흑백으로 보이도록 제작했습니다.


왼쪽 사이드바에는 카테고리 및 블로그 방문자들이 이용하는데 필요한 기능들만이 표시됩니다.


목록 썸네일 이미지들은 흑백(그레이스케일)로 표시되며, 마우스 오버를 하면 컬러로 변하면서 110% 큰 이미지로 확대됩니다.

모바일에서는 스크롤되면서 현재 폰 안에 보이는 이미지만 컬러보 확대되어 보입니다.


썸네일 이미지 크기는 400px x 400px로 기본 설정되어 있습니다.


사이드바 위젯이 없고, 썸네일 이미지를 조금 작게 설정했기 때문에 조금 더 메인 화면 로딩 속도가 빠릅니다.


글 내용 보기 화면은 100% 너비로 설정되어 있습니다.


글 내용보기 너비를 에디터 너비로 보이도록 설정하려면 

CSS(style.css) 파일을 연 후


142행을


.area_view {color:#5c5c5c;word-wrap: break-word;width:820px;margin:0 auto;}


이렇게 변경하면 됩니다.


width:[에디터너비]px - 뒤에 붙은 숫자값을 블로그 환경설정에서 설정한 에디터 너비값으로 변경하면 됩니다.

margin:0 auto; - 글 내용을 센터 정렬을 해서 브라우저 센터에 오도록 합니다. 제외하면 왼쪽 사이드바쪽으로 글 내용이 왼쪽 정렬됩니다.


스킨 미리보기


* 미리보기시 브라우저 창 크기를 줄이면 모바일 반응형 화면을 확인할 수 있습니다.


-------------------------------------

1.0.2 Patch - 왼쪽 고정 메뉴 스크롤 지원(데스크탑, 모바일 모두 지원), 모바일 블로그 타이틀 클릭해 홈으로 가도록 링크 추가

1.0.1 Patch - 이웃추가 링크에 버그가 있어 패치되었습니다.

-------------------------------------


!알림

------------------

흑백 효과를 주는 CSS 필터가 인터넷익스플로러에서는 지원되지 않아 기본 표시 이미지가 흑백이 아닌 컬러로 보입니다.

016_reactive_grid_blackwhite_1.0.2.zip



글쓰기/방명록/RSS/이웃추가 등의 커멘드를 사이드바 왼쪽 하단에 폰트어썸 아이콘으로 고정시킨 패치버전 스킨입니다.

fixedicon_patch.zip




설치 안내


1. 썸네일 기본 색상이 컬러로 표시되도록 하려면 

style.css 255행의

.list_content .thumbnail_post img

클래스 속성중 


filter: saturate(0%);

-webkit-filter: satureate(0%);


을 삭제하면 컬러 이미지로 표시됩니다.



  • 멋진 스킨이에요 !!!

  • 감사합니다.^^;

  • 참 멋진 스킨입니다. ^^
    그런데요.. 제 컴이 이상해서 그런지는 몰라도, 썸네일들이 칼러로 나오는데요..
    제가 뭘 잘못 건드린 걸까요?

    • css에 이미지 필터를 쓰는 모든 효과는 구버전 브라우저에서는 지원되지 않습니다.
      인터넷 익스플로러 11이하는 지원되지 않습니다.
      나머지 웹브라우저는 다 지원됩니다.
      크롬등에서 확인했는데도 칼라로 나온다면, 자바스크립트 파일 업로드 여부를 확인해보시고, 업로드가 정상적으로 된거라면 웹브라우저 캐시를 소거해보시기 바랍니다.

    • BSUday 2018.10.23 16:10 댓글주소 수정/삭제

      말씀하신 대로 확인해 보니까
      모바일, 크롬에서는 정상적으로 흑백으로 뜹니다.
      그런데 익스플로러는 안 되네요.
      제거 쓰는 익스클로러는 11입니다. 그래도 안 되네요. 쿠키도 삭제했는데도 안 되네요.

    • 인터넷익스플로러 11이하는 11 포함입니다. IE를 제외한 나머지 브라우저들은 다 지원됩니다.
      2013년 나온 이후로 업데이트가 전혀 안되었기 때문에 그 이후 확정된 css들은 지원이 되지 않습니다.
      호환성이 있는 다른 스킨을 찾아보시는게 맞을 것 같습니다.

    • BSUday 2018.10.23 16:46 댓글주소 수정/삭제

      아 그렇군요. 알겠습니다.
      해서, 제가 운영하는 곳에서는 <반응형 그리드 1단 940>을 그대로 유지하기로 했습니다. 그림자 넣어서 말이죠.
      잘 사용하고 있습니다. 감사합니다.

  • 비밀댓글입니다

    • css 파일 여시면
      98행 - 전체카테고리
      101행 - 1뎁스 카테고리
      103행 - 2뎁스 카테고리
      입니다.

      98행, 101행은 font-size:17px 된 것을 늘리거나 줄이시면 됩니다.

      103행은 전체 기본 크기인 15px를 그대로 사용하고 있습니다.
      font-size:15px 를 추가하면 동일한 크기가 되고, 변경하시려면 숫자를 조정해서 사용하시면 됩니다.

      모바일 대응 메뉴는
      339행, 340행, 342행에 동일한 내용이 있습니다.
      모바일 화면 메뉴의 글자 크기는 여기서 조정하면 됩니다.

      썸네일 이미지는
      html 파일 여시고
      C400x400
      문자열을 검색해서 찾으신 후
      이걸 C300x300 과 같이 변경하시면 300px 크기로 썸네일이 변경됩니다.
      반드시 C는 대문자로 입력하셔야 합니다.

    • 2018.10.31 09:01 댓글주소 수정/삭제

      비밀댓글입니다

    • 구조상 애초에 갯수 가변으로 사용자가 커스텀 할 수 있게 css가 만들어져 있어 수정은 가능합니다.

      다만 한줄에 3개를 붙이면 목록 총 갯수가 6의 배수가 되어야 한줄에 2개 1개 표시될때 끝에 1개가 남는 어정쩡한 모양을 피할 수 있는 점은 감안을 하셔야 합니다.

      css 파일 246행
      wdith:23%;

      width: 31.3333%;
      으로 변경하시면 한줄에 3개씩 나옵니다.

  • 스킨 배포해주셔서 정말 유용하게 잘 쓰고 있습니다. 정말 감사드립니다. 한가지 문의사항이 있는데, 혹시 글쓰기, 방명록, RSS, 이웃추가, 관리 아이콘을 좌측 하단으로 옮기고 싶은데 방법좀 부탁드리겠습니다.

    • 질문하신 의도가
      https://blogpack.tistory.com/22
      이 스킨 왼쪽 하단 아이콘 같은걸 원하시는 거면

      skin.html 파일의
      68~71 행을

      <li><a href="[샵샵_blog_link_샵샵]" title="홈"><i class="fa fa-home fa-2x"></i></a></li>
      <li><a href="[샵샵_owner_url_샵샵]/entry/post" title="글쓰기"><i class="fa fa-pencil-square-o fa-2x"></i></a></li>
      <li><a href="[샵샵_guestbook_link_샵샵]" title="방명록"><i class="fa fa-address-book-o fa-2x"></i></a></li>
      <li><a href="[샵샵_rss_url_샵샵]" title="RSS"><i class="fa fa-rss fa-2x"></i></a></li>
      <li><a href="#" title="티스토리친구하기" onclick="window.open('toolbar/popup/link','','width=500,height=520');"><i class="fa fa-user-plus fa-2x"></i></a></li>
      <li><a href="[샵샵_owner_url_샵샵]" title="관리"><i class="fa fa-cogs fa-2x"></i></a></li>


      으로 대체
      (아이콘이 6개이므로 불필요한 행은 지우시면 됩니다.)

      style.css 파일의
      48행을
      .area_head{position:fixed;left:0;top:0;width:250px;min-width:250px;z-index:1000;height:100%;}
      로 대체
      (기존과 동일하고 맨뒤에 height:100%; 만 추가됨)

      126~128행을
      .list_control_wrap{position:absolute;bottom:0;width:100%;padding:10px 0 0 0;margin:0;text-align:center;height:40px;}
      .list_control{padding:0}
      .navi_on .list_control {left:1px;margin-left:0;}
      .list_control li{display:inline;text-align:center;padding:20px 4px 10px 4px;}
      .list_control li i{font-size:20px;color:#3e3e3e}
      .list_control li a{width:22px;height:22px;margin:0 4px 0 4px}
      으로 대체

      하면 왼쪽 하단에 아이콘들이 고정되어 표시됩니다.

      * 표시 행수는 수정전 최초의 스킨 CSS 파일 내용을 기준으로 한 행입니다.

      모바일 화면은
      style.css 파일의

      310행
      .list_control {display:none}
      앞이나 뒤에
      .list_control_wrap{display:none}
      추가(관리상 편의를 위해 관련된 것 인근에 위치시킴)

      316행의
      height:50px;
      속성값을
      height:100%;
      로 수정

      326행
      .navi_on .area_head .list_control_wrap{display:block}

      .navi_on .area_head .list_control_wrap{display:block;bottom:0;}
      .navi_on .area_head .list_control_wrap i{color:#141212;}
      으로 대체

      하면 모바일에서도 왼쪽 하단에 고정된 아이콘이 표시됩니다.

      다만, 이 아이콘들이 모바일 대응이 되지 않는 티스토리 기능으로 이동하기 대문에 모바일에 이 버튼이 표시되는게 그렇게 적합하지는 않습니다.

      모바일 화면에서 이 아이콘들이 표시되지 않게 하려면
      326행에 추가된
      .list_control_wrap{display:block;bottom:0;}
      을 삭제하면 됩니다.

  • 웨일더스트님, 바로 적용해서 6개 아이콘을 만들었습니다. 그런데 아이콘을 클릭하면 모두 오류가 나네요ㅠ 혹시 왜 그럴까요? 바쁘신데, 한번만 더 확인해주시면 정망 감사하겠습니다.

    • 티스토리 댓글에는 티스토리 치환자를 쓸 수 없게 막혀있네요. 깜박하고 그냥 소스를 복붙해서 댓글을 달아드렸네요.
      하이퍼링크에 붙은 치환자가 모두 삭제되서 에러가 나는 것입니다.

      위에 html 코드 부분에 "샵샵" 이라고 된걸 "##" 으로 수정해서 붙여넣기 하시면 정상 작동할 겁니다.

      그리고
      아얘 왼쪽하단에 아이콘으로 고정시키는 패치버전 스킨을 따로 패키징 해서 올려드렸습니다.

      위쪽 스킨 설명 보시면 fixedicon_patch.zip
      링크가 있습니다.
      다운로드 받아서 쓰시면 패치된 내용이 적용됩니다.
      패치버전 소스 보시고 설명에 있는 위치에서 필요한 부분만 따서 써도 됩니다.

  • 적용완료했습니다. 정말 감사합니다. 최고세요

    • 위에 댓글로 스킨 수정 방법 알려드린 내용이 모바일에서는 대응이 되지 않습니다.(모바일 화면 레이아웃 구성하는 CSS 부분도 일부 수정을 해야 합니다.)

      위에 댓글로 알려드린 내용만 수정하면
      CSS 값이 맞지 않아 모바일에서 좌상단 햄버거 아이콘 클릭시 사이드 메뉴가 펼쳐지지 않습니다.

      모바일에서 추가로 수정할 내용을 위 댓글에 추가했으므로 추가된 모바일 내용을 확인해서 수정하시기 바랍니다.

      글 본문의 패치 스킨 압축 파일(fixedicon_patch.zip)에는 모바일 대응까지 반영된 CSS가 포함되어 있으므로 이걸 다운로드 받아 덮어 쓰셔도 됩니다.

  • 안녕하세요 웨일더스트님, 질문 있어서 다시 한번 문의 드립니다.

    1. 페이지 맨 하단의 카테고리 '관련글'을 보면 저는 검정색으로 레터가 나와서 식별이 어렵습니다. 더스트님 블로그 확인해보니 화이트로 깔끔하게 잘 나오는데 패치 방법 있을까요?
    2. 이제 포스팅 수가 어느 정도 쌓여서 광고를 삽입해 수익화를 고려중입니다. 애드센스를 비롯해 다른 광고 배너를 삽입하는데 스킨 밸런스에 문제 없을지 문의 드립니다.

    읽어주셔서 감사하고 너무 기초적인 질문 드리는 것 같아 항상 미안한 마음입니다.


    • 1. 패치된 최종 버전 기준으로
      style.css
      193행에

      .list_related .thumb_type .txt_related {color:#141212}

      가 있습니다. 검색해서 찾아도 됩니다.

      color:#141212 -> color:#fff

      로 하면 텍스트가 흰색으로 되면서 잘 보일겁니다.

      2. 애드센스 기준이라면 광고 붙이는데 문제 없습니다. 티스토리 가이드라인에 따라 제작된 스킨이기 때문에 티스토리 위젯으로 애드센스 붙여도 잘 붙을겁니다.

  • 적용했더니 흰색으로 잘 나옵니다. 감사합니다. 더스트님 최고!

  • 비밀댓글입니다

    • 스킨 1.0.2 패치가 올라갔습니다.
      패치버전을 다운받아 설치하시면 불편한 점이 개선됩니다.

      - 데스크탑, 모바일 화면 모두 왼쪽 메뉴 영역 스크롤이 지원됩니다.

      - 모바일 화면 탑 블로그 타이틀 영역에 블로그 홈으로 가기 링크가 추가되었습니다.

      스킨이 구버전 티스토리 스킨 구조에 따른 것이라 이런 저런 제약이 좀 있고 구조를 짜기가 쉽지 않은 면이 있습니다.

  • 스킨 잘 사용하고 있습니다. 감사합니다.
    흑백이 아닌 일반 컬러버젼으로 나오게 할려면 어떻게 수정해야하나요?

    • style.css 255행의
      filter: saturate(0%);
      -webkit-filter: satureate(0%);
      두개를 삭제하면 이미지만 컬러로 표시되고 나머지 액션들은 그대로 유지됩니다.

      마우스 호버시 이미지 채도가 1.1배 높게 표시되는데
      이것도 불편하면
      256행의

      -webkit-filter: saturate(110%) contrast(120%); /* Safari 6.0 - 9.0 */filter: saturate(110%) contrast(120%)
      요걸 지우시면 됩니다.

  • 스킨 제가 딱 원하던 디자인인데 정말 감사합니다.
    혹시 제가 왼쪽 블로그 이름 아래에 제 로고이미지를 넣고 싶은데,
    방법을 알려주시면 감사드리겠습니다~

    • 스킨 원본 기준
      skin.html
      75~76행 사이에

      <div class="customlogo"><img src="./images/사용할로고.jpg"></div>

      이렇게 사용할 로고 이미지를 붙여넣고..

      style.css 에 .customlogo 클래스를 정의해주면

      .customlogo{
      width: 220px;
      text-align: center;
      margin: 15px auto;
      }

      이웃추가 하단에 로고가 센터 정렬로 붙게 됩니다.

      아마도 좌측 최하단에 고정시키고 싶을 수도 있는데 그렇게 하면 작은 화면에서는 좌측 메뉴가 가려지는 경우가 나올 수 있습니다.

      그래도 붙이고 싶다면
      .customlogo {
      width: 220px;
      text-align: center;
      margin: 15px;
      position: absolute;
      bottom: 20px;
      }

      이정도가 가능할 겁니다.

    • 감사합니다~ ^ ^

  • 인터 2019.05.21 11:40 댓글주소 수정/삭제 댓글쓰기

    해당 스킨 너무 맘에들고 정말 감사하게 잘 쓰고 있습니다!
    다만 한가지 여쭤볼게 있는데 ㅠㅠ
    좌측 카테고리가 화면을 넘어가면 스크롤이 생기지 않아서 삽입하려고 하는데
    문의드려요 ...

    • 질문하신 내용이 왼쪽 사이드바 내용이 넘쳐서 안보이는게 맞으면
      왼쪽 메뉴 내용이 넘치면 스크롤이 표시 되도록 패치가 되어 있습니다.
      스킨을 그전에 다운받아 설치하신거면 다시 다운받아 설치하면 왼쪽 사이드바 내용이 넘치면 스크롤바가 자동으로 생깁니다.
      css만 수정하려면
      style.css
      49행에
      overflow-y: auto;
      속성을 추가해주면 됩니다.

  • 비밀댓글입니다

    • 1. 개수 변경은 안되는 것으로 알고 있습니다.

      2. 스킨 원본 기준 skin.html 에서
      114행을 지우시면 글 내용 미리보기가 목록에서 사라집니다.

    • 2019.06.24 23:08 댓글주소 수정/삭제

      비밀댓글입니다

    • 더보기는 어떤 더보기를 말하는 건가요?
      이 스킨에는 더 보기 버튼이라는게 없습니다.
      적용하신 블로그 url을 알려주시면 확인해드리겠습니다.

    • 해당 글에 들어가봤는데 깨지는 부분은 없어보입니다.

      더보기라는게 스토리 대사 영역을 펼치는걸 말하는건지는 모르겠는데, ie11, 크롬 모두에서 정상적으로 펼쳐져 출력됩니다.

      게시믈 내용과 이미지가 지정해둔 범위 바깥으로 튀어나간다는게 무슨뜻인지 사용환경과 어떤걸 클릭하면 어떤 형태로 깨지는지를 알려주시기 바랍니다.

    • 2019.06.29 06:28 댓글주소 수정/삭제

      비밀댓글입니다

    • 해결되서 다행입니다. =^^=/