본문 바로가기

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

티스토리 스킨 - 반응형 포토갤러리2 티스토리 스킨 배포합니다.

스킨명 : 반응형 포토갤러리2 티스토리 스킨




메이슨리로 제작한 포토갤러리 스킨입니다.


브라우저 너비가 변경되는데 따라 자동으로 한행에 표시되는 썸네일 갯수가 조정됩니다.


이미지만 압축적으로 여백없이 모아서 보여주고, 이미지 위에 마우스 오버를 하면 포스트 썸네일 제목과 텍스트가 보이는 형태입니다.


모바일에서는 목록을 스크롤하면 현재 화면 가운데에 위치한 썸네일만 제목과 텍스트가 자동으로 보입니다.


알림!

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

메이슨리 기반의 포토갤러리 스킨은 글에 첨부된 이미지가 없을 경우 해당 글의 미리보기가 메인 목록에 출력되지 않습니다.

사진형 블로그를 운영하거나 포스트에 이미지가 첨부되는 글만 작성하는 경우에 적용하시기 바랍니다.

또한 스킨 특성상 구버전 브라우저(인터넷익스플로러 10 이하)에서는 마우스 오버시 애니메이션 효과가 적용되지 않습니다.


스킨 미리보기


* 미리보기시 브라우저 창 크기를 줄이면 모바일 반응형 화면을 확인할 수 있습니다.


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

1.0.4 Patch - 카테고리 목록에 글갯수 및 새글 아이콘이 감춤처리되었던 것을 해제.

1.0.3 Patch - 인터넷익스플로러 호환성이 개선되어 마우스 오버시 텍스트가 정상적으로 보입니다.

1.0.2 Patch - css 파일의 본문 글보기 좌우 여백을 주는 부분에 버그가 있어 패치되었습니다.

1.0.1 Patch - 이웃추가 링크에 버그가 있어 패치되었습니다.

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


reactive_photogallery2_masonry_1.0.4.zip



스킨 다운로드
스킨 설치 방법




  • 비밀댓글입니다

    • 스킨 확인 결과 오타가 있던거 같습니다.
      스킨패치를 하면서 숫자 조정을 한다는게...

      좌측으로 쏠렸다는 말은 아마도 글내용보기에서 좌우 여백없이 붙는걸 말씀하는것 같은데

      51행의
      padding: 40px 0;
      에서 0을 지우고
      padding: 40px;
      으로 변경하시면 됩니다.

      코멘트는 테스트 결과
      1 Comments 와 같은식으로 정상으로 나옵니다.

      글 내용보기가 100% 영역에 보이는게 불편하면
      너비값을 글 작성 에디터 너비 설정값으로 변경할 수 있습니다.

      162행을
      .area_view {color:#5c5c5c;word-wrap: break-word}

      에서
      .area_view {color:#5c5c5c;word-wrap: break-word;width:[에디터설정너비값]px;margin:0 auto;}

      이렇게 [설정 값]을 넣어서 수정하면 글 본문 내용만 에디터 너비로 맞춰집니다.

      예를들어 에디터 너비를 820px 맞춰서 쓰고 있다면
      width:820px;margin:0 auto;
      요 내용을 끝에 붙여주시면 됩니다.

      오타였던 부분은 스킨을 재업로드해서 패치를 했습니다.

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 스킨에서는
      width:1200px;margin:0 auto;
      이런식으로 설정하면 보여지는건 1200px가 되구요.

      다만 원본 사진에 이보다 작으면 더 작게 출력되게 됩니다.
      사진크기는 스킨에서 적용하는 부분은 아니고, 에디터 너비를 1200px로 적용해주셔야 합니다.
      블로그 관리 화면
      좌측메뉴 콘텐츠 > 설정 에서
      글쓰기 가로폭을 1200으로 주셔야 합니다.

  • 네 감사합니다 에디터 너비는 1100px & 1200px 했는데 변함이 없어 문의 드렸어요 스킨에서 한번 해볼께요

  • 에구구 죄송하지만 가로 최대크기 변경을 못하겠어요 ㅠ..ㅠ 에디터 너비도 1100px 했고 스킨부분도 1100px 했는데 여전히 보여지는 사진 가로 크기는 변함이 없네요 자꾸 질문만 드려 미얀합니다

    • css 의 184행을 지워보세요.
      이것 때문인듯 싶습니다.
      검색으로 찾으시려면
      .area_view .imageblock{width:100% !important;max-width:800px !important;}
      이행을 찾으시면 됩니다.

      이행은 제가 넣은 건 아니고 티스토리 레퍼런스에 있던 이미지 크기 강제 지정 속성인데 레이아웃 너비 조정하면서 이미지가 같이 무제한으로 커지는걸 막기 위해 들어가 있는 것입니다.

      스킨 배포판에서 빼는게 맞는지는 판단은 안됩니다. 의도가 분명히 있는거라...

      스킨 기본 레이아웃이 가로 100%라 이미지가 세로로 긴 경우 말도 안되게 이미지가 커지기 때문에...

      일단 위 행을 지우면 1200px 크기로 잘 보이니까 적용해보시기 바랍니다.
      정확하게는
      max-width: 800px !important;
      요거만 지워도 되기는 합니다.

  • 괜한 질문에 계속 찾아보신듯 싶어 미얀합니다. width:800px 를 1200px 로 변경하니 바로 적용이 됩니다. 이행을 지우진 않았어요 . 혹시나 싶어~~~~ 정말 터미니 없는 질문에 답해 주셔서 감사합니다 일단 잘 되는거 같으니 속이 후련합니다 정말 정말 감사합니다

  • 이런 포토갤러리 스킨을 특정 카테고리에만 적용 가능한가요??
    사진 카테고리에만 이런 스킨을 사용해서 사진을 나열하고 싶은데 가능할런지요

    • 티스토리 스킨은 기본적으로 전역 설정입니다. 특정 카테고리에만 적용할 수는 없습니다.
      블로그 메인만 스킨 기능으로 다르게 꾸밀 수 있는것이 최대입니다.
      티스토리 뿐만 아니라 댑부ㅜㄴ 블로그 서비스가 단일 스킨 적용만 가능합니다.
      원하시는 기능을 쓰시려면 워드프레스 호스팅 등을 이용하셔야 합니다.

  • 그렇군요 답변 감사드립니다!

  • 와 진짜 마음에 들어요!!! 잘 사용하겠습니다 ㅎ

  • 어떻게 하면
    화면 왼쪽에 치우친 스킨 하단의 '관련글'과 '더보기'
    그리고 섬네일 이미지 4개를 중앙에 오게할 수 있는지요?
    스킨, 마음에 듭니다.^^
    저의 테스트스킨용 블로그 주소는
    testskins.tistory.com 입니다.

    • 제작된 스킨이 좌우 여백이 있고 최종적으로 너비값이 고정된 스킨인데 좌우 화면을 다 채우는 레이아웃으로 이미지를 채우시려고 강제로 너비를 넓히신 것 같습니다.

      정확하게는 왼쪽에 치우친게 아니라 레이아웃을 브라우저 화면 영역 전체를 다 쓰면서 왼쪽에 붙어보이는 것일 뿐입니다.

      관련글은 너비값이 고정이라 가운데 정렬로 간단하게 조정이 가능하겠지만, 코멘트(댓글)는 표시되는 댓글 영역 자체가 100% 너비일 것이므로 가운데 정렬이 의미가 없습니다.
      구지 원한다면 댓글 영역 너비를 강제로 작게 조정한후 좌우 여백을 줘서 가운데쯤에 위치를 잡아주는 정도가 가능할 것 같습니다.

      - 관련글 가운데 정렬주기
      스킨 원소스 기준으로 style.css 파일의

      200행 뒤쪽에
      margin-top:54px
      ->
      margin:54px auto;
      로 변경
      다른 부분은 안건드리게 주의하셔야 합니다.

      219행 전체를
      .area_reply{width:100%;margin-top:51px}
      ->
      .area_reply{width:800px;margin:51px auto}
      로 변경하면
      대충 센터에 정렬해서 보는 레이아웃은 만들 수 있습니다.

      다만 최초에 만들때 모바일 대응이 되도록 스킨이 제작되어있는데 스킨 수정을 하시면서 모바일 대응쪽 코드가 깨져서 모바일에서 블로그 화면이 정상적으로 보이지 않는 현상이 있습니다.

      웹브라우저나, 스마트폰에서 테스트하시는 블로그가 어떻게 보이는지 한번 확인을 해보시기 바랍니다.

    • 답변과 지적 감사합니다.
      아닌 게 아니라 아이폰으로 본 화면이
      정상적이지가 않더군요.

      저의 의도는 아래 블로그 스킨을
      흉내 내고 싶어 한번 시도해 봤습니다만
      생각만큼 잘 안되는군요...^^;;
      https://www.hygphoto.com/

      첨부터 다시 시작해봐야 할 것 같습니다.
      그리고,
      님의 스킨 018timeline1도 좋아보이는데
      다만 첫화면이 '블럭이미지'로도 보였음.... 하는 생각도 들었습니다.

      답변 감사합니다.^^

    • 스킨등록 새로 하고,
      알려주신 대로 대충 CSS 수정했더니
      이번엔 제법 좋아졌습니다.^^

  • 비밀댓글입니다

    • 카테고리 관련 설정은 스킨 관련 부분은 아니고 블로그 관리자 기능으로 표시여부를 설정합니다.

      블로그 관리자 화면 왼쪽 메뉴
      콘텐츠-카테고리관리
      를 들어가면
      카테고리 설정 항목들이 하단에 보입니다.
      카테고리별 글수를 "표시합니다"
      카테고리에서 새 글 발행 여부를 "표시합니다"
      로 설정하고 "변경사항 저장" 을 눌러 설정을 저장하면 블로그 카테고리에 글 갯수와 새글 표시여부가 나타납니다.

    • 예, 이미 설정되어 있답니다.
      이 스킨 첨부터 안 되는 것 같았습니다.

    • 넵. 스킨에서 안보이게 한게 맞습니다.
      무슨 바람이 불었는지 이때만든 스킨 몇개는 글갯수랑 뉴아이콘 이미지를 일부러 보이지 않게 처리를 했습니다.

      아마도 이 스킨 만들 당시에는 깔끔하게 보이게 한다고 이랬던거 같은데...

      지금은 티스토리에서 뿌리는 것들은 임의로 수정하지 않고 있어서 당연히 이런줄 알았던거 같습니다.

      좀 쓸데없는 짓이었던거 같은...

      스킨 원본기준 style.css 97행, 98행을 삭제하면 정상적으료 표시됩니다.
      현재 적용하신 블로그에도 동일한 것으로 보입니다.

      .tt_category li a .c_cnt,
      .tt_category li a img { display:none }

      요부분입니다.
      행이 다를 경우 "c_cnt"로 검색하면 한개만 나오므로 찾아서 저 두줄을 지우시면 됩니다.

      의도와는 다르게 불편한 분이 있는 것같아 스킨은 패치를 해서 글개수와 뉴아이콘이 표시되도록 했습니다.

    • 해결되었습니다,
      감사합니다.
      문의할 것이 한 가지가 더 있는데
      다음 기회에 질문 올리겠습니다.^^

  • 비밀댓글입니다

    • 질문하신 내용에 앞서 글 내용보기 하단의 관련글보기와 댓글달기 레이아웃이 밀려보입니다.

      style.css 원본 기준

      205라인
      width:auto; -> width:100%;

      로 변경하셔야
      관련글 보기 영역이 100% 차서 보이게 됩니다.

      그리고

      .area_reply {
      width: 800px;
      margin: 51px auto;
      }

      이렇게 수정하신 부분이 있는데

      800px; -> 100%;

      로 변경하셔야 댓글보기가 100% 영역으로 차 보이게 됩니다.

    • 질문하신 내용에 대한 답변입니다.
      style.css 파일을 커스터마이징 하면서 오타를 좀 내셨습니다.
      그래서 글 보기 화면 레이아웃이 깨져보이고 있는 것입니다.

      현재 커스터마이징해서 적용해 놓은 style 기준으로

      51행
      margin:80 auto; -> margin:80px auto;

      162행
      width:[800]px;margin:200 auto;
      ->
      width:800px;margin:200px auto;

      이렇게 수정하시면 가로 800px로 여백까지 적용되서 내용이 출력될 겁니다.

    • 너무너무 감사합니다 해결되었습니다.
      이렇게 관심가져주셔서 너무 감사합니다:)

  • 비밀댓글입니다

    • 블로그 예쁘게 잘 운영하라고 공개하는건데 미안할건 없구요...

      현재적용된 style.css 기준으로

      글 제목만 센터 정렬하려면
      156행에
      text-align:center;
      를 추가하면 됩니다.
      해보시면 아시겠지만, 위 아랫줄이 왼쪽 정렬로 남아서 쫌 이상하게 보입니다.

      글 제목을 포함한 헤더 영역을 센터 정렬로 하는게 좀더 나아보이고...
      헤더 영역 전체를 센터 정렬하려면
      154행에
      text-align:center;
      를 추가하면 됩니다.

      세미콜로(;)은 속성간 구분자입니다.
      위 해당줄 맨끝에는 세미콜론이 없습니다.(맨끝에만 생략가능)
      맨끝에 센터정렬 속성을 붙일 경우 앞에 세미콜론을 붙여 구분자로 구분을 해주어야 합니다.

    • 감사합니다! 항상 빠르고 친절한 답변 너무 감사해용

  • 희망사항...^^
    카테고리 펼칠 때 메인화면이 아래로 밀리지 않고 그대로 유지하게 할 수는 없는지요...?

    • 모양이 그렇게 이쁘지는 않겠지만 현재 적용하신 사이틑 기준으로
      엇비슷하게 맞추자면

      style.css 에서

      91행에
      position: absolute;
      z-index: 999;
      left: -35px;
      top: 108px;

      요 내용을 추가하면 됩니다.
      절대 좌표로 사진 위에 펼쳐지는 메뉴를 고정으로 띄우는 기능을 합니다.

      전체내용으로는

      .navi_on .wrap_sub {display: block;max-height: 9999px;height: auto;padding: 10px;margin: 0 40px;position: absolute;z-index: 999;left: -35px;top: 108px;}

      요렇게 되고 해당행을 이걸로 그냥 대체하시면 될겁니다.

    • 다시한번
      감사합니다...^^

  • 비밀댓글입니다

    • 1. 스킨 커스터마이징 작업은 하지 않습니다.

      2. https 페이지에서 http 페이지/url 을 호출할 수 없습니다. 인터넷 프로토콜상 막혀있습니다.
      cover.html 에서 링크를 건 외부 사이트 파일들일 전부 http로 호출을 하기 때문에 https 사이트에서 임베드하면 해당 파일들은 모두 접근 차단이 됩니다.

      3. 티스토리는 https로 완전히 전환되었기 때문에 외부 페이지나 jquery 모듈은 모두 https로 호출해야 합니다.

      4. 관련 파일들을 모두 티스토리 images에 업로드해서 링크를 cover.html에 거신거 같은데현재
      현재 올려놓은 cover.html 파일을 열어 "http://" -> "https://" 로 문자열 대체를 해서 저장한 후
      cover.html을 다시 업로드하면 임베드한 커버페이지가 동작할겁니다.

      5. 워드프레스 커버와 티스토리 커버는 포팅할 수 있는 구조가 나오지 않습니다.
      나온다고 해도 감당할 수 없는 비용이 발생할겁니다.
      현재 상태에서 티스토리로 가능한 구조에 최대한 맞춰 쓰는 것을 추천합니다.

  • 비밀댓글입니다


닫기