본문 바로가기

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

티스토리 스킨 - 반응형 그리드 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

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