본문 바로가기

티스토리스킨/레퍼런스 스킨

티스토리 스킨 - 반응형 어포스트 티스토리 스킨 배포합니다.

스킨명: 반응형 어포스트


현재 블로그(apost.kr)에 적용해서 사용하고 있는 스킨 그대로 배포용으로 표준화만 해서 공개합니다.


티스토리 신스킨인 Poster 스킨을 커스터마이징해서 제작했고, 

구글 애드센스와 다음 애드핏이 적용되어 있습니다.


애드센스와 애드핏 키값은 실제 스킨 적용후 반드시 본인 애드센스 및 애드핏 키값으로 변경하시기 바랍니다.


스킨 옵션이나 광고를 어떤 식으로 붙이는지 궁금한 초보 블로거 분들은 다운받아서 참조를 하면 도움이 될 것입니다.


스킨 적용하면 현재 보고 있는 이 블로그와 동일한 블로그가 만들어집니다.



그밖에


- 블로그 최상단에 핫링크를 붙일 수 있습니다. 스킨 옵션으로 표시하거나 끌 수 있습니다.


커버 기능 모두 지원합니다.


- 구글 애드센스와 다음 애드핏이 이 블로그(apost.kr) 그대로 적용되어 있습니다. 스킨 옵션으로 표시하거나 끌 수 있습니다.


- 레이아웃 너비는 1060px 이며, 기본 글쓰기 너비 설정은 860px 입니다.




핫링크 링크 URL 연결은 skin.html 64 ~ 67행의 #과 문자열을 변경하면 됩니다.

핫링크 갯수를 늘리거나 줄이려면 64 ~ 67행의 핫링크 갯수를 복사&붙이기로 갯수를 맞춘 후 100/갯수로 퍼센트 값을 구한 후 (소숫점이 생길 경우 최대 소수점 6자리까지 자름) style.css 의 1675 행에 % 값을 입력해주면 됩니다.








설치 주의사항


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


2. images 폴더 안에 있는 모든 파일을 업로드 해야 합니다.(이미지 파일 포함). 티스토리 신스킨 Poster 에 기반해서 만들어졌기 때문에, 아이콘 표시에 이미지 파일이 필요합니다.


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

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


035_apost.zip


스킨 설치 방법



  • 비밀댓글입니다

  • 비밀댓글입니다

  • 티스토리 댓댓글 장애로 일단 밑에 글을 달아드립니다.
    ---------------------------------------------------------------
    네 당연히 본인이 신청한 검색엔진 본인사이트 인증 키값으로 바꾸셔야 합니다.
    안그러면 검색에서 사이트 인증을 못합니다.

  • 비밀댓글입니다

  • 어제부터 나고 있는 티스토리 시스템 장애입니다. 댓글에 댓글쓰기가 안되고 있습니다.

  • 비밀댓글입니다

    • 사이드바 가변으로 조정하실려면
      민트페이퍼 스킨을 쓰는게 더 낫습니다.
      https://apost.kr/299

      보고 있는 이 스킨 개선해서 만든 버전입니다.

      현재 사이트 스킨도 민트페이퍼를 약간 손봐서 쓰고 있는 것입니다.

  • 안녕하세요 스킨 너무 잘 쓰고 있습니다. 한가지 궁금한게 있는데 웹사이트 logo를 사진으로 변환하고 싶은데 어떻게 하면 되는지 문의를 드리고자 합니다. 좋은 스킨 배포해주셔서 감사합니다. ^^

    • 먼저 로고로 사용할 이미지를 업로드하시고

      skin.html 에서
      [샵샵_title_샵샵] 을 검색해서
      * 샵샵은 ##으로 변경

      [샵샵_title_샵샵]

      <img src="./images/업로드한이미지파일명"/>

      으로 변경

      스킨 원본기준 skin.html 24행에 있습니다.

      로고 이미지 크기를 1:1 이 아니라 임의로 조정하시려면 예를들면

      #header h1 a img{
      width: 200px;
      }
      이런식으로 클래스를 하나 정의해서 style.css 에 붙여넣으면 크기값을 임의로 지정해줄 수 있습니다.

      위치는
      #header h1 a
      클래스가 style.css 126행에 있으니까 이 근처 밑에 적당해 붙여넣으시면 될 것 같습니다.

      이미지 로고 붙이실때는 모바일 화면에서 어떻게 보이는지 고려해서 붙이셔야 합니다.
      로고 이미지가 너부 크면 모바일에서 너무 크게 보일 수 있습니다.

      위 이미지 클래스 정의를 모바일용 미디어 쿼리(style.css)에도 추가로 정의해서 크기를 좀 줄여주면 됩니다.

      기존 텍스트 로고 크기를 지정하는 모바일용 스타일 정의는 style.css 1783행에 정의되어 있습니다.

      요 밑에쯤에 추가로 이미지 크기를 정하는 클래스를 붙여넣어주면 됩니다.

  • 비밀댓글입니다

    • 브라우저 왼쪽끝을 기준으로 광고 위치를 잡아주는 코드인데
      코드 자체는 너비 800짜리 레이아웃 컨텐츠 영역을 기준으로 작성된 것입니다.
      현재 적용한 스킨은 너비가 1200입니다.
      왼쪽끝에서 광고 시작점 위치를 계산하는 식은

      margin_left = (window_size-800)/2+820+"px"

      이고 800 대신 1200을 적용해야 컨텐츠 영역 오른쪽에 광고가 위치합니다.

      margin_left = (window_size-1200)/2+1220+"px"

      대충 이정도일겁니다.

  • 비밀댓글입니다