본문 바로가기

티스토리스킨/심플형 스킨

티스토리 스킨 - 반응형 그리드 1단 레이아웃 티스토리 스킨 배포합니다.

스킨명 : 반응형 그리드 1단 레이아웃 티스토리 스킨




단정하고 심플한 사진 중심 블로그를 위한 반응형 스킨입니다.

컬러 사용을 최대한 배제했고, 사이드바 메뉴와 검색 기능을 히든으로 감춰서 최대한 심플한 느낌을 낼 수 있도록 했습니다.


메인 썸네일 목록의 그림자 효과를 빼려면 

CSS파일(style.css)의 264, 265, 266 행을 삭제하면 됩니다.


사이드바 모듈 갯수는 4개단위(4개, 8개, 12개)로 표시가 되도록 하는 것을 추천합니다.

레이아웃 구조상 브라우저 크기가 줄어드는데 따라 4개, 2개, 1개 순서로 한줄에 표시되는 사이드바 모듈의 갯수가 자동 변경됩니다.


스킨 미리보기


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


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

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

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

reactive_grid_single1_1.0.2_.zip


스킨 다운로드
스킨 설치 방법



레이아웃 너비 변경하기

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

스킨 적용시 100% 너비가 아닌 고정된 너비의 작은 레이아웃을 원할 경우

CSS(style.css) 파일을 연 후


1.

47행을


.wrap_skin{position:relative;width:820px;margin:0 auto;}


이렇게 변경하면 레이아웃 너비가 820px로 제한된 센터 정렬된 레이아웃이 됩니다.

목록보기 및 내용보기까지 전체 블로그 레이아웃이 820px 너비로 맞춰집니다.

원하는 너비로 변경하려면 820 값을 변경하면 됩니다.


2.

그리고 이전 구버전을 다운로드한 분은 

309행의 min-width 로 된 너비 속성명을 width 로 아래와 같이 변경해야 모바일에서 강제 지정한 데스크톱 너비가 적용되지 않습니다.


  .wrap_skin {width:100%;padding-left:0}


3.

데스크톱 레이아웃의 본문 내용만 너비를 조정해서 사용하려면 

160행의 내용을 


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


이렇게 변경하면 본문 글 보기화면의 본문 내용만 820px 너비로 센터 정렬되어 적용됩니다.(본문에는 다른글보기 박스도 함께 포함되기 때문에 다른글보기 박스도 820px로 조정되는 점은 알아두어야 합니다.)



레이아웃 배경색 변경하기

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

레이아웃 배경색을 다른 색상으로 변경하려면 


20행의 컬러값을 다른 것으로 변경하면 됩니다.


body {background:#f8f5f2;-webkit-text-size-adjust:none}


예를 들어 f8f5f2 (약간 붉은톤인 베이지) 를 ffffff 로 변경하면 흰색 배경이 됩니다.

또는 f2f5f8 을 적용하면 약간 푸른톤인 베이지 색상이 됩니다.


16진수 컬러 색상에 익숙하지 않은 분은 rgb(255,255,255) 이런식으로 RGB 컬러를 사용해도 되고


CSS 컬러 지정에 익숙하지 않은 분은

구글에서 

css color picker

를 검색하면 검색 결과에 바로 컬러를 찍어서 값을 확인할 수 있는 화면이 표시되므로 이것을 이용해 원하는 컬러 값을 찾으면 됩니다.









  • 비밀댓글입니다

    • 질문하신걸 지금 봤습니다.
      질문하신 내용을 이해를 못했습니다. 마우스 드래그로 화면 분할을 내린다는게 어떤걸 내린다는 건지?

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 스킨 원본 기준
      style.css
      180행

      .area_view .imageblock
      클래스를 보면

      max-width:800px !important;

      속성이 있습니다.
      800px를 원하는 크기로 조정하면 됩니다.
      화면에 다차게 하려면 이 속성을 지우면 됩니다.

  • 비밀댓글입니다

    • 목록 썸네일 이미지는 css로 별도로 건드리지는 않고 티스토리의 치환자 썸네일 생성 방식을 그대로 따라갑니다.

      썸네일 이미지 자체의 크기값을 정해주고 그 크기의 썸네일 이미지가 다운로드되어 목록에 보여집니다.

      skin.html 원본기준
      222행에 보면
      C600x400 가 있습니다.(C는 영문 대문자, 가운데 x는 영문소문자)
      이게 썸네일 크기(픽셀)이고 가로 세로 비율이 유지되는 상태로 원본 이미지가 가운데를 중심으로 크롭되서 목록에 보이게 됩니다.

      썸네일 이미지 생성하는 문법이나 규칙은
      https://apost.kr/167

      요글을 보시면 되고...
      일단은
      C400x400 이나
      C300x400 으로
      값을 바꿔서 원하는 결과에 부합하는지 확인을 해보시기 바랍니다.

      상단을 기준으로는 자를 수 없습니다.
      가능하면 이미지 자체를 업로드할 때 가운데에 표시하기를 원하는 컨텐츠가 있도록 크롭해서 업로드하는게 좋습니다.

      세로로 긴 썸네일을 생성하게 되면 원하는데로 얼굴 중심인 세로로 긴 이미지는 상단에 얼굴이 있어도 다 나오겠지만, 가로 이미지를 대표 이미지로 할 경우 경우에 따라서는 그닥 보기좋게 크롭되지 않는 문제가 생길 수 있습니다.

      티스토리 썸네일 생성 규칙이 모든 가로 세로 픽셀을 지원하는건 아니므로 위에 알려드린 값이 원하는 값이 아니면 본인에 맞는걸 수정해가면서 찾아서 쓰셔야 할 겁니다.

    • 2019.07.23 02:20 댓글주소 수정/삭제

      비밀댓글입니다


닫기