카카오 Adfit으로 블로그에 광고를 달고 나서 대략 한 달 정도의 시간이 지난듯 하다. 광고는 블로그를 지속하게 해 주는 소소한 원동력이 되기 때문에 아예 광고 없이 가겠다는 생각은 진즉에 포기했다. 그럼에도 광고로 인해 본문의 가독성이 떨어지고, 종종 다른 탭이나 다른 창으로 갔다오면 전체화면에 뜨는 광고는 읽는 사람으로 하여금 짜증을 유발하기 때문에 광고의 배치 위치 또한 신중히 결정하기로 했다.
티스토리 관리 페이지에서 광고 위치를 설정할 수 있다.
우선 광고 위치는 본문하단, 그리고 사이드바 두 종류를 넣고 있다. 사이드바의 경우도 블로그의 카테고리 아래에 보이도록 설정해서 최대한 눈에 덜 거슬리도록 배치했다. 물론 그만큼 수익은 덜 올라가겠지만, 내 블로그 수익이 그걸로 몇만원씩 왔다갔다 하지도 않고 어차피 십원단위니까 괜찮다고 생각한다.
그럼 지난 한 달간 광고 수익은 얼마나 들어왔을까? 수익은 카카오 애드핏 웹사이트나 티스토리 관리 페이지에서 확인할 수 있다.
카카오 애드핏 홈페이지에서 확인한 최근 30일 수익
그래프가 들쭉날쭉 뭔가 많아 보이지만... 가장 높게 치솟은 9월23일이 56원이고 나머지는 뭐 2원, 7원 이정도다ㅋㅋㅋㅋㅋ 최근 30일 수익은 75원으로 확정! 하지만 이걸로 귀여운 나의 광고수익은 이제 시작되었을 뿐! 앞으로 힘내서 양질의 글을 올려봐야겠다. 최근 30일 수익이 750원을 돌파하면 다시 올려봐야겠다.
아무래도 블로그에 코드를 넣는 글이 많다보니, 예쁜 syntax highligthing 테마를 적용하고 싶어졌다. 그 과정을 쉽고 간단하게 남겨본다.
1. 티스토리 기본 플러그인
사실 티스토리에서 제공하는 기본 포맷도 썩 나쁘지는 않다고 생각하므로 그 방법을 먼저 남긴다.
티스토리 코드 문법 강조 플러그인
티스토리 블로그 관리 -> 플러그인 에서 선택할 수 있는 "코드 문법 강조" 플러그인이다. 이후 게시글을 작성할 때, 코드블럭을 선택하여 넣으면 원하는 테마를 적용할 수 있다. 내가 사용하던 테마는 Atom One Dark. 딱히 호불호 없을 무난무난한 다크 테마라고 생각된다.
기본적으로 제공하는 테마가 심심하고 나만의 개성을 찾고 싶어 새로운 방법을 탐색하기 시작. 우선 이 방법을 사용하려면 위의 티스토리 기본 "코드 문법 강조" 플러그인을 해제해야 된다. highlight.js 홈페이지에서 아래로 쭉 내려오면 HTML 태그를 이용해서 스타일을 적용할 수 있게 제공하고 있다. 사용하고 싶은 테마의 종류는 Demo 메뉴에서 미리 확인해 볼 수도 있다. 내가 고른 테마는 어두운 배경에 분필 색감이 인상적인 "base16-chalk"를 골랐다.
Demo 메뉴에서 테마 미리 확인해보기
원하는 테마를 골랐으면 이름을 잘 기억하고 cdnjs 코드를 티스토리 블로그에 복붙하러 간다. 자, 이제 티스토리 블로그에 적용해 보자. 블로그 관리 -> 꾸미기 -> 스킨 편집 -> html 편집으로 들어간다. 그리고 highlight.js 홈페이지 아래로 쭉 내려가면 복붙할 수 있는 cdnjs 코드를 긁어와 <head></head> 태그 사이에 복붙한다. 물론 본인이 원하는 테마를 적용하기 위해서는 일부 수정이 필요하다.
내가 고른 테마인 base16-chalk를 적용하기 위해 styles/base16/chalk.min.css 파일을 선택, 라인 넘버까지 포함하기 위해 highlightjs-line-number.js 까지 추가해주었다. 기존 블로그 게시글이 잘 변경된 것을 확인하였다. 그런데 줄바꿈 너비가 좀 맘에 안들긴 한다...
3. CSS 수정으로 줄바꿈, 둥근 모서리 적용하기
폰트 사이즈, 줄간격, 둥근 모서리 등의 자잘한 옵션들을 바꿔주기 위해 CSS에서 code를 검색한다. 코드 블럭에 적용되는 #article-view pre code.hljs 내부의 css 코드를 입맛에 맞게 고쳐주니 잘 변경된다. 입맛에 맞게 border-radius를 추가하고, font-size는 줄이고, line-height도 줄였다. 값들은 조금씩 조정해가며 새로고침 하면서 예쁜지 안예쁜지 확인한다.
