투명한 파비콘 만들기 : 다이나믹 드라이브 툴 웹툴을 제공해주는 개인 사이트가 있다. 공식적으로 운영되는 사이트보다는 블로그에 가까운 사이트임에도 불구하고 다양한 웹툴을 제공하고 있다. 요즘은 직접 만드는 것보다 이렇게 웹툴을 통해서 만드는 것이 훨씬 완벽에 가깝다. Web Tools Image Optimizer FavIcon Generator FavIcon Editor Animated Gif Email Riddler .htaccess Password .htaccess Banning Gradient Image Button Maker Image to Base64 String Ribbon Rules List Scrubber Tool DD Whois Service 다이나믹 드라이브 사이트에서 제공하고 있는 링크는 위와 같다. 여러가지 기능들을 제공하고 있..
티스토리 토글형 사운드클라우드 배경음악 구현하기 티스토리 사이트에 배경음악을 따로 설치할 생각은 없었는데, 우연히 괜찮은 라이브러리를 발견해서 설치해봤습니다. 토글형식으로 되어 있고 자주 방문하는 사이트라면 크롬엔진에서도 자동음악재생이 가능해집니다. 어쨌든, 토글형식의 배경음악 기능은 꽤 예쁘고 깔끔합니다. $('.cata-music-toggle-btn.cata-toogle').on("click", function() { $('.cata-music-toggle-btn.cata-toogle').not(this).removeClass('.cata-music-toggle-btn.cata-toogle'); $(this).toggleClass('active'); }) 제 사이트에서는 메인에 위치한 재생버튼도 있지만, 사운드클라우드처럼 리스트 형식의 음악을 재생..
티스토리 카테고리 페이지 주소 Category 삭제방법 var articleListPage = document.getElementsByClassName("post-item"); var articleListPage = document.getElementsByClassName("related-articles"); var removeSID; var indexSID; if(articleListPage.length) { for (i = 0; i < articleListPage.length; i++) { removeSID = articleListPage[i].getElementsByTagName("a")[0].href; indexSID = removeSID.indexOf("?"); if(indexSID == -1) {break;} removeSID = removeSID..
나라별 구글애드센스 단가(CPC) 2018년 CPC 상위국 (단위: USD) 룩셈부르크: 0.65 미국: 0.61 호주: 0.57 영국: 0.48 핀란드: 0.45 캐나다: 0.45 오스트리아: 0.45 뉴질랜드: 0.33 스웨덴: 0.31 아일랜드: 0.31 덴마크: 0.28 싱가포르: 0.27 남아프리카: 0.26 노르웨이: 0.26 네덜란드: 0.26 바하마: 0.27 독일: 0.22 스위스: 0.21 벨기에: 0.21 스페인: 0.19 지부티: 0.19 태국: 0.17 프랑스: 0.17 콜롬비아: 0.17 푸에르토리코: 0.16 과테말라: 0.16 그리스: 0.16 아랍에미리트: 0.15 러시아: 0.15 몰타: 0.15 동북아시아 국가 비교 일본: CPC USD 0.14 / CTR 1.14% (33위) 중국: CPC USD 0...
오랜만에 쓰는 티스토리 노하우 사실 티스토리 기반으로 만들어진 사이트는 사이트 관리에 신경을 매우 많이 써주어야만 합니다. 워드프레스와 달리 티스토리는 티스토리 내에 사용할 수 있는 기능들이 한정되어 있고, 이마저도 어려움을 겪는 사람들이 너무나도 많기 때문에 네이버블로그를 했던 분들이라면 티스토리를 시작하는 것에 굉장히 어려움을 느낄 것이라고 생각이 듭니다. 개인적으로는 네이버 스마트에디터보다 티스토리 에디터를 더 마음에 들어합니다. 직관적이고, 깔끔하고 필요한 내용만 작성하면 되기 때문입니다. 티스토리를 다양한 목적으로 하는 사람들이 많습니다. 저는 글을 쓰는 능력은 나름대로 다른 사람들에 비해 빠르게 글을 쓸 수 있다고 생각을 하면서도 다른 사람들 만큼 컨텐츠가 다양하거나, 분석적이거나 정성을 들여서 쓰는 글은 잘 쓰지를 못합니..
티스토리 검색창 추가하기(치환자/출력 갯수/디자인 변경) 기존에 관련 글이 꽤 많이 있었는데 소스를 보니 적용되는 부분이 모두 달랐습니다. 글이 점점 많아지니 제 글도 쉽게 찾지 못하는 경우가 생겨서 급하게 티스토리 검색창을 추가했습니다. 위치는 개인의 취향에 맞게 조정해서 쓰면 되고 HTML을 조금 다루실 줄 아시는 분은 그대로 소스를 긁어서 원하는 위치에 추가하시면 될 것 같습니다. 다만 Submit 출력 버튼은 Display: none; 설정을 한 상태라서 검색 버튼을 활성화시키실 경우에는 CSS를 수정하셔야 합니다. HTML CSS /* 검색창 */ .search { max-width: 1200px; margin: 0 auto; text-align: right; } input#article_search { margin: auto; text-align: ..
티스토리 아이콘 설정 파비콘과 다른 점 티스토리를 처음 개설할 때 여러가지를 설정하게 되는데, 이는 워드프레스나 네이버블로그 등 다른 플랫폼에서도 마찬가지입니다. 사이트에 익숙하지 않다면 새로운 설정을 할 때 무엇을 위한 것인지 모를 때가 많습니다. 티스토리에서는 내 사이트 옵션에서 내블로그로 들어가면 보안설정 외에도 아이콘 설정과 파비콘 설정을 할 수 있는 곳이 있습니다. 프로필 이미지도 따로 설정을 해야하고, 블로그의 프로필도 별도로 설정하는데, 아이콘 까지 있다면 조금 헷갈릴 수 있습니다. 티스토리 아이콘은 댓글에 표시되는 부분입니다. 파비콘은 사이트를 열었을 때 브라우저의 상단에 뜨는 작은 아이콘입니다. 즐겨찾기를 할 때에도 파비콘의 이미지가 보여집니다. 파비콘이 적용된 모습 바로 이렇게 적용된 부분이 파비콘입니다. 그렇다면 아이콘을 ..
티스토리 통계 : 블로그 소유자의 방문 제외 업데이트 드디어 기다리던 소유자 방문 통계가 제외됐다. 그래서 간단한 통계를 보더라도 일단은 실방문자를 파악하는 것이 제일 중요한데, 이제서야 실방문자 통계만 집계되도록 변경이 되었다. 통계 후속 업데이트 - "블로그 소유자의 방문이 제외"됩니다. 통계 후속 업데이트 - "블로그 소유자의 방문이 제외"됩니다. 안녕하세요 티스토리 팀입니다. 블로그 통계 개편 이후에 '블로그 소유자의 방문도 통계에 포함'되어 불편하다는 의견이 있었습니다. 이를 해결하기 위한 논의를 했지만 제외해야 할 방문의 기준을 설정하는 것,.. notice.tistory.com 하지만, 나의 경우에는 글을 쓸때를 제외하고 딱히, 내 글을 별로 안읽기 때문에 이전과 별 차이가 없다. 오히려 요즘에는 그래도 열심히 글을 쓰고 있어서 그런지 유입경로..
티스토리 속도 개선 순위 SPEED Improvement 티스토리 사이트를 운영하다보면 사이트 관리가 왜 어려운지를 깨닫게 된다. 다양한 어려움에 처하다보면 해결방법을 알게 되는데, 우선순위에 따라서 수정하다보면 속도가 굉장히 빨라지는 것을 느낄 수 있다. 데이터를 읽어내는 속도, 즉 사이트의 데이터가 무거우면 당연히 보여지는 우리의 모니터에서 느리게 뜨는 것이다. 즉, 사이트를 가볍게 만들어줘야한다. 다이어트 하라는 소리 듣기도 지겨운데, 사이트까지 다이어트를 해야한다니 이 시대는 확실히 다이어트를 해야만 한다. 그것을 강요받든 받지않든 간에, 다른 문제가 발생하기 때문이다. 사이트를 느리게 하는 요인은 굉장히 많다. 티스토리의 경우 개인 스킨을 세팅하는 경우가 많이 있다. 하지만 이 개인스킨들을 잘 뜯어보면 나에게는 불필요한..
티스토리 각주다는 방법 (새 에디터) 기존 에디터에 내장되어 있던 기능인 각주 기능이 새 에디터에서는 별도의 코드를 입력해줘야한다. 사용방법은 간단하다. HTML 편집모드가 아닌 기본모드 에서 주석을 달고자 하는 단어 뒤에 설명문과 함께 코드를 입력해주면 된다. 각주(FOOTNOTE) 사용법 위와 같은 방식으로 작성을 하게 되면 쉽게 각주를 달 수 있다. 위의 사용방법을 통해서 작성을 하면 인연 식으로 표현된다. 각주 자체에 속성을 부여할 수 있어 글씨에 색상을 변경하거나 볼드처리 등을 할 수 있다. 각주에는 속성을 부여할 수 있다. 각주는 독자들로 하여금 단어나 키워드를 명확하게 설명할 수 있고 글을 깔끔하게 구성할 수 있는 활용도가 높은 기능이다. 각주는 본문 아래쪽에 부차적으로 내용을 추가할 수 있기도 하고, 글이나 참고한 자료를 밝히..
티스토리 신규스킨 'Magazine' 리뷰 이번 4월달에 티스토리에서 신규스킨이 업데이트 되었다. 이전 스킨들보다 훨씬 늦게 업데이트 된 만큼 기대가 컷었다. 신규스킨이 나오면, 이 신규스킨으로 새로운 티스토리를 운영하겠다고 생각했다. 그래서 신규스킨이 나오고 조금 살펴보다가 이전에 있었던 안쓰는 티스토리 사이트를 삭제하고 새로운 사이트를 개설했다. 최근에 게임도 열심히 했으므로, 게임 사이트로 운영하려고 한다. 물론, 인기있는 게임은 아니라서 조회수가 어떻게 유지될지는 모르지만 그래도 꽤 오래된 게임이고 매니아층이 형성되어 있는 게임이다. 또 예전에 나 역시도 정말 재밌게 했었던 게임이기때문에, 꼭 게임블로그를 한번 해보고 싶다는 생각은 항상 있었는데, 이번 기회에 개설을 했다. 아직 글을 많이 작성하지 않아서 구성은 조금 어설프지만, 기본적으..
사이트 디자인을 새롭게 개선하였다. 기존에 티스토리에서 제공하는 스킨을 버리고 최대한 심플하고 간단한 스킨을 다운로드하여 일부 디자인과 기능들을 모두 수정하였다. 항상 느끼는 거지만, 공식 스킨을 다운로드하여도 오류가 있기 마련이고 무엇보다 가장 큰 문제는 사이트 최적화가 되지 않는 것이었다. 공식적으로 제공이 된다는 것은 많은 사람들이 다양한 기능을 활용할 수 있도록 많은 기능을 넣었고, 하다못해 테마의 컬러까지도 각 코드를 모두 넣었기 때문에, 필연적으로 사이트가 무거워질 수밖에 없다. 많은 사람들이 간과하는 것이 바로 속도이다. 한국에서야 워낙 인터넷 환경이 잘 갖춰져 있어 쉽게 체감할 수 없지만 구글의 툴을 이용해서 사이트 속도를 체크하면 SEO 점수에서 감점을 받는다. 그 이야기는 티스토리와 같이 플랫폼의 검색 점유율이 낮고 구글..
티스토리 마크다운을 위한 입문서 가이드 마크다운(Markdown) 이번에 티스토리 에디터에 마크다운 기능이 추가되면서 빠르고 쉽게 효과적으로 글을 작성할 수 있게 되었습니다. 마크다운이란, 텍스트 기반의 마크업 언어로 문서나 일반 텍스트 편집기를 통해 쉽게 HTML로 변환이 가능한 웹문서 언어입니다. 따라서, 마크다운 언어를 적용하여 글을 쓰면 매우 효과적으로 빠르게 글을 쓸 수 있다고 이해할 수 있습니다. 문단 구별 및 개행[ENTER] 이번에 코드블럭 기능도 추가되어 본문에 쉽게 HTML으로 작성을 할 수 있게 되었습니다. 글을 작성할 때 `Space Bar를 두번 눌러 띄어쓰기 공백을 만들면 문단이 구분됩니다.` 마크다운에서는 문단을 구별하기 위해서는 스페이스바를 활용합니다. [Space Bar]를 두번 눌러서 문단을 구별할 수 있습니다..
티스토리 직접 유입과 기타 유입 그리고 방문통계 지금 보고 있는 사이트가 아닌, 내가 운영하고 있는 다른 사이트의 방문통계를 살펴보면 티스토리의 검색엔진이 여타 사이트와 별반 다를바 없다는 것을 알 수 있다. 네이버의 경우, 블로그 탭에 자사의 블로그 서비스를 노출시키고 다음의 경우에는 다음 블로그와 티스토리가 우선적으로 노출된다. 다음이나 네이버는 국내 포털서비스로 블로그의 경우에는 기본적으로 자사의 블로그탭에 노출시키지만, 구글에서는 웹문서로 취급이 된다. 그렇다면 네이버와 다음, 구글에서 골고루 검색이 되기 위해서는 어떻게 해야할까, 네이버의 블로그탭의 경우에는 자사의 서비스를 우선으로 하기 때문에 티스토리가 블로그탭이 아닌 웹문서탭에 노출이 될 확률이 높다. 티스토리 사이트 중에서도 어느정도 기간이 되고 전문성이 입증된 티스토리 사이트의 경우,..
더보기 접기 디자인 변경(Svg) Document, Envelope 아래와 같이 변경하였다. 기존의 뷰/블라인드 와는 조금 더 미니멀한 느낌을 주고 싶었다. 마침 찾아보다가 딱 마음에 드는 아이콘이 있어 적용해보았다. 이 글은 열린 글입니다. 여러가지 아이디어를 생각했는데, 역시 가장 심플한게 이 사이트의 컨셉에 잘 맞을 것 같아서 조금 화려한 것도 있었지만, 최대한 깔끔한 것으로 구성하였다. 포인트는 제목으로도 충분하다. 글에 컬러가 많으면 양이 많아보이는 효과도 있지만, 반대로 집중도를 떨어트릴 수도 있다. 가독성을 높이는 요소를 유지하면서 조금씩 더욱 글이 선명하게 보일 수 있도록 다른 방법도 고안중이기는 하다. 다만 곧 티스토리의 에디터가 변경될 예정이여서 크게 업데이트는 하지 않고 있다. 꾸준히 글은 작성하되, 너무 많은 변화보다는 계속해서 쌓아가고자 노력하고 ..
티스토리 카카오톡/트위터 버튼 수정(undefined) [Onclick] 기존에 내장되어 있던 티스토리 포트폴리오 스킨의 공유버튼은 주석처리되어 비활성화 되어있었다. 그래서 다시 활성화를 시켜서 본문에 바로 공유버튼을 유도할 수 있도록 설정을 했으나 트위터의 경우에는 undefined가 되어 공유시에 글의 타이틀 데이터를 불러올 수가 없었다. 카카오톡 공유의 경우에도 마찬가지로 공유가 되지 않고 카카오 디벨로퍼스에서 자바스크립트 API를 통하여 앱을 만들어 값을 입력해주고 정상적으로 공유버튼이 실행되도록 수정하였다. 카카오톡의 경우에는 위와 같이 자바스크립트로 구현하였고, 자바스크립트 키를 입력하여 정상적으로 작동하는 것을 확인하였다 트위터의 경우에도 기존의 있었던 부분에 치환하여 적용하였다. 카카오 디벨로퍼스 앱 만들기 애플리케이션에서 개요 부분을 클릭하여 플랫폼 설정도 해..
개발에 대한 하소연 기능 하나를 추가하면 일단 브라우저마다 호환성도 체크해야하고 각종 스크립트 오류부터 사이트가 느려지는 현상까지 고려를 해야한다. 별거 아닌 사이트처럼 보여도 최대한 깔끔하면서도 웹페이지 또는 웹문서의 접근성을 높이기 위해서 나름의 최적화를 했지만, 정작 내가 구현하고 싶은 기능은 매우 무거워서 제대로 구현하지 못했다. 똑같은 기술이라도 훨씬 가볍게 적용시킬 수도 있고 용량도 줄일 수 있을텐데, 지식이 너무 짧아서 더 공부하고 테스트를 해봐야하지 않나 싶다. 하소연 그래서 괜히 뜬구름 잡는 것처럼 하소연을 조금 부려봤다. 구글링을 통해서 가이드에 나온대로 시도해보기도 하고 내 사이트에서 찾을 수 없는 호환문제가 있어 다른 티스토리로 테스트를 해봤지만 또 그건 잘 된다. 그래서 다시 내가 적용하고 싶은 사이..
티스토리 새글알림 아이콘 이미지 변경하기 티스토리 블로그에서 새글알림은 회색 아이콘으로 표시되어 디자인을 생각하시는 분이라면, 더욱 예쁜 아이콘으로 변경이 가능합니다. 아이콘은 png 파일 혹은 svg로 설정이 가능하며, IE의 경우에는 호환되지 않는 svg보다는 png로 적용시키는 것이 더 좋습니다. 티스토리 게시글 NEW 아이콘 변경! 카테고리 NEW 아이콘 변경 & 아이콘 본 사이트의 경우에는 아이콘 이미지는 위의 사이트에서 공유받아 사용하고 있습니다. 포트폴리오 스킨의 경우에는 위의 방식으로 카테고리 아이콘과 카테고리를 클릭했을 때의 리스트 아이콘으로 치환하여 사용할 수 있습니다. 만약, 위의 경우에도 카테고리 리스트가 수정이 안된다면 아래의 값을 찾아 기존의 아이콘 이미지의 위치나 css의 속성값을 입력해줘야 합니다. 의 주소는 이미지..
티스토리 구분선 변경하기 .article_view hr 바로 티스토리 기능 중 하나인 더보기 기능의 디자인을 변경할 수 있다. 본래 코드에다가 CSS를 추가하여 배경이미지로 사용하는 것인데, 같은 다음 플랫폼 서비스 중에 하나인 브런치의 이미지를 추가하여 사용할 수 있다. (이렇게 위의 선이 에디터에서는 그대로 나오지만, 글을 미리보기 하거나 발행하면 다르게 출력된다.) 더보기 배경이미지의 경우, 배경이미지로 사용할만한 외부이미지 링크를 추가하거나, 아니면 위(브런치)의 더보기 이미지를 사용해도 좋다. 현재 본 사이트의 필자가 사용하고 있다.
티스토리 신고버튼 디자인 변경/수정 .ico_report.container_postbtn .postbtn_like .ico_report { background: url(교체할 아이콘이미지) no-repeat; line-height: 30px;background-position: 0px!important;} 티스토리 정책에 의해 신고버튼이 강제적으로 설치되었는데, 강제로 삭제할 경우 티스토리에서 이용제제 등의 불이익을 받을 수 있다. 따라서, 신고버튼을 삭제하거나 숨기는 기능이 아닌 신고버튼 아이콘을 변경하여, 그나마 사이트내의 눈에 띄는 신고버튼 디자인을 조금 아기자기하거나 예쁜 아이콘으로 변경이 가능하다. 매우 간단한 방법으로 변경이 가능한데, 위의 부분을 변경해주면 된다. 이때, 배경이미지에 불러올 외부 링크나 소스 혹은 내부에 아이콘..