TriplexLab 스킨 설명서
TriplexLab 스킨 설명서
TriplexLab 블로그 스킨 사용 설명서 및 간단한 소개글 입니다.
설명이 부족한 부분있다면 추후에 계속해서 내용을 수정 하겠습니다.
👨💻 브라우저 지원 환경
TriplexLab SKIN은 모던 웹 브라우저에 대해서만 지원하고 있습니다. IE는 다음과 같은 이유로 지원하고 있지 않습니다.
구글 검색 엔지에서 콘텐츠의 가치를 기준으로 문서 순위를 매기지만 웹사이트의 퍼포먼스도 기준에 영향을 줍니다. 최적화된 웹사이트의 경우 구글 검색 엔진이 좀 더 높은 점수를 줍니다. TriplexLab SKIN은 사용자들에게 최적화된 SEO를 제공하기 위해 퍼포먼스를 고려해서 구현된 스킨입니다.
DEMO버전의 스킨 속도 및 SEO 개선 모습
라이트하우스 부분에서 개선하지 못하는 부분은 티스토리에서 자동으로 삽입되는 스크립트 또는 디자인의 아이덴티티 요소인 명함대비 이슈가 있어서 스킨을 개발하는 개발자가 개선할 수 없는 영역입니다.
👉 기능
✅반응형 제작
해당 스킨은 반응형으로 제작되었습니다.
✅코드 하이라이트 추가
라이트모드/다크모드 따른 하이라이트 테마 변경은 스킨에 내장되어 있습니다. 티스토리 꾸미기 - 사이트바에 해당하는 모듈을 반드시 확인 후 사이드바3에 넣어주시기 바랍니다.
✅코드 블럭에 Copy 추가
모든 포스트(상세페이지)마다 코드 블럭이 존재하며 자동으로 Copy, Copied 가 들어갑니다. 👍
참고:( 플러그인 - 코드문법강조를 같이 사용해서는 안됩니다. 기존에 쓰고 있었다면 해제를 해주셔야 합니다.!! )
✅애드센스 광고
TriplexLab 스킨은 애드센스 광고를 붙일수 있는 구조입니다.👍👍✅
✅카카오톡 상세페이지 공유하기
해당링크를 참고하시면 됩니다.👇👇
🌟TriplexLab 스킨 설명서
👉🏻소스코드 다운로드 및 적용하기(필수)
다운로드 받으실때 다음과 같이 버튼을 통해서 다운받으실수 있습니다.(GitHub)
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻파일 업로드 및 수정(필수)
HTML, CSS, JS파일등을 자유롭게 수정하고 업로드 할수 있는 방법입니다.
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
HTML 편집 버튼을 클립합니다.
오른쪽 상단에 HTML, CSS, 파일업로드 탭이 있습니다. 간단한 코드수정을 할때는 이곳에 와서 수정을 합니다.
파일업로드 탭에서 하단에 추가, 삭제버튼이 있습니다. JS 파일 이라든지, 이미지 파일…등등 파일을 업로드 하고 싶을때는 이곳에 와서 하시면 됩니다.
HTML 편집 버튼을 클립합니다.
오른쪽 상단에 HTML, CSS, 파일업로드 탭이 있습니다. 간단한 코드수정을 할때는 이곳에 와서 수정을 합니다.
파일업로드 탭에서 하단에 추가, 삭제버튼이 있습니다. JS 파일 이라든지, 이미지 파일…등등 파일을 업로드 하고 싶을때는 이곳에 와서 하시면 됩니다.
👉🏻사이드바 Socia Channels영역 변경하기
관리자페이지 > 링크 > 나의 링크 이동하셔서 해당 부분의 텍스트 및, 링크를 추가할수 있습니다.
🧐 아이콘 변경은 images/menuIcon.js에서 해당 아이콘을 핸들링하고 있습니다. 참고하시면 될것 같습니다.
더 자세한 내용은 icon을 "icon font"로 변경해서 작업을 진행 한것입니다. 해당 링크를 참고 하세요.
👉🏻사이드바 로고 업로드 및 블로그 이름 변경하기
스킨 편집 > 추가설정 > 로고 및 블로그 이름을 변경할수 있습니다.
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻메인 배너 추가
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻메인 배너 컨텐츠 직접 수정
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻메인 배너 자동 슬라이스 기능
해당 파일 (images / mainSlide.js)에서
해당부분 autoplay옵션을 주석을 풀어서 제 업로드를 하시면 됩니다.
반대로 autoplay를 사용하고 싶지 않으시면 주석을 걸어서 제 업로드하면 됩니다.
👉🏻메인에 리스트 영역 표시하기
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻메인에 카운터 및 베스트 스토리 표시하기
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻포인트 컬러 변경
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻게시글 tabs
✅ 영상으로 방법을 알려드립니다. 해당 부분 궁금하시면 다운로드 받으세요.👇🏻👇🏻
👉🏻카테고리별 대표이미지 관리
카테고리 관리 > 관리를 버튼을 누르면 이미지를 업로드 할수 있습니다.
👉🏻상세페이지 이미지 첨부하기
다음과 같이 이미지를 첨부할때 작은 이미지를 넣었는데
글을 모두 쓴 후 확인했을 때 엄청 크게 나오는 경우가 있습니다.(아래처럼)
그럴때는 다시 수정버튼을 누른후 에디터(편집)화면으로 가서 이미를 클릭하면 모서리에 점들이 아래와 같이 나옵니다. 모서리 부분을 잡고 마우스 드래그를 해서 크기 조절을 하시면 됩니다.🎉👏
아니면 가로값 기준으로 정확한 크기를 숫자 값으로 넣을수도 있습니다.
👉🏻글 관리 편집에서 섬네일 이미지 설정하기
게시글에 포함되지 않은 이미지를 배경이미지로 설정하는 방법
📌참고 (이미지 사이즈 최적화 비율 3.49:1)입니다. (가로: 3,840px X 1,100px 입니다.)
👉추가 정보
Location: Seoul, Korea Email: thdbsgh3443@kakao.com
스킨에 기본 기능에 대한 문의는 도와드릴 수 있으나 커스텀 하시면서 css파일 수정, 또는 JS파일 수정하면서 코드에 피드백을 달라고 하는 등등의 문의는 답변 하지 않습니다.
모든 문의는 이메일로만 진행되며 문의 내용+화면 캡처와 함께 보내주시는 것이 가장 좋습니다.!!😃👍
혹은 gitgub에 issues를 남겨주시면 확인하는 데로 최대한 빠르게 대응하겠습니다.
Last updated
