기본적으로 티스토리의 블로그는 타이틀을 텍스트로 하고 있습니다.
이는 블로그를 개설할때 블로그의 이름이 표현되는 부분인데요, 이 부분을 이미지로 바꾸고 싶어 하는분이 많습니다.

제 블로그 역시 상단에 보면, 이미지로 되어 있는것을 확인할수 있는데요~
이렇게 블로그의 타이틀을 이미지로 바꾸는 방법에 대하여 오늘은 알아볼까 합니다.

처음하셔야 할것은 블로그 타이틀 (로고)를 만드는 일을 해야 하는데요~
포토샵을 하시든지, 이미지를 하시든지 상관은 없습니다.

이런식으로 의 로고가 필요합니다. 꼭 이런 스타일이 아니어도 상관은 없습니다.
포토샵으로 만드셔도 되고~ 개구리, 오리, 말 등 아무꺼나 하셔도 되겠죠!


이런 스타일의 로고도 만들어 낼수 있습니다.



인터넷에서 로고를 바로 만들어 저장할수 있는 사이트






▶ 아래 블로그왕 이라는 블로그 이름을 jaea라는 로고 이미지로 바꿉니다.

아래 블로그 타이틀을 바꾸는 작업을 한번 해보겠습니다.

로고 이미지가 준비되었다면 기억하기 쉽게 파일명을  logo.png 라고 합시다.
자신의 블로그 스킨에 로고 파일을 업로드를 해야합니다.


환경설정 -> 스킨 -> 파일 업로드  -> logo.png 업로드 -> 확인

파일이 업로드 됨으로써 적용이 되었습니다.
이제 글자로 출력되는 타이틀 부분을 방금 올려놓은 로고 파일이 출력되도록 변경할 예정입니다.




▶ 스킨 수정을 통하여 텍스트가 이미지로 출력되게 소스 수정

스킨
-> HTML/CSS편집 에서 수정합니다.

아래와 같은 부분을 찾습니다. (10번째 줄정도에 있습니다.)


<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]">[샵샵_title_샵샵]</a></h1>

찾았으면 위에 [샵샵_title_샵샵]  이부분을 아래처럼 빨간 부분으로 변경하여 줍니다.

<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]"><img src="./images/logo.png"></a></h1>

위에 파랑색으로 표시된 부분을 방금 알려드린 빨간색 으로 변경하여 주면 됩니다.
다른 부분은 만지지 않으셔도 되는 부분이니다.


그렇게 최종 적인 소스는 아래와 같아야 합니다.


이렇게 만들어 지면 됩니다.

그리고 나서 확인을 누르면 아래와 같이 나오게 됩니다.



▶ 스킨 위자드와 CSS를 통하여 상단의 헤드 영역의 폭을 늘려줍니다.


이는 텍스트가 가지고 있는 세로폭의 기준이 있는데, 이 기준을 벗어나서 출력이 되기 때문에 위에보시는것처럼 메뉴바와 겹치게 됩니다. 그럼으로 메뉴바를 내려 주는 작업을 하는데 실질적으로 메뉴바를 내린다는 말보다는 헤더 영역의 세로 px를 늘리는게 맞는 말입니다.

위처럼 스킨 위자드를 이용하여 스킨 -> 스킨위자드 -> 타이틀 -> 텍스트 ->  높이 지정 을 해주면 됩니다. 저는 150정도 하니깐 아래처럼 알맞게 보이네요~



150이라는 숫자를 넣었습니다.





▶ 다음에도 이렇게 복잡하게 해야 하나요?? 그렇지 않습니다.

다음에도 이렇게.//? 스킨 위자드를 통하여 세로의 폭을 지정해야 하나요? 라고 할수 있는데오 그렇게 할 필요는 없습니다.
위처럼 스킨위자드에서 한번 작업을 하게되면 style.css에 자동적으로 기입이 되며 해당 위치는 아래와 같습니다.

style.css
#header .head-container {width:/*@post-width:267=*/950px/*@*/; height:/*@title-height=*/150px/*@*/; margin:0px auto; }

이 부분에서 150px 라고 나와 있는 부분이 방금 제가 입력한 150px부분입니다.
그럼으로 다음에도 스킨위자드를 통하지 않고, 바로 변경하셔도 되는 부분입니다.

지금의 로고가 마음에 들수도 있고, 시간이 되어서 또 로고 작업을 하거나 변경할수도 있는데요 그럴때마다 아마 로고 사이즈가 틀리게 작업이 될것으로 생각이 듭니다.

이럴때는 파일명만 logo.png로 저장하셔서 업로드 하시면 로고는 자동으로 바뀌게 되고요!
위처럼 로고에 따라 세로폭을 조정을 해야 하기 때문에 위처럼 150px라고 되어 있는 부분을 조정 해주시면 됩니다.


저작자 표시 비영리 변경 금지
신고
홈으로
공감
Post by : 재아
{ ? }※ 스팸 트랙백 차단중 ...

여러분의 소중한 댓글입니다.

  1. 처음 블로그에 들어왔을때 확인하게 되는 타이틀~ ㅋㅋㅋ
    어떻게 꾸미느냐에 따라서 이미지가 많이 틀려지는 것 같아요.
    유용한 정보임에 분명합니다 ^^ ㅋㅋ

    재아님 타이틀도 바뀌었네요~ ㅋㅋ

    • 어떻게 꾸미느냐에 따라 이미지가 많이 바뀌긴 합니다.

      사람은 밑에서 위로 보지 않고, 항상 위에서 밑으로 내려갑니다. 사람을 볼때, 책을 볼때.. ;;; 그리고 광고등을 볼때도 마찬가지겠죠~

      그래서 첫인상이 얼굴, 몸매,다리? ㅋㅋ;;//
      뭔 쓸데 없는 이야기를..

      그건 그렇고... 타이틀 심심해서 바꾸었습니다.
      만드는데.. 1분;// 올리는데 10초 스킨 변경하는데. 5초 끝;//

      큭큭;;

    • 만드는데 1분 --; ㅋ 저는 1시간은 걸렸을듯 ~ㅋㅋㅋ
      저는 일단 북극곰에 당분간 만족하고.... 있어야 할듯,.. ㅋㅋ

    • 네에 겨울에 한번 깔끔하게 도전 해보세요!

  2. 이번 타이틀 아주 멋진데요~~ 탐납니다. ㅋ

  3. 저도 이거 처음에 알아보고 작업할때 엄청 애를 먹었었는데..
    막 티스토리에 입문하신분들께 좋은 팁이네요^^

  4. 저도 메인 타이틀을 어떻게 해보려고 기웃거리고 있는데
    엄청 좋은 정보네요 ^^
    추천버튼 정리는 정말 감사했어요 ㅎ

  5. 포스팅이 유익해서 추천했구요,
    새로 바꾼 타이틀, 쌈빡 하네요~^^

    • 타이틀 몇개 더 만들었긴 한데..

      일단 메뉴바도 그렇고 사이드바도 그렇고 어울리는듯 하여 그냥 저걸로 일단 할려고요

      심심하면 바꿀찌도..

  6. 스킨을 안 만지겠다고 생각했지만 블로그 타이틀 변경을 생각해 보아야 겠어요.

    • 저도 몇번이나 스킨 만드는걸 두려워 했습니다.

      제가 스킨을 만질때마다,, 스킨 저장기능이라는게 없어서 자체적으로 백업하느라 그렇게 힘들었던적이 없네요~

      모든지 작업하기전에 저장을^^

  7. 비밀댓글입니다

  8. 이것도 센스가 좀 있어야 하는데 ㅎㅎ
    위 사이트 중에 하나 들어가 봤는데 사람을 고민하게 만드네요 ;

  9. 흐흑~! 전 언제쯤 이 경지에 오르게 될까요...ㅠㅠ
    디자인도 제아님처럼 예쁘게 하고 싶은뎅~이잉..
    우선 포토샵 부터 배워야 할까봐요..
    사진에도 로고없이 걍 쌩짜로 포스팅 중이라는..ㅎㅎㅎ
    재아님 타이틀 시원하니 눈에 잘들어오고 넘넘 예쁘네요~*^^*

    • 칭찬에 기분이 좋습니다.

      경지라고 하기엔..;; 시간되면 타이틀 만들어 보도록 하겠습니다 soo님꺼..; 근데 어울릴지 모르겠습니다.;;

      포토샵을 꼭 배워야 되는건 아니라서요~//ㅎㅎ

  10. 허억~! 제꺼요?!
    어머나 어머나... 지금 너무 감동 받아서 어떻게 감사를 드려야 할지모르겠어요..
    혹시 말씀 만 하시는거라도 너무 감사하네요~ㅠㅠ
    사실 블로그 하면서 이웃 분들과 댓글달고 하지만 정말 도움을 받거나
    뭔가를 배우거나 한적은 없었거든요~ 왠지 감동이..ㅠㅠ 흐흑...

    • ㅎㅎ; 감동까지야~~

      급하게는 할수 없고, 시간이 된다면 해드릴껀데
      안될수도 있으니, 너무 기대는 마세요~~//

      ㅎ; 예전에는 이웃블로그분들에게 선물을 많이 했습니다.
      ;; 제가 할수 있는 부분에서요~

      오래된 일이라.. 어렵다기보다 귀찮니즘이 가장 큰 장애물이죠~;;

  11. 점점 블로그가 산뜻해집니다.
    말씀대로 위의 로고도 이전보도 더 좋은것 같아요.

  12. 높이 조정하는 소스에서 숫자를 바꿔도 변경이 안되더군요. 왜 안될까요 ㅠㅠ

    그리고 정보 감사합니다.

    • 스킨마다 틀리기 때문에 뭐라고 말씀 드리기가 그렇습니다.

      방법은 같은데 소스의 기입 방법이 틀려서 그럴수도 있습니다. 대부분 스킨 위자드가 지원 한다면.. 위의 방식이 가장 편합니다.

  13. 하라는데로 해봤는데 타이틀이미지가 약간 어긋나서 나오네요.
    타이틀 위치를 조정하거나 할순없나요? 이미지 자체를 수정해야 하는건가요?

    그냥 평범하게 타이틀에 이미지를 등록할때는 깔끔하게 줄맞춰서 나오는데
    위의 사항대로 하니까 자꾸 오른쪽으로 삐져나오네요;;

    • 블로그를 볼수 있으면 좋겠는데요!!

      블로그 스킨마다 조금씩 틀려숴 조정을 해줘야 할 부분은 모두 틀릴수 있습니다...

      블로그 이미지의 조정 부분은
      어떤 부분은 해드에서 조정되고 또 어떤 부분은 타이틀에서 조정 되기도 합니다.

댓글을 달아주세요!

티스토리 툴바