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

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

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

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

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

 

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

 

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

 

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

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

지난 번과 반대로

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

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

<h1><a href="https://hisastro.com/"><span>디지털리스트 hisastro</span></a></h1>를 아래 처럼 변경합니다.

 

<h1><a href="https://hisastro.com/" title="디지털리스트 hisastro"><img height=150 width=820 src="./images/bg_header.gif" board=0></a></h1>

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

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

 

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

 

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

 

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

 

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

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

 

 

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

 

<h1><a href="https://hisastro.com/"><span>디지털리스트 hisastro</span></a></h1>

 

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

 

<h1><a href="https://hisastro.com/" title="디지털리스트 hisastro"><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님과 연님의 블로그에는 그동안 저또한 오해할 만큼 너무도 조용했던 텍스트큐브였는데, 여러 스킨들이 준비 중에 있고, 이외에도 여러가지 사용자들의 편의를 위한 지원이 이루어질 듯 해 보입니다. 너무 좋은 일이지요.. ^^

 

고맙습니다. (_ _)

 

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