텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기

텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기

▲ 텍스트큐브 홈 화면

 

텍스트큐브을 사용하면서 가장 아쉬운 부분 중 하나가 아마도 스킨과 관련된 사항이 아닌가 생각합니다. 이는 저 뿐만 아니라 많은 분들이 그렇게 생각하고 있음을 여러 경로의 검색을 통해 확인할 수 있고, 심심치 않게 블로그의 발행되는 글 중에도 이러한 내용을 종종 볼 수 있기도 합니다.

 

하지만, 단점이 있으면 장점도 있는 법이라서... 나름대로 만족을 하고 텍스트큐브를 사용하고 있습니다. 특히, 한성민님께서 말씀하시는 SNS의 기능화는 그 중 하나가 될 것이고, 다른 블로그 보다 개방적이라고 해야할까요?... 암튼.. 그렇습니다.

 

하지만, 그럼에도 불구하고 블로그를 운영하는데 있어 스킨은 적지 않은 부분을 차지합니다.

좀 더 멋지고 예쁜 모습을 하고 있는 블로그들을 보면... 정말로 욕심이 납니다.

스킨 적용이 어렵다는 텍스트큐브이지만, 사용하시는 분들은 어렵지 않게 잘도 사용하시는데...

 

문제는 저와 같이 html이나 CSS에 대한 문외한들이고, 좀 이런 것들을 꺼리는 사람들에겐.. 아무리 좋은 스킨이 있다고 하더라도 그야말로 그림에 떡일 수 밖에 없습니다.

 

그런데, 어렵다는 텍스트큐브의 스킨이라지만, 몰라서 그런 것이지 알고 보면 별것도 아닌 것이 적지 않다는 경험을 하기도 합니다. 그 내용 중 하나가 텍스트큐브 상단의 타이틀 배경과 글씨를 없애는 것입니다.

 

잘 하시는 분들이야 정말 아마것도 아니겠지만, 분들에겐 이것도 하나의 좋은 팁이라는 생각으로 정리를 해 봅니다. 물론 저는 이것을 알기 까지 끙끙대며... T.T  정말 알고 보면 아무것도 아닌데...

 

저와 같은 경우는 텍스트큐브 상단의 타이틀 모양에 대해 어떻게 바꿀 수 있을까를 적지 않은 시간 동안 고민을 했었습니다. 모르니... 제대로 된 키워드를 만들어 검색하는 것도 어렵고... 검색되어 찾은 여러 글들을 보면... 쉽게 알수 있는 내용도 별로 없었습니다. 물론 그 속에 답이 있었음에도 못찾은 경우도 태반입니다.

 

암튼, 그렇게 저렇게 하여되 되질 않아 "그냥 사용하자.. 뭐, 어때 내용만 충실하면되지.." 라는 생각으로 포기도 하려고 했지만, 결국 이렇게 아무것도 모르는 제가 텍스트큐브 스킨의 일부이지만, 이런 글도 쓰게 도었다는 것이... ^^

 

정말입니다. 본 글은 저와 같이 몰라서 검색을 통해 이런 저런 고민을 할 분들을 위한 글입니다.

더 많이 아시는 분들의 경우는 보다 좋은 팁이 있으시거나 잘못된 부분에 대해 좋은 조언을 주시면 고맙겠습니다. (_ _)

 

본 글의 설명은 이미지의 해상도 및 포토샵 또는 이미지 사이트를 조정하여 타이틀 배경은 만들 수 있다는 것을 전제로 텍스트큐브 상단 타이틀 배경 변경 등의 설명 내용을 작성합니다. 만일 이러한 내용에 대해 잘 모르시겠다는 분들을 위해서는 조만간 좋다고는 할 수 없겠지만, 이미지 크기를 조정한 몇가지 텍스트큐브 상단 타이틀 이미지 견본 몇개를 만들어 첨부를 해 놓도록 하겠습니다.(빠른 시일 내에 하도록 하겠지만... 언제라는 기약을 먼저 선뜻하기가... 좀 ~ ^^)

 

하지만, 배경 이미지만 준비되셨다면... 지금 설명드리는 내용에 따라서 텍스트큐브에서 상단 타이틀 이미지와 글자를 보이지 않도록 하는 건 정말 쉽게 하실 수 있을 겁니다.

아~ 그리고 당연한 얘기이겠지만, 텍스트큐브가 설치형과 가입형이 있지요... 설치형으로 텍스트큐브를 사용하시는 분들은 이미 고수들 이실 테니... 전혀 도움이 안될 겁니다. 아니 오히려 뭐 이런 글이 있나 하실지도 모릅니다.... -.-; ^^ 인터넷상에서 온라인으로 텍스트큐브에 가입을 하여 사용하고 계신 분들 중에서 전적으로 html과 css를 잘 모르는 분들을 위한 글임을 강조하여 알려드립니다.

 

앞서 말씀드렸 듯이 사전 준비할 사항은 가로 820/150Pixel(28.93/5.29cm, 72Pixels/inch)크기로 만든  bg_header.gif라는 이름의 파일을 가지고 있어야만합니다. -위에 괄호 속에 표기한 이미지의 크기 중 세로의 규격은 더 커져도 문제는 없을 듯 합니다만, 가로 규격은 지켜져야할 사항입니다. 이유는 아시리라 생각합니다.-

 

그럼 본론으로 들어가서 상단 타이틀 및 배경 편집에 대한 내용입니다.

 

변경에 관한 답을 먼저 알려 드리면... 텍스트큐브 스킨편집 화면의 style.css의

.header h1 a {
  display:block; 이 부분을 ☞ display:none; 으로 수정하여 타이틀 글자를 보이지 않도록 하는 것과

bg_header.gif을 업로드 하여 적용하는 작업입니다.

그러나 이렇게 설명드린 내용이 이해가 되지 않으신다면.. 천천히 아래의 내용들을 읽어보시기 바랍니다.

 

제 블로그 상단 타이틀 부분을 바꾸기 전 모습은 아래와 같습니다. 아무리 봐도 뭔가 많이 밋밋합니다. 그렇다고 쉬운 편집이 가능한 스킨을 사용하자니.. 영 맘에 들지도 않고...

 

▲ 텍스트큐브 상단 타이틀 스킨편집 전 화면

 

 

그래서 이래 저래 시행착오 끝에 블로그 화면 상단의 타이틀 배경을 수정하였습니다.

이글은 위 이미지와 같은 블로그 타이틀 화면을 아래 이미지의 모습으로 바꾸는 과정에 대한 설명입니다.

 

▲ 텍스트큐브 상단 타이틀 스킨편집 후 화면

 

 

먼저 상단 타이틀 배경 및 글자의 편집을 위하여 스킨 편집화면으로 들어갑니다.

스킨편집화면으로 들어가는 과정은 상단 우측의 "내 블로그 관리하기"를 눌러서 관리화면 상단 메뉴의 "꾸미기"를 선택하고 꾸미기 하부메뉴의 "스킨편집"을 선택하면 됩니다.

이해를 돕기 위해 아래 이미지를 첨부합니다.

 

▲ 스킨편집 화면 들어가는 과정 안내: 내 블로그 관리하기 ☞ 꾸미기 ☞ 스킨편집

 

 

그러면 아래와 같은 스킨편집 화면이 보이게 됩니다.

 

▲ 텍스트큐브 스킨편집 화면

 

 

타이틀 배경을 바꾸었을 때 타이틀의 글자가 보여서 조화가 잘 되는 경우라면 문제가 없겠지만, 그렇지 않은 경우는  타이틀 글자를 보이지 않도록 해야 합니다. 그러기 위해 그 편집할 위치를 찾기 위하여  스킨편집 화면에서 아래 이미지 같이 Ctrl + F를 눌러 ".header h1 a"라고 입력 문자의 위치를 찾습니다.

 

▲ Ctrl + F 찾기 화면

※ 참고로 아래 delos island님의 댓글에 따르면, 스킨의 구조에 따라 다른 경우가 있을 수 있습니다. 검색이 되지 않는 경우는 앞에 점을 지운 "header h1 a"로 검색을 하시기 바랍니다.(또는 #header h1 a)

 

 

그러면 "이전"과 "다음"을 눌렀을 때 아래와 같은 style.css편집 화면에서 두 곳의 위치가 검색됩니다. 아무리 눌러도 두 곳 밖에 없으니... 찾기는 어렵지 않을 겁니다.

 

▲ Ctrl + F 찾기 결과 화면

 

 

Ctrl + F로 찾은 상기 이미지의 두 곳 중에서 편집할 곳은 빨간색으로 표시된 위치입니다.

이곳이 본 내용에서 설명하고자 하는 텍스트큐브의 상단 이미지 타이틀과 관련된 부분입니다.

 

.header h1 a {
  display:block; 이 부분을 ☞ display:none; 으로 아래 이미지 처럼 변경 합니다.
  font-weight:bold;
  text-decoration:none;

▲ .header h1 a { 아래 부분의 display:block; 이 부분을 ☞ display:none; 으로 변경

 

 

이제 상단의 타이틀 글자는 보이지 않게 됩니다.

그 다음으로 타이틀 배경으로 사용할 이미지(파일명은 bg_header.gif)를 Upload합니다.

업로드 하는 방법은 아래 이미지와 같이 스킨편집 화면 맨 아래 부분 "파일 업로드" 영역에서 진행을 합니다.

 

▲ 배경 이미지 bg_header.gif 업로드 호면

 

 

상기 이미지와 같이 파일 업로드를 눌러 bg_header.gif 파일이 위치한 경로에서 파일을 선택하고 아래 이미지 처럼 열기를 누르면 파일이 업로드 됩니다. 아래 이미지를 참고하시기 바랍니다.

 

▲ 파일 업로드가 완료되면 위와 같이 "업로드가 완료되었습니다."라는 녹색의 안내 문구가 아래 보임

 

 

이제 텍스트큐브 상단의 타이틀 배경과 글자를 보이지 않도록 하는 작업은 모두 끝났습니다.

이제 확인하는 절차만 남겨 두었는데요... 이는 블로그 스킨 관리에서 항상 가져야할 습관 중하나로 생각을 하는데, 텍스크뷰의 스킨편집 화면에 들어오면 상단에는 항상 아래와 같은 문구가 보입니다.

 

편집한 HTML, CSS 코드에 오류가 있을 경우 블로그가 정상적으로 보이지 않을 수 있습니다. 미리보기를 통해 수정하신 부분을 확인해주세요.

 

이는 스킨편집에 의해 발생할 수 있는 문제를 미연에 방지를 위하여 편집에 있어 주의를 요한다는 의미일 겁니다. 제대로 되지 않은 잘못된 편집을 적용하여 블로그 화면 전체에 문제가 발생할 수 있기 때문입니다. 따라서 항상 블로그 스킨 편집에 있어서는 미리보기를 습관하는 것을 적극 권장합니다.

위에서 말씀드린대로 모든 작업이 끝났으니, 아래 이미지 처럼 먼저 미리보기를 하여 화면이 정상적으로 보여지는지를 확인합니다.

 

▲ 편집한 스킨 미리보기 1

 

 

미리보기 화면에서 제가 변경한 타이틀 배경 및 글자를 보이지 않게 한 작업이 문제 없이 보여지는 것을 확인할 수 있습니다.

 

 ▲ 편집한 스킨 미리보기 2

 

 

이제 미리보기 옆에 있는 "적용하기" 단추를 눌러 스킨편집을 마무리 합니다. 적용하기가 마무리 되면... 아래 이미지 처럼 스킨편집 화면 아래에 "적용되었습니다."라는 문구가 보입니다.

 

 ▲ 편집한 스킨 적용하기

 

 

일부 초기스킨의 형태에 따라서 html태그 및 CSS가 일부 다른 면이 있습니다.

특히, 단내양의 Simple Black (Simple Brown + Simple Gray 도 같음)스킨을 쓰시는 분들은 아래 Popeye님 댓글을 참고하시기 바랍니다. 바로가기링크를 걸어 놓습니다.

http://hisastro.com/389#comment7899750

 

이제 텍스트큐브의 상단 타이틀 배경과 글씨를 없애는 건 정말 쉽게 할 수 있을 겁니다.

어떠신가요? 내용만 거창하게 많지 조금 신경써서 보면...그동안 모르셨던 분들이 보실 때도 어렵지 않겠죠? ^^

 

마지막으로 앞서 약속드린 대로...

조만간 시간이 허락할 때 상단 타이틀 배경 이미지 크기에 맞추어 만든 견본 파일을 본 글에 첨부 또는 별도로 올려 놓도고 링크를 걸어 놓도록 하겠습니다.

 

★★★★★ 위에서 말씀드린대로 타이틀 배경을 만들어 올리려 하니 아무래도 그냥 이미지만 있는 것이 이상할 듯 합니다. 하여... 시간이 얼마나 허락될지는 모르겠습니다만, 요청하시는 분들께 가능한 하나 정도씩은 만들어서 이곳에 링크를 거는 것이 낫다는 판단으로...

 

우선 PiPS님 블로그에 사용하실 타이틀 배경 하나를 이곳에 첨부를 합니다. 마음에 드셔야 하는데...  ^^

이미지 크기는 1260 x  217입니다. 필요에 따라서는 이미지 크기를 조절하여 사용하시기 바랍니다.

 

☆☆☆☆☆  아래는 PiPS님 블로그 타이틀 이미지 견본 입니다. ☆☆☆☆☆

 

bg_header.rar

 

고맙습니다.

 

 

※ 연관 글: 텍스트큐브 상단 타이틀 배경에 블로그 링크 아주 쉽게 걸기 

   도 꼭 참고 하시기 바랍니다. ^^

  

좋은 글이라고 생각하신다면 더 많은 분들이 이 글을 읽으실 수 있도록 추천 부탁드립니다.