친절한효자손 취미생활

친효스킨 → (38)건

티스토리에 인디케이터 (프로그래스 바 - Progress Bar) 설치하는 방법

인디케이터는 표시기라는 뜻을 가지고 있습니다. 그렇다면 티스토리에서의 인디케이터는 어떤 의미를 가질까요? 무언가를 표시한다는 뜻인데, 과연 뭘 표시할까요? 가장 많이 사용하는 인디케이터는 본문의 내용에 대한 분량을 표시하는 기능 입니다. 스크롤을 아래로 내리게 될 수록 점점 바(Bar)가 차오르는 페이지를 보신 적 있으신가요? 현재 친효스킨 1.17 버전 이상부터는 이러한 인디케이터가 기본으로 적용되어 있습니다. 본 페이지는 인디케이터가 미적용된 티스토리 스킨에서 세팅하는 방법에 대해서 설명하고자 합니다. HTML Script Setting 사실 복잡할게 없습니다. 그냥 이거 하나만 세팅하면 끝 입니다. 먼저 아래의 첨부파일을 다운받아주시기 바랍니다. 다운로드가 완료되었다면 한번 텍스트 파일을 열어보시기..
WEB&SNS/티스토리 2020. 6. 2. 00:07

친효스킨! 본문 머리글 (소제목) 스타일 변경 방법

친효스킨 커스텀 강좌 입니다. 이번 내용은 본문의 소제목으로서 역할을 하는 머리글에 대해서 수정하는 내용 입니다. 친효스킨에는 최대한 사용자가 수정을 용이하게 할 수 있도록 주석을 꼼꼼히 입력했습니다. 따라서 해당 내용에 대해서 대략적으로 검색하면 금방 찾을 수 있을 겁니다. "본문 소제목" 이라고 CSS에서 검색하시면 아래의 부분을 찾을 수 있습니다. /* 본문 소제목 */ #contents .article h1, #contents .article h2, #contents .article h3, #contents .article h4, #contents .article h5, #contents .article h6 { padding: 2px 5px 4px; margin: 20px 0; border-bo..
WEB&SNS/친효스킨 2020. 5. 26. 00:02

티스토리 무료 반응형 스킨! 친효스킨 1.18 업데이트에서 추가되는 내용 안내

안녕하세요, 친절한효자손 입니다. 오랜만에 이렇게 공식 석상에서(?) 다시 한 번 인사를 드리게 되었습니다. 다름이 아니고 제목처럼 친효스킨 1.18 버전에 대한 간단한 안내를 드리려고 글을 작성하게 되었습니다. 이번 업데이트는 정말 친효스킨 역사상 가장 비전있는 업그레이드가 될 것 같습니다. 현재까지 1.18버전 개발 내용베일에 쌓여있던 INDEX 문서에 대해서 하나 하나 수수께끼를 풀어나가는 중 입니다. 예전부터 사용자 편의성을 위해서 이 스킨 편집 페이지에서 쉽게 조작할 수 있는 부분을 파악 중 이었는데 솔직히 뭔 소린지 몰라서 미루고 있었습니다. 하지만 드디어! 하나 하나 정체를 파악하기 시작했습니다. 현재 우선 적용된건 보시는 것 처럼 최상단 및 최하단 애드센스를 쉽게 활성화 시킬 수 있도록 개..
WEB&SNS/친효스킨 2020. 5. 16. 12:20

친효스킨 본문 상단 애드센스 일부 해상도 구간에 대한 수정 내용

안녕하세요, 친절한효자손 입니다. 친효스킨을 사용하시는 분들이 아주 조금씩 늘어나고 있습니다. 뿌듯합니다. 더욱 증진하도록 하겠습니다. 현재 친효스킨 사용자 중 상단 애드센스의 오류가 보고되었습니다. 오류 내용은 일부 해상도 구간에서 상단의 애드센스 2개 광고가 세로 형태로 배치가 되는 문제 입니다. 문제의 원인을 파악했으며 현재 수정 완료 되었습니다. 불편을 드려 죄송합니다. 요약 내용은 다음과 같습니다. -본문 상단 애드센스에 대하여 1000px~1010px 해상도에서 2개의 애드센스가 세로로 배치되는 문제-친효애드온 미디어쿼리 수정으로 해결 : 문제의 해상도에서 광고가 1개만 나타나도록 수정 따라서 아래의 친효애드온 페이지에 방문하시어 첨부파일을 다운로드 받으시고 불편하겠지만 다시 재수정을 하셔서 ..
WEB&SNS/친효스킨 2020. 5. 13. 08:58

친효스킨! 본문 "이롭게 바탕체" 폰트 (글꼴 글씨체) 적용 방법

친효스킨 1.16 버전 이상부터는 본문에 "리디바탕체"가 기본 글꼴 입니다. 1.17 버전에서는 "이롭게 바탕체"로 변경될 예정 입니다. 둘 다 큰 차이는 없습니다. 모바일에서도 두 글꼴 모두 가독성이 뛰어납니다. 하지만 윈도우에서는 리디바탕체가 다소 두껍게 보이는 듯 합니다. 이 부분의 단점을 해결하기 위해서 이롭게 바탕체로 변경을 진행 합니다. 1.17 버전에서는 기본으로 적용되어 있지만 수동으로 사용해보고자 하시는 분들은 아래의 방법대로 진행하시면 됩니다. 이롭게 바탕체 다운받기 아래의 홈페이지에 방문하시어 "이롭게 바탕체"를 다운로드 받으시기 바랍니다. 이롭게바탕체 배포 공식 웹페이지 다운로드 완료 후 압축을 풀면 폰트파일이 총 4개가 있을 것 입니다. 이 네개의 파일 중, IropkeBatang..
WEB&SNS/친효스킨 2020. 5. 13. 00:03

티스토리 반응형 스킨! 친효스킨 1.17 버전 업데이트 완료 안내

안녕하세요, 친절한효자손 입니다. 코로나19로 다들 많이 힘드시죠? 조금만 참고 견디면 됩니다. 얼마 안 남았잖아요? 이 시기를 잘 극복하여 더 이상 주변 사람들이 아플일이 없도록 만들어 봅시다. 오늘은 친효스킨 v1.17 업데이트에 대해서 완료가 되었다는 기쁜 소식을 전해드리기 위해서 이렇게 글을 작성하게 되었습니다. 업데이트된 내용을 한번 간략히 살펴보겠습니다. 친효스킨 v1.17 업데이트 내용 -친효애드온 : 포스트잇 모듈 마크1 적용 완료 -블로그정보 모듈 URL 텍스트 주소 입력 시 사이드바의 가로 사이즈를 초과하여 넘어가는 문제 수정 -블로그정보(프로필) 모듈 아래에 SNS 관련 아이콘 추가 -새로운 글쓰기 에디터 : 코드블럭의 선택자 및 매소드 수정 -새로운 글쓰기 에디터 : 더보기 및 접기..
WEB&SNS/친효스킨 2020. 5. 1. 00:04

친효스킨! 사이드바 블로그정보 프로필 모듈에 SNS 아이콘 만드는 방법

친효스킨 1.17 버전에서 적용되는 기능인데, 물어보시는 분들이 좀 계셔서 아예 이렇게 따로 언급하는게 더 낫겠다는 생각으로 강좌글을 하나 올립니다. 방법은 어렵지 않습니다. 현재 친효스킨 사이드바에는 프로필 (블로그정보) 모듈이 있습니다. 이 아래에 페이스북, 트위터, 인스타그램, 유튜브, 그리고 이메일로 바로갈 수 있는 아이콘을 배치했습니다. 어떻게 배치하는지 알아보도록 합니다. HTML 수정 먼저 친효스킨의 HTML에서 아래의 영역을 찾습니다. "블로그정보" 라고 검색하면 쉽게 찾을 수 있습니다. 블로그정보 이 부분 입니다. 여기를 수정해 줘야 합니다. 아래의 첨부파일에 있는 태그로 모두 교체해주시면 됩니다. 위의 첨부파일 중에서 수정해야 할 부분은 다음과 같습니다. 바로 이 부분 입니다. 먼저 a..
WEB&SNS/친효스킨 2020. 4. 30. 00:04

친효스킨! 오른쪽 상단 글쓰기 버튼 신형글쓰기 URL로 변경하는 방법

친효스킨의 오른쪽 상단에는 여러가지 아이콘들이 있습니다. 왼쪽부터 홈으로, 전체글보기, 방명록, 글쓰기, 관리자, 로그인/로그아웃 버튼 입니다. 이 중에서 글쓰기 버튼은 현재 구형 글쓰기 에디터로 들어가도록 설정되어 있습니다. 신형(새로운) 글쓰기 에디터를 사용하시는 분들이라면 이게 불편할수도 있습니다. 따라서 이 부분을 변경하는 방법에 대해 알아보고자 합니다. 우선 친효스킨의 HTML에서 아래의 영역을 찾습니다. "글쓰기" 라고 검색하면 쉽게 찾을 수 있을 겁니다. 이 부분 입니다. 여기에서 어디를 수정해야 좋을지 감이 오시나요? 그렇습니다. 이 부분 입니다. 여기에서 a href 부분의 URL 주소만 변경해 주면 됩니다. 즉 /admin/entry/post 를 신형 주소로 바꿔주기만 하면 됩니다. 티..
WEB&SNS/친효스킨 2020. 4. 29. 00:07

친효스킨! 본문 텍스트 단어 및 글자 줄바꿈 설정 방법 (word-break)

현재 친효스킨의 본문의 경우는 word-break 매소드에 의해서 어디를 끊어서 다음줄로 넘길지에 대한 설정이 적용되어 있습니다. 친효스킨에 적용된 옵션은 break-all 로서, 글자 단위로 끊어서 다음 줄로 넘어가도록 설정되어 있습니다. 이 설정의 장점은 텍스트가 전체를 놓고 보면 가지런해서 보기가 좋다는 장점이 있습니다. 한글은 읽는데 큰 불편함은 없습니다. 단 영어의 경우는 다릅니다. 예를 들어서 apple 사과를 입력하면 보편적으로 이것을 한 글자로 인식하기 때문에 apple가 전체 다음줄로 내려가야 하지만, 그 줄에 딱 맞는 글자수를 체우고나서 나머지를 다음줄로 내려보내게 됩니다. 즉 ap까지하여 그 줄이 꽉 채워진 상태라면 ple는 다음줄로 넘어가게 되어 영어를 읽는데 상당히 어려워지는 문제..
WEB&SNS/친효스킨 2020. 4. 28. 00:07

친효스킨 : 메인화면 인덱스 페이지 텍스트 글자수 줄 수정 방법

친효스킨의 메인화면은 인덱스 페이지로 구성되어 있습니다. 글 목록이 최신 순으로 정리되어 출력됩니다. 맨 위의 글이 가장 최신 글 입니다. 그리고 목록 내용은 가장 왼쪽에 썸네일 이미지가 출력됩니다. 그리고 오른쪽으로는 제목, 본문 시작 부분의 텍스트 내용, 카테고리, 글 작성날짜와 시간이 나타나게 되어 있습니다. 여기에서 우리가 수정하고자 하는 부분은 본문의 텍스트 내용에 대한 줄 개수를 수정하는 방법 입니다. 친효스킨의 기준 해상도는 모바일 (스마트폰) 입니다. 즉 스마트폰으로 봤을 때 인덱스 페이지를 살펴보시면 본문에 대한 텍스트의 미리보기가 출력되지 않고 있음을 확인 할 수 있습니다. 썸네일과 제목, 카테고리, 발행일 및 날짜는 나오지만 본문 내용의 텍스트는 나오지 않습니다. 결국 이 의미는 특정..
WEB&SNS/친효스킨 2020. 4. 24. 00:04

친효스킨 : TOP 버튼 모바일에서 숨기는 방법

현재 친효스킨에는 PC 해상도를 기준으로 스크롤을 조금 내리면 오른쪽 하단에 TOP버튼 외 3개의 버튼이 나타나도록 설계가 되어 있습니다. 이 버튼은 모바일 해상도에서는 크기가 약 30% 작아집니다. 하지만 모바일에서 볼 때 다소 눈에 거슬리시는 분들도 계실 수 있습니다. 따라서 모바일 해상도에서는 아예 보이지 않도록 설정하는 방법에 대해 알아보겠습니다. 먼저 친효스킨의 CSS에서 아래의 부분을 검색합니다. "TOP버튼" 이라고 찾으면 됩니다. /* 친효애드온 : TOP버튼 시작 */ #topBtn { display: none; position: fixed; right: 0; bottom: 80px; transform: scale(0.7); -webkit-transform: scale(0.7); tran..
WEB&SNS/친효스킨 2020. 4. 23. 00:07

친효스킨 : 본문 폰트 (글꼴,글씨체) 변경 방법

친효스킨의 글꼴을 변경하는 방법 입니다. 그런데 전체가 아닌 본문에 대해서만 안내해드리는 이유는 스킨이 깨질 수 있기 때문 입니다. 현재 친효스킨의 기본 폰트는 "나눔고딕" 폰트 입니다. 사이드바에도 나눔고딕폰트가 적용되어 있습니다. 하지만 이 글꼴이 바뀌면 사이드바의 형태도 변화가 생길 수 있기 때문에 비추천 합니다. 친효스킨을 아름답고 오류가 없이 사용하시려면 본문에 대해서만 변경하시는것을 추천합니다. 이 외의 개인 욕심에 의해 오류가 발생하는 부분은 도와드리지 않습니다. 폰트 변경에 대한 자세한 방법을 예전에 작성한 바 있습니다. 여기에서는 별도의 폰트 파일이 아닌 구글 웹폰트를 기준으로 설명을 드립니다. 아래의 글을 참고해 주시기 바랍니다. 구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방..
WEB&SNS/친효스킨 2020. 4. 22. 00:03

친효스킨 : 본문 텍스트 줄 간격 변경 방법

친효스킨 커스터마이징에 대한 카테고리 입니다. 보통 요청에 의해 작성됩니다. 본문의 텍스트 줄 간격이 다소 좁다고 생각되시면 아래의 방법으로 조절이 가능합니다. 친효스킨의 CSS에서 아래의 코드를 검색하시기 바랍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다. /* 진짜본문 (article_rep_desc) */ #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: 1px solid var(--subColor); font-family: "RIDIBatang", "Nanum Gothic" serif; font-size: 17px..
WEB&SNS/친효스킨 2020. 4. 21. 00:04

친효스킨! 이미지 테두리 없애는 방법

친효스킨에는 이미지 테두리가 적용되어 있습니다. 본문에 이미지를 삽입하면 자동으로 테두리가 적용됩니다. 제가 강좌글을 많이 작성하는데 스크린샷 이미지를 많이 사용합니다. 화면의 일부만을 캡쳐하는 일이 많다보니 흰색 배경의 경우는 본문의 영역과 구별이 잘 안 되는 부분이 있을때가 많습니다. 그래서 이미지에 #CCC 색상의 밝은 회색계열의 테두리가 얇게 들어갑니다. 이 스타일을 해제하는 방법은 다음과 같습니다. 친효스킨의 CSS에서 아래의 영역을 검색합니다. /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.imageblock { margin: 25px auto 20px !important; outline: 1px solid #ccc..
WEB&SNS/친효스킨 2020. 4. 18. 00:06

친효스킨 1.16 버전 새로운 글쓰기 에디터 파일 첨부 시 텍스트가 본문을 초과하는 문제

안녕하세요, 친절한효자손 입니다. 오늘 확인해보니 친효스킨 1.16 버전에서 새로운 글쓰기 에디터를 사용하시는 분들에게 해당되는 문제 입니다. 첨부파일을 올리면 파일명이 짧은건 상관 없는데 긴 경우, 본문의 가로 사이즈를 초과해 버리는 문제가 발생합니다. 해당 오류는 아주 간단하게 해결 할 수 있습니다. 친효스킨의 CSS에서 아래의 부분을 검색합니다. .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename span.name { display: inline-block !important; max-width: 100% !important; height: 100% !important; padding: 5px 20px 7px !import..
WEB&SNS/친효스킨 2020. 4. 15. 16:47

친효스킨 : 본문 폰트 스마트폰(모바일) 및 PC 해상도에 따른 반응형 크기 설정

친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다. #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: ..
카테고리 없음 2020. 4. 10. 00:03

친효상담소 : 애드센스 자동광고와 스킨 변경으로 인한 여러가지 궁금증

간만에 엄청 긴 내용의 상담 메일이 도착했습니다. 읽는것도 시간이 오래 걸렸습니다. 아래는 질문 내용의 원본 메일 캡쳐본 입니다. 글씨가 작으니 아래에 질문 내용을 텍스트로 요약해서 올려보도록 하겠습니다. 안녕하세요. 친절한효자손님. 우연히 다른 분이 추천해주신 블로그가 효자손님 블로그여서 나중에 적용해야지 미루다가 오늘 친효스킨을 적용하게 되었습니다. (중략) 이제 질문 입니다. 1. 스퀘어 스킨을 쓸 때, 카테고리를 클릭하면 글에 자동광고출력이 안 되던 이유가 무엇일까요? 2. 스퀘어 스킨을 쓸 때, 반응형 광고를 하단에 달아놓으면 사진과 글이 하나도 없고 사이트맵 첨부파일만 있는 글에도 하단광고가 달렸는데, 친효스킨으로 변경 후 출력이 되지 않습니다. 일부러 내용이 없는 글에는 광고가 안 나오게 설..
WEB&SNS/친효상담소 2020. 4. 3. 00:07

친효애드온 - 관련글 참고글 모듈 (마크5)

친효스킨의 본문 끝자락에 들어가는 관련글(참고글) 모듈 입니다. 벌써 마크5로서 다섯번째 버전입니다. 기본 스타일은 모두 같지만 마우스를 올리면 나타나는 CSS 애니메이션 효과들이 모듈마다 다릅니다. 본인이 원하는 모듈을 골라서 사용하면 됩니다. 먼저 관련글 모듈을 적용하는 방법에 대해서 숙지하시기 바랍니다. 본문에서는 CSS 파일과 간단한 설명만 언급하고 있습니다. 친효애드온: 관련글 참고글 모듈 (마크1) 그리고 아래는 예시 입니다. 마우스를 올려 보시기 바랍니다. 스마트폰에서는 아마 확인이 잘 어려울 겁니다. 짧은 글 제목이것은 적당한 중간 정도 되는 괜찮고 신기한 글 제목이것은 정말이지 대단히 긴 제목을 소유한 그런 글의 링크라고 할 수 있겠다고 말할 수 있을 듯 하면서도 꽤 길게 보여지기 위해 ..
WEB&SNS/친효애드온 2020. 4. 2. 00:06

친효스킨 1.16 버전에서 이미지 좌측정렬 및 리스트 스타일 일부 적용이 안 되는 문제 해결 방법

안녕하세요, 친절한효자손 입니다. 댓글로 일부 문제에 대한 제보를 받았습니다. 현재 1.16버전에서 알려진 문제는 다음과 같습니다. 1. 새로운 글쓰기 에디터에서 본문보다 가로폭이 작은 이미지를 삽입하고 해당 이미지에 텍스트 자막(캡션)을 매우 긴 내용으로 입력 시, 이미지가 자동으로 좌측정렬이 되는 문제 2. 구버전 및 새로운 글쓰기 에디터에서 리스트 스타일로 목록 입력 시, 일부 리스트 스타일이 정상적으로 출력되지 않는 문제 이 두가지 문제 입니다. 해당 문제는 육안으로 확인 했으며, 두가지 모두 1.17 버전에서는 수정이 완료 된 상태 입니다. 하지만 지금 당장 친효스킨을 사용해야 하므로 CSS에서 위의 문제를 해결하는 방법에 대해 설명드리고자 합니다. 이미지 좌측 정렬 문제 해결 방법 친효스킨 C..
WEB&SNS/친효스킨 2020. 4. 1. 22:35

친효스킨 : 새로운 글쓰기 에디터로 이미지 삽입 시 화면을 초과하여 잘리는 문제 해결 방법

안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 ..
WEB&SNS/친효스킨 2020. 3. 20. 16:27

티스토리 반응형 스킨! 친효스킨 1.16 버전 업데이트 완료 소식

안녕하세요, 친절한효자손 입니다. 친효스킨 1.16 버전을 업데이트 완료 했음을 알리는 글 입니다. 문서번호는 3119 입니다. 이번에 업데이트 된 내용은 다음과 같습니다. 친효스킨 v1.16 업데이트 내용- 본문 이미지 상/하단 여백 공간 수정- AMP 자동광고 코드 위치 변경- 본문, 댓글, 방명록의 텍스트 및 이미지가 가로로 넘치지 않도록 수정- 본문 표 가로로 넘치지 않도록 수정 (구형 글쓰기 표 에디터)- 새로운 글쓰기 에디터 : 첨부파일 스타일 수정- 새로운 글쓰기 에디터 : 본문 이미지의 margin 값 및 여백 수정- 댓글 및 방명록 글에 삽입되는 이모티콘 텍스트 가운데 정렬로 수정- 친효애드온 : 본문 공유 모듈 업데이트 → 카카오톡 공유 아이콘 추가- 친효애드온 : 본문 공유 모듈 업데..
WEB&SNS/친효스킨 2020. 3. 1. 00:16

친효스킨이 어느덧 1주년을 맞이하게 되었습니다

친효스킨을 만들고 배포하고, 중간에 잠시 중단하는 사태도 있었으나... 인내를 가지고 열심히 틈나는대로 수정하고 개발해 왔습니다. 벌써 1년이라는 시간이 흐르고 있어요. 그동안 제 블로그에 댓글을 달아주시는 분들 중에서 그래도 친효스킨을 사용하시는 분들이 제법 많은 듯 하여 나름 뿌듯함을 느끼고 있습니다. HTML과 CSS에 대해 아무것도 모르고 무작정 티스토리에 입문하여 이것 저것 시행착오들을 겪으며 배워왔던 것들이 조금씩 빛을 보기 시작하는 듯 합니다. 아직 갈 길이 멀지요. 하지만 열심히 제 블로그에 대한 애착심을 키워가며 점차 발전되는 모습들을 보여드리지 않았나 싶습니다. 앞으로도 그럴 거구요. 직업전문학교를 다니면서 친효스킨 계획은 더욱 구체화 되었고, 어떻게든 만들어보려고 다른 스킨들을 분석해..
WEB&SNS/친효스킨 2020. 3. 1. 00:03

친효스킨 기본 썸네일 이미지 변경 방법

친효스킨에는 본문에 이미지가 없을 때 기본 썸네일인 효자곰이 노출되도록 설정되어 있습니다. 이 기본 썸네일을 변경하는 방법에 대해서 문의를 주신 분이 계셔서 방법을 공유하면 좋을 듯 하여 이렇게 글을 작성하게 되었습니다. 기본 썸네일 변경을 통하여 친효스킨을 좀 더 개성 넘치는 나만의 스킨으로 꾸며 보시기 바랍니다. 첫번째 방법은 썸네일 이미지 파일을 교체하는 방법입니다. 파일업로드 항목에 보시면 ch.png 파일이 있습니다. 이게 썸네일 이미지 파일 입니다. 이걸 삭제하시고 원하시는 이미지를 업로드 하시면 됩니다. 파일명은 동일하게 변경하셔야겠죠? 권장 크기는 120×120 px 입니다. 두번째는 기존 썸네일은 그대로 두고, 사용자가 임의의 파일명을 만들어 올리는 방법 입니다. 마찬가지로 원하는 이미지..
WEB&SNS/친효스킨 2020. 2. 9. 00:07

친효애드온 - 티스토리 본문 카카오톡 공유 버튼 만들기 (공유모듈 업데이트)

친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다. 스크립트 세팅티스토리 스킨의 HTML 바로 위에 삽입했습니다. 카카오톡 아이콘 업로드아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다. 다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다. 이렇게 업로드 완료 후 적용 버튼을 눌러 ..
WEB&SNS/친효애드온 2020. 1. 3. 20:39

티스토리앱 1.0 업데이트로 인한 친효스킨 일부 CSS 수정 안내

안녕하세요, 친절한효자손 입니다. 오늘 티스토리 모바일 어플리케이션이 1.0으로 업데이트가 되었습니다. (짝짝짝) 나날이 발전해나가는 티스토리를 응원합니다. 이번 업데이트로 인해 CSS에 일부 변화가 있는 듯 합니다. 친효스킨의 경우에는 현재까지 새로운 글쓰기 에디터로 글 작성 시, 첨부파일에 대한 스타일이 깨지는 현상이 발생하고 있습니다. 현재까지 최신 버전인 1.15에서도 문제가 발생하고 있어서 해당 버그는 첨부파일에 대한 CSS 스타일을 변경해주면 해결 됩니다. 이 내용을 업데이트 완료 했으니 친효스킨을 사용하신다면 쉽게 수정하실 수 있습니다. 아래에 관련글을 링크해 두도록 하겠습니다. 친효스킨 : 새로운 글쓰기 에디터에서 첨부파일 CSS 스타일 수정 방문하셔서 첨부파일에 있는 CSS 스타일 태그를..
개인공간/알립니다! 2019. 12. 9. 18:20

티스토리 반응형 스킨! 친효스킨 1.15 버전 업데이트 소식

친효스킨 버전 업데이트 소식 입니다. 현재 1.15까지 완성 되었습니다. 이번 업데이트에서는 아래와 같은 내용들이 추가되고 변경되었습니다. Ver 1.15 업데이트 내용- 애드센스 최상단 및 최하단 광고 크기 최대 세로 100px 이하로 출력되도록 수정- 구형 글쓰기 에디터 더보기 및 접기 버튼 스타일 수정- 새로운 글쓰기 에디터 첨부파일 스타일 수정- 이미지에 테두리 적용 후 살짝 선명도가 떨어지는 문제 수정- 비로그인시 댓글 남기기 항목에 보이는 이름, 비밀번호, 홈페이지 입력칸 색상 변경- 비밀글 체크박스 크기 및 폰트 크기 변경- 인피드광고 관련 CSS 일부 삭제 (보이기/안보이기 기능은 이제 필요 없어서 삭제 조치)- 본문 글꼴을 '리디바탕체'로 변경- 인덱스 페이지 전면 수정 (썸네일 크기 1..
WEB&SNS/친효스킨 2019. 10. 31. 00:06

티스토리 친효스킨에 리디바탕체 폰트 글꼴 글씨체 추가 적용하는 방법

2019 한글날을 맞이하여 리디북스에서 리디바탕체를 배포했습니다. 무려 1년 6개월간 개발한 폰트라고 하는군요. 그래서 그런지 가독성은 물론이며 글 읽는게 조금 편하다는 느낌을 많이 받았습니다. 이 글꼴을 만나본순간, '아 이거 내 스킨에 적용시켜야겠다!' 하고 다짐했을 정도입니다. 2019 한글날 무료 폰트에 대한 정보는 아래에 링크를 올려두었으니 한번 읽어보시기 바랍니다. 리디바탕체는 링크 페이지의 아래쪽에 있습니다. 먼저 리디바탕체를 다운로드 받아 주시기 바랍니다. 그리고 티스토리 관리자 화면으로 이동하시고 스킨 편집 화면으로 들어가 주시면 됩니다. 2019 한글날 무료폰트 정보 모음 폰트 파일 업로드 스킨편집 화면으로 들어오시면 이렇게 파일업로드 탭이 있습니다. 해당 메뉴로 클릭하여 들어가서 추가..
WEB&SNS/친효스킨 2019. 10. 11. 00:03

친효애드온 : 티스토리 TOP버튼 with 글쓰기 관리자 카테고리 버튼 (마크2)

기존 TOP 버튼이 딱 위로 올라가기 버튼 한 개만 존재하는 것이었다면 이번 마크2 버전은 좀 더 다양한 버튼을 넣어놓은 버전이라고 할 수 있습니다. 모바일용 이라기 보다는 주로 사용되는 해상도는 아마 데스크탑에서 많이 사용되지 않을까 싶습니다. 친효스킨을 기준으로 작업하였지만 다른 스킨에서도 정상 동작하도록 하였습니다. jQuery 세팅 먼저 제이쿼리 스크립트부터 세팅하도록 합니다. 자신의 티스토리 스킨 편집 모드로 들어가서 HTML의 전에 붙여넣기 하시면 됩니다. HTML 세팅 - 폰트어썸 CDN 링크 추가티스토리 스킨 편집으로 들어갑니다. HTML의 안쪽에 아래의 링크를 그대로 붙여넣기 합니다. (title 아래에 붙여넣기 진행을 추천함) 방법은 위에 설명한것과 동일합니다. 첨부파일로도 올려놓겠습니..
WEB&SNS/친효애드온 2019. 9. 30. 00:04

친효스킨 사이드바 공지사항 모듈에 수동으로 목록 삽입하는 방법

친효스킨에는 사이드바에 공지사항 모듈이 있습니다. 이 모듈에는 공지사항에 대한 글을 작성하시면 목록이 업데이트가 되어서 직관적으로 방문자에게 보여지게 됩니다. 티스토리 기본 시스템은 공지사항에 대한 글을 따로 작성할 수 있는데, 이게 장점이 될 수도 있고 단점이 될 수도 있습니다. 둘 다 웹 노출이 된다는점은 공통이지만 방문자로 하여금 쉽게 찾아볼 수 있는지 없는지의 차이가 좀 있는 것 같습니다. 그렇기에 대부분의 스킨에는 공지사항에 대한 모듈을 제공하고는 있지만 스타일이 각각 다 다르기 때문에 이 방법이 모두 통한다고 볼 수는 없습니다. 여러분들이 사용하는 스킨의 공지사항 모듈을 구성하는 태그들이 ul li 형태의 요소라면 이 방법은 사용이 가능합니다. 친효스킨을 기준으로 설명은 드리지만 한번 관심이 ..
WEB&SNS/친효스킨 2019. 9. 29. 00:04

친효애드온 : 티스토리 새로운 글쓰기 에디터 전용 첨부파일 (마크2)

새로운 글쓰기 에디터 전용으로 제작해본 첨부파일 디자인 입니다. 친효스킨에서 가장 완벽하게 적용됩니다. 타 스킨에서는 약간의 변형이 일어날 수 있습니다. 이점 유의해 주시기 바랍니다. TIP 2019년 12월 9일 티스토리 모바일앱이 업데이트 되면서 CSS 첨부파일 스타일도 일부 변경이 되었습니다. 친효스킨 1.15 버전에서 오류가 있으니 여기에 있는 첨부파일로 업데이트를 진행해 주시기 바랍니다. CSS에서 새로운 글쓰기 에디터용 첨부파일 부분을 몽땅 변경해 주시면 해결 됩니다. HTML 세팅 기존 첨부파일의 태그명, 클래스명을 그대로 사용하기 때문에 HTML에서 따로 편집할 부분은 없습니다. CSS 세팅 먼저 아래의 첨부파일을 한번 살펴봐 주시기 바랍니다. 이런 스타일로 출력됩니다. 그리고 다운로드 받..
WEB&SNS/친효애드온 2019. 9. 25. 00:12
◀ 1 2 ▶

티스토리툴바