Share |

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

전 "텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기"라는 포스트를 올렸습니다.

그런데, 그렇게 하면 한가지 단점이 있었습니다. 변경을 하기 전엔 상단 타이틀 부분에 마우스를 가져다 대면 블로그 링크가 적용되어 클릭을 하면 블로그 최근 화면으로 이동하게 되었는데...

변경을 하고 난 후 이 링크가 사라져 버립니다. 크다면 큰 문제라고 할 수 있을 겁니다.

 

초보인 저 또한 이를 확인하고 어떻게 할 수 있을까를 고민하면서 수 많은 검색을 통해 찾아 보았지만, 쉽지가 않았습니다. 이럴 땐 Popeye님께라도 먼저 질문을 드렸다면... 바로 해결될 수 있는 문제이기도 했을텐데... ^^ 여하튼 우연히 이 문제를 해결하기 위해 검색을 하던 중 빼꼼님의 http://backkom.textcube.com/45에서 유사한 내용을 발견하고, 댓글을 남겼습니다. 텍스트큐브 상단의 타이틀 배경(이미지)에 블로그 링크를 걸 수 있는 방법이 무엇인지... -사실... 이전에 제가 검색했던 수 많은 글들 속에서 분명히 보기도 하였을 테지만...- 암튼 그렇게 하여 빼꼼님으로부터 그 해법을 얻었습니다. 이 글을 빌어 다시 한번 고마운 말씀을 드립니다. 빼꼼님 고맙습니다. (_ _)

 

이 글은 적절한 크기로 만든  bg_header.gif라는 이름의 파일을 스킨편집화면 "파일 업로드"에 올렸다는 것을 전제로 합니다.

 

결론적으로 간단히 요약을 하면,

지난 번 수정했던 아래의 부분을 원래대로 바꾸고 skin.html에서 일부분만을 수정하면 됩니다.

지난 번과 반대로

.header h1 a {
  display:none; 으로 변경했던 부분을 다시 ☞ display:block; 으로
수정합니다.

그리고 skin.html 화면에서 아래의 태그

<h1><a href="[##_blog_link_##]"><span>[##_title_##]</span></a></h1>를 아래 처럼 변경합니다.

 

<h1><a href="[##_blog_link_##]" title="[##_title_##]"><img height=150 width=820 src="./images/bg_header.gif" board=0></a></h1>

위의 내용은 그대로 복사하여 붙여 넣기를 하면 됩니다.(단, 지난번 글에 따라서 진행하신 경우에 한하지만, 기본 값이기 때문에 그냥 복사하여 붙여 넣어도 대부분은 아무런 문제가 없을 겁니다.)


만일 위의 내용으로는 잘 모르시겠다면... 아래의 내용을 찬찬히 읽어보시면서 따라하시면 쉽게 하실 수 있을 겁니다. 이전에 작성했던 글 "텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기"를 비교해 가면서 보시면 좋을 듯 합니다. 제목에서 언급한 바와 같이 텍스트큐브 상단 타이틀 배경에 아주 쉽게 링크를 거는 방법입니다.

 

위에서도 말씀드렸 듯이 이번 작업은 지난 번과 이어지는 내용이기도 합니다. skin.html편집 화면에서 1곳의 내용을 변경하고, 지난 번 수정했던 style.css의 부분을 원상복구하는 것으로 작업은 간단히 끝납니다.

 

따라서 이번에도 역시 스킨편집 화면으로 들어가야 합니다. 스킨편집 화면에 들어가는 방법에 대해서는 지난 번 글에서 자세히 언급했으므로 이번 글에서는 생략하도록 하겠습니다. 혹, 모르실 경우에는 "텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기"의 내용을 살펴보시기 바랍니다.

 

스킨편집 화면에서 Ctrl + F를 눌러 아래 이미지와 같이 <h1><a href="[##_blog_link_##]"를 입력하고 검색을 누릅니다.

 

그러면, 이전 이나 다음 없이 아래 이미지에서 빨갛게 표시 된 부분 딱 한 곳이 찾아질 겁니다.

▲ 검색하여 찾은 수정 전 skin.html 화면

 

 

이미지를 클릭하면 크게 보실 수 있지만, 찾아진 태그는 다음과 같습니다.

 

<h1><a href="[##_blog_link_##]"><span>[##_title_##]</span></a></h1>

 

위의 내용을 아래와 같이 변경합니다.-간편하게 그냥 복사하셔서 붙여 넣기 하시길 바랍니다. 지나번 작업과 동일하게 하셨다면 그대로 복사하여 붙여 넣는 것을 권장합니다. Ctrl + C / Ctrl + V는 알고 계시죠? ^^ -

 

<h1><a href="[##_blog_link_##]" title="[##_title_##]"><img height=150 width=820 src="./images/bg_header.gif" board=0></a></h1>

 

위의 내용을 붙여 넣으면 아래 이미지 처럼 skin.html 편집화면이 변하겠죠?

▲ skin.html 수정 후 화면

 

 

이제 지난 번 글에서 수정했던 style.css 편집화면의 내용을 원상복구할 차례입니다.

먼저 Ctrl + F를 눌러 지난 번과 마찬가지로 ".header h1 a"라고 입력 문자의 위치를 찾습니다.

 ※ 참고로 지난번 포스트에서 delos island님에 의하면, 스킨의 구조에 따라 다른 경우가 있을 수 있습니다. 검색이 되지 않는 경우는 "header h1 a"로 검색을 하시기 바랍니다.(또는 #header h1 a)

 

그러면 지난 번 style.css에서 수정했던 아래의 위치가 검색이 될겁니다. 이 역시 지난 번과 마찬가지로 두 곳 밖에 찾아지지 않을 것이고 이미 한번의 경험이 있으실테니 대략 감으로 어디인지는 아실 수 있으리라 생각합니다.

 

 

위의 빨갛게 되어 있는 부분

.header h1 a {
  display:none; 으로 변경했던 부분을 아래의 이미지 처럼 다시 ☞ display:block; 으로
수정합니다.

 

 

그럼 이제 모든 작업이 끝났습니다. 사실 아무것도 아닌데... 모르니까.. 그렇게 복잡할 수가 없어 보였던 것이라고 생각합니다.

 

마지막으로 "미리보기" 단추을 눌러서 블로그 화면이 정상적으로 보이는지를 확인하신 후

"저장완료"단추를 눌러 마무리를 짓습니다. 미리보기를 누르는 방법과 저장완료를 누르는 방법은 충분히 아시리라 생각하고 생략하도록 하겠습니다.

만일 이 역시 모르시는 경우 지난 번 포스트 "텍스트큐브 상단 타이틀 배경 아주 쉽게 변경하기"를 참고하시기 바랍니다.

 

이제는 텍스트큐브 스킨 중 상단의 배경 이미지 바꾸는 방법은 어렵지 않게 하실 수 있으리라 생각합니다.

 

한가지 양해의 말씀을 드릴 것은 사실 이번 설명 내용과 지난 번 글의 내용은 하나로 만들어 진행되었어야 하는 건데... 부족한 제가 내용을 찾고 시행착오를 겪으며 글을 게재하다보니.. 이러한 번거로움이 발생하게 되었습니다. 이점 보시는 분들의 넓은 이해를 부탁드립니다.

 

혹, 본 글의 내용에 있어 궁금하신 점이 있으시다면... 댓글 달아주시기 바랍니다. 제가 아는 범위 안에서는 충분히 알려드리도록 하겠으며, 정 저도 모르겠다는 내용은 Popeye님을 통해서라도 알려드리도록 하겠습니다. ^^ 앗.. Popeye님.. 그래도 되는 거죠?^^

물론, 또한 부족한 지식으로 작성된 내용으로 어딘가 잘못이 있을 수 있습니다. 이를 발견하시는 경우 알려주시면 고맙습겠습니다. (_ _)

 

마지막으로 스킨 문제로 텍스트큐브를 떠나는 분들이 있으신 듯 합니다. 저역시도 이번 타이틀 배경과 관련하여 텍스트뷰브의 스킨이 좀더 사용자들이 사용하기 용이하도록 좀 더 많은 지원이 있다면 좋겠다는 생각을 하게 됩니다. 이왕이면 다홍치마라고... 블로그를 운영하는데 있어 좀더 보기 좋은 블로그는 누구나 생각하는 한가지 요소라고 생각합니다.

 

그런데, 다행이도.. 텍스트큐브가 그동안 조용히 물밑작업을 했던 모양입니다. 특종으로 Popeye님과 연님의 블로그에는 그동안 저또한 오해할 만큼 너무도 조용했던 텍스트큐브였는데, 여러 스킨들이 준비 중에 있고, 이외에도 여러가지 사용자들의 편의를 위한 지원이 이루어질 듯 해 보입니다. 너무 좋은 일이지요.. ^^

 

고맙습니다. (_ _)

 


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






Share |

{ ? }※ 스팸 트랙백 차단중 ...

댓글을 달아 주세요

  1. Favicon of http://delosisland.textcube.com BlogIcon delos island  댓글주소  수정/삭제  댓글쓰기

    안그래도 선택할 수 있는 스킨이 몇가지 없어서 그게 가장 아쉬웠는데 새로운 스킨이 기대됩니다.

    2009.11.13 11:12
    • Favicon of http://hisastro.textcube.com BlogIcon 그별  댓글주소  수정/삭제

      저도 기대됩니다. 특히 3단 스킨도 나온다고 하니.. 기다려지네요.. ^^ 고맙습니다. delos island님 ^^

      2009.11.13 11:55
  2. Favicon of http://blink.textcube.com BlogIcon 블링크  댓글주소  수정/삭제  댓글쓰기

    좋은 이미지가 마련되면 한번 도전해 봐야겠습니다.

    2009.11.13 12:40
    • Favicon of http://hisastro.textcube.com BlogIcon 그별  댓글주소  수정/삭제

      언제가 될지 먼저 말씀드리긴 조심스러습니다만..
      저도 괜찮은 이미지를 몇개 만들어 올려 놓도록 하겠습니다.
      ^^

      2009.11.13 13:02
  3. Favicon of http://popeye.textcube.com BlogIcon Popeye  댓글주소  수정/삭제  댓글쓰기

    위와 같이 하셔도 됩니다만, h1 타이틀 문자가 빠짐으로 검색에서 자신의 타이틀이 빠집니다.

    이를 한 방에 해결하는 방법이 있습니다.
    html에는 아무 것도 손데지 마시고 원래 대로 두세요.
    그런 다음 아래의 코드를 css 에 넣고

    #header h1 { text-indent: -999em;}
    #header h1 a { display:block; width:820px; height:150px; background:url("images/bg_header.gif";) left top no-repeat;}


    bg_header.gif를 만들어 업로드 하시면 됩니다.

    그림의 가로와 세로가 다르다면 ..
    width:820px; height:150px; 값을 바꿔주시구요^^

    text-indent: -999em; 라는 코드는 h1에 문자가 있으나 보이지 않게 하는 코드입니다.

    display:none;는 아예 없어서 보이지 않는 것이구요.

    2009.11.14 23:50
    • Favicon of http://hisastro.textcube.com BlogIcon 그별  댓글주소  수정/삭제

      제 CSS의 경우는 "#"이 "."로 되어 있는 것 같은데, 그냥 "#"으로 붙여 넣기를 해도 되는 건지요... 제가 너무 몰라서요.. ^^

      2009.11.14 23:54
  4. Favicon of http://popeye.textcube.com BlogIcon Popeye  댓글주소  수정/삭제  댓글쓰기

    html에서 header가 <div class="header">로 되어 있으면 .header 이구요,,,, <div id="header">로 되어 있으면 #header 입니다.

    대충들 쓰시는데 사실은 중요한 부분입니다.

    2009.11.15 00:26
    • Favicon of http://hisastro.textcube.com BlogIcon 그별  댓글주소  수정/삭제

      넵... 고맙습니다. 조금전에 말씀하신 대로 수정 완료 했습니다. (_ _)
      추후에 Popeye님 덕에 CSS와 html 좀 다룰줄 알게 될듯 합니다. 기대되는걸요... ^^

      2009.11.15 00:38
  5. Favicon of http://yakdol.tistory.com BlogIcon 약돌이  댓글주소  수정/삭제  댓글쓰기

    <h1><a href=""><img height=298 width=922 src="./images/yakdol_02.gif" board=0></a></h1>

    이렇게 넣고 display:block; 을 바꾸면
    이상하게 두개가 겹쳐서 엉망이 되요~

    배경으로 넣고 글씨는 일부러 없앴는데..가르쳐주세요

    2010.03.23 18:49
    • Favicon of http://hisastro.textcube.com BlogIcon 그별  댓글주소  수정/삭제

      <h1><a href="" title=""><img height=150 width=820 src="./images/bg_header.gif" board=0></a></h1>
      는 공식인 듯 합니다. 테그에 대해 전문적 지식이 있지 않아서 더 좋은 답변을 드리지 못합니다만,
      글에서 처럼 타이틀 부분은 위와 같이 하시고, 이미지 파일도 동일하게 하셔서 업로드해보시기 바랍니다. ^^;

      2010.03.23 19:07

      
   

BLOG main image
디지털리스트 hisastro
디지털 세상은 나눔으로 이루어져 있습니다. 마치 사람人이라는 글자처럼... 따끈따끈한 디지털 기기처럼 따스한 마음으로 함께하고자 합니다.
by 그별

카테고리

Blog 칸칸 (2086)
디지털이야기 (885)
생각을정리하며 (366)
내가엮는이야기 (11)
타임라인 논평 (80)
좋은글 (42)
짧은글긴기억... (135)
기능성 디자인 (154)
아이작품들 (36)
맞아 나도그래 (13)
사회복지정보 (27)
그냥 (238)
제안서 만들기 (97)

달력

«   2019/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
get rssget rss Tistory 디지털hisastro rss

따끈한 포스트를 배달해 드립니다 :)