헤더 디자인 "또" 리뉴얼

사용자 삽입 이미지

원래의 블로그 헤더가 이리저리 갑갑해보여서 수정하기로 했습니다.
찬찬히 들여다보니 개선의 여지가 꽤 있더군요.

  1. 공간의 낭비가 심함 (왼쪽 이미지는 크고, 가운데는 텅텅 비어있음)
  2. 대또랑 반대 배너가 애들의 얼굴을 가림
  3. 오른쪽 메뉴는 태터데스크 관리자랑 겹침
  4. Google 맞춤검색(CSE)의 결과가 보기 싫게 출력

전 원래 디자인 감각"따위"는 찾을 수 없기 때문에 잘 만들어진 사이트를 살짝 참조하기로 했습니다.
평소 아주 자주 찾아가는 QAOS.comoffree.net 디자인을 유심히 들여다보니 맨 윗쪽에 메뉴를 최대한 압축했더군요.

두 사이트의 디자인을 많이 참고해서 새롭게 만들어봤습다. (나름 1~3번은 해결했다고 믿는 중)

사용자 삽입 이미지

그런데, CSE의 결과를 예쁘게 출력하는 것은 그렇게 쉽지 않더군요.
(Google 맞춤검색에 대한 소개는 QAOS의 글을 참고하시면 됩니다)

왜냐하면, CSE의 결과를 다른 페이지에 출력하려면 출력을 위한 별도의 고정주소를 갖는 웹페이지가 있어야 하는데, 티스토리는 이러한 면에 있어 좀 갑갑하기 때문입니다.
(상세한 방법은 Google 맞춤검색 엔진에서 제어판→코드 메뉴를 보시면 됩니다)

이 문제는 이렇게 해결했습니다.
티스토리에서 별도의 파일을 올릴 때는 언제나 images 디렉토리에만 올릴 수 있다는 점을 이용했습니다.

  1. 내 images 폴더의 절대경로 확인 (소스 보기로 가능)
  2. 스킨 파일(skin.html)을 별도의 파일(gsr.html)로 저장한 뒤, 원하는 부분만을 남기고 삭제
  3. gsr.html의 치환자[샵샵 ~ 샵샵] 부분을 실제 사용할 문구로 대체
  4. gsr.html의 style.css, favicon.ico 등 각종 링크절대주소로 대체
  5. gsr.html 업로드
  6. 스킨(skin.html)에서 Google 맞춤검색의 결과가 gsr.html로 나오도록 절대경로 수정

이제 CSE에서 검색하면 제 블로그의 헤더 아래에 검색 결과가 출력됩니다. (혼자 뿌듯해하는 중)