상세 컨텐츠

본문 제목

[티스토리 스킨] jinsojang 포트폴리오 스킨(배포/다운로드파일)

프로젝트형인간/티스토리

by 브랜드보일러 진소장's 2018. 12. 12. 16:32

본문

 

개인 포트폴리오나 이미지위주 블로그에 적절한 스킨입니다. html수정없이 사용하실 수 있도록 가능항 템플릿화하였습니다. 하단 필요설정만 정확히 진행하면 예시디자인과 동일한 레이아웃으로 바로 이용가능합니다. html를 수정하기 어려운 분들을 위해서 스킨옵션을 최대한 활용했습니다. 디자인은 최대한 군더더기를 제외하여 포트폴리오가 돋보일 수 있도록 심플하게 남겼습니다. info, contact 페이지 역시 이미지를 제외하고 텍스트로만 레이아웃을 구성해 포트폴리오에 나올 이미지가 최대한  기억에 남도록 했습니다. 시간과 능력이 되는 한도 내에서 사용자분들의 의견을 반영해 추후 디자인 업데이트를 예상하고 있습니다. 많은 의견과 사용 부탁드립니다.

 

 

스킨이미지

 

0123

 

 

Main

 

 

Projects

 

 

 

 

Info

 

 

Contact

 

 

#스킨이름 : jinsojang-portfolio ver 1.0

 

 

#스킨 특징

 

1. html수정없이 예시 디자인과 동일하게 바로 사용가능
2. 커버기능 적용으로 원하는 형태로 메인페이지 수정가능
3. 페이지를 템플릿화하여 html변경없이 스킨옵션적용을 통해 내용변경가능

 

 

#스킨설명

 

- 개인 포트폴리오 및 이미지/사진 위주의 블로그, 간단한 회사소개 사이트로 활용하기 적당합니다.
- 해당 스킨은 티스토리에서 배포한 poster스킨의 코드와 기능을 대부분 활용하여 만들어졌습니다. 따라서 업데이트 된 티스토리 기능을 최대한 활용할 수 있습니다.
- 반응형으로 제작되었습니다.
- info, contact 페이지의 경우 페이지 생성을 통해 만들어집니다. 다만, 티스토리가 제공하는 페이지 에디터를 활용할 경우, html 작성이 어려운 점이 있어 skin.html파일에 해당 내용을 작성하였습니다. 따라서 좀 더 자유로운 레이아웃을 가지며, html 편집이 어려운분들을 위해서 페이지에 들어가는 텍스트는 최대한 스킨옵션을 통해 입력만 하면 내용을 변경할 수 있도록 했습니다.
- 각 페이지의 헤드라인들은 html편집이 어려운 분들을 위해 스킨옵션에서 쉽게 변경할 수 있도록 옵션 등록해두었습니다.
- 콘텐츠 카테고리는 포트폴리오 분류를 기준을 적용했습니다. 카테고리를 그대로 프로젝트(카테고리 리스트) 페이지의 서브 메뉴로 활용하기 위함입니다.
- 자유롭게 커스텀해서 사용해주세요. 다만, 하단 designed by jin-sojang 텍스트는 유지해주시면 감사하겠습니다.

 

 

스킨옵션의 옵션설정값들

 

 

 

#필요한 기본설정

 

1. 커버사용 : 스킨편집 > 홈화면바꾸기 > '커버'로 설정
2. 페이지 생성 : info, contact (2개) 페이지 생성
 * 생성시 페이지 이름을 info, contact으로 설정해야 html수정없이 디자인을 바로 이용할 수 있습니다.
 * 다른 이름으로 생성시 해당 페이지의 디자인 및 html편집이 필요하게 됩니다.
3. 메뉴설정 : 생성한 페이지(info/contact)를 메뉴등록, 추가로 projects(전체카테고리) 메뉴 등록
4. 모바일 스킨 사용안함 : 모바일 > 티스토리 모바일웹 자동연결을 "사용하지 않습니다." 설정

 

 

(기본 설정 이미지 참조)

페이지 생성

 

 

메뉴 설정

 

 

모바일 설정

 

 

 

 

#각 페이지 헤드라인 텍스트 변경방법

 

스킨편집 > 스킨옵션 > 해당 항목을 찾아서 값변경
(*각 항목은 찾기 쉽도록 default값을 모두 넣어두었습니다.)

 

 

#메뉴설정방법

 

모든 페이지(gnb메뉴)는 메뉴관리에서 설정되도록 했습니다.
또한 예시메뉴와 메뉴이름(projects/info/contact)을 같게 설정할 경우, html편집없이 예시와 동일한 디자인을 바로 사용가능합니다.

 

 

#사용폰트


- SpoqaHan Sans
- Nanum Myeongjo
- Montserrat

- 웹폰트를 사용했습니다. 폰트 링크는 스킨파일 <head>와 css파일 상단에 있습니다.

 

#스킨다운로드

 

본 스킨은 무료입니다.
혹시 사용하시다 문제점이 발견될 경우, 댓글이나 이메일로 알려주시면, 시간과 능력이 되는 한도 내에서 최대한 피드백드리겠습니다.

 

jinsojang-portfolio-ver1.0.zip


※ 목록더보기 수정 및 태그, 방명록 기능을 부활시킨 ver2.0이 업데이트 되었습니다.


2019/01/23 - [프로젝트형인간/티스토리] - [티스토리 스킨] jinsojang 포트폴리오 스킨 ver2.0 (배포/다운로드파일)


관련글 더보기

댓글 영역

  • 프로필 사진
    2018.12.28 15:10
    비밀댓글입니다
    • 프로필 사진
      태그목록을 넣고 싶은신 것 같네요...맞나요?? 혹시 어디위치에 넣고 싶으신가요?? (현재는 스킨특성상 코드를 제가 빼두었지 싶습니다...)
    • 프로필 사진
      2018.12.29 03:51
      비밀댓글입니다
    • 프로필 사진
      <s_tag>
      <div class="hgroup">
      <h1>태그</h1>
      </div>
      <div class="tags">
      <div class="items">
      <s_tag_rep>
      <a href=""></a>
      </s_tag_rep>
      </div>
      </div>
      </s_tag>

      위에 코드를 넣으시면 됩니다. 위 코드를 스킨파일의 401번줄에 보면 "</s_article_rep></div> 코드를 여기에 넣으세요</div>"
    • 프로필 사진
      2018.12.30 00:11
      비밀댓글입니다
    • 프로필 사진
      댓글에 코드 남겼더니 치환자가 빠져버리네요. 포스트로 작성해서 코드를 다시 남겨놨습니다. 해당 코드를 넣으시면 아마 잘 동작할거에요~

      http://techandmarketing.tistory.com/65
    • 프로필 사진
      2019.01.02 19:04 신고
      해결되었어요 정말 감사합니다!! 새해 복 많이받으세요*^^*
  • 프로필 사진
    2019.01.03 14:38 신고
    여쭈고 싶은 게 처음으로 댓글창이 없어가지고 원래 없는 건지 궁금합니다.

    그리고 모바일 환경에서 오른쪽 상단 메뉴 버튼이 좀 큰 것 같은데, 크기 조절하는 법을 알고 싶습니다.

    제 블로그를 들어가시면 카테고리가 상단에 있는데, 카테고리 구분이 잘 안갑니다. (들어가서 작게 나오는 카테고리)
    • 프로필 사진
      스킨 사용을 포트폴리오 중심으로 만들어서 '댓글'은 제가 임의로 없앴습니다. 모바일 메뉴버튼 css를 만지실수 있으면 원하시는대로 조정가능합니다. 클래스 mobile-menu 혹은 mobile-menu span 를 만져주시면 될겁니다. 카테고리는 어떤 식으로 구분을 원하시는 건지....?
  • 프로필 사진
    2019.01.16 13:58 신고
    pre, next 등 페이징이 안 보이네요....?
  • 프로필 사진
    2019.01.16 15:42 신고
    여쭙고 싶은 게 있어요!! 모바일로 볼 때는 메뉴 클릭이 안 되는데 어떻게 수정해야 하나요?
    • 프로필 사진
      엇, 햄버거메뉴 말씀하시는거죠? 혹시 스킨등록하실때 js파일 빼먹으시지 않으셨나요?? js파일을 꼭 함께 넣어주셔야 메뉴가 작동합니다~~
  • 프로필 사진
    2019.01.16 15:47
    비밀댓글입니다
    • 프로필 사진
      메인처럼 이미지 height 자유롭게 차곡차곡 쌓아지는 형식을 말씀하시는건가요..?? 아쉽게도 project부분에 해당 방식을 적용하지는 못했습니다. (공수가 너무 많이 드는 작업이라.....ㅠㅠ) 추후에 혹시 업데이트 할 수 있을지 판단해보고....혹시 업데이트하게 되면 블로그 통해 알려드리겠습니다~
  • 프로필 사진
    아니, 이런스킨을 무료로!
  • 프로필 사진
    2019.04.15 10:47
    비밀댓글입니다
  • 프로필 사진
    2019.05.16 21:28
    비밀댓글입니다
  • 프로필 사진
    2019.05.19 20:13
    비밀댓글입니다
    • 프로필 사진
      안녕하세요! 현재는 그 부분까지는 적용되어 있지 않네요....죄송합니다. 그 부분은 설정을 바꿀 수 있는 부분이 아니라 코드를 구성해야 합니다. 추후 업데이트가 필요할 것 같네요....ㅠㅠ
  • 프로필 사진
    2019.05.20 01:10
    비밀댓글입니다
    • 프로필 사진
      안녕하세요. 답변 늦어 죄송합니다. 일단 폰트의 변경은 CSS파일에서 수정해야만 해요...CSS수정대시보드를 가셔서 #content .main-copy {font-family: 'Nanum Myeongjo', serif;} 이걸 추가해주세요. 사이즈는 한 번 확인해서 답변달아 드릴께요~~
  • 프로필 사진
    2019.06.12 13:26
    비밀댓글입니다
  • 프로필 사진
    2019.06.25 11:43
    비밀댓글입니다
    • 프로필 사진
      해당 부분은 제작 시 고려하지 않은 부분이긴 하네요....정확하게 적용하려면 추후 업데이트가 필요할 것 같습니다. 일단은 사진설정은 플러그인 설정으로 되지 않을까 싶습니다. 현재 코드에서는 적용이 안 될 듯 시습니다. 플러그인을 한 번 사용해보세요. 비밀글은 체크해봐야 할 것 같습니다.
  • 프로필 사진
    2019.06.28 16:56
    비밀댓글입니다
  • 프로필 사진
    2019.10.25 12:26
    비밀댓글입니다
  • 프로필 사진
    2019.12.18 16:45
    비밀댓글입니다
  • 프로필 사진
    2020.02.03 17:09
    비밀댓글입니다
  • 프로필 사진
    2020.02.05 16:33
    비밀댓글입니다
  • 프로필 사진
    2020.03.03 21:27
    비밀댓글입니다
  • 프로필 사진
    2020.06.26 00:52 신고
    안녕하세요. 스킨 제공해주셔서 너무 감사합니다..!
    설치하고 보니 메인화면에선 괜찮은데 메뉴를 눌러 게시물 썸네일을 보니, 일정 크기에 맞춰 비율이 변형이 되더라구요... 요거 개선할 수 없을까요?ㅠㅠ 이것만 가능하다면 완벽할텐데요..
    지금까지도 많은 수고들 하셨을텐데 죄송하고 감사한 마음 갖고 문의 드려봅니다.
    • 프로필 사진
      답변이 늦어 죄송하네요ㅠ 게시물 리스트 페이지 썸네일을 말씀하시는거죠. 고정px로 제작되어 해당 크기에 맞춰서 썸네일 만들어 넣으시면 비율이 유지된답니다~
  • 프로필 사진
    2020.07.18 03:07
    비밀댓글입니다

페이징