블로그 타이틀 바꿔보기

티스토리 블로그는 할수록 점점 더 재미있습니다 :)

제 블로그도 스킨 디자인에서부터 글씨체, 상자배경색 등등 자그만한 부분까지 나름대로의 작업(?)이 들어가면서 오리지날 스킨과는 점점 멀어지고 있군요.

오늘은 블로그 타이틀을 바꿔봤습니다.
기존에 단순히 텍스트로만 되어 있던 타이틀을 예쁜 이미지로 바꿔보고 싶다는 마음이 간절했지만, 포토샵도 서툴고 시간도 안나고 고민만 했었죠.

그러다가 마침 예전 대학 다닐 때 운영했던 사이트 작업 파일들을 찾아내면서 그 때 만들어놨던 이미지를 재활용하기로 마음 먹었습니다.

(10년 전에 포토샵으로 만든 이미지입니다. 실력이 없어서 갖가지 필터를 적용해서 이틀만에 만들었다는;;)

사실 예전부터 ihunter라는 닉네임을 써왔기 때문에(이외에도 search4u, iskra라는 닉네임도 사용했었답니다~) 기존 이미지에 "정보의 바다에서 헤엄치기"라는 글씨만 추가해줬습니다.

이쁘지는 않아도 깔끔한 디자인을 좋아하는 편이라 개인적으로 흡족하네요. :)

아래는 처음의 블로그 타이틀입니다.

역시 그냥 텍스트는 먼저 허접(?)해보입니다.

이미지 타이틀로 변경하기 위해서 관리자모드에서 스킨 - HTML/CSS 편집 메뉴에서 아래 순서로 작업했습니다.
(참고로 사용하시는 스킨마다 html과 css 내용이 다소 차이날 수 있습니다.)

---

 1. 이미지 업로드하기

관리자 모드의 HTML/CSS 메뉴에서 로고 이미지를 먼저 업로드합니다.


 2. html 수정하기

<div id="wrapper">
 <div id="header">
  <div class="blogTitle">

   <!--로고를 텍스트로 할 경우 -->
   <!--
   <h1 class="tit"><a href="[##_blog_link_##]">[##_title_##]</a></h1>
   <div class="desc">[##_desc_##]</div>
   -->

   <!--로고를 이미지로 할 경우-->
   <button onclick="location.href='[##_blog_link_##]'" class="btn_title" title="[##_title_##]"></button>
  </div>

처음에는 로고를 이미지로 할 경우 부분이 주석 처리(<!-- 내용 -->)되어 있었는데 주석을 없애고 로고를 텍스트로 할 경우 부분을 주석처리 해주었습니다.
이렇게 해두면 css 파일에서 설정하는 대로 이미지를 표시할 수가 있습니다.


 3. css 수정하기 - 레이아웃 부분

/* 레이아웃 */
#wrapper {width:/*@post-width:290=*/ 990px /*@*/; margin:10px auto 0; position:relative;
 }
 #header {height:101px; background:/*@title-background-color=*/ white /*@*/ /*@title-background-image=*/ /*@*/ /*@title-background-image-position=*/ center 0 /*@*/ /*@title-background-image-repeat=*/ no-repeat /*@*/; padding:/*@title-height:-148=padding-top:*/ 5px /*@*/ 40px 0 40px; text-align:center;
  }
 #mBody{background-color:white; width:100%; clear:both;
  }
  #contentColumn {float:left; display:inline; width:/*@post-width=*/ 700px /*@*/; padding:20px 0 0 40px; overflow:hidden;
   }
  #sideBar {float:left; display:inline; width:180px; padding:0 0 30px 30px; overflow:hidden;
   }
 #footer {clear:both; width:/*@post-width:290=*/ 990px /*@*/; height:60px;
  }

빨간색 부분이 블로그 상단의 타이틀 이미지(또는 텍스트 타이틀)와 아래 메뉴탭(공지, 미디어, 방명록 등)까지의 영역의 크기입니다.
이 숫자를 크게 하시면 그만큼 본문 영역 전까지의 상단 영역이 커지기 때문에 처음에는 넉넉하게 주시고 조금씩 사이트 디자인에 맞게 숫자를 줄여주시면 됩니다.


 4. css 수정하기 - 헤더 부분

/* === [ Header ] ================================================ */

/* /// 타이틀 //////////////////// */

/*타이틀 이미지가 삽입되는 영역*/
.blogTitle { height:82px; text-align: left}

/* 타이틀 로고를 텍스트로 할 경우*/
.blogTitle h1 {
 font:/*@title-font-size=2.6em*/ 2.6em /*@*/ /*@title-font-family=*/ 'Trebuchet MS', Verdana, Sans-Serif /*@*/;
 }
.blogTitle h1 a:link, .blogTitle h1 a:visited {
 color:/*@title-color=*/ #b6447c /*@*/;
 text-decoration:none;
 }
.blogTitle h1 a:hover, .blogTitle h1 a:active {
 color:#912b5d;
 text-decoration:none;
 }
.desc {
 font-size:0.9em;
 }

/* 타이틀 로고 이미지로 할 경우 */
.btn_title {
 background:url(./images/logo.gif) 0 0 no-repeat;
 width:246px;
 height:100px;
 }

첫번째 부분의 빨간 글씨부분이 실제 이미지가 배치될 영역의 크기입니다.
그리고 두번째 부분이 업로드한 로고 이미지의 파일명입니다.

참고로 로고 이미지 파일명 아래로 이미지의 가로, 세로 크기를 지정해주는데 잘 보시면 이미지 배치영역(82px)보다 이미지 세로길이(100px)가 더 큽니다.

이렇게 되면 이미지가 메뉴탭 부분까지 침범(?)하게 되는데 사실은 의도적으로 이렇게 한 거랍니다.
메뉴탭 부분이 텍스트로 되어 있고 허전하기 때문에 로고 이미지를 좀 더 내려서 좀 더 자연스러운 배치가 되도록 한것이죠.

자~ 최종적으로 이미지 타이틀을 바뀐 화면입니다. :)
여백이 심하게 많아서 많이 허전하지만 나름대로 만족스러운 타이틀이 되었네요.