티스토리

visibility : hidden
검색하기

블로그 홈

visibility : hidden

alikong.tistory.com/m

간직하고 싶은 또는 나누고 싶은 것들

구독자
42
방명록 방문하기
공지 [봉사] 스킨/기능 튜닝 요청 환영합⋯ 모두보기

주요 글 목록

  • 대표이미지 본문에서 감추기 어떤 이미지를 글에는 넣기 싫으나 대표이미지로는 지정하고 싶을 때, 다들 아시다시피 글 저장 직전에 대표이미지만 따로 지정해서 업로드 하면 됩니다. 저도 늘 그렇게 해왔었죠. 그런데... 그게 개인적으론 붙여넣기 업로드가 안되는 불편함이 있었더랬죠. 그러다 어느날 우연히 알게 된건데요... (혹시 모르시는 분 계시면 유용하길 바라며..) 글 본문에 대표이미지로 이용될 이미지를 추가하고, 그 이미지의 우상단 대표를 체크해주고, 본문에서 과감히 지워버리면!! 지워버린 이미지인데도 글 저장시 대표이미지에 추가된 상태로 나오고, 글 저장하니 썸네일로 잘 나오네요. 오~ 주로 붙여넣기 방식으로 이미지를 추가하는 저에겐 나름 꿀팁! 공감수 2 댓글수 1 2020. 10. 28.
  • 포스팅 내 테이블 자동 정렬 검색을 해보면 쉽게 가져다 쓸만한 '테이블을 동적으로 정렬'하는 스크립트나 플러그인이 정말 많습니다. 보통은 헤더를 클릭하면 작동하고, 오름순 내림순 반복 처리할 수도 있습니다. (아래 이미지 처럼) 하지만 이미 널려 있는 걸 저까지 또 만들 필요는 없을 것 같고, 지극히 개인적으로, 그저 가끔이라도 포스팅할 때 내용에 어떤 목록이 필요해서 테이블을 썼는데 다 쓰고보니 이왕이면 정렬해서 보여주면 좋을 것 같을 때가 종종 있길래 (글 쓸 때 이미 머리속에 정렬된 순서대로 쓰는게 아닌 이상...) 그런 포스팅 시에 간단히 사용할 수 있는 스크립트와 적용 방법을 공유하려 합니다. 사실 뭐.. 별건 아니고 그냥 해보니 이런 것도 되더라... 정도? (뒷북이라면 뭐... 어쩔수 없.....ㅋ) 주 기능은... 글.. 공감수 0 댓글수 0 2020. 10. 28.
  • 애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad) 본문 내부나 사이드바에 광고를 개시하는건 그닥 어렵지 않습니다. 그쵸? 그저 광고를 생성하고 (보통은 디스플레이 광고를 선택하겠죠?), 생성된 광고의 코드를 가져다 원하는 위치에 넣어주면 되니까요. 심지어 본문 상/하단 광고 개시는 티스토리 플러그인로도 지원하고 있어서 매우 수월합니다. 그래서 딱히 이와 관련해선 글을 쓸 필요도 없을 것 같습니다. 그러나 이 인피드 광고는 글 목록의 일부로 보여지게 하는게 목적인 광고라... 스킨의 어디에 넣어야 할지 살짝 난감할 수 있습니다. 게다가 어디에 넣을지 알게되어도 목록의 시작이나 끝이 아니라면 추가적인 처리가 적용되어야 원하는 순번에 나올 수 있게 됩니다. 그리고 목록에서 너무 튀지 않게 다른 글들과 유사한 스타일로 만들어 줄려면 광고 생성시에도 자잘하게 설.. 공감수 5 댓글수 8 2020. 10. 1.
  • 사이드 바 - 달력 / 글 보관함 / 링크 스킨마다 있을 수도 있고 없을 수도 있는 사이드 바의 각 아이템들 중에... 북클럽 스킨에는 달력 / 글 보관함 / 링크 가 없네요... 쩝... 달력은 월별 / 일별로 글을 모아 보기에 편하고... (스스로에겐 1일1포스팅이 잘 되고 있는지도 알 수 있고. ㅋ) 글 보관함은 지난 6개월간 월별로 글수를 볼 수 있고... 링크는... 뭐 외부 링크들을 주욱 모아 놓으니 좋고... 이런저런 이유로 혹시 이들이 필요하다면 (어떤 스킨이건) 간단히 추가 할 수 있습니다. 방법 관리 > 스킨편집 > html 에서 를 찾아 그 위에 아래 내용을 넣어줍니다. 달력 월별 포스팅 () 링크 ... ... 그리고 CSS에 스타일을 추가합니다. .sidebar .archive, .sidebar .calendar, .sid.. 공감수 2 댓글수 4 2020. 9. 28.
  • 댓글/방명록 이모티콘 - 장려하기? 어차피 댓글도 잘 안달리는데 이모티콘이 무슨 소용이겠냐만...ㅠㅠ 공식 이모티콘 플러그인이랍시고 고작 :) ;) :P 8D :( --; 6개만 지원하는데 뭔 의미가 있겠냐만... 그래도!! 이모티콘 플러그인을 사용중이라면, (즉, 관리 > 플러그인에서 [댓글/방명록 이모티콘 표시] 플러그인을 활성화했다면!) 댓글 쓰는 사람에게 이를 알려주고, 더 나아가 편리하게 이모티콘을 입력할 수 있게 해주면 좋겠죠?!!! Why not?! ㅋ 적용 방법 스킨편집 > html 편집 > html 내용중에 댓글/방명록 입력폼 두곳을 찾아 아래처럼 코드를 추가합니다. 이모티콘: .... .... .... 이모티콘: .... .... .... .... .... .... 잘보시면 공감수 2 댓글수 1 2020. 9. 24.
  • 북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정) 홈 화면에 주로 사용되는 커버 갤러리에 대해 살펴보았습니다. (뭐가 뭔지 매번 적용해서 보고 수정하고 하는게 자증나서..ㅋ 공부하는 차원으로...) 커버 갤러리1 커버 갤러리2 한 화면 노출 글 수: PC (5), Mobile (2) (그 이상은 슬라이더로 처리됨) 한 화면 노출 글 수: PC (3), Mobile (1) (그 이상은 슬라이더로 처리됨) 표시 항목: 이미지 + 제목 표시 항목: 이미지 + 제목 + 본문3줄 + 댓글 수 + 작성일 CSS 클래스명: cover-thumbnail-3 CSS 클래스명: cover-thumbnail-4 위는 북클럽 스킨의 목록 스타일로 제공되는 커버 갤러리1과 2의 비교 표입니다. 각기 스타일도 다르고 아이템의 크기도 다르니 잘 살펴보시고 필요에 따라 적당히 골라.. 공감수 2 댓글수 1 2020. 9. 24.
  • 북클럽 스킨 - 메뉴 확장 상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?) 메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해! 그렇다면.. 간단히 가능한 방법이 있어 올립니다. 적용 방법 관리 > 스킨 편집 > html 편집에서 아래 3줄을 찾아서 (샾은 #으로...ㅋ) ... [샾샾_blog_menu_샾샾] 아래 내용으로 덮어 버리시면 가능합니다. 홈 서브메뉴 1 서브메뉴 222222 서브메뉴 3 태그 섭섭이 메뉴 1 섭섭이 메뉴 2 태그2 섭섭이 1 섭섭이 2 방명록 jQuery 버리기 자~ 이제부터 상단 메뉴는 수동 관리 체제에 돌입합니다. ㅋ 메인 메뉴 구성하실 때 참고할 부분은.. 이렇게 첫 메뉴과 끝 메뉴에는 클래스명에 first / last 를 넣어주세요 서브 메뉴는 .. 공감수 3 댓글수 5 2020. 9. 18.
  • 이미지 클릭 시 다른 이미지 보여주기 포럼에 답변하기 위해 작성하는 포스팅! 라이트 박스 플러그인 사용중이고 본문 이미지 클릭 시 다른 이미지가 보여지길 원한다면! (보통은 이럴 필요가 전혀 없지만..) 스킨편집 > html 편집으로 가서 하단 윗줄에 아래 내용 추가 그리고나서 글 작성 시에는, 일단 평소처럼 이미지를 모두 올리며 글을 쓴 후 저장하기 전에 html 모드로 변경해서 이미지당 아래처럼 클릭 시 대신 보여질 이미지의 주소를 data-alt 로 추가해줌 ....height="NaN" data-alt="....대체할 이미지 주소..." data-ke.... 이렇게요. 아래는 실제 적용 사례 (클릭해 보세욤) 조금 수작업이지만... 그래도 이 방법말고는 없을 듯 합니다. 그리고 대체 이미지도 업로드해야 한다면 일단 그냥 보이게 업로드.. 공감수 0 댓글수 3 2020. 9. 17.
  • 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.. 공감수 0 댓글수 3 2020. 9. 16.
  • Odyssey 오디세이 스킨 - 사이드 바 위치변경 새로나온 오디세이 스킨을 2단으로 사용할 경우, 사이드 바는 우측에 나오는게 기본입니다. 그런데 이게 굳이 왼쪽에 나오길 원하신다면... html 편집으로 전체를 내부 최상단으로 이동하고 margin값만 조정하면 됩니다. 그러나, 소스상 원래 구조를 건드리고 싶지 않다면 아래와 같이 간단히도 해결이 가능합니다. 스킨편집 > html 편집 > 하단 가 끝나기 전에 아래 코드 추가. 조정하고 나면 이렇게 됩니다. 공감수 8 댓글수 9 2020. 9. 15.
  • Odyssey 오디세이 스킨 - 상단 메뉴 고정 새로운 스킨 '오디세이'(Odyssey)가 나왔죠? 포럼에 어떤분이 올리신 질문에 답변으로 쓴건데.. 없어지면 아까우니 포스팅으로도 남겨봅니다. 이 스킨을 사이드 바가 가려진 1단으로 쓰고 있는 경우, 아래 코드를 스킨편집 > html 편집 으로 가서 하단 가 끝나기 전에 넣어 주면 상단 메뉴가 늘 화면 위에 붙어 있게 됩니다. (아니면 요롷게 스타일로만으로도 고정이 되서 다행입니다. 공감수 3 댓글수 11 2020. 9. 15.
  • 사이드 바 - 스크롤 따라 다니게 만들기 따라다니는 메뉴? 보통 Sticky 라고 하나요? 평소엔 자기 위치에 있다가 위아래로 스크롤 될 때는 화면상 위치가 고정되는거요. (이미 좌측 사이드 바에 적용되어 있습니다.) 특히 요샌 포스팅 길이도 많이들 길고해서 사이드 바에 이 기능이 적용되서 따라다니면 좋겠다는 생각을 해봤습니다. 그래서 살펴보니 float 이 적용된 제 사이드 바를 그렇게 만드는 방법은 3가지 정도 있을 것 같습니다. 우선 제일 쉬운 방법부터... 방법 1. CSS 의 position : sticky 사용하기 #aside { position: sticky; top: 0; } 위 내용을 css에, 아니면 html에 style 태그로 감싸서 넣어줍니다. (#aside 는 북클럽 스킨 사이드바에 지정된 아이디입니다. 필요 시 수정!).. 공감수 5 댓글수 2 2020. 9. 11.
  • 태그 - 강조 차등 적용 (+ 보너스) 원래 태그가 등록 빈도에 따라 5단계로 나눠지는거였군요?! 그렇다면 각 단계별로 다르게 표현할 수 있겠네요. ^^ 알아보니 태그에는 cloud1 부터 5 까지 순위별로 클래스가 적용될 수 있습니다. (1 = 제일 많이 등록된 태그) (북클럽 스킨에선 역시나 누락된 내용이군요... 췟..) 적용 대상 사이드 바 > 랜덤태그 목록 메뉴 > 태그 페이지 (위 두 곳 외에도 글 하단에 나오는 태그도 있죠? 그러나 거긴 빈도레벨 구분 적용이 안되서 패스합니다) 적용 방법 1. 스킨 html 수정 (북클럽 기준으로 작성한 내용입니다. 다른 스킨이고 이미 적용되어 있다면 굿!) 태그 ... ... ... 태그 위 7, 21번 줄처럼 가 들어있는 랜덤태그 목록의 태그들 끝에 [더보기] 추가하는 법 스킨 html 을 수.. 공감수 2 댓글수 3 2020. 9. 7.
  • 댓글 (+방명록) - URL 처리 (링크 및 이미지 적용) 역시나 제가 필요해서 만들게 된 아이입니다...ㅋ 주요 기능 댓글에 URL 주소가 입력된 경우, 클릭하면 새창이 열리게 만들어 줍니다. 실제 a 태그로 변환하는건 아니고 onclick 으로 안전하게 처리합니다. URL 주소가 이미지라면 해당 텍스트를 없애고 이미지를 바로 보여줍니다. 이미지를 불러오는데 문제가 생기면 그냥 url을 유지합니다. data:image 형식의 data URL도 이미지로 바꿔줍니다. 이미지 클릭 시 새창을 통해 이미지로 이동합니다. 방명록도 댓글이라 원하실 경우 동일하게 처리할 수 있습니다. 댓글/방명록의 신규 등록 및 수정시 모두 바로 바로 처리됩니다. 적용 방법 1. 스킨 html 수정 답글 ... ... ... ... ... ... 답변 ... ... ... 위 코드와 같이.. 공감수 4 댓글수 5 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.. 공감수 0 댓글수 4 2020. 9. 6.
  • 북클럽 스킨 - 포인트컬러 활용 '더' 하기 관리 > 스킨편집에 들어가서 우측의 스킨 설정 영역을 바닥으로 내려보면 포인트컬로 설정이 가능한 걸 볼 수 있습니다. 근데, 실제 이 포인트컬러가 적용된 곳을 찾아보면 몇군데 없네요. (댓글 등록 버튼, 글 내용중 링크 색상, 댓글 수 외 몇몇) 물론 북클럽 스킨이 기본적으로 워낙 모노톤이고 단정하기 때문에 이런 최소한의 사용이 더 마음에 들 수도 있습니다. 절대적으로 개인적인 취향에 따라 호불호가 갈릴 수 있는 부분이겠지만 저는 이 포인트컬러의 적용 폭을 조금 더 넓히고 싶었습니다. 이렇게 하면, 기분이나 시즌에 따라 스킨설정에서 간단하게 이 컬러만 한번 바꿔주면 내가 지정한 부분들의 색상도 한꺼번에 바뀌는 장점이 있다고 본거죠. 따라서, 필요하신 분만 적용하시면 되겠습니다. 아니면, 필요한 부분만 추.. 공감수 1 댓글수 0 2020. 9. 6.
  • 북클럽 스킨 - 댓글 버그 수정 그간 잘 안써봐서 몰랐는데... 현재 사용중인 북클럽 스킨에서 댓글을 수정/삭제할 때 약간 이상하게 작동하는 것 같은 느낌적인 느낌을 우연히 받아 좀 살펴보았더니 역시 문제가 있네요?! (저만 그런거 아니죠? 제발...) 아무래도 스킨 제작자의 실수라고 보여 집니다만, 그래도 기본 스킨 중 하나인데 좀 꼼꼼히해서 내놓으시지.. 아쉽네요. (설마 Book club 이 혹시 '부끄럽' 웠던건가...ㅡㅡ;) 문제점 댓글을 수정하면 새로 등록되는 것처럼 추가되고 기존 댓글이 화면에 남아 있음 댓글을 삭제해도 페이지를 새로고침하기 전까진 화면에 남아 있음 추가/삭제/수정의 결과가 사이드바의 '최근댓글'에 반영되지 않음 글에 첫 댓글 등록 시 삭제/수정 버튼을 보여지게 하는 '더보기' 버튼이 먹통임 방명록도 사실은.. 공감수 14 댓글수 8 2020. 9. 4.
  • 퀵점프 - 본문용 책갈피? 목차? 바로가기? 저와는 달리 글의 내용이 충실한 열정 블로거들을 위한 툴!? ㅋ 본문 내용 중 제목 문단1~3 (h1, h2, h3, h4) 을 썼거나 굵게 태그로 표시한 내용이 있다면 뽑아서 바로 가기를 제공합니다. 글의 키워드 목록이라고나 할까요? 우선, wbluke 님의 ToC (table of contents) 목차 기능을 보고 영감을 받아 만들어 보았습니다. 계층적이고 디테일한 목차가 필요하신 분은 고고! 대신 저는 개인적으로 제목 문단을 잘 사용하지 않고, 글의 구성이 단층적이며, 흐름에 끊김이 없이 쓰면서 구간별 구분을 명확히 하는 그런 스타일이 아니라고 판단해 목차보다는 단순히 키워드 추출의 느낌으로 글 내용중 중요시 되어야 하는 부분으로 바로 이동하는 것을 주목적으로 구성했습니다. 설치법 1. 스킨 편집.. 공감수 2 댓글수 6 2020. 9. 2.
  • 코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 사실 아직 찾는 사람도 쓰는 사람도 없는 것 같아 부담은 없습니다만. ㅋ) 암튼, 제가 사용하고 있는 그대로 공유하는게 맞다 싶어 풀버전 올립니다. 기능 목록 줄 번호 표시 줄 시작번호 지정 가능 줄 강조 가능 ([3,5,7-10]과 같은 배열로 표시, 7-10같이 범위도 지정 가능) 자동 줄바꿈 (pre-wrap) 적용 시 바뀐줄에도 들여쓰기 (indent) 유지 코드상 색상값(예: #FFFFFF, black, rgb(125,125,125) 등)에 어떤 색인지 보여주는 컬러박스 추가 괄호({},[],()) 및 태그 (예.. 공감수 13 댓글수 16 2020. 8. 31.
  • 코드블럭 - 줄번호 표시 (라이트 버전) 난 다 필요없고 단순히 줄번호만 표시되면 좋겠다!! 하시는 분들을 위해 준비했습니다. 설치법은 풀버전과 동일합니다. 그저 소스가 매우 짧을 뿐 풀버전과의 기능적 차이는, 줄번호 감추기 불가 줄강조 불가 시작번호 지정 불가 긴 코드가 줄바꿈되었을 시, 들여쓰기(indent)가 유지되지 않음 선별적 적용 안됨 더 많은 기능은 아래 글 참고 2020/08/25 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전) 공감수 0 댓글수 0 2020. 8. 25.
  • 코드블럭 - 줄번호 표시하기 (미들 버전) 최신버전 업데이트는 alikong.tistory.com/46 으로!! 코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 � alikong.tistory.com 가급적 최신 버전을 이용해 주세요. 위 글 클릭!! 이하 미들 버전 // 코드블럭 관련 시리즈(?) 1탄 - (뭐..걍.. 내가 필요해서 건드린 부분들? ㅋ) 위에 보이는 코드블럭 삽입하기를 이용해 입력된 소스에 아래와 같이 줄번호를 자동으로 추가해 줍니다. 혹시(아마 대부분일듯) 코드 문법 강조 플러그인을 같이 사용하고 있다면 현 테마에 맞춰 줄번호 스타일도 맞.. 공감수 1 댓글수 8 2020. 8. 25.
  • 코드블럭 + SyntaxHighlighter 코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 higlight.js (이하 hljs) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. alikong.tistory.com 위 글을 본 후에도 굳이 굳이 계속 계속 SyntaxHighlighter 를 쓰시겠다면.... 입력하는 방법이라도 편해질 수 있도록 새 에디터의 코드블럭 삽입 기능을 이용할 수 있게 해주는 소스입니다. [스킨 편집] > [html 편집] > [HTML] 내용중 기존 SyntaxHighlighter.all(); 가 실행되기 전 위치.. 공감수 0 댓글수 1 2020. 8. 21.
  • 코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 '코드 문법 강조' 플러그인 (=highlight.js (이하 hljs)) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣어 주세요. (제이쿼리는 추가되어 있을 것으로 간주하겠습니다. 아니면 댓글로 알려 주세요.) $("pre").each(function(i, pre) { if (!$(pre).find('code').length) { if (pre.className) { var c = pre.className.replace(/\s/g, ''); var nc = {}; var items = c.split(";"); $.each(it.. 공감수 0 댓글수 0 2020. 8. 20.
  • 코드블럭 - 접기/펼치기 (+언어명 표시 & 자동 줄바꿈 적용/해제) 흠.. 쓸수록 코드블럭에 자꾸 관심이 가네여...왜지...(?) 코드블럭 공지에 올라온 댓글을 보고 오호 있으면 좋겠는데!? .. 해서 만들어 보았습니다. 뭔가 버튼이 노출되어야 하는김에 코드의 언어 명을 표시했고, 보너스로 줄바꿈 적용/해제 체크박스도 넣었습니다. 예시는 대략 이렇습니다. var wrapper = (code.parentNode.tagName == "PRE")? code.parentNode : code; if (!wrapper.dataset.noindent) { //long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. .. 공감수 2 댓글수 10 2020. 8. 19.
  • 코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정) 코드블럭 3탄!? ㅋ 색상을 입히는 문법강조와는 별개로 코드블럭으로 입력한 소스의 줄맞춤(들여쓰기?)을 예쁘게 정렬해줍니다. 이용된 auto indent 라이브러리는 매우 가볍고 다른 알려진 넘들처럼 지멋대로 줄바꿈을 추가하는 등의 오버는 떨지하지 않고 오롯이 들여쓰기 부분만 잘 만져 줍니다. (출처: https://github.com/zebzhao/indent.js) 거기에 탭크기 설정을 지원하기 때문에 간혹 너무 크다고 느껴졌던 기존의 탭크기를 줄이는 용도로 쓸 수도 있겠습니다. 이미 문법 강조 플러그인을 사용하고 있어도 잘 작동합니다. (highlight.js 를 직접 추가한 케이스라면 하이라이트 적용 전에만 실행시켜 주면 됩니다.) 준비물: 아래 js 파일 다운로드 받아서 스킨에 업로드 해주세요... 공감수 0 댓글수 1 2020. 8. 19.
  • highlight.js (문법강조) 적용하기 및 설정 코드블럭으로 입력한 소스를 알록달록 예쁘고 보기 쉽게 만들어 주는데는 여러 방법이 있는데... 그중 티스토리와 가장 찰떡궁합인 highlight.js 를 적용하는 방법을 알아보자! (줄번호 추가는 2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 참고) 방법1: '코드 문법 강조' 플러그인 사용 이건 뭐 딱히 설명이 필요 없을듯.. 가장 심플한 방법이라 (아마 다들 알아서 쓰고 계실듯..) 편리함이 장점이라면, 단점으로는 사용가능한 테마가 제한적이고 버전 업데이트가 안되고 탭간격 같은 옵션 적용불가 방법2: '코드 문법 강조' 플러그인 사용을 해제하고 직접 highlight.js 를 스킨에 추가하기 [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. 공감수 0 댓글수 0 2020. 8. 17.
  • 본문의 모든 링크는 새창으로! 난 내 블로그의 본문안에 있는 링크들은 모두 새창으로 열리는 걸 선호함 그런데 종종 무심코 글을 쓰고나면 링크에 타겟 지정하는 것을 까먹을 때가 있음 (특히 [이전 글 넣기] 플러그인 링크나 복/붙한 링크의 경우...) 암튼, 그것 때문에 다시 수정하기는 귀찮고. 그냥 스킨에 스크립트 한줄 추가해서 해결함 적용방법: [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝 var anchors = document.querySelectorAll('.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a'); for(var i=0; i < anchors... 공감수 0 댓글수 0 2020. 8. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.