현재 사용중인 모니터가 4K여서 지금의 친효스킨 TOP버튼 세트 버튼의 크기가 딱히 문제가 되지는 않았습니다. 하지만 해상도가 FHD 이하급으로 내려가면 버튼 사이즈가 꽤 크다는것을 직감했습니다. 특히 티스토리에서 기본 제공하는 구독 버튼과의 겹침이 있어서 이 부분을 수정해야겠다고 생각했습니다. 내년 초 쯤 배포할 친효스킨 2.5 버전에서는 이와 관련된 항목이 스킨 옵션에 제공됩니다. 허나 그때까지 못 기다리시는 분들을 위해서 수동으로 변경하는 방법을 안내해 드리겠습니다. CSS 수정 먼저 아래의 첨부파일을 다운로드 받습니다. 다운로드 완료 후 열람해 보시면 CSS 코드가 두 개 들어있음을 확인할 수 있습니다. 각 코드별 사용 위치가 다르니 잘 따라해 주시기 바랍니다. 먼저 친효스킨의 CSS에서 "top..
친효스킨을 사용중이신 어떤분께서 문의를 해주셨습니다. 친효스킨의 모바일 페이지 화면에서 댓글 텍스트 크기를 가로로 100% 늘릴 수 없는지에 대해서요. PC에서는 매우 보기좋게 출력이 되지만 모바일의 경우는 아무래도 가로 크기에 제한이 있으니 몇 글자 안 들어가있는 댓글의 경우라면 큰 문제는 없지만, 긴 글의 댓글은 세로로 길어져서 보기가 조금 힘들수도 있습니다. 그래서 이런 부분을 조금이라도 해소하고자 문의를 주신 것 같습니다. 문제의 상황을 스크린샷으로 보여드립니다. 이런 상황입니다. 댓글 말풍선의 여백을 최대한 가로로 키울 수 있는지에 대한 문의인 것입니다. 간단합니다. 해결 방법을 알아보겠습니다. CSS에서 다음의 코드를 찾습니다. #contents .commentList .rgy-rewrite-..
구글 서치 콘솔에 사이트맵을 등록하는 아주 따끈따끈한 최신 방법입니다. 엄청 간단합니다. 과거에는 수동으로 사이트맵이라는 페이지를 만들어서 등록해야만 했지만 지금은 티스토리측에서 아예 사이트맵 전용 URL을 새로 추가시켰습니다. 따라서 해당 주소만 입력해주면 끝입니다. 자신의 URL 주소 끝에 /sitemap만 붙여넣기를 해주면 끝이에요. 제 경우에는 https://rgy0409.tistory.com/sitemap이 되겠네요. 먼저 구글 서치 콘솔에 로그인을 합니다. 티스토리 관리자의 플러그인에 보시면 구글 서치 콘솔 관련 플러그인이 있습니다. 해당 플러그인을 사용해서 편리하게 내 티스토리와 구글서치콘솔을 서로 연동시킬 수 있습니다. 해당 방법은 아래의 글을 참고하시기 바랍니다. 내 티스토리를 구글 웹마..
안녕하세요. 친절한효자손입니다. 티스토리에는 정말 다양한 반응형 스킨들이 있습니다. 기본 스킨부터 사용자가 직접 만들어 배포하는 무료 및 유료 스킨들까지 포함하면 개수가 엄청 많이 있습니다. 개인적으로는 친효스킨이 공식 스킨이 되기를 바라는 마음이 굴뚝같지만... 아마 그럴 일은 없겠죠. 그래도 점점 친효스킨을 사용하는 분들이 늘어나는 것 같아서 한편으로는 매우 뿌듯함과 보람됨을 느낍니다. 동시에 더 잘 만들고 관리해야겠다는 마음이 생깁니다. 친효스킨을 사용하시는 분들께서 스킨에 대한 설정 방법을 물어보시면 매우 정확하게 답변해 드릴 수 있습니다. 제가 만든 스킨이니까 구조라던지 스타일이 어디서 어떻게 적용되는지 100% 알고 있기 때문입니다. 하지만 타스킨의 경우에는 그렇지 않습니다. 제가 만든 스킨이..
최근 약 보름 정도 글을 전혀 작성하지 않았습니다. 아니, 정확하게는 어떤 글을 써야할지 막막했습니다. 딱히 글을 쓰고 싶은 생각이 없었어요. 의무감에 글을 작성하는 스타일이 아니다보니 이따금씩 이렇게 뭘 써야 좋을지 막힐때가 있습니다. 저도 사람이니까요. 꾸준히 하루 최소 한 개의 글이 올라오는 이유는 모두 예약글이기 때문입니다. 매일 하루 하나씩 꾸준하게 글을 쓰고 있지 않습니다. 저는 생각보다 엄청 게으릅니다. 제 자신도 그걸 알기 때문에 글을 절대로 당일에 올리지 않습니다. 아껴두고 있는 것입니다. 웹툰 작가들은 세이브 원고라는게 있습니다. 갑자기 바쁜 일 때문에 그림을 못 그리게 될 때, 혹은 몸이 좋지 않아서 작업을 할 수 없을 때를 대비하는 방법이지요. 일종의 보험입니다. 저 역시도 웹툰 카..
안녕하세요. 친절한효자손입니다. 미리 안내해드렸던대로 친효스킨 클래식 버전을 배포준비중입니다. 예정보다 빠르게 10월 1일에 배포를 진행하려고 합니다. 친효스킨 클래식은 기존의 친효스킨 뼈대를 그대로 유지하는 대신 애드센스를 제외한 모든 스킨 편집 옵션을 제거한 버전입니다. 따라서 HTML이라던지 CSS의 코드가 오리지널에 비해 대폭 축소되었다는것이 특징이라고 할 수 있겠습니다. 그냥 친효스킨의 스타일 그대로를 사용하기를 원하는 분들에게만 추천합니다. HTML과 CSS 압축 HTML에서 압축할 수 있는 영역은 입니다. 스킨편집 페이지의 다양한 옵션들을 제거하니까 안에 들어있던 다양한 스타일 옵션들이 99% 제거되었습니다. 따라서 스킨 로딩 시간이 소폭 상승하였습니다. CSS 부분도 마찬가지로 압축해놓은 ..
댓글로 문의를 주신 내용이 있는데 아무래도 공식적으로 한번 짚고 넘어가면 좋을 것 같아서 글을 작성하게 되었습니다. 의외로 이걸 모르는 분들이 좀 계시는 것 같습니다. 따라서 티스토리를 이제 막 시작하시거나 아직 초보이신 분들은 꼭 한번 읽어주시기 바랍니다. 티스토리 비밀 댓글(방명록) 시스템 티스토리도 여느 블로그와 다를 바 없이 댓글을 남길 수 있는 기능을 갖추고 있습니다. 댓글을 남길때에는 공개형태와 비밀글 형태 이 두가지로 진행이 가능합니다. 가장 흔한 공개 형태는 그냥 댓글로 남기고자 하는 텍스트 입력 후 댓글 남기기 버튼을 누르면 됩니다. 그러면 비밀글을 어떻게 남길까요? 친효스킨을 기준으로 설명드리겠습니다. 본문 아래에 위치한 댓글란을 살펴보시면 텍스트 입력란 바로 위에 토글 스위치가 있습니..
안녕하세요. 친절한효자손입니다. 티스토리 최고의 스킨을 위해서 불철주야(?) 열심히 애드온을 만들고 사용자 입장에서 다양한 커스텀을 원활하게 진행할 수 있는 노력을 기울이고 있습니다. 그 결과 꽤 많은 발전을 하게 되었습니다. 하지만 더불어 스킨의 용량도 조금씩 확장이 되어가고 있습니다. 기능은 점차 다양해지고 있지만 반대로 보자면 그만큼 무거워지고 있는 것입니다. 친효스킨 : 클래식 스킨 그래서 친효스킨을 아주 담백하게 만들어 보려고 합니다. 이름하여 「친효스킨 : 클래식」 입니다. 기존 친효스킨의 기본 뼈대와 스타일은 그대로 유지하되 스킨편집에서 설정했던 다양한 스킨의 변화에 대한 것들을 모조리 제거할 생각입니다. 애드센스 옵션을 제외한 나머지를 모두 없앨 것입니다. 즉 스킨의 스타일 그대로를 사용하..
안녕하세요. 친절한효자손입니다. 친효스킨 2.4 버전 이상부터는 애드센스의 노출 방식이 두 가지로 진행됩니다. 기존 버전에서는 티스토리 관리자에서의 애드센스가 모바일에서 출력되도록 설계되도록 변경되었는데 이 부분을 원치 않으신 분들을 위한 안내문입니다. 아마 어떤 콘텐츠를 관리하고 있느냐에 따라 애드센스 수익은 천차만별일텐데 제 경우는 애드센스를 모바일 해상도와 모바일 주소에서까지 억지로 노출시키는 경우, 수익이 워낙 들쑥날쑥하는날이 많더군요. 이유는 알 수 없습니다. 아마도 제 경우는 PC 해상도에서의 유입이 가장 많기 때문에 굳이 억지로 노출시키지 않아도 되는 모바일 애드센스를 사용하지 않는게 더 나을수도 있지 않을까라는 생각을 해봅니다. 제 경우와 비슷한 분들이 계신다면 친효스킨의 다음 부분을 수정..
티스토리에는 다양한 플러그인이 있습니다. 그 중에서 배너출력이라는 플러그인은 매우 요긴합니다. 아마 많은 티스토리 유저분들이 배너출력 플러그인을 사용하리라 믿어 의심치 않습니다. 애드센스를 사이드바에 삽입할 때 이 플러그인을 사용하니까요. 배너출력 플러그인을 활성화하면 두 가지 기능이 관리자 > 꾸미기 > 사이드바에 추가됩니다. 이미지 배너출력과 HTML 배너출력 모듈입니다. 이 중에서 애드센스를 활용하는건 바로 HTML 배너출력입니다. 말그대로 HTML 태그를 그대로 사용할 수 있기 때문입니다. 그렇다면 다른 모듈인 이미지 배너출력은 어떨때 활용하면 좋을까요? 현재 저는 이렇게 활용을 하고있습니다. 최근에 네이버 OGQ마켓에 스티커를 하나 업로드했습니다. 홍보차 배너를 사이드바에 배치했는데 이때 이미지..
안녕하세요. 친절한효자손입니다. 본 페이지는 그동안 작성한 스킨 제작 관련 글들을 한데 모은 링크 페이지입니다. 티스토리 사용 설명서 페이지와 같은 역할을 합니다. 제 경우 HTML와 CSS 등의 웹퍼블리싱을 배우고 티스토리에 적용시키려 했는데 아시다시피 티스토리에서는 치환자라고 하는 스크립트를 사용하기에 HTML의 뼈대도, 또 그에 따른 CSS 스타일도 사용자 임의대로 자유롭게 편집을 하기가 곤란했습니다. 그리고 치환자 개념도 없었기때문에 스킨 제작에 더 큰 어려움이 있었습니다. 저와 같은 어려움을 겪으시는 분들에게 도움이 되고자 열심히 글을 작성했습니다. 친효스킨을 제작하면서 알게된 개념들을 최대한 이해가 쉽도록 작성했지만 저 역시 사람인지라 제대로 전달이 되지 않을수도 있습니다. 머릿속에 개념은 있..
친효스킨으로 하루에 최소 한 번쯤은 검색을 해서 다른 분들은 잘 사용하고 있는지, 어떤 분들이 어떤 콘텐츠를 어떻게 운영하고 있는지 옵저버처럼 여러분들의 눈에는 보이지 않게 탐색하고 있습니다. 그러면 운영을 찰지게 잘 하시는 분도 간혹 계시지만 애석하게도 대부분의 사람들은 여전히 콘텐츠를 수익 목적으로만 운영하는 분들이 압도적입니다. 이해합니다. 저 역시도 그렇게 시작을 했으니까요. 그런데 친효스킨을 수익과 관련된 스킨으로 분류하는 분들이 계시는 것 같습니다. 예를 들자면 "수익형 티스토리를 위한 스킨 추천" 이라는 제목의 글을 작성한다면 그 내용중에 친효스킨이 있는겁니다. 왜 수익적인 부분인지 궁금해서 읽어보면 역시 정답은 이겁니다. "애드센스를 적시적소 구석 구석 배치할 수 있다." 음.... 사실 ..
지난 시간에 이어서 추가 설명을 드리겠습니다. 바로 이전 시간에 커버 기능에 대해 소개해드렸습니다. 친효스킨에서 커버 기능을 구축하기위해 HTML와 CSS, index.xml에 관련 태그들을 모두 마크업했는데 몇 가지 자세히 설명을 못 드린 부분이 있습니다. 그것을 오늘 소개시켜드리고자 합니다. 친효스킨 2.4 버전까지는 네 가지의 스타일 커버가 적용되었습니다. 그 중에서 썸네일 관련 태그를 HTML에서 살펴보시면 다음의 영역을 확인할 수 있습니다. HTML 살펴보기 특히 style 부분에 보시면 다소 복잡한 태그들이 이것 저것 들어가있습니다. 제가 웹퍼블리싱 시간에 배우기로는 이런 형태가 아닌, 스타일을 정의하는 CSS 부분에 대해서만 마크업하도록 배웠습니다. 근데 뭔가 이상한 태그들이 더 추가가 되어..
이번에는 타입 중 아직까지 언급을 하지 않은 마지막 단계인 COLOR(컬러)입니다. 어떤 설정인지 단어만 봐도 바로 이해할 수 있을겁니다. 바로 그렇습니다. 색 지정에 대한 설정이 가능한 옵션을 부여합니다. 친효스킨에서는 컬러 설정 부분이 상당히 많이 쓰입니다. 대표적으로 댓글과 메인 테마 색상을 설정하는데 이 옵션이 사용되었습니다. 댓글의 경우는 세부적으로 나뉘어 다양한 영역에 대한 색 지정이 가능합니다. COLOR 타입 또한 STRING 처럼 HTML 문서 내의 안쪽에 존재하는 영역에서 CSS를 제어할 수 있습니다. 또한 내의 인라인 방식의 스타일도 제어가 가능합니다. 하지만 굳이 인라인 방식까지 제어할 필요는 없는 것 같습니다. 그냥 내에서도 충분합니다. COLOR 타입은 STRING과 똑같다고 보..
이번에는 옵션 중 STRING에 대해 알아볼 차례입니다. 이 타입도 정말 쓰임새가 많습니다. 친효스킨의 경우에도 정말 많이 적용된 스킨 편집 옵션 중 하나입니다. 대표적으로 애드센스 클라이언트값 입력 부분과 슬롯 번호 입력 부분의 경우입니다. 그밖에도 추천글 모듈에 대한 부분으로 URL 입력 항목이나 텍스트 입력 항목이 모두 STRING 타입을 이용한 부분입니다. STRING 타입은 HTML에서, 그리고 HTML 문서 내의 안에 존재하는 의 내부 방식에 따른 CSS 스타일에서 그 값을 로드합니다. 더욱 이해가 쉽도록 친효스킨에서 실제로 사용된 예시를 살펴보겠습니다. HTML 살펴보기 첫 번째 예시입니다. #contents .article { font-size: !important; } @media (mi..
이번에는 index 페이지에 있는 여러 타입들 중에서 SELECT에 대해서 자세히 알아볼 것입니다. 친효스킨에도 Select 타입의 스킨 설정 옵션이 몇 가지 적용되어 있습니다. 단어의 의미를 그대로 직역해 보시기 바랍니다. 말 그대로 선택이라는 의미입니다. 그렇습니다. 여러가지 옵션들 중에서 선택을 필요로할때 적용할 수 있는 스킨 옵션입니다. 지금까지 소개해드렸던 스킨 제작 가이드 중에서 아마 설명이 많이 복잡하게 들어갈 것 같습니다. 이게 단순하게 작업이 진행되는것이 아니기 때문입니다. BOOL 타입의 경우는 그룹치환자를 만들어서 감싸주고 치환자 매소드를 index 페이지에 연결만 시켜주면 On / Off 스위치를 스킨설정 페이지에 만들 수 있었습니다. 그러나 SELECT 타입은 이렇게 단순하지가 않..
지난 시간에 이어서 이번에는 커버 코드에 있는 일부 기능에 대해 더 자세히 알아보는 시간을 가져보겠습니다. 개인적으로 정말 많이 사용하는 기능 중 하나입니다. 사용 방법도 그리 어렵지 않습니다. 티스토리 반응형 스킨 설정 옵션을 보시면 스킨마다 다르겠으나 기본적으로 토글(Togle) 스위치가 있는 옵션을 발견하실 수 있을겁니다. 켜고 끄는 스위치 옵션입니다. 친효스킨의 경우에는 애드센스를 켜고 끌때, 프로필 사진이라던지 프로필 아래의 다양한 SNS 아이콘들을 켜고 끌 때에도 이 기능을 사용했습니다. HTML 살펴보기 친효스킨 커버에 있는 HTML 코드 중 일부입니다. 태그를 그룹치환자가 감싸고 있는 형태입니다. 이 그룹 치환자는 제가 임의로 만든 치환자 태그입니다. 그룹 치환자를 만들었으니 이것은 ind..
이번에는 커버 기능에 대해 좀 더 자세히 살펴보겠습니다. 이미 티스토리 스킨 제작 가이드 페이지에서 커버 부분이 나름 상세하게 나와있으니 한번 확인해 주시기 바랍니다. 특히 치환자 부분을 꼼꼼히 살펴보시기 바랍니다. https://tistory.github.io/document-tistory-skin/common/cover.html 홈 커버 · GitBook 홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 tistory.github.io 치환자 종류가 생각보다 많습니다. 중요한 포인트는 반드시 가이드에 명시된 치환자 전부를 다 사용할 필요는 없다는 것입니다..
티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있습니다. 그렇다면 제어를 위해서는 반드시 HTML에 무언가가 존재해야한다는걸 짐작할 수 있을 것입니다. 그것이 바로 티스토리 스킨 가이드에서 명시하고 있는 그룹 치환자와 값 치환자입니다. 치환자 공통 부분 그룹 치환자와 값 치환자는 정해진 태그가 있는 반면 개발자가 임의로 만드는 형태도 존재합니다. 친효스킨을 기준으로 설명드리자면 정해진 치환자는 다음과 같습니다. 전체가 아닌 일부만 말씀드리겠습니다. 그룹 치환자 : , , 값 치환자 : , , 티스토리 스킨 가이드에 공식적으로 나와있는 모든 그룹 및..
안녕하세요. 친절한효자손입니다. 댓글로 인용구 수정 방법에 대해서 문의를 주셨는데 답변으로는 내용이 너무 길어 불가능하여 이렇게 따로 글을 작성하게 되었습니다. 친효스킨의 경우는 대부분의 중요 구간을 주석으로 표시해두었습니다. 따라서 CSS에서 해당 스타일에 대한 부분을 한번 키워드 검색해 보시면 좀 더 찾기 쉬울 것입니다. 혹은 크롬 개발자툴로 해당 위치 영역을 탐색하여 관련 CSS를 확인하는 방법도 좋습니다. 참고로 이 방법은 친효스킨뿐만 아니라 티스토리에서 사용 가능한 모든 반응형 스킨에서 적용 가능한 방법입니다. 인용구 스타일 확인 먼저 친효스킨 적용 시 인용구는 어떻게 적용되는지 확인해 봅니다. 인용구1 스타일 인용구2 스타일 인용구3 스타일 이렇게 적용이 되고 있습니다. 본문에서는 두번째 인용..
안녕하세요. 친절한효자손입니다. 친효스킨을 꾸준히 사랑해주셔서 감사합니다. 이번 9월에 업데이트 될 친효스킨 2.4 버전에 대한 상세한 내용을 전해드리려고 합니다. 생각보다 많은 부분이 수정되었습니다. 2.3 버전때도 더 이상 손 볼 곳은 없다고 생각했는데 많은 분들께서 피드백을 주시고 이로 인해 발생한 버그들이 꽤 있었습니다. 발견 즉시 열심히 수정을 하였습니다. 현재 머물고 계신 이곳! 친절한효자손 취미생활 티스토리에 친효스킨 2.4 버전이 설치되어 있습니다. 메인 화면을 가보시면 못 보던 커버 1종이 추가된걸 확인하실 수 있으실겁니다. 또한 사이드바에 디데이 모듈도 보이고 스트리밍 모듈도 보이는군요. 꽤 많은 부분이 발전하고 고쳐졌습니다. 특히 애드센스 부분도 많이 변모했습니다. 그러면 어떻게 업그..
HTML과 CSS, 자바스크립트를 어느정도 할 줄 아신다면 아마 레이아웃 구성 부분은 큰 문제없이 세팅을 할 수 있을 것입니다. 제가 티스토리 스킨을 만들 때 가장 어려웠던 부분은 바로 index.xml의 활용이었습니다. 이 문서를 어떻게 적용시켜야 제어가 가능한지 전혀 몰랐기 때문입니다. 그러니 가장 먼저 index.xml 문서에 대해서 개념을 이해할 필요가 있겠습니다. 티스토리 스킨 제작 가이드 페이지에도 정의가 나름 명시되어 있지만 너무 요약된 설명 때문에 초보자인 제가 볼 때는 당췌 이게 무슨 의미인지를 전혀 알 수 없었습니다. 아마 저와 비슷한 시행착오를 겪는 분들이 많을 것이라 짐작을 하며 최대한 쉽게 정리를 다시 해보려고 합니다. index.xml 페이지 구조 앞서 설명드렸던 강좌를 정독하셨..
티스토리 스킨 제작을 위한 티스토리 가이드 페이지가 있긴 합니다만 설명이 많이 부실합니다. 저 같은 초보자에게는 이게 대체 무슨 의미인지를 모르겠더군요. 제가 만약 티스토리 부서에 배치된 직원이라면 절대 그렇게 설명하지 않습니다. 제대로 설명을 해놨을 것입니다. 그런 마음을 담아서 이번 강좌부터는 제 스타일대로 나름 자세한 설명을 진행하려고 합니다. 부디 이 내용이 티스토리 스킨을 제작하시는 분들에게 도움이 되기를 바랍니다. 스킨 구성 파일 중 index.xml 의 역할 이 파일은 티스토리 스킨편집의 구성을 담당합니다. 스킨의 설정을 직접적으로 진행하기 위한 페이지로서 사용자 편의성을 제공하는데 목적을 두고 있습니다. 스킨 편집을 위한 파일이라고 생각하시면 됩니다. 스킨의 HTML에 특수 태그를 만들고 ..
티스토리는 HTML을 수정할 수 있다는 막강한 장점이 있습니다. 이것을 활용해서 사이드바에 다양한 형태의 배너를 게시할 수 있습니다. 대표적으로는 애드센스가 있습니다. 물론 요즘은 애드센스 계정과의 자체 연동으로 인해 버튼 하나만 켜두면 자동으로 애드센스 스크립트가 들어가 광고를 너무 편리하게 배치할 수 있게 되었습니다. 허나 개인적으로 사이드바에 어떤 배너를 만들고자 할 때는 모두 수동으로 설정해야만 합니다. 본문에서는 어떻게 사이드바에 이미지 배너를 생성하는지에 대해 알아볼 것입니다. 타스킨도 사용 가능한 방법이며 당연히 친효스킨에서도 정상적인 동작을 하는 것 까지 확인했습니다. 배너에 사용할 이미지 준비 가장 먼저 이미지를 준비합시다. 이미지는 되도록 너무 크지 않는것을 추천하며 확장자는 gif 또..
언제부터인가 자꾸 본문 수정 시 혹은 글 작성 시 태그와 태그에 알 수 없는 속성값이 부여가 되기 시작했습니다. data-ke-size라고 하는 이 녀석은 폰트의 크기를 지정한 값으로 억지로 변경하는 옵션입니다. size16, size20, size24 등등등의 크기값이 큰 따옴표 안에 들어가버리는데 정말이지 여간 귀찮은것이 아닙니다. 물론 해결 방법은 있습니다. 글을 작성할때마다 해당 속성값을 수동으로 모두 지워버리는 것입니다. 이 방법에 대해서는 아래에 더 자세히 언급되어 있으니 한번 시간 괜찮으시면 읽어보시기 바랍니다. 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 안녕하세요. ..
안녕하세요. 친절한효자손입니다. 댓글로 제보를 주셔서 확인해보니 현재 친효스킨 2.3 버전에서 본문에 리스트 작업 시 들여쓰기가 제대로 되지 않고 리스트 스타일이 제대로 출력되지 않는 문제를 발견했습니다. 따라서 해당 문제를 해결할 수 있는 방법을 안내해 드리겠습니다. TIP 스킨 편집 전 반드시 백업은 필수입니다. CSS 수정하기 친효스킨의 스킨 편집 페이지로 들어갑니다. CSS 탭에서 다음의 코드를 찾습니다. 한글로 「본문 리스트」라고 검색하시면 빠르게 찾을 수 있을겁니다. /* 본문 리스트 */ #contents .article > ul, #contents .article > ol, #contents .article div.tt_article_useless_p_margin > ul, #content..
안녕하세요. 친절한효자손입니다. 2021년 5월 12일 쯤 티스토리 에디터가 또 한번 도약을 했습니다. 꾸준히 업데이트를 해줘서 무척이나 감사하긴한데 문제는 이번 업데이트로 인해서 문제점이 발생했습니다. 먼저 업데이트 내용을 살펴보고자 합니다. PC 기준으로 설명드립니다. 인용구 기능 추가 인용구는 원래 있었지만 새로운 한 가지 스타일이 추가되었습니다. 스타일은 아래와 같습니다. 각각 하나씩 순차적으로 적용시킨 결과입니다. 인용구입니다. 인용구입니다. 인용구입니다. 이렇게 세 가지입니다. 첫번째 인용구 스타일이 새롭게 추가된 것입니다. 참고로 첫번째 인용구 스타일을 적용시키면 글꼴도 변경됩니다. 스킨의 글꼴과 별개로 적용됩니다. 위의 인용구들을 HTML 코드로 살펴보겠습니다. 인용구입니다. 인용구입니다...
티스토리는 글로 만드는 창작 플랫폼입니다. 따라서 저작권은 기본적으로 에디터 본인에게 있습니다. 이러한 저작권자 표시를 본문 하단에 나타낼 수 있는 옵션이 있습니다. 그리고 글을 작성할때 해당 옵션에 대해 설정도 가능합니다. 상업적 이용에 대한 설정이나 콘텐츠 변경, 즉 2차 변형에 대한 설정을 하는 것입니다. 그러면 어디서 어떻게 설정하는건지 알아보겠습니다. 관리자에서 기본 설정하기 티스토리 관리자 화면의 모습입니다. 콘텐츠 > 설정으로 들어가보시면 오른쪽에 저작물 사용 허가(CCL) 표기에 대한 설정이 있습니다. 저는 기본적으로 출력되도록 설정했습니다. 그리고 상업적 이용 및 콘텐츠 변경을 모두 비허용했습니다. 이곳에서 전체적인 라이선스 설정을 하시면 됩니다. 글쓰기시 설정하기 글을 다 작성하고 오른..
안녕하세요. 친절한효자손입니다. 친효스킨 2.3 버전에 대한 일부 코드 수정 안내입니다. 치명적인 문제는 아닙니다. 본문 로딩 스크립트의 위치를 변경하고자 이렇게 안내를 드리려고 합니다. 본문을 다 로드 후 스크립트가 실행되다보니 바로 곰돌이가 보이지 않고 약 0.5초 정도 후 곰돌이가 보이는 문제를 수정했습니다. 위치를 옮기면 이제 로딩 스크립트가 바로 실행되고 본문 로딩이 모두 완료되면 곰돌이도 사라지게 될 것입니다. HTML 수정 방법 다음의 스크립트를 HTML 편집 화면에서 찾습니다. 위치는 바로 위에 있을 것입니다. 이것이 스킨 로딩과 관련된 태그 코드입니다. 이 코드를 모두 블록 처리하여 잘라내기(Ctrl+X) 합니다. 그리고 바로 뒤에 붙여넣기 해줍니다. 수정 완료 후의 모습입니다. 친효스킨..
제목만보고는 무슨 뜻인지 잘 모르실 수 있습니다. 예를 들자면 이런 경우입니다. 티스토리 글쓰기 메뉴 중에는 표 만들기가 있습니다. 그리고 표를 삽입하면 모든 셀이 동일하게 백그라운드가 텅 비어있는 상태입니다. 근데 보통 표를 만들때는 첫번째 줄에 어떤 메뉴 이름이 들어가곤 합니다. 가령 예를 들어서 시간표를 만든다고 가정한다면 첫번째 셀에는 월,화,수,목,금,토 같은 요일이 들어갈겁니다. 가장 왼쪽의 세로 셀은 1교시부터 5교시까지의 시간이 들어갈 것이구요. 바로 이 특정 셀의 백그라운드 배경색상을 넣는 방법입니다. 안타깝게도 수동으로 진행해야 합니다. 실전을 살펴보기 위해서 아래에 임의로 표를 만들었습니다. 그리고 셀의 모든 텍스트는 중앙정렬이 되게 해두었습니다. 티스토리 표 만들기 태그 구조 가로셀..