Fastboot 상단 블로그 제목 부분에 배경 이미지 넣고 수정하기

[티스토리 쉽게 따라하기] Fastboot 블로그 상단 배경 이미지 넣고 수정하기

티스토리 블로그 상단을 보시면 블로그 제목이 보입니다.

오늘은 이부분을 바꿔 보려고 합니다.

아무래도 상단이기 때문에 방문자들이 가장 먼저 보는 곳이기에 첫 인상중 하나가 되기에 이왕이면 이쁘면 좋겠지요.

그러나 블로그는 화려함 보다는 깔끔한 것이 더 좋다는게 제 개인적인 의견입니다.

블로그는 일단 포스팅 내용이 가장 중요하기 때문에 그 주위가 너무 화려해서 포스팅을 읽는데 있어서 자꾸 시선을 빼앗기게 된다면 안되겠지요. 그러나 깔끔한것도 좋지만 분위기를 바꿔보고 싶다면, 혹은 지금보다 더 깔끔한 상단을 만들고 싶다면 다음과 같이 만드시면 됩니다.

티스토리 Fastboot 상단 제목 이미지 수정하기

지금 현재 블로그 모습입니다.

흰색 바탕에 블로그 제목이 써 있네요.

현재로도 그냥 깔금해서 좋긴 한데 분위기 전환겸 한번 상단 이미지를 바꿔 볼까 합니다.

방법은 원하는 이미지를 상단 부분의 크기로 만들어서 대체하는 거에요.

1> 상단 배경 이미지 만들기

그럼 제일 먼저 해야 할일은 당연히 이미지를 만들어야 하겠죠?

상단 배경 이미지는 알아서 이쁘게 만드시면 됩니다.

원하는데로~~~

이미지 사이즈는 1920px X 100px 로 만드시면 되요.

단 주의 할 점이 있는데요,

fastboot 스킨은 스크롤을 내려서 화면을 아래로 내릴경우 전체 화면이 내려가는게 아니라 상단 제목과 메뉴바는 그대로 고정되어 있고

그 이하로만 화면이 스크롤 됩니다.

그런데 더 특이한건 상단전체가 그대로 고정되는게 아니라 상단 이미지 부분중 어느정도는 내려가다가 고정이 되는 것이지요.

아래와 같이 말이죠.

위에 그림하고 비교했을때 상단 부분이 작아지신게 보이시나요?

그래서 이미지를 잘못 만들면 이상해 집니다.

가량 글자를 이미지 높이에 맞게 써놨는데 스크롤해서 내리게 되면 결국 글자가 반밖에 안보이게 되죠.

그래서 이미지중 위아래 두가지로 구분해서 만드셔야 해요.

그냥 단순 이미지라면 상관없겠지만 글자 같은 경우는 짤리게 되니 스크롤 해서도 글자가 다 보이게 아래쪽 높이에 맞춰 만들어야 겠지요.

스크롤 해서 내렸을때 보이는 상단 크기는 1920px X 62px 정도로 하면 되요.

즉 상단이미지 높이 100px 중에 윗부분은 38px , 아랫부분은 62px 로 하면 됩니다.

아래 그림처럼 두 부분으로 구별해서 잘 만드시면 됩니다.

뭐 짤려도 상관없다면 고민 안하셔도 되고요. ^^

2> 이미지 업로드

이미지를 다 만드셨다면 두번째 작업은 이미지를 티스토리 웹에 올려주셔야 합니다.

이부분은 지난 [티스토리 쉽게 따라하기]를 보신 분들이라면 다들 아시겠지만 혹시 모르시는 분들을 위해 다시 한번 알려 드릴께요.

블로그관리 홈> 꾸미기> 스킨편집 을 클릭합니다.

그럼 아래처럼 창이 바뀌는데

오른쪽 상단의 html 편집 을 클릭합니다.

그럼 오른쪽 부분이 아래 그림처럼 바뀝니다.

상단의 파일업로드 를 선택하시고

맨아래 +추가 를 클릭하셔서 만들어 놓은 이미지를 업로드 합니다.

이때 파일명 기억해 놓으세요!!

(예: sample.jpg )

그리고 한가지 주의할 점은 파일명은 꼭 영어로 해야 합니다.

한글로 하면 오류가 나요.

3> CSS 코드 수정

이미지까지 업로드 하셨다면 이제 마지막 한가지 남았습니다.

바로 CSS 코드를 수정해 주는 건데요. 이것도 간단해요.

아래 CSS 코드를 메모장 파일로 올려놨어요.

일단 다운 받으세요.

파 일 다 운

▼ ▼ ▼

상단이미지수정.txt

다운받으셔서 열어보시면 아래와 같은 소스가 나올꺼에요.

--------------------------------------------------------------------------------

/* 상단 이미지 수정 코드 시작 */

#desktopNav {background-image:url('images/title.jpg');height:100px;}
#desktopNav h3 {display:none;}
#desktopNav .text-muted {display:none;}
#desktopNav p.rightMenus a {color:white;}

/* 상단 이미지 수정 코드 끝 */

--------------------------------------------------------------------------------

여기서 수정해야 할 곳은 빨간색의 title.jpg 부분입니다.

여기에 만들어 놓으신 이미지 파일의 제목과 확장자로 바꾸시면 되요.

아래쪽 white 부분은 상단부분 오른쪽에 메뉴 글자색입니다.

만일 다른색으로 바꾸시려면 RGB 색상표로 대체하시면 됩니다.

수정을 다 하셨다면 다시 티스토리로 돌아가서 상단의 CSS탭을 선택합니다.

그리고 스크롤을 움직여 맨 아래로 갑니다.

맨아래에 수정한 코드 소스를 붙여 넣습니다.

아래처럼 되셨나요?

그럼 상단의 저장 버튼을 누릅니다.

이제 어떻게 바뀌었는지 티스토리 블로그로 가볼까요?

아래 처럼 바뀌었네요.

한번 화려하게 만들어 봤어요.

개인적으론 전에 그냥 깔끔한게 더 나은것 같기도 한데 이왕 만들어 본거 잠시동안 이렇게 분위기 전환 해볼까 합니다.

스크롤을 내렸을 때의 모습이에요.

상단 이미지중 일부분도 함께 내려가 아래 글씨만 보이게 됩니다.

참고로 아까 코드에서 white 부분에 대해서 잠깐 적용한 모습을 보여드릴께요.

--------------------------------------------------------------------------------

/* 상단 이미지 수정 코드 시작 */

#desktopNav {background-image:url('images/title.jpg');height:100px;}
#desktopNav h3 {display:none;}
#desktopNav .text-muted {display:none;}
#desktopNav p.rightMenus a {color:#000000;}

/* 상단 이미지 수정 코드 끝 */

--------------------------------------------------------------------------------

아까 white 부분은 #000000 로 바꾸었습니다.

#000000 는 rgb색상표에서 검은색이에요.

혹시 rag색상표는 어떻게 아느냐라고 물으신다면 그냥 네이버등에 'rgb 색상표' 라고 검색하시면 나와요.

검은색으로 변경해서 저장하면 어떻게 바뀌는지 한번 볼까요?