블로그 스킨을 바꿔보았다

2015년에 Github Pages 기능을 이용한 블로그를 만든 이후로 Jekyll Clean Dark 스킨을 이용해왔다. 문제는 Tag 기능이 구현이 안 되더라는 점. 시키는대로 했는데도 구현이 안 되어서 시험 끝나고 처리하려고 Todo List 최상단에 올려두었다.

다만 해결방법으로 제시한 과정 중에 Raw 데이터를 받아오라는 것이 있었는데 이걸 도무지 해결할 수가 없었다. 글을 보니 2011년에 작성된 글이라서 현재 적합한 해결책이 맞는가도 확신할 수 없었고 애초에 블로그 글에 가독성에 문제가 있기도 했고해서 이 참에 블로그 스킨을 갈아치우기로 결정했다. 그리고 밥 먹는 시간 포함해서 꼬박 14시간의 삽질이 시작됐다.

일단 맘에 드는 블로그 스킨을 찾아야 했다. 밤에 포스팅하는 경우가 많기도 하고 눈에 부담도 덜 가고 해서 검은 배경의 스킨을 선호하는 편이다. Carte Noire, Naringu, BlackDoc 정도가 눈에 띄었다.

이 중에서 BlackDoc이 가독성이 좋아보이기도 해서 낙찰. 이제 입맛에 맞게 조리할 일만 남았다.

레이아웃

우선 좌측에 있던 사이드바를 오른쪽으로 옮겼다. default.html 안의 <body> Attribute에 class="layout-reverse"를 추가하면 된다.

스타일링

우선 노란색을 맘에 드는 색으로 바꿨다. 최근에는 #2EACFF 색에 빠져있어서 이 색을 쓰는 경우가 많다. 다만 링크 색은 약간 밝은 색으로 해놓고 마우스를 올리면 역시 같은 색으로 바뀌게 했다.

그 다음은 폰트. 당연히 ‘Noto Sans’, 즉 본고딕이다.

Anchor와 Title에 모두 같은 색이 입혀지니 Title에 별도의 링크가 걸려있더라도 인식하기 어려웠다. 그래서 Anchor에는 모두 밑줄을 넣되 Title과 관련된 부분은 CSS에서 하나하나 text-decoration: none; 값을 설정해주었다.

일일이 손으로 설정하고 나니 기존에 설정된 색을 선택할 수 있다고 한다… -_-;;; 역시 default.html에서 Class Attribute에 theme-base-xx를 넣어 프리셋을 사용할 수 있다. xx 부분은 여기를 참조하면 되겠다. Layout Attribute와 Color Attribute가 겹치면 스페이스로 분리한다.

사이드바

이 블로그 설명을 보면 제작자가 사이드바에 신경을 많이 썼다고 한다. 스크롤이 가능하고 어쩌고. 사실 사이드바에 넣을 게 얼마 없어서 별 상관은 없다.

원래 있던 Home, 기존에 쓰던 Clean Dark에서 가져온 Archive, 주인장 소개 인사 격인 About으로 구성했다. 그 아래에는 스킨 원본 출처와 제작자, 원래 있던 저작권 문구를 크기를 줄여서 게재했다.

지금은 Tags 섹션도 있지만 이건 한참 뒤에가서 만들어 진 것. 연락처를 적을까 하다가 귀찮아서 남겨뒀다.

댓글

이전 블로그 스킨에 불만스러웠던 점 중 하나가 댓글을 달 방법이 없다는 것이었다. 뭐 알고보니 내가 코드를 집어넣지 않아서 생긴 일이었다마는.

그래서 이번에는 Disqus에서 등록하고 코드를 가져다 포스트 창에 집어 넣었다. 2016-06-20 01:23 시점으로 세부 디자인댓글 수 표시를 수정할 일이 남았다.

포스트 사이 구분선

댓글란을 삽입하고 나니 페이지에서 포스트 간 구별이 쉽지 않아 보였다.

그래서 포스트 끝자락에 <hr> 태그를 집어넣었다. 그래봐야 포스트 마지막에 가면 <hr>을 남발하는 경향이 있어서 그게 그거지만.

Tags

가장 많이 시간이 걸렸던 부분 중 하나.

Github가 1월 말 무렵 kramdown 이외의 마크다운 엔진을 사용금지시켜버리고 플러그인도 이래저래 막아준 덕분에 Github pages에서 태그 이용하기가 엄청나게 어려워졌다.

그래도 다행히 이런 블로그 글이 있어서 별 문제없이 Tag 적용을 마쳤다.

다음으로 Tag 페이지 스타일링. li 앞의 불렛을 없애고 포스트 작성 일자를 0.5em 사이즈로 오른쪽에 붙여놓았다. 어느 날 지저분해 보이면 지워야지.

다음으로 _includes/sidebar.html에서 Tags 항목을 만들고 /tags 페이지로 이어지도록 anchor를 걸어놓았다.1

마지막으로 포스트에 태그를 붙여주어야 했다. 여기서 시간을 왕창 잡아먹었는데 알고보니 post-date, 즉 작성일자 속성이 display: block으로 되어 있었다. 한 줄을 혼자 통째로 먹는 것. inline-block으로 바꿔주고 날짜 반, 태그 반으로 해놓았는데 좁은 모바일, 5s 라든가에서 보면 태그가 밀려 올라가는 현상이 있더라. 방도를 고려해봐야겠다.


뭐 대충 이 정도로 만든 것 같다. 말이 좋아서 대충 이 정도지 거의 반나절을 통째로 갈아 넣은 것 같다. 머리가 나쁘면 몸이 고생해야지 뭐…

그래도 덕분에 공부 많이 했다(?) 매커니즘은 하나도 못 건드렸지만 ;ㅅ;


  1. 원래는 YML 메타데이터에 layout: page로 설정된 md 파일에 대하여 자동으로 title로 제목으로 하여 사이드바 항목이 생성+알파벳 순서로 정렬되도록 되어 있으나, 내용 생성 방법이 생각이 안 나서 임시방편으로 별도 항목을 만들어버림. 아마 나중에 개선이 가능하지 않으려나? 똑같은 내용으로 만들어버리면 되려나…