공지사항 2020. 4. 6.
V1.1.3으로 판올림 했습니다.
V1.1.3으로 판올림했습니다. 몇가지 기능 추가와 오류 수정과 코드정리 입니다. 이번 판올림에서는 index.xml로 수정이 되었습니다. index.xml를 업데이트할때는 항상 조심해서 해야 합니다. 왜냐하면 기존에 스킨편집에 설정해 놓은 값들이 초기화 되기 때문입니다. 스킨 편집의 오른쪽에 있는 모든 설정 값들이 초기화 됩니다. 기능 추가 애드센스 일치하는컨텐츠 광고 기능 추가 본문 하단에 애드센스의 일치하는콘텐츠 광고기능을 추가했습니다. 이제 쉽게 광고를 넣을 수 있습니다. 구체적인 방법은 별도로 포스팅했으니 참고 하세요. 구글 애드센스 "일치하는컨텐츠 광고" 본문하단에 적용하기 바로가기 댓글창 가로 크기 조절 댓글창의 가로크기가 너무 커서 화면을 답답하게 했던 부분을 개선했습니다. 또한 덩달아 본..
스킨설명서 2020. 4. 6.
구글 애드센스 "일치하는컨텐츠 광고" 본문하단에 적용하기
본문 하단에 구글 애드센스의 일치하는콘텐츠 광고를 넣을 수 있습니다. 일치하는콘텐츠광고는 내 글과 광고글을 교묘히 섞어서 보여주는 광고 입니다. 내 블로그의 체류시간도 늘릴 수 있고 광고비용도 벌 수 있는 효과가 있습니다. 일치하는콘텐츠 광고 신청하기 먼저 일치하는콘텐츠 광고를 신청하기 위해 애드센스 웹사이트로 이동합니다. 구글 애드센스 바로가기 좌측메뉴 중 광고 > 개요 를 선택합니다. 광고 단위 기준 탭을 선택합니다. 일치하는 콘텐츠 광고를 선택합니다. 운영 가능한 사이트에 나온 블로그에 적용된 예시를 보여줍니다. 중요한 부분은 아닙니다. 광고의 이름을 임의로 입력합니다. 광고 옵션을 선택합니다. 광고를 통한 수익창출을 할거냐 말거냐 인데.. 99%는 당연히 하겠지요 ^^ 스타일 옵션을 선택합니다. ..
스킨설명서 2020. 3. 30.
구글 애드센스 댓글 창에 표시하기
오른쪽의 댓글창에도 애드센스 광고를 넣을 수 있습니다. 댓글보기와 댓글쓰기에 방해가 되지 않도록 한정된 영역만을 사용해야 해서 광고의 크기와 딱맞아 떨어지지는 않습니다. 댓글창 광고 댓글을 작성하는 곳과 리스트의 중간부분에 한정된 크기의 디스플레이 광고를 쉽게 붙힐 수 있습니다. 디스플레이 광고 신청하기 댓글창에 사용할 수 있는 광고는 애드센스의 디스플레이 광고 입니다. 먼저 디스플레이 광고를 신청하기위해 애드센스 웹사이트로 이동합니다. 구글 애드센스 바로가기 좌측메뉴 중 광고 > 개요 를 선택합니다. 광고 단위 기준 탭을 선택합니다. 디스플레이 광고를 선택합니다. 먼저 광고의 이름을 임의로 입력합니다. 광고크기는 고정으로 설정합니다. 너비와 높이는 300 X 60 입니다. 만들기를 선택합니다. 만들기가..
스킨설명서 2020. 3. 30.
홈커버 설정하기
홈커버란? 홈커버는 티스토리 2018년 10월 새로운 공식 스킨을 출시하면서 생긴 기능입니다. 기존에 https://blog.stories.pe.kr 같이 세부 파라미터 없이 도메인 주소로만 접속할 경우 최신 글 리스트가 보여지도록 되어 있었으나 홈커버의 경우는 최신 글 리스트가 보여지는 것이 아니라 여러가지 아이템으로 관리자가 원하는 형태로 꾸밀 수 있게 만든 기능입니다. 이 기능을 잘 활용하면 단순한 블로그로 보여지는게 아니라 포털화면의 첫 페이지 처럼 꾸밀 수 있는 장점이 있습니다. T스킨BASIC에서는 기존의 5가지 아이템에 추가로 1개의 아이템을 더 추가했습니다. 홈커버 설정 진입하기 홈커버는 티스토리 관리자 화면에서 시작합니다. 관리자 화면의 좌측메뉴 중 스킨편집 메뉴를 선택합니다. 스킨편집 ..
스킨설명서 2020. 3. 27.
구글 애드센스 인피드광고 적용하기
V1.1.1버전에서 구글 인피드광고를 적용했습니다. 인피드광고란? 인피드 광고란 티스토리 리스트 중간 중간에 광고를 자동으로 끼워 넣어 주는 광고형태입니다. 인피드 광고 신청하기 먼저 구글에서 인피드 광고를 신청해야 합니다. 자세한 설명은 아래의 포스트에서 신청하는 부분까지만 참고하세요. 티스토리에 애드센스 인피드 광고 슬기롭게 적용하는 방법 바로가기 인피드 광고 적용하기 인피드 광고를 신청하면 아래와 같은 코드를 획득하게 됩니다. 여기서 중요한 코드는 3개입니다. data-ad-layout-key="" data-ad-client="" data-ad-slot="" 티스토리에 적용하기 티스토리의 관리자화면으로 이동합니다. 좌측 메뉴에서 꾸미기 메뉴를 선택합니다. 스킨편집 메뉴를 선택합니다. 스킨 편집의 우..
스킨설명서 2020. 2. 5.
T스킨에서 부트스트랩(Bootstrap)으로 글쓰기
T스킨은 부트스트랩(bootstrap)을 기본으로 사용하기 때문에 글을 쓸 때 부트스트랩의 스타일을 쉽게 적용할 수 있습니다. 글을 쓸 때 글쓰기 모드를 HTML모드로 전환하여 CLASS를 지정하면 반영이 됩니다. 글쓰기 방법 먼저 기존의 방법대로 기본모드로 글을 작성합니다. 부트스트랩(bootstrap)을 적용하고자 할 때 기본모드에서 HTML모드로 전환을 합니다. HTML모드로 전환하면 위의 그림처럼 HTML코드로 편집할 수 있는 화면으로 전환됩니다. Bootstrap의 Class적용 방법대로 HTML코드를 입력합니다. 위의 그림은 Bootstrap의 버튼 스타일을 추가해 봤습니다. 부트스트랩의 버튼 스타일이 적용된 모습을 볼 수 있습니다. Bootstrap 홈페이지 바로 가기 부트스트랩 적용 더 다..
공지사항 2020. 2. 1.
V 1.0.2 로 업데이트 했습니다.
본문 목차(TOC) 개선과 공감(좋아요) 버튼에 대한 코드를 정리했습니다. 목차(TOC) 기능 개선 기존 목차(TOC) 기능에 대해서 UI디자인과 기능을 개선했습니다. 기존의 목차(TOC)는 불필요한 스크롤바와 선명하지 못한 글자색상으로 인해 항상 찝찝함이 있었습니다. 개선된 목차(TOC) 기능은 아래와 같습니다. 화면의 가장 상단으로 이동하는 TOP버튼 추가 화면의 가장 하단으로 이동하는 BOTTOM버튼 추가 현재 위치에 해당하는 제목에 강조표시 또한 불필요한 스크롤바는 삭제했습니다. 댓글 창을 열 때 목차(TOC)는 가리고 댓글창을 닫을 때 목차(TOC)가 보이는 기능을 강화 했습니다. 목차(TOC) 기능을 처음부터 꺼 버릴 수 있습니다. Default(기본)값은 보여지게 했습니다. 본문화면 시작 할..
공지사항 2020. 1. 20.
UX공작소 T스킨 BASIC를 배포합니다.
새롭게 시작하는 티스토리 스킨 T스킨 BASIC를 배포합니다 많은 시행착오를 거치면서 티스토리스킨의 가장 기본이 되는 BASIC 버전을 배포합니다. 여러가지 다양한 카테고리의 블로그에 어울리면서 기본 티스토리스킨에 비해 한차원 넘어서는 다양한 기능을 가지고 있습니다. 기능의 설정도 관리자 화면에서 설정 할 수 있도록하여 웹기술을 모르더라도 쉽게 적용할 수 있는 강점이 있습니다. T스킨 BASIC 바로가기 아래의 샘플 블로그에서 기능과 디자인도 확인할 수 있고 구입도 할 수 있습니다. 또한 한번 구입 한 티스토리 유저는 언제든지 해당 샘플 블로그에서 다운로드를 받을 수 있습니다. T스킨 BASIC 구입 화면 바로가기 오류수정, 기능개선 등 계속 릴리즈되어지며 릴리즈 되어지는 정보도 해당 샘플 블로그에서 확..
스킨설명서 2020. 1. 16.
내 SNS 주소를 노출하기
보통 한 사람이 페이스북, 트위터, 카카오톡, 카카오스토리 등 여러 개의 SNS를 가지고 있습니다. 이 다양한 SNS 중 보여주기 원하는 SNS가 있다면 아래의 기능을 사용하시면 됩니다. SNS 설정 하기 관리자화면 > 꾸미기 > 스킨편집 메뉴를 선택하면 스킨을 편집할 수 있는 새창이 열립니다. 중간쯤에 있는 주인장 SNS 설정 (http:// ~ 부터 입력해 주세요) 항목을 찾아서 입력하시면 됩니다. 13개의 SNS주소를 입력하는 칸이 있는데 노출을 원하는 곳의 링크정보를 입력하면 됩니다. 입력되어 있는 요소만 화면에 노출이 됩니다. 결과 확인 하기 이제 결과를 보면 아래와 같이 적용이 된 것을 확인할 수 있습니다. RSS는 기본으로 노출이 되고 나머지 4개의 SNS가 노출 된 것을 확인할 수 있습니다.
스킨설명서 2020. 1. 16.
네이버 이웃추가 기능 사용하기
티스토리의 구독하기처럼 네이버도 이웃추가 기능이 있습니다. 이웃으로 맺어지면 이웃의 포스팅을 쉽게 확인 할 수 있는 장점이 있습니다. 국내에 몇 개의 블로그가 있고 각각의 특징들이 있지만 어찌되었든 네이버 블로그가 가장 많은 파이를 가지고 있는 것은 부인할 수 없습니다. 그렇기 때문에 어떻게든 네이버에 줄을 대는 것은 블로그 활동에 매우 중요한 요소라 할 수 있습니다. 그중에 하나가 네이버 이웃추가입니다. 상대방이 내 블로그를 이웃추가 하면 상대방이 자신의 네이버 me에서 내가 포스팅한 최신의 글들을 볼 수 있게 됩니다. 네이버 블로그 설정 내 티스토리 블로그에 적용하기 전에 먼저 네이버 블로그에서 세팅을 해 줘야 합니다. 그러려면 먼저 네이버에 회원가입이 되어 있어야 합니다. 네이버 블로그 이웃커넥트에..
스킨설명서 2020. 1. 16.
메뉴 기능 사용하기
티스토리에는 카테고리 말고 블로그 내에 있는 컨텐츠에 링크를 걸 수 있는 메뉴라는 기능이 있습니다. 티스토리에 이 메뉴 기능은 그대로 살아 있는데 새로운 공식 스킨에서는 잘 활용이 되고 있지 않습니다. 잘 활용하면 좋을 것 같아서 제 T스킨에는 이 기능을 넣어봤습니다. 메뉴기능 설정 하기 관리자화면 > 꾸미기 > 메뉴 메뉴를 선택하면 메뉴를 추가 할 수 있는 페이지로 이동합니다. 꾸미기 > 메뉴 선택 하세요 메뉴 추가 선택 하세요 임의의 메뉴명을 입력합니다. 링크를 걸 종류를 선택합니다. 기본메뉴는 홈, 태그, 방명록 등이 나옵니다. 페이지는 자신이 생성한 페이지의 리스트가 나옵니다. 카테고리는 미리 설정한 카테고리 메뉴명이 나옵니다. 태그 검색은 원하는 태그명을 입력하면 그 태그명을 가진 Posts를 ..
스킨설명서 2020. 1. 16.
카테고리 명 앞에 아이콘 달기
사이드바에 있는 매인 카테고리 이름 앞에 아이콘을 달 수 있습니다. 아이콘 설정 하기 관리자화면 > 꾸미기 > 스킨편집 메뉴를 선택하면 스킨을 편집할 수 있는 새창이 열립니다. 추가설정 항목의카테고리 아이콘 항목에 아무것도 없으면 카테고리명 앞에는 아이콘이 붙지 않습니다. 이 항목에 아이콘 명을 ,를 구분자로 하여 입력을 하면 위에서 부터 순서대로 카테고리 명 앞에 아이콘이 붙습니다. 아이콘셋은 XEICON에서 제공하고 있는 아이콘을 사용합니다. XEICON는 NAVER가 서포트 하고 있는 Xpress Engine에서 무료로 제공하고 있는 프로젝트 입니다. 다른 아이콘셋은 적용이 되지 않으니 해당 사이트에서 아이콘 명을 확인하여 적용하시면 됩니다. XEICON 바로가기 결과 확인 아래와 같이 카테고리명 ..
스킨설명서 2020. 1. 16.
본문 목차(TOC) 표시하기
목차(TOC)는 Table of Contents로 목차를 의미합니다. T스킨에는 컨텐츠를 분석하여 해딩() 태그가 있는 경우 별도로 목차(TOC)로 뽑아 주는 기능이 있습니다. 해딩으로 뽑아내는 목차(TOC)는 h1~h4로 한정 되어 지고 h5 이하의 목차(TOC)는 제외했습니다. 이 목차(TOC)는 고정적으로 컨텐츠의 오른쪽에 표시가 되면 메신저(댓글) 창과 반대로 움직입니다. 메신저 창이 오픈되면 목차(TOC)는 닫히고 메신저 창이 닫히면 목차(TOC)가 열리는 형태 입니다. 아예 설정에서 목차(TOC) 기능을 꺼 버릴 수도 있습니다. 목차(TOC) 설정 하기 관리자화면 > 꾸미기 > 스킨편집 메뉴를 선택하면 스킨을 편집할 수 있는 새창이 열립니다. 스킨편집 하단에 추가설정 부분에 있는 본문 목차(T..
스킨설명서 2020. 1. 16.
메신저(댓글) 창 닫고 시작하기
메신저(댓글) 창은 기본적으로 화면의 오른쪽에 오픈되어 배치가 됩니다. 하지만 메신저(댓글) 창이 그렇게 중요한 요소가 아닌 경우 화면이 로딩이 될때 닫힌 상태로 블로그가 열리게 할 수 있습니다. 메신저(댓글) 창 설정하기 관리자화면 > 꾸미기 > 스킨편집 메뉴를 선택하면 스킨을 편집할 수 있는 새창이 열립니다. 스킨편집 하단에 추가설정 부분에 있는 시작 시 본문 댓글 창 오픈를 봅니다. 기본값은 true 입니다. 블로그 본문에 접속을 하면 메신저(댓글) 창이 열린다는 의미 입니다. 이 값을 false로 변경을 하고 블로그 본문에 접속을 하면 메신저(댓글) 창이 닫힌 상태로 표시됩니다. 대신 말풍선 아이콘이 건수와 함께 표시되고 이 아이콘을 클릭하면 그때서야 메신저(댓글) 창이 열리게 됩니다. 결과 확인..
스킨설명서 2019. 12. 9.
설치하기
티스토리 스킨 기본 설치 방법 티스토리 스킨 설치 방법은 UX공작소에서 제공하는 스킨에만 특회된 것은 아니고 모든 티스토리 스킨에 대해 공통적으로 적용되는 방법입니다. 먼저 스킨 파일을 준비해야 합니다. 제 블로그에서 구매하여 다운로드 받은 스킨 파일을 압축해제 하면 됩니다. 구매/다운로드 받기 설치 스킨 등록 하기 스킨을 적용하기 위해서는 티스토리 관리자 화면의 꾸미기 메뉴에서 먼저 스킨을 등록해야 합니다. 스킨변경 메뉴를 선택합니다. 스킨등록 버튼을 선택합니다. 추가버튼을 클릭 합니다. 압축해제한 스킨파일을 선택합니다. 한번에 images폴더에 있는 것까지 업로드가 되지 않으니 귀찮아도 images폴더 안에 있는 파일을 한번 더 등록을 해야합니다. 저장버튼을 클릭하여 등록을 완료합니다. 실제로 업로드..
스킨설명서 2019. 12. 9.
구매 안내
구매 진행 절차 [구매자] 티스토리 로그인 후 구매/다운로드 화면에서 구매 신청 [구매자] 지정된 계좌번호로 무통장 입금 [판매자] 입금확인 후 다운로드 권한 제공 [구매자] 구매/다운로드 화면에서 스킨파일 다운로드 설치하기 스킨 설치에 대해서는 설치하기 화면을 참고하세요. 지원안내 스킨의 오류에 대해서는 최대한 빠른 시간에 수정을 한 후 새로운 버전을 배포할 것입니다. 오류가 아닌 기능 추가, 코드 변경 등의 수정 요청에 대해서는 공식적으로 지원하지 않습니다. 다만 공통적으로 필요한 기능일 경우 차후 버전에 추가 하도록 하겠습니다. 약관 스킨의 구매는 구매 희망자가 선입금 후 다운로드 할 수 있는 권한을 부여 받는 것을 원칙으로 합니다. 자료의 특성상 복제가 가능하기 때문에 교환, 환불, 반품은 불가합..
스킨설명서 2019. 12. 9.
스킨소개
블로그에 생명을 불어 넣을 수 있는 반응형 스킨을 제작하였습니다. 기본 티스토리 블로그 스킨과 차별화된 기능, 디자인으로 오랜 기간에 걸쳐 제작하고 수정하였습니다. 이 스킨이 여러분의 블로그에 조금이라도 도움이 되었으면 합니다. 특징 이 스킨은 bootstrap 4.3을 기본 프레임워크로 제작 하였기 때문에 크롬, 파이어폭스, 사파리 등 다양한 브라우저와 IE11 이상의 최신 버전에서 정상 동작 합니다. 또한 반응형 으로 디자인하여 다양한 디바이스에서 최적화된 화면을 보여 줍니다. 기능 이 스킨은 여러가지 특징이 있지만 대표적으로 아래와 같이 10개의 특징을 가지고 있습니다. 1. 컨텐츠에 집중할 수 있는 깔끔한 디자인 컨텐츠에 집중할 수 있는 디자인으로 최소의 색상과 면 분할로 주변의 요소 보다 컨텐츠..
