본문 바로가기

티스토리19

대표이미지 본문에서 감추기 어떤 이미지를 글에는 넣기 싫으나 대표이미지로는 지정하고 싶을 때, 다들 아시다시피 글 저장 직전에 대표이미지만 따로 지정해서 업로드 하면 됩니다. 저도 늘 그렇게 해왔었죠. 그런데... 그게 개인적으론 붙여넣기 업로드가 안되는 불편함이 있었더랬죠. 그러다 어느날 우연히 알게 된건데요... (혹시 모르시는 분 계시면 유용하길 바라며..) 글 본문에 대표이미지로 이용될 이미지를 추가하고, 그 이미지의 우상단 대표를 체크해주고, 본문에서 과감히 지워버리면!! 지워버린 이미지인데도 글 저장시 대표이미지에 추가된 상태로 나오고, 글 저장하니 썸네일로 잘 나오네요. 오~ 주로 붙여넣기 방식으로 이미지를 추가하는 저에겐 나름 꿀팁! 2020. 10. 28.
포스팅 내 테이블 자동 정렬 검색을 해보면 쉽게 가져다 쓸만한 '테이블을 동적으로 정렬'하는 스크립트나 플러그인이 정말 많습니다. 보통은 헤더를 클릭하면 작동하고, 오름순 내림순 반복 처리할 수도 있습니다. (아래 이미지 처럼) 하지만 이미 널려 있는 걸 저까지 또 만들 필요는 없을 것 같고, 지극히 개인적으로, 그저 가끔이라도 포스팅할 때 내용에 어떤 목록이 필요해서 테이블을 썼는데 다 쓰고보니 이왕이면 정렬해서 보여주면 좋을 것 같을 때가 종종 있길래 (글 쓸 때 이미 머리속에 정렬된 순서대로 쓰는게 아닌 이상...) 그런 포스팅 시에 간단히 사용할 수 있는 스크립트와 적용 방법을 공유하려 합니다. 사실 뭐.. 별건 아니고 그냥 해보니 이런 것도 되더라... 정도? (뒷북이라면 뭐... 어쩔수 없.....ㅋ) 주 기능은... 글.. 2020. 10. 28.
애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad) 본문 내부나 사이드바에 광고를 개시하는건 그닥 어렵지 않습니다. 그쵸? 그저 광고를 생성하고 (보통은 디스플레이 광고를 선택하겠죠?), 생성된 광고의 코드를 가져다 원하는 위치에 넣어주면 되니까요. 심지어 본문 상/하단 광고 개시는 티스토리 플러그인로도 지원하고 있어서 매우 수월합니다. 그래서 딱히 이와 관련해선 글을 쓸 필요도 없을 것 같습니다. 그러나 이 인피드 광고는 글 목록의 일부로 보여지게 하는게 목적인 광고라... 스킨의 어디에 넣어야 할지 살짝 난감할 수 있습니다. 게다가 어디에 넣을지 알게되어도 목록의 시작이나 끝이 아니라면 추가적인 처리가 적용되어야 원하는 순번에 나올 수 있게 됩니다. 그리고 목록에서 너무 튀지 않게 다른 글들과 유사한 스타일로 만들어 줄려면 광고 생성시에도 자잘하게 설.. 2020. 10. 1.
사이드 바 - 달력 / 글 보관함 / 링크 스킨마다 있을 수도 있고 없을 수도 있는 사이드 바의 각 아이템들 중에... 북클럽 스킨에는 달력 / 글 보관함 / 링크 가 없네요... 쩝... 달력은 월별 / 일별로 글을 모아 보기에 편하고... (스스로에겐 1일1포스팅이 잘 되고 있는지도 알 수 있고. ㅋ) 글 보관함은 지난 6개월간 월별로 글수를 볼 수 있고... 링크는... 뭐 외부 링크들을 주욱 모아 놓으니 좋고... 이런저런 이유로 혹시 이들이 필요하다면 (어떤 스킨이건) 간단히 추가 할 수 있습니다. 방법 관리 > 스킨편집 > html 에서 를 찾아 그 위에 아래 내용을 넣어줍니다. 달력 월별 포스팅 () 링크 ... ... 그리고 CSS에 스타일을 추가합니다. .sidebar .archive, .sidebar .calendar, .sid.. 2020. 9. 28.
댓글/방명록 이모티콘 - 장려하기? 어차피 댓글도 잘 안달리는데 이모티콘이 무슨 소용이겠냐만...ㅠㅠ 공식 이모티콘 플러그인이랍시고 고작 :) ;) :P 8D :( --; 6개만 지원하는데 뭔 의미가 있겠냐만... 그래도!! 이모티콘 플러그인을 사용중이라면, (즉, 관리 > 플러그인에서 [댓글/방명록 이모티콘 표시] 플러그인을 활성화했다면!) 댓글 쓰는 사람에게 이를 알려주고, 더 나아가 편리하게 이모티콘을 입력할 수 있게 해주면 좋겠죠?!!! Why not?! ㅋ 적용 방법 스킨편집 > html 편집 > html 내용중에 댓글/방명록 입력폼 두곳을 찾아 아래처럼 코드를 추가합니다. 이모티콘: .... .... .... 이모티콘: .... .... .... .... .... .... 잘보시면 2020. 9. 24.
북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정) 홈 화면에 주로 사용되는 커버 갤러리에 대해 살펴보았습니다. (뭐가 뭔지 매번 적용해서 보고 수정하고 하는게 자증나서..ㅋ 공부하는 차원으로...) 커버 갤러리1 커버 갤러리2 한 화면 노출 글 수: PC (5), Mobile (2) (그 이상은 슬라이더로 처리됨) 한 화면 노출 글 수: PC (3), Mobile (1) (그 이상은 슬라이더로 처리됨) 표시 항목: 이미지 + 제목 표시 항목: 이미지 + 제목 + 본문3줄 + 댓글 수 + 작성일 CSS 클래스명: cover-thumbnail-3 CSS 클래스명: cover-thumbnail-4 위는 북클럽 스킨의 목록 스타일로 제공되는 커버 갤러리1과 2의 비교 표입니다. 각기 스타일도 다르고 아이템의 크기도 다르니 잘 살펴보시고 필요에 따라 적당히 골라.. 2020. 9. 24.
북클럽 스킨 - 메뉴 확장 상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?) 메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해! 그렇다면.. 간단히 가능한 방법이 있어 올립니다. 적용 방법 관리 > 스킨 편집 > html 편집에서 아래 3줄을 찾아서 (샾은 #으로...ㅋ) ... [샾샾_blog_menu_샾샾] 아래 내용으로 덮어 버리시면 가능합니다. 홈 서브메뉴 1 서브메뉴 222222 서브메뉴 3 태그 섭섭이 메뉴 1 섭섭이 메뉴 2 태그2 섭섭이 1 섭섭이 2 방명록 jQuery 버리기 자~ 이제부터 상단 메뉴는 수동 관리 체제에 돌입합니다. ㅋ 메인 메뉴 구성하실 때 참고할 부분은.. 이렇게 첫 메뉴과 끝 메뉴에는 클래스명에 first / last 를 넣어주세요 서브 메뉴는 .. 2020. 9. 18.
Odyssey 오디세이 스킨 - 사이드 바 고정 코드 재활용 및 저장 차원에서.... 혹시 나중에 나도 스킨을 바꿀지 모르니까.... 오디세이 스킨에서도 사이바 고정을 원한다면... 1. 스르륵 따라오는 버전 @media screen and (max-width:1060px) { aside.area-aside { margin-top: 0 !important; } } .main { align-items: flex-start; } aside.area-aside { transition: margin-top 0.5s ease-in-out 0s, right .5s; } //// 아래 offset 함수는 퀵점프에 이용된 함수라, 이미 html상 존재한다면 삭제해도 됨 function offset(el) { var rect = el.getBoundingClientR.. 2020. 9. 16.
Odyssey 오디세이 스킨 - 사이드 바 위치변경 새로나온 오디세이 스킨을 2단으로 사용할 경우, 사이드 바는 우측에 나오는게 기본입니다. 그런데 이게 굳이 왼쪽에 나오길 원하신다면... html 편집으로 전체를 내부 최상단으로 이동하고 margin값만 조정하면 됩니다. 그러나, 소스상 원래 구조를 건드리고 싶지 않다면 아래와 같이 간단히도 해결이 가능합니다. 스킨편집 > html 편집 > 하단 가 끝나기 전에 아래 코드 추가. 조정하고 나면 이렇게 됩니다. 2020. 9. 15.
Odyssey 오디세이 스킨 - 상단 메뉴 고정 새로운 스킨 '오디세이'(Odyssey)가 나왔죠? 포럼에 어떤분이 올리신 질문에 답변으로 쓴건데.. 없어지면 아까우니 포스팅으로도 남겨봅니다. 이 스킨을 사이드 바가 가려진 1단으로 쓰고 있는 경우, 아래 코드를 스킨편집 > html 편집 으로 가서 하단 가 끝나기 전에 넣어 주면 상단 메뉴가 늘 화면 위에 붙어 있게 됩니다. (아니면 요롷게 스타일로만으로도 고정이 되서 다행입니다. 2020. 9. 15.
태그 - 강조 차등 적용 (+ 보너스) 원래 태그가 등록 빈도에 따라 5단계로 나눠지는거였군요?! 그렇다면 각 단계별로 다르게 표현할 수 있겠네요. ^^ 알아보니 태그에는 cloud1 부터 5 까지 순위별로 클래스가 적용될 수 있습니다. (1 = 제일 많이 등록된 태그) (북클럽 스킨에선 역시나 누락된 내용이군요... 췟..) 적용 대상 사이드 바 > 랜덤태그 목록 메뉴 > 태그 페이지 (위 두 곳 외에도 글 하단에 나오는 태그도 있죠? 그러나 거긴 빈도레벨 구분 적용이 안되서 패스합니다) 적용 방법 1. 스킨 html 수정 (북클럽 기준으로 작성한 내용입니다. 다른 스킨이고 이미 적용되어 있다면 굿!) 태그 ... ... ... 태그 위 7, 21번 줄처럼 가 들어있는 랜덤태그 목록의 태그들 끝에 [더보기] 추가하는 법 스킨 html 을 수.. 2020. 9. 7.
북클럽 스킨 - GNB 메뉴 현위치 버그 상단 메뉴에서 현재 페이지를 강조해주는 스크립트에 오류가 있어 수정했습니다. 오류 증상 원래 의도한건지 모르겠는데 '홈'은 늘 불이 들어옵니다. (대체 왜...?? 심지어 글을 읽을때도!?) 메뉴에 페이지라던가 어떤 항목을 추가하면 추가된 메뉴엔 불이 안들어옵니다. 페이지 로딩이 다 된 후 강조가 처리되서 늦게 불이 들어오는 것도 마음에 안듭니다. 그래서 스킨의 기본 script.js 를 아래와 같이 수정했습니다. [원래 코드] $(window).on("load", function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(th.. 2020. 9. 6.
북클럽 스킨 - 포인트컬러 활용 '더' 하기 관리 > 스킨편집에 들어가서 우측의 스킨 설정 영역을 바닥으로 내려보면 포인트컬로 설정이 가능한 걸 볼 수 있습니다. 근데, 실제 이 포인트컬러가 적용된 곳을 찾아보면 몇군데 없네요. (댓글 등록 버튼, 글 내용중 링크 색상, 댓글 수 외 몇몇) 물론 북클럽 스킨이 기본적으로 워낙 모노톤이고 단정하기 때문에 이런 최소한의 사용이 더 마음에 들 수도 있습니다. 절대적으로 개인적인 취향에 따라 호불호가 갈릴 수 있는 부분이겠지만 저는 이 포인트컬러의 적용 폭을 조금 더 넓히고 싶었습니다. 이렇게 하면, 기분이나 시즌에 따라 스킨설정에서 간단하게 이 컬러만 한번 바꿔주면 내가 지정한 부분들의 색상도 한꺼번에 바뀌는 장점이 있다고 본거죠. 따라서, 필요하신 분만 적용하시면 되겠습니다. 아니면, 필요한 부분만 추.. 2020. 9. 6.
북클럽 스킨 - 댓글 버그 수정 그간 잘 안써봐서 몰랐는데... 현재 사용중인 북클럽 스킨에서 댓글을 수정/삭제할 때 약간 이상하게 작동하는 것 같은 느낌적인 느낌을 우연히 받아 좀 살펴보았더니 역시 문제가 있네요?! (저만 그런거 아니죠? 제발...) 아무래도 스킨 제작자의 실수라고 보여 집니다만, 그래도 기본 스킨 중 하나인데 좀 꼼꼼히해서 내놓으시지.. 아쉽네요. (설마 Book club 이 혹시 '부끄럽' 웠던건가...ㅡㅡ;) 문제점 댓글을 수정하면 새로 등록되는 것처럼 추가되고 기존 댓글이 화면에 남아 있음 댓글을 삭제해도 페이지를 새로고침하기 전까진 화면에 남아 있음 추가/삭제/수정의 결과가 사이드바의 '최근댓글'에 반영되지 않음 글에 첫 댓글 등록 시 삭제/수정 버튼을 보여지게 하는 '더보기' 버튼이 먹통임 방명록도 사실은.. 2020. 9. 4.
코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 사실 아직 찾는 사람도 쓰는 사람도 없는 것 같아 부담은 없습니다만. ㅋ) 암튼, 제가 사용하고 있는 그대로 공유하는게 맞다 싶어 풀버전 올립니다. 기능 목록 줄 번호 표시 줄 시작번호 지정 가능 줄 강조 가능 ([3,5,7-10]과 같은 배열로 표시, 7-10같이 범위도 지정 가능) 자동 줄바꿈 (pre-wrap) 적용 시 바뀐줄에도 들여쓰기 (indent) 유지 코드상 색상값(예: #FFFFFF, black, rgb(125,125,125) 등)에 어떤 색인지 보여주는 컬러박스 추가 괄호({},[],()) 및 태그 (예.. 2020. 8. 31.
코드블럭 - 줄번호 표시하기 (미들 버전) 최신버전 업데이트는 alikong.tistory.com/46 으로!! 코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 � alikong.tistory.com 가급적 최신 버전을 이용해 주세요. 위 글 클릭!! 이하 미들 버전 // 코드블럭 관련 시리즈(?) 1탄 - (뭐..걍.. 내가 필요해서 건드린 부분들? ㅋ) 위에 보이는 코드블럭 삽입하기를 이용해 입력된 소스에 아래와 같이 줄번호를 자동으로 추가해 줍니다. 혹시(아마 대부분일듯) 코드 문법 강조 플러그인을 같이 사용하고 있다면 현 테마에 맞춰 줄번호 스타일도 맞.. 2020. 8. 25.