친절한효자손 취미생활

WEB&SNS/친효애드온 → (21)건

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

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

친효애드온 : 커스텀 DIV 박스 모듈 (마크1)

스크립트를 써서 출력하는 Syntaxhighlighter 코드는 로딩이 다소 오래 걸려서 포스팅 출력 시간이 지연됩니다. 신형 글쓰기에 있는 코드블럭은 뭔가 많이 부족합니다. 차라리 그럴바에 그냥 직접 DIV를 꾸며서 사용하자고 생각했고 바로 실천에 옮겼습니다. HTML, CSS, 자바스크립트 등의 코드를 직관적으로 표현하고자 할 때 사용하면 요긴합니다. 코드 뿐만 아니라 뭔가 강조하고자 하는 내용에 대한 텍스트를 작성할 때에도 좋습니다. 얼마든지 활용 가능한 모듈이라고 생각합니다. 백그라운드 색상도 커스텀 할 수 있어서 원하시는 색상코드를 넣고 사용하시면 됩니다. 커스텀 DIV 박스 모듈 미리보기 먼저 검정색 백그라운드 DIV 박스 입니다. .rgyBG { margin: 10px 0; padding: ..
WEB&SNS/친효애드온 2019. 12. 21. 00:02

친효애드온 : 관련글 모듈 (마크3)

지난번 친효애드온 관련글 마크2를 만들면서 영감을 얻었습니다. 생각난김에 바로 코딩을 시작했고 그 결과 훌륭하게 완성시켰습니다. 본문 끝 부분에 관련글을 넣을 때 사용하시면 되는 모듈 입니다. 친효스킨과 잘 어울립니다. 뿐만 아니라 타 스킨에서도 잘 적용이 될 것입니다. 현재 이 글의 맨 아래에 보시면 관련글이 있는데 해당 스타일대로 출력 됩니다. 참고하시기 바랍니다. CSS 세팅 먼저 스타일부터 정의합니다. 자신의 스킨 편집모드에 있는 CSS 항목으로 들어가셔서 아래의 첨부파일안의 모든 내용을 빈 공간을 확보하여 그대로 붙여넣기를 해줍니다. 어디에 붙여넣기를 하는지 자세히 안내해 드리겠습니다. 이렇게 빈 공간을 엔터로 확보하신다음 저곳에 붙여넣기 하시면 됩니다. 위의 스크린샷 이미지는 예시 입니다. 사..
WEB&SNS/친효애드온 2019. 10. 6. 00:04

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

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

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

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

친효애드온 : TOP버튼 + 설명 말풍선 기능 (마크3)

예전에 올렸던 TOP버튼 마크2의 업그레이드 버전 입니다. 이번에는 마우스를 가져다 올리면 왼쪽에 해당 아이콘에 대한 설명 말풍선이 나타나는 기능입니다. 대단한 기능이 추가된건 아닙니다. 단지 말풍선이 한번 더 옆으로 팝업되는 기능이 추가되었을 뿐 입니다. 거추장스러운 디자인이 싫으신 분들은 그냥 마크2 버전을 사용하시면 되겠으며, 이번 버전이 마음에 드신다면 마크3를 적용하시기 바랍니다. 친효스킨 v1.14 이상에서는 마크3 버전으로 기본 적용되어 있습니다. 아래는 예시 입니다. See the Pen 친효애드온 : TOP버튼 (마크3) by rgy0409 (@rgy0409) on CodePen. 아이콘에 마우스 포인터를 올려보시면 왼쪽으로 설명 말풍선이 나타나는것을 확인하실 수 있습니다. 적용 방법은 ..
WEB&SNS/친효애드온 2019. 9. 11. 00:07

친효애드온 : 티스토리 카카오톡 플러스 1:1 채팅 모듈

이번 친효애드온은 카카오톡 플러스 1:1채팅에 대한 내용 입니다. 카카오톡 플러스를 보통 카톡플러스라고도 부르기도 합니다. 카톡플러스는 비즈니스 용도의 카카오톡 이라고 생각하시면 됩니다. 이 기능은 카카오톡에서 실제로 제공하고 있는 기능으로서 다양한 스타일과 기능들을 추가해서 사용자의 편의성에 많은 신경을 쓰고 있습니다. 그중에서도 카톡플러스 채팅 아이콘을 티스토리 사이드바에 넣음으로서 블로그 주인과 원활한 소통을 하는데 유리하게 만들 수 있습니다. 보통 블로그로 비즈니스를 하시는 분들에게 요긴할 것 같습니다. CSS 세팅하기우선 CSS부터 설정하도록 합니다. 순서는 관계 없습니다. HTML이 되었든, CSS가 되었든 다 완료가 되어야 정상적으로 출력이 되니까요. 자신의 티스토리 관리자 화면에서 스킨 편..
WEB&SNS/친효애드온 2019. 9. 4. 00:07

친효애드온 : 본문 글씨 두껍게 만드는 b태그 스타일을 형광펜처럼 변경

이번 친효애드온은 본문에 종종 사용하는 b태그 입니다. 이 태그는 bold의 줄임말로 말 그대로 "굵게" 라는 뜻을 가지고 있습니다. 지금 이 문장에도 세개의 b태그가 사용되었음을 육안으로 식별할 수 있습니다. 현재 b태그와 bold, 그리고 굵게 라고 하는 키워드에만 백그라운드 색상이 조금 다릅니다. 이것을 애드온으로 만들었습니다. 사용방법 티스토리 글쓰기 모드에서 위의 스크린샷 이미지에 표시된 저 아이콘을 사용해서 진행할 수 있습니다. 형광펜처럼 표현하고자 하는 키워드를 마우스로 드래그하여 블록을 잡고 그냥 저 아이콘만 한번 눌러주시면 됩니다. 그러면 HTML상에서 어떻게 표현이 될까요? 본문의 가장 첫번째 문장을 예시로 살펴보겠습니다. 이번 친효애드온은 본문에 종종 사용하는 b태그 입니다. 이 태그..
WEB&SNS/친효애드온 2019. 8. 31. 00:06

친효애드온 : 티스토리 본문 오른쪽(우측) 상단 애드센스 1개 광고 넣기

이 애드온은 티스토리 본문의 상단 오른쪽에만 위치하는 1개짜리 애드센스 광고를 삽입하기 위해 만들었습니다. 본문의 우측 상단에만 자리를 잡습니다. 모바일 해상도에서는 200px X 200px 사이즈로 출력이 됩니다. 가로 해상도 768px 이상에서는 300px X 250px 사이즈로 출력이 되며, 가로 1000px 해상도 이상 부터는 336px X 280px 사이즈로 출력 됩니다. 사이즈는 변해도 위치는 늘 본문 우측에만 자리를 잡습니다. 애드센스 코드 세팅코딩을 간소화 했습니다. 불필요한 스크립트를 최대한 빼고 애드센스 순정 코드만 그대로 사용함으로서 편의성을 높였습니다. 먼저 아래의 첨부파일을 다운로드 받습니다. 다운을 받으시고 열어보시면 아래와 같은 코드가 들어 있습니다. 여기에서 빨간색으로 주석 ..
WEB&SNS/친효애드온 2019. 8. 28. 00:07

친효애드온 : 관련글 모듈 (마크2)

티스토리 본문의 마지막을 장식하는 관련글 모듈 입니다. 이번에는 두번째 버전으로 스타일을 다르게 연출해 보았습니다. 현재 친효애드온 중 관련글 모듈은 한 종류밖에 없습니다. 점차 스타일을 변경해서 다르게 만들어 선보이도록 하겠습니다. 친효스킨 뿐만 아니라, 일반적인 모든 티스토리 스킨에서 사용이 가능합니다. HTML 세팅하기어썸폰트가 들어가므로 안쪽의 태그 아래쪽에 다음의 링크를 삽입해 주시기 바랍니다. 첨부파일로 올려두겠습니다. 이렇게 붙여넣기를 해주시면 됩니다. CSS 세팅하기첨부파일로 올려드렸습니다. 다운로드 받으시고 메모장에 있는 내용을 모두 복사하시고 사용하시는 티스토리 스킨의 CSS 편집으로 들어가셔서 빈 공간을 만드시고 붙여넣기 해주세요. 이렇게 그대로 붙여넣기를 해주시면 됩니다. 참고로 주..
WEB&SNS/친효애드온 2019. 8. 18. 00:03

친효애드온 : 제이쿼리를 활용한 티스토리에 맨 위로 올라가는 TOP버튼 만들기

친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다. 적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다. jQuery 세팅하기먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립..
WEB&SNS/친효애드온 2019. 8. 8. 00:05

친효애드온 : 더보기 접기 텍스트 변경 및 꾸미기 (마크1)

티스토리에서 구형 글쓰기 에디터에서 제공하는 메뉴 중 에는 "더보기"와 "접기"가 있습니다. 그런데 기본 기능에 문제가 좀 있습니다. 더보기를 최초 1회 클릭하면 접기라는 글씨로 올바르게 변경이 되는데, 다시 한번 클릭하면 더보기로 돌아오지 않고 그대로 계속 접기라는 글씨로 남아 있는 버그가 있습니다. 이후에는 새로 고침을 하지 않는 한 평생 변하지 않습니다. 또한 스타일을 별도로 만들어 주지 않는 한 눈에 잘 띄지 않습니다. 이 기능을 좀 더 직관적으로 볼 수 있도록 스타일을 변경해 주는 친효애드온을 만들었습니다. 친효스킨은 기본 적용되도록 설계하였고 다른 스킨에서도 적용하도록 만들었습니다. 또한 반응형이기 때문에 가로 사이즈가 브라우저의 해상도에 맞게 자동 조정 됩니다. 방금 언급했던 글씨가 변하지 ..
WEB&SNS/친효애드온 2019. 8. 5. 00:07

친효애드온 : 본문용 SNS 공유 모듈 (마크1)

안녕하세요, 친절한효자손 입니다. 친효스킨에 적용할 공유 모듈을 만들었습니다. 더불어 친효 스킨 뿐만 아니라 타 스킨에서도 적용 가능하도록 또 하나의 모듈을 만들었습니다. 현재 친효스킨 전용은 다음번 버전 때 기본으로 적용되어 있는 파일로 제공할 계획입니다. 이곳에 올리는건 티스토리의 다른 반응형 스킨에서도 적용할 수 있는 파일 입니다. 현재 친효스킨을 사용중인 기어베스트코리아 티스토리 블로그에도 적용되어 있으며, 지금 보고 계시는 이 글에도 해당 공유 모듈이 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다. 업데이트 일지2020.1.3-카카오톡 공유..
WEB&SNS/친효애드온 2019. 8. 1. 11:22

친효애드온 : 사이드바 모듈에 배지(Badge)를 적용하여 강조하기 (마크1)

티스토리 사이드바에는 다양한 모듈이 있습니다. 그중에서 수동으로 넣는 추천글 모듈이나 기타 스킨에서 제공하는 모듈이 있을 수 있는데 현재 친효스킨이나 JB131 스킨에서도 추천글 모듈이 적용되어 있습니다. 이 추천글 바로 오른쪽에 강조 표현의 배지를 넣는 방법입니다. 1. CSS 세팅먼저 CSS 부터 세팅합니다. 아래의 첨부파일을 다운받아보시면 다음의 코드를 확인하실 수 있습니다. 한번 간략히 살펴보고 설명을 드리겠습니다. /* 친효애드온 : 사이드바 배지 *//* http://rgy0409.tistory.com */.rgyBadge { display: inline-block; margin-left: 10px; padding: 2px 5px; border-radius: 7px; color: #fff; v..
WEB&SNS/친효애드온 2019. 7. 27. 00:03

친효애드온 : 티스토리 상단 PC 2개 모바일 1개 애드센스 광고 넣는 방법

이 글을 작성 안 한 것 같더군요. 그래서 최신 버전으로 다시 업데이트 합니다. 티스토리 사용자 분들이라면 애드센스는 거의 필수 코스로 설치를 하실 것 입니다. 이 때 기본 스크립트 코드로 넣으셔도 문제는 없겠지만 좀 더 실적을 올리기 위해서 커다란 직사각형 형태의 디스플레이 광고 두개를 넣는 분들도 계실 것 입니다. 어떻게 삽입하는지 알아보겠습니다. 이 코드는 친효스킨에 최적화된 애드센스 광고 코드 입니다. 특정 해상도에서 크기를 임의로 변경했습니다. 일반 다른 반응형 스킨에서 사용하셔도 특별히 문제가 되지는 않습니다. 최대한 특정 해상도에서 최적의 크기로 나타나게 하기 위해서 친효스킨에 맞춘 코드입니다. 참고하시기 바랍니다. 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 여기 첨부파일을 받으..
WEB&SNS/친효애드온 2019. 4. 24. 00:04

친효애드온: 티스토리 본문 중간에 넣는 수동 링크 (마크1)

이번 친효애드온은 본문 중간에 삽입하는 링크 입니다. 수동으로 넣는 경우가 종종 있습니다. 예를 들어서 CSS 코딩 관련해서 글을 작성했다고 한다면, 해당 글과 관련된 HTML 내용이라던지, 아니면 유용한 사이트라던지 바로가기를 넣어야 하는 경우 입니다. 지금까지 작성했던 글 중에서도 관련된 문서가 있을 수 있습니다. 이럴 때 요긴하게 사용되게 될 것입니다. 방법은 두가지인데, 어떤 포지션이냐에 따라서 다릅니다. 첫번째는 말 그대로 수동으로 넣는 경우입니다. 두번째는 티스토리 플러그인 중 하나인 "이전 글 넣기"를 사용할 때 입니다. 하나하나 사용법을 안내해 드리겠습니다. CSS 세팅하기 먼저 이 모듈을 적용시키기 위한 스타일을 세팅해야 합니다. 방법은 스킨편집으로 들어가셔서 CSS 탭으로 이동합니다. ..
WEB&SNS/친효애드온 2019. 2. 21. 00:07

친효애드온 : 티스토리 본문에 들어가는 이미지 테두리 자동 적용 (마크1)

본문에 이미지들 많이 넣으시죠? 혹시 넣으실때마다 테두리를 적용하시나요? 티스토리의 포토에디터에서는 다양한 테두리 스타일을 제공하고 있습니다. 하지만 저의 경우는 이 중에서 검정 테두리만 주로 사용을 하는 편 이며, 이따금씩 까먹고 그냥 삽입하고는 합니다. 일반적으로 촬영한 사진들은 괜찮은데 강좌를 위한 스크린샷 화면의 경우는 배경이 흰색인 이미지들이 있을때면 테두리를 만들어주지 않으면 본문과 햇갈려서 어디까지가 이미지고 어디가 본문의 백그라운드인지 잘 모를때가 있습니다. 그래서 이를 구별짓기위해 테두리를 만들어 줍니다. 티스토리의 포토에디터가 가끔 오류가 날 때가 있습니다. 그러면 처음부터 다시 작업해야 합니다. 사진이 한두장인 경우는 그냥 다시 처음부터 진행해도 크게 무리는 없지만, 10장 이상되는 ..
WEB&SNS/친효애드온 2019. 1. 20. 00:04

친효애드온: 중요 내용을 알리는 친효팁박스 (마크1)

가끔 티스토리 본문을 작성하다가 꼭 중요한 내용을 작성할때가 있습니다. 가령 주의사항이 대표적인 텍스트라고 할 수 있습니다. 가독성을 올리고 좀 더 강조하고자 할 때, 티스토리에 있는 글상자 기능을 활용해서 작성하곤 합니다. 하지만 너무 밋밋한데다 많은 사람들이 쉽게 사용하는 방법입니다. 그래서 저만의 친효팁박스를 만들어 봤습니다. 아래는 그 예시 입니다. TIP 한줄일 경우에도 텍스트가 세로 상태로 중앙정렬이 됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. 이렇게 계속해서 본문을 채워..
WEB&SNS/친효애드온 2018. 12. 29. 00:06

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

제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다. 관련글 마크1 사용방법1. 먼저 본 페이지에서 제공하는 첨부파일을 다운로드 받습니다.2. 첨부파일 안에 있는 CSS 내용을 자신의 티스토리 스킨의 CSS에 붙여넣기를 합니다.3. 글 작성시, 수동으로 div로 감싸줍니다. 크게 이 세가지로 진행됩니다. 2번까지는 쉽습니다. 3번에서는 좀 더 추가설명을 드리도록 하겠습니다. HTML 안쪽에 폰트어썸 CDN 세팅하기아이콘 세팅을 위한 단계입니다...
WEB&SNS/친효애드온 2018. 12. 25. 00:02

친효애드온: 티스토리 첨부파일 디자인 변경 설치 및 적용 방법 (마크1)

현재 일부 스타일을 변경해서 적용하고 있습니다. 스킨은 현재 순조롭게 완성되어가고 있습니다. 그 중에서 당장 사용 가능한 몇가지들을 공유하려고 합니다. 현재 친효스킨은 부분별로 업그레이드가 가능한 파츠형 스킨으로 개발 중 입니다. 누구라도 쉽게 커스터마이징 해서 사용하기 편리한 그런 스킨으로 완성하는데 목표를 두고 있습니다. 티스토리에서 기본적으로 제공하는 첨부파일 스타일이 뭔지 아시죠? 상당히 촌스럽습니다. 그리고 눈에 잘 띄지도 않습니다. 개인적으로 두번째 문제가 가장 심각하다고 생각합니다. 첨부파일이 어디에있나 한참을 찾을 이유가 없습니다. 누가봐도 "아, 이게 첨부파일이군!" 싶어야 합니다. 이게 기존 티스토리 첨부파일 디자인 입니다. 눈에 잘 안띕니다. 이것을 수정하려면 CSS 내부에서 클래스값..
WEB&SNS/친효애드온 2018. 12. 24. 00:04

친효애드온: 티스토리 본문에 오류없는 표 넣는 방법 (엑셀표 마크1)

새롭게 선보이는 카테고리 입니다. 여기에는 티스토리 스타일을 꾸며주고 사용 편의성을 높이는 모듈들을 만들어 올리는 콘텐츠 입니다. 어떤 스킨에서든지 다 통합니다. 단! 티스토리 전용 어플리케이션에서는 비정상으로 보여집니다. 하지만 상관 없습니다. 티스토리 앱을 이용하시는 분들은 거의 적을 뿐더러 원래 기존에 사용하던 표도 정상적으로 보여지진 않았으니까요. 적용 방법은 간단합니다. CSS 스타일에 코드를 추가해주시고, 사용하실 때, HTML 태그 요소들만 조금씩 수정해서 사용하시면 됩니다. 이름하야, "친절한효자손 애드온" 이라고 명명 합니다. 오늘은 그 첫번째로 티스토리에서 취약하기로 소문난(?) 표 만들기에 대한 방법입니다. TIP 알림 : 친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 ..
WEB&SNS/친효애드온 2018. 12. 12. 00:03
◀ 1 ▶

티스토리툴바