본문 바로가기

티스토리스킨/포토블로그 스킨

티스토리 스킨 - 반응형 심플포토블로그4 몬드리안 티스토리 스킨 배포합니다.

스킨명 : 반응형 심플포토블로그4 몬드리안 티스토리 스킨


- HTML5 표준 CSS 그리드로 제작된 몬드리안 타일 스타일의 독특한 포토블로그 스킨입니다.


- 마이크로소프트 인터넷익스플로러는 지원하지 않습니다.(엣지 브라우저는 지원)

  해당 브라우저 호환성이 꼭 필요한 분은 다른 스킨을 사용하시기 바랍니다.


- 스킨에 포함된 index.xml 설정 파일을 반드시 업로드해야 스킨이 적용됩니다.


인터넷 익스플로러 호환성이 있는 다른 포토블로그들


->반응형 심플포토블로그1 보기


->반응형 심플포토블로그2 보기


->반응형 심플포토블로그3 보기




몬드리안 타일 모양으로 배치되는 포토블로그 스킨입니다.

페이지 단위 보기, 덧붙여 더보기 모두 지원합니다.


사이드바 항목 전체 지원, 메인 커버 페이지 지원합니다.




4가지 타일 형태를 지원합니다. 추가 옵션 설정에서 타일 모양을 설정할 수 있습니다.

타일 변경시 타일 타입에 따라 목록의 페이지당 표시 아이템(글) 갯수도 함께 변경해야 합니다.







몬드리안 타일 모양의 커버 페이지를 지원합니다. 

스킨 설정에서 커버 페이지를 켜거나 끌 수 있으며, 커버에 표시할 글을 직접 선택할 수 있습니다.













_주의사항


- 검색 결과, 또는 카테고리에 글이 없을 경우 빈 화면이 출력되며, 타일셋 영역만큼 공간을 차지합니다.





_설치안내


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


2. images 폴더 안에 있는 모든 파일을 업로드 해야 합니다.(이미지 파일 포함).


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

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


4. 타이틀 왼쪽의 격자모양 아이콘을 삭제하려면 style.css 파일의 223~233행을 삭제하면 됩니다.

추가로 아이콘 오른쪽과 타이틀의 간격을 주기위해 타이틀 왼쪽에 여백이 약간 있습니다. 221행 끝에 20px 를 0 으로 변경해주면 타이틀이 깨끗하게 센터로 갑니다.


5. 썸네일 마우스 오버시에 제목 외에 날짜를 표시하지 않도록 하려면 skin.html 246 행을 삭제하면 됩니다.



038_photoblog4_mondrian.zip


스킨 설치 방법



  • 비밀댓글입니다

  • 비밀댓글입니다

    • 스킨 원본 기준
      style.css 파일의
      223~233행을 삭제하면 됩니다.

      추가로 좀 더 만지자면

      옆 타이틀과 간격을 주기위해 타이틀 왼쪽에 여백이 약간 있습니다.

      221행 끝에 20px 를 0 으로 변경해주면
      타이틀이 깨끗하게 센터로 갑니다.

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 1.
      모바일 타이틀 영문 잘림.
      style.css 1975행
      line-height: 1.3;
      을 1.3 -> 1 로 변경하거나
      해당 행을 삭제하면 됩니다.
      한글 제목 기준으로 스킨이 제작되어 있어서 일부 영문 글꼴에서는 베이스라인 문제로 잘려보이는 것으로 보입니다.
      배포판에는 반영을 했습니다.

      2.
      마우스오버 날자 삭제
      skin.html 246행
      <span class="date"></span>
      을 지우면 마우스 오버시 날짜가 사라집니다.

  • https://testskins.tistory.com/
    저의 스킨테스트 블로그에 적용시켜봤습니다.
    상단 카테고리의 하위 카테고리로 커서를 옮겨가기가 무척 어렵습니다.
    마우스를 하위메뉴로 옮기면 금방 사라집니다.

    • 가로 긴 1차 메뉴 높이가 43px로 설정되어 있는데 이걸 높이를 줄이시면서 1차 메뉴와 펼쳐지는 2차 메뉴 사이에 공백이 생겼습니다.

      1차 메뉴, 또는 2차 메뉴 영역에서 마우스 커서가 벗어나면 2차 메뉴가 자동으로 사라집니다.

      스킨은 1차 메뉴에서 2차메뉴가 정확하게 겹쳐지게 위치가 잡혀있어서 1차 메뉴에서 2차메뉴로 자연스럽게 마우스 커서가 이동할 수 있습니다.

      쉬운 방법으로 접근하면 2차 메뉴 표시 위치를 줄인 1차메뉴 높이 만큼 위로 끌어다 붙여주면 됩니다.

      스킨 원본 기준 style.css 380행
      margin: 42px 0 0 -30px;

      요기서 42px를 34px로 변경하면 2차메뉴가 1차메뉴에 딱 겹쳐지게 위로 올라가 붙게 됩니다.

      이렇게 하면 마우스 커서가 자연스럽게 2차 메뉴로 옮겨가게 됩니다.

      스킨을 수정해서 행이 바뀌었을 경우
      "margin: 42px" 로 검색하면 1개만 나옵니다.

    • 그랬군요.
      수정을 하고나니 잘 돌아갑니다.
      감사합니다.^^

    • 저의 메인블로그
      wing91.tistory.com에 적용했습니다.

    • 사진첩을 운영하시나 보네요?
      보기 좋습니다.^^/

    • 예, 사진 찍기를 좋아해서요....^^

  • 또 질문을 올리게 되는군요....^^
    님의 이 스킨을 제 'FOTOZONE' 블로그에 적용을 했었는데,
    윈도우 일스플로러 11에서 썸네일이 안 보이는 현상을 뒤늦게 발견하고 스킨을 바꿨습니다.
    왜 이런 현상이 발생했는지 궁금하군요.

    저의 스킨테스트 블로그 주소입니다.
    https://testskins.tistory.com/

  • 비밀댓글입니다

    • script.js 파일을 확인해보세요
      다운로드받은 스킨 images 폴더에 있습니다.

      "더보기" 로 검새하면 1개 나옵니다.
      해당 기능은 자바스크립트로 처리되는 기능이어서 script.js 에 있습니다.