본문 바로가기

티스토리스킨/반응형2단 스킨

티스토리 스킨 - 반응형 2단 자동차 블로그 티스토리 스킨 배포합니다.

스킨명 : 티스토리 반응형 2단 자동차 블로그

* 2단 구성으로된 정보 제공형 블로그를 제작하기에 좋은 스킨입니다.

자동차블로그나 맛집정보 등 전문적인 블로그를 운영하는데 좋습니다.


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

- 2019-04-28 1.0.1 Patch : 커버 썸네일 갯수가 초과될 경우 레이아웃이 깨지는 현상 해결. 

                                    실제 URL이 아닌 "http://", "https://" 만 있는 경우에도 더보기 링크가 표시되지 않도록 패치.

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


- 사이드바를 스킨 설정에서 왼쪽/오른쪽으로 이동시킬 수 있습니다.


- 스킨 설정의 커버 페이지 구성 기능으로 다양한 커버 레이아웃을 생성할 수 있습니다.


- 카카오맵을 커버페이지에 붙일 수 있습니다.(카카오 개발자 사이트 가입 및 설정 필요)




* 웹브라우저 너비를 변경하면 반응형으로 변경되는 레이아웃을 확인할 수 있습니다.







- 스킨 설정 안내




글목록,글보기 페이징 타입 : 페이징 타입을 지정합니다. "페이지 목록"은 페이지 숫자 리스트로 표현되며, "이전/다음" 은 이전 페이지와 다음페이지를 이동하는 화살표만 표시됩니다. 

글 목록 보기 화면에서는 "목록더보기" 항목이 켜져있을 경우 "페이지 목록"이 지정되어 있어도 "더보기" 버튼이 표시됩니다. 목록더보기 옵션에 우선순위가 있으므로 글 목록에도 "페이지 목록"이 표시되도록 하려면 "목록 더보기" 옵션을 꺼야 합니다.


스킨배경색선택 : 스킨 배경색을 지정합니다.


블로그타이틀컬러선택 : 상단 블로그 타이틀 색상을 지정합니다.


프로필보기 : 상단 프로필 표시 여부를 선택합니다.


SNS아이콘 보기 : 상단 SNS 아이콘 표시 여부를 선택합니다.


카카오맵 사용 : 커버 페이지 카카오맵 표시 여부를 선택합니다. 카카오맵 사용을 선택했어도 커버페이지 항목에 "카카오맵표시" 가 추가되어 있어야 합니다.

카카오맵에 사용할 주소또한 입력되어 있어야 합니다.




- 커버페이지 설정 안내




커버 항목은 다음과 같은 종류가 있습니다.

슬라이더와 카카오맵 커버를 제외하고 나머지 항목은 갯수 제한이 없습니다.


슬라이더 - 스킨 전체에 1개만 있습니다. 추가 생성하면 레이아웃이 깨집니다. 기본 생성된 것을 그냥 사용합니다. 홈페이지 최상단 메인 영역을 차지하는 로테이션 배너입니다.

배너 로테이션 타임은 script.js 23행에서 숫자를 변경하면 됩니다. 5000은 5초입니다.(초*1000)

0을 입력하면 자동 로테이션이 멈춥니다.


이미지 썸네일 리스트 - 하이퍼링크가 있는 썸네일 리스트입니다. 링크는 "더보기" 버튼으로 별도로 표시됩니다. 커버 아이템 갯수는 2, 3, 4, 6, 8개를 사용해야 레이아웃이 정확하게 맞습니다. 1개인 경우는 가로 풀배너를 사용합니다.
"더보기" 버튼은 하이퍼링크 입력값 여부에 따라 자동으로 표시됩니다.



이미지 썸네일 리스트[링크x] - 하이퍼링크 없는 썸네일 리스트입니다. 입력한 타이틀과 내용은 썸네일 이미지 마우스 호버시 표시됩니다.(모바일에서는 기본 표시 상태로 바뀝니다.) 커버 아이템 갯수는 2, 3, 4, 6, 8개를 사용해야 레이아웃이 정확하게 맞습니다. 1개인 경우는 가로 풀배너를 사용합니다.





가로풀배너 - 가로 전체 너비로 표시되는 통 배너입니다. 커버 아이템을 1개만 생성해야 합니다.




카카오맵 표시 - 카카오맵을 표시합니다. 아래 카카오맵 설정 안내와 카아오 개발자 사이트 등록하기를 참조해서 기본 설정을 해야 카카오맵을 화면에 표시할 수 있습니다.




메뉴링크 사이트맵 - 사이트 맨 위에 표시되는 메뉴를 클릭했을 때 이동할 위치를 지정합니다. 타이틀에 사이트맵 링크 ID를 입력합니다.

메뉴 항목별 하이퍼링크에는 "#+링크ID" 를 입력하면 됩니다.

메뉴 하이퍼링크는 skin.html 30 ~ 49행 사이에 위치합니다.


각 커버 항목 왼쪽의 햄버거 아이콘을 드래그하면 커버 항목이 표시되는 순서를 변경할 수 있습니다.






- 카카오맵 설정 안내


A.

카카오맵을 사용하려면 카카오 개발자 사이트에 가입해서 키값을 설정해야 합니다.

아래 별도로 설명된 카카오개발자 사이트에 앱 등록하기를 참조해서 skin.html에 카카오맵을 사용하기 위한 키값을 심어야 합니다.



B.

키값을 심은 후에는 스킨 설정에 들어가서 추가 설정의 카카오맵 사용을 켜고, 지도 검색용 주소와 화면 표시용 주소를 입력합니다.

카카오맵 지도는 주소 기반으로 지도 위치를 표시하기 대문에 반드시 카카오맵에서 검색이 되는 주소만 사용할 수 있습니다.

검색용주소는 반드시 카카오맵에서 검색해서 검색된 주소 결과를 입력해야 됩니다.

화면표시용 주소는 랜딩페이지에 표시되는 카카오맵의 가운데 표시하는 주소입니다. 실제 주소와는 달리 표시하고자 하는 문구를 넣을 수도 있습니다.


화면표시용 주소를 입력하지 않으면 검색용주소로 자동 대체됩니다.





C.

스킨 커버페이지 설정에서 카카오맵 표시 커버를 추가해 적당한 위치에 배치합니다.
(스킨에 기본 설정된 카카오맵 표시를 참조하시기 바랍니다.)








- 티스토리 메뉴 아이콘 감추기


화면 한쪽에 고정으로 표시되는 티스토리 메뉴를 안보이도록 해서 완전히 독립된 홈페이지 처럼 보이도록 만들 수 있습니다.


티스토리 관리자 메뉴 꾸미기 > 메뉴바/구독설정 에서 블로그 메뉴바를 "표시하지 않습니다." , 구독 버튼을 "표시하지 않습니다." 를 선택한 후 "변경사항 저장" 을 누르면 됩니다.










- 카카오 개발자 사이트에 앱 등록하기


1. 카카오 개발자 사이트에 회원가입을 합니다.


https://developers.kakao.com



2. 내 애플리케이션 페이지로 들어가서 새 앱을 만듭니다.


https://developers.kakao.com/apps



새 앱을 사용할 플랫폼으로 웹을 추가하고, JavaScript 키를 복사합니다.






3. skin.html 295행의 기존 키값을 대체해 변경합니다. 


appkey=[복사한앱키를여기에붙여넣음]&libraries=services



4. 사용할 블로그 도메인을 플랫폼 웹에다 추가합니다.(웹을 클릭하면 펼쳐집니다.) 저장 버튼을 눌러 저장합니다.










_설치안내


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.


3. 커버 페이지 구성시 커버 슬라이드는 기본 생성된 1개만 사용해야 합니다. 추가로 생성하면 레이아웃이 깨집니다.


4. 목록과 글보기 상단의 타이틀 배경 이미지는 style.css 의 151행 "./images/header_bg.jpg" 파일명이며, 스킨에 포함된 "images/header_bg.jpg" 파일을 가리킵니다. "header_bg.jpg" 파일은 스킨 설정시 반드시 함께 업로드해야 합니다.

이미지를 변경하려면 같은 파일명으로 이미지를 업로드하면 됩니다.


048_carblog.zip


스킨 설치 방법







  • 안녕하세요 스킨이 맘에 들어 써볼까 해서 적용시켜 보았는데요
    커버에서 슬라이드가 예제 사진처럼 프로필 위에 나오는게 아닌 프로필 옆에 나옵니다 어디를 수정해야할까요?

    https://hyulgoon.tistory.com/

    적용해본곳은 이곳입니다

    그리고 카테고리를 상단이 아닌 옆으로 옮길순 없나요?

    그리고 본문에 그림이 없을시 목록에서 이미없단 사진과 글이 겹쳐서 나옵니다

    • 자바스크립트 파일 업로드가 누락되었습니다.

      images 폴더에 있는 것들을 모두 업로드 하셔야 합니다. *.jpg, script.js 파일들...

      업로드 후 웹브라우저 캐시 소거 한번 하시고...

      카메고리 메뉴는 디자인 컨셉상 상단에 위치해 있는 것입니다. 옮기는거야 가능은 하겠지만 손을 좀 많이 봐야 할 겁니다.

    • 답변감사합니다

      이뿌게 잘나오네요

      그런데 한가지 더 궁굼한것이 슬라이더에서 글제목 위에 카테고리는 지울려면 어디를 손봐야 할지 여쭈어도 될까요?

    • skin.html 원본기준
      264~266행을 지우거나 리마크 처리하면 사라집니다.

      사이드바와 컨텐츠 영역 상단 높이가 맞지 않는데
      .sidebar 클래스의
      margin-top: 30px;
      행을 지우면 높이가 맞습니다.
      style.css 원본기준 457행입니다.

    • 계속질문드려 죄송한데요

      가로풀배너 1개 이상일때 화면이 깨지는거 같네요

      설명서 보니 1개만 쓰라고 되어 있군요[;;

      이미지썸 4개 이상일때 화면배열이 이상해집니다

      이미지썸링크X 도 마찬가지이구요

      이건 이미지가 없어서 인거 같아 임시로 이미지를 다 넣어봤는데도

      4개 이상일때 그담줄 부터 배열이 깨지는거 같습니다

      그리고 사이트맵 ? 이건 어떻게 작동되는건지 모르겠네요

      넣어도 안넣을때랑 똑같이 보여서요

      캐시 다 삭제해도 마찬가지였구요

      테스트 브라우저는 크롬 최신버전입니다

    • 가로 풀배너는 원래 커버 아이템을 1개만 가지게 되어있습니다. 그 외의 상황에 대해서는 대응이 되지 않습니다.

      이미지썸네일 레이아웃이 밀리는건 버그입니다. 5개 이상 홀수개 처리에 대한 대응 css가 누락되어 있습니다.
      패치 버전이 올라갔습니다.
      style.css 파일을 덮어쓰면 됩니다.

      사이트맵은 상단 메뉴를 카테고리가 아닌 홈페이지처럼 앵커로 연결하는 경우에 사용하는 것입니다.
      상단 메뉴를 카테고리로 사용할 경우에는 필요 없습니다.
      불필요한 혼동을 주는 것 같아 패치버전에서는 제외 했습니다.

    • 패치 적용하니 제대로 잘나오네요 감사합니다 ^^;

      바램이 있다면 새로운 커버 기능들이 다 들어 있는 그런 스킨들이 나왔으면 좋겠네요

      뭐 욕심일진 모르겠지만요 ^^

      좀더 써보고 현재 사용중인 블로그에 적용할지 봐야겠네요 멋진 스킨 감사합니다 ^^