'김생선의 어장나라'에 해당되는 글 3건

기존의 카테고리 정렬 방식(좌)에서 카테고리를 좀 더 세분화하는 방식(우)으로 카테고리를 재정렬 하였습니다. 제가 작성한 글들을 좀 더 세부적으로 관리하기 위함이며, 방문자들 또한 같은 주제의 다른 글을 찾아보기 쉽게 수정하였습니다.
또한 닫혀있는 카테고리를 임의로 열어서 더욱 더 쉽게 찾아볼 수 있게 되었습니다.

3. 물결효과의 플래시 타이틀 삽입
물결이 일렁이는 효과를 준 플래시 타이틀을 삽입하였습니다.

4. 구글 애널리틱스 삽입
블로그의 더욱 효과적인 관리를 위하여 구글 애널리틱스를 삽입하였습니다. 이에 대한 더욱 자세한 사항은 아래의 링크를 클릭하시면 이동합니다.
2011/05/15 - [어장 컴퓨터] - 내 블로그의 더욱 스마트한 관리 - Google Analytics 

5. 티 에디션의 사용
티 에디션(일명 메인화면)을 사용하였습니다.
가장 인기있고 가장 자주 쓰는 세 개의 카테고리와 최근에 작성된 글을 포함한 총 네 개의 카테고리의 최신글을 보여주는 티 에디션을 적용하였습니다. 썸네일 이미지와 함께 메인화면에서 바로 글들을 선택할 수 있도록 하였습니다.

6. 블로그 내부 글씨크기를 전체적으로 수정
기존에 수정을 거치기 전에는 본문 9px로 보이는 텍스트를 12px로, 제목 또한 12px에서 물결 효과 플래시 제목을 추가하면서 수정을 하였습니다. 이 외에도 댓글 입력 폼의 색상등을 수정하였습니다.

7. 블로그 파비콘 적용
블로그 아이콘이라 볼 수 있는 파비콘을 적용하였습니다. 해당 파비콘은 익스플로러의 경우 탭과 주소표시줄에서, 크롬에서는 탭에서 확인할 수 있습니다. 파란 물고기 모양의 조그만한 파비콘입니다. ^^



지난 1차 리뉴얼에 비하자면 많은 부분이 변하지는 않았지만 조금 더 쾌적한 환경이 될 수 있도록 수정하였습니다.
블로그 내 아이콘 변경과 기타 사항에는 큰 변화가 없을 것이며 앞으로 조금씩 수정할 계획이지만 이렇게 따로 글을 쓰지 않을 예정입니다.

또한 QR코드를 삽입한 새로운 명함을 준비중이지만 이건 또 언제 만들고 언제 인쇄하지... 으 --

새로워진 김생선의 어장나라에서 새로운 마음가짐으로 더욱 유익한 정보를 드릴 수 있도록 노력하겠습니다. :-)

뭐 그러다보니 검색창의 위치를 조절해주어야 하는데 이걸 몰라서 짧은 이미지 타이틀만 사용하다가 학교에서 귀가한 후 수정하게 되었습니다. 바로 검색창 자체에 위쪽 여백이 설정된데다가, 이미지 타이틀보다 한단계 높은 곳에 위치해있기 때문이죠.

결국 이런 식으로 수정하게 되었습니다.


이 부분에서 보자면 <div id="searchBox"> 부터 </div> 까지가 검색창에 관한 레이아웃이라는 걸 알 수 있습니다. 일단 이 위치를 이미지 타이틀보다 한단계 낮은 곳에 위치시켰습니다.

 
*자세히 보시면 이미지 타이틀의 바로 아래에 복사 붙여넣기를 하였다는 걸 알 수 있습니다.

그런데 이게 문제가 아닌게, 자세히 살펴보니 그래도 계속 이미지 타이틀이 적용이 잘 안되는겁니다. 뭔가해서 알아봤더니 바로 제가 한 뻘짓이 약간 숨겨져 있었습니다. 그 뻘짓이란, 바로 위에서 말씀드린대로 margin관련 함수는 여백을 주는건데, 이미지 타이틀 바로 아래에 검색창이 오게 하려고 검색창에게 위쪽 여백을 주었더니 그것과 충돌이 일어나서 전체적 스킨이 뭉그러진겁니다.

그래서 그 검색창에서 위쪽 여백을 준 margin 함수를 수정할 필요가 있었습니다.

1. #searchBox { float: right; margin-top: 98px; margin-right: 15px; display: inline;}

보시다시피 margin-top이 98px이라는 여백을 주고 있습니다. 이걸 그대로 수정하면 블로그 최상단에서부터의 여백이 되기 때문에 이 바로 위에서 검색창을 이미지 타이틀 바로 아래에 위치시키고, 거기에서 값을 계산하는 방식으로 고치게 된 것입니다.
제 경우는 (이는 이미지마다 다 다르기 때문에) 98px을 -7px로 수정하였습니다.



이제 마지막 단계입니다.
대부분 눈에 띄는 가장 큰 문제들을 고치고 나니  약간의 거슬림이 보였습니다. 이 스킨의 문제였는데요 바로 이미지 타이틀 옆으로 제목이 비죽이 튀어나온 것이었습니다.
 

대충 이런 모양이었습니다. 정말 꼴보기 싫을 정도였습니다. ^^;

이 부분은 두가지 방법으로 수정할 수 있습니다. 이미지 타이틀을 왼쪽으로 약간 이동시키거나 혹은 본문을 오른쪽으로 약간 이동시키거나.
저같은 경우에는 후자를 선택했습니다.
Ctrl+F를 하여 검색을 활성화 시킨 후, content를 검색합니다. 그리고 아래의 구문을 찾으시면 됩니다.

간단하게 소스를 또 짚고 넘어가자면, 오른쪽에 위치한 float과 함께 content는 가로 800px로 정의되어져 있으며 오른쪽 여백은 40px이 되어져 있다고 볼 수 있습니다. padding은 테두리와 content 사이의 간격을 설정해주는 함수이며, 그러기에 여기에서는 바닥에서 56px이 떨어져 있다는 걸 알 수 있습니다.

여기에서 margin-right를 적당한 값으로 조절해주시면 됩니다. 그러면 보기가 깔끔해집니다. ^^;



일전에 웹폰트를 사용하면서 티스토리의 글씨체를 꾸미려고 노력했지만 방법도 번거롭고 정말 힘들기 그지없는 작업이었습니다.
웹폰트는 HTML 비표준 기술로, 익스플로러 이외의 브라우저에서는 정상적으로 보이지 않는 문제를 가지고 있기 때문입니다.

그런데 자신의 컴퓨터에 있는 글꼴을 우선시하여 보여주는 방법도 있기에 정리해 봅니다.


CSS 설정에 보시면 body{ 바로 아래에 이러한 구문이 보입니다. 여기의 돋움 앞에 즉 font-family: 바로 뒤에 아래의 구문처럼 복사, 붙여넣기 하시면 됩니다.


이는 NanumGothic을 가장 먼저 보여주며, 없을 시에 그 다음의 글꼴 순으로 보여준다고 정의합니다.
이로 하여금 웹폰트의 설정 없이, 그리고 브라우저에 상관 없이(물론 모바일은 예외입니다.) 나눔고딕을 제일먼저 보여주며 그 다음에 맑은 고딕, 굴림, 돋움 순으로 표시가 됩니다.


여기까지 티스토리 스킨을 수정하는 방법에 대한 나름의 기록을 정리해보았습니다. 



1차 리뉴얼을 한 만큼 2차 리뉴얼도 있을 예정입니다.
이 2차 리뉴얼은 올해 중순이 오기 전에 마칠 예정이며, 각종 블로그 내 아이콘 및 색상과 글씨크기를 수정할 계획입니다.
또한 전체적으로 레이아웃을 새로이 손을 보아 더욱 쾌적한 블로그가 되도록 노력할 생각입니다.
이하는 블로그 양식입니다.

타이틀
타이틀 이미지는 가로세로 1055*150px로 정의되어져 있습니다.
색상코드는 RGB 150, 195, 232를, 웹에서는 #96c3e8을 사용합니다. CMYK 값은 38, 12, 0, 0 입니다.
모바일 블로그 스킨은 1000*250px의 이미지를 사용하며, 색상은 동일합니다.

본문 및 본문 이미지
본문은 가로 800px로 정의되어 있으며 본문에 그림을 삽입할 때에는 되도록 가로 780px을 유지하려고 합니다.
또한 매 포스트마다 제목을 겸하는 일종의 요약이미지를 넣을 예정인데 이 이미지는 800*400px의 이미지를 사용합니다.

아이디
블로그 내에서의 표현은 총 세가지로 이루어집니다.

김생선 : 블로그 및 제가 사용하는 이메일 등에서 사용하는 실질적인 아이디
KIM FISH : 블로그 타이틀에서만 사용하는 아이디
Kim Fish : 그 외.

기타사항
이모티콘 및 과도한 통신어체는 사용하지 않을 예정입니다.
문의사항은 우측의 이메일로 보내주시기 바라며 본문을 제대로 읽지 않았다고 생각되는 댓글은 답변하지 않습니다.


앞으로 김생선의 어장나라에 많은 떡밥을 던져주시기 바랍니다. 감사합니다.