본문 바로가기

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

티스토리 스킨 - 티스토리 공식 Poster 스킨 폰트어썸 벡터아이콘 커스터마이징 버전 스킨 배포합니다.

스킨명 : 티스토리 공식 Poster 스킨 커스터마이징 버전




티스토리 공식 스킨인 Poster 스킨의 비트맵 아이콘들을

오픈소스 벡터 아이콘인 폰트어썸(Font Awesome) 으로 변경한 버전입니다.




기존 공식 Poster 스킨에서 살짝 살짝 레이아웃이 맞지 않던 버그들도 보정되어 있습니다.

images 폴더에는 "script.js" 파일만 있으며, 별도의 아이콘 비트맵 이미지는 더이상 필요하지 않습니다.


Poster 공식 스킨 그대로이기 때문에 커버 적용해서 사용할 수 있습니다.(컬러테마 포함)


비트맵 아이콘과 정확히 일치하는 폰트어썸 아이콘이 없는 경우 최대한 유사한 느낌을 줄 수 있는 아이콘으로 대체했습니다.


아이콘 변경외의 레이아웃 변경은 없습니다.


폰트어썸은 5.6.3 버전입니다.

폰트어썸이 버전 5로 올라가면서 상업용 버전과 무료 배포버전 2가지로 갈라졌고, 무료 배포 버전 아이콘만을 사용합니다.

폰트어썸 아이콘은 HTML소스에 반영하지 않고 모두 CSS로만 반영했습니다.(style.css 파일 참조)

아이콘 변경 작업 등을 하려면 "style.css" 만 수정하면 됩니다.


라이센스나 저작권 등은 티스토리와 그외 원 저작자에게 있습니다.



017_pg_Poster_FontAwesome.zip



커버 기능을 사용하려면 index.xml 파일을 반드시 업로드 해야 합니다.

images 폴더에는 script.js 파일만 있으면 되며, 웹브라우저 캐시가 남는 경우가 있으므로 업로드 후 웹브라우저 캐시를 한번 소거하시기 바랍니다.





  • 비밀댓글입니다

  • 포스터스킨 폰트사이즈 밑 간격을 조절하기 위해 CSS body font-family에서 font-size 및 line-height 를 수정하였지만 본문글에 적용이 안되고 있습니다. 제가 잘못한건지 아니면 적용이 안되는건지 궁금하네요 ㅠ

    • css는 이름 그대로 상위에서 지정한 것이 하위로 상속되지만, 하위에서 개별 속성을 지정한 경우 하위의 속성을 사용하게 됩니다.(상위 속성이 무시됩니다.)

      body 태그에 지정한 것은 하위에 지정한 것이 없는 경우에만 하위 태그들에 적용이 됩니다.

      대부분의 티스토리 스킨은 스킨 각 영역이나 아이템별로 하위 css가 추가로 지정되어 있습니다.
      변경하려는 하위 태그나 클래스 css를 찾아서 변경을 해주셔야 합니다.

  • 비밀댓글입니다

    • 스킨이나 스킨 css 단에서 붙은건 아닌걸로 보이고, 에디터상에서 이미지를 붙이면서 붙은거 같은데

      이미지 태그에

      style="max-width: 860px;"

      코드가 덧붙으면서 모바일에서 크기가 고정되는 현상이 생깁니다.

      에디터에서 html 소스보기를 해서
      위 내용을 검색해서 4개를 삭제하면 모바일에서 이미지가 정상으로 보일겁니다.

    • 정말 감사합니다. 말씀해주신대로 해서 해결되었네요. 근데 이미지 넣을 때마다 style="max-width: 860px;" 이코드가 붙는데 매번 없애주면서 사진을 업로드 해야하는지요?

    • 아마 신에디터를 쓰는거 같은데
      신에디터에서 이미지를 붙이면 이미지가 가운데 정렬이 기본 설정값이 되고, 레이아웃 너비만큼 이미지 최대 크기를 강제로 지정합니다.

      설계상 모바일 대응을 제대로 고려를 하지는 못한 것으로 보이고 설계 컨셉을 스킨단에서 임의로 조정하게 되면, 나중에 티스토리 시스템 패치가 관련해서 나오면 스킨 패치로 인해 다른 문제가 발생할 가능성이 큽니다.

      구지 스킨단에서 패치를 하자면
      style.css 에서

      @media screen and (max-width:1023px) {

      행을 찾아서 그 밑에 행에


      #tt-body-page figure.imageblock img, figure.imageblock img{
      width: 100%;
      }

      이걸 붙여넣으면 반응형 스킨 기준으로 타블렛, 모바일 화면에서 너비가 100%로 강제 조정되면서 넘치는 현상이 해결됩니다.

      앞에서 말한대로 티스토리에서 신에디터 구조나 기반 css를 패치한다거나 하면 다른 문제가 생길 가능성이 있습니다.

      붙여 보시고 사용하는 스킨에 잘 맞으면 쓰면 될 것 같습니다.

  • 포스터 스킨에서 기본 글자색 변경은 불가능한가요?

  • 좋은 소스들을 올려주셔서 정말 감사합니다.
    이 포스터형 스킨에서 하단에 있는 메뉴들을 상단으로 (제목 바로 아래로) 올리는 방법 좀 부탁드립니다. 몇날을 들여다봐도 도대체 어디를 만져야할지 모르겠더라구요..ㅠ

    • 레퍼런스 스킨 관련 문의를 티스토리로 하셔야 합니다.

      레퍼런스 스킨은 제가 만든게 아니라 구조를 잘 모릅니다.

      배포하는 스킨은 레퍼런스 스키넹 사용한 아이콘 이미지를 폰트어썸으로 대체만 해서 배포한 것입니다.


닫기