썸네일이 귀여워지라고 만들어 넣은 로코 의상 43종 세트이다.
블로그는 검색 유입이 중요하다. 그래서 나는 처음부터 이 블로그에 글을 쓸 때 제목에 항상 [밀리시타 번역] 이라는 말머리를 붙였다. 이렇게 하면 사람들이 내 블로그에 더 쉽게 접근 할 수 있기 때문이다.
 |  |
'번역'을 붙여서 검색하면 내 블로그가 맨 위에 뜬다.
하지만 이 방법이 가진 단점도 있었다. 블로그 내에서 글 목록을 볼 때 매번 말머리가 표시되어 있어서 불편하다는 점이다. 사실상 말머리가 [밀리시타 번역] 밖에 없어서 고정되어있는거나 다를바 없는 이 블로그 환경에서는 의미 없는 정보나 마찬가지이다.
특히 모바일 환경처럼 화면이 작은 경우엔 더욱 심하다. 안그래도 좁은 화면에서 말머리가 공간을 차지하고 나니 가독성이 떨어지는 느낌이 들었다.
말머리가 있을 때는 불필요한 줄바꿈이 생기기도 하고,
전체적으로 가독성이 떨어져보였다.
그래서 검색 유입을 위해 제목에는 [밀리시타 번역]이라는 말머리를 쓰지만, 실제로 블로그 내 화면에서는 보이지 않게 하는 방법은 없을까 하고 고민하게 되었다.
제일 처음 고민했던건 CSS를 이용하는 방법이었다. 웹디자인을 배울때 CSS를 주로 배웠기 때문에 익숙했기 때문이다. 하지만 여러가지로 알아본 결과 HTML 속 내용물을 CSS로 바꾸는건 힘들어보였다.
[밀리시타 번역] 이라는 말머리는 공백 포함 열 글자이기 때문에 제목 앞 열글자를 일괄적으로 지워버리는 방법도 생각해봤지만, 혹시나 그 말머리를 쓰지 않는 포스팅을 하게 될 경우에 문제가 될 수도 있었다. 그리고 그 방법 또한 CSS로 다루기 힘들었다.
이런 저런 고민을 하다가 결국엔 jquery를 이용해 자바스크립트로 해결했다.
티스토리에서 포스팅 제목이 표시되는 공간은 세 곳이다.
첫째. 글 목록 (.link_post > .tit_post)
둘째. 글 본문 (.area_title > .tit_post)
셋째. 관련글 목록 (.txt_related)
이 세 곳에서 표시되는 [밀리시타 번역]이라는 문구를 일괄적으로 없애기 위해 스킨 내에 이렇게 생긴 자바스크립트를 추가해줬다.
$('.link_post .tit_post').each(function() {
var text = $(this).text();
$(this).text(text.replace('[밀리시타 번역] ', ''));
});
$('.area_title .tit_post').each(function() {
var text = $(this).text();
$(this).text(text.replace('[밀리시타 번역] ', ''));
});
$('.txt_related').each(function() {
var text = $(this).text();
$(this).text(text.replace('[밀리시타 번역] ', ''));
});
그 후로 블로그 내에서 [밀리시타 번역]이라는 문구가 깔끔하게 사라졌다. 별 것 아니긴 하지만 결과적으로 블로그 화면을 보기에 좀 더 나아졌다는 느낌은 든다.
블로그 내에는 이것 말고도 여러 가지로 고심해서 만들어 넣어둔 것들이 있다. 앞으로 심심할 때마다 하나씩 포스팅을 통해 소개하려고 한다.
