IT 정보 / / 2023. 3. 5. 10:53

티스토리 헬로스킨 제목사진 없애는 법 +변경하는 법

반응형

hELLO. 스킨 (헬로스킨)을 적용한 지 일주일째. 군더더기 없이 깔끔한 데다 목차도 자동으로 만들어져서 가독성 높은 글쓰기에 적합합니다. 단 한 가지 마음에 안 드는 게 있었습니다. 글의 대표 사진이 제목 사진에도 그대로 반영된다는 겁니다. 사진이 잘려서 영 예쁘지가 않죠. html만 간단히 편집해서 제목 사진을 없애거나 다른 사진으로 대체할 수 있습니다. 정말 쉬우니 따라 해보세요!

 

 

 

기본 제목사진

대표 사진을 지정한 경우 제목 사진에도 반영된다.대표 사진을 지정하지 않으면 제목에도 사진이 들어가지 않는다.
대표 사진 유무에 따라 제목 디자인이 다릅니다.

헬로 스킨의 경우 대표 사진이 있을 때와 없을 때의 제목 디자인이 다릅니다.

  • 대표 사진 지정 시 : 제목 사진에도 반영. 글자는 하얀색.
  • 대표 사진 지정 안 할 시 : 제목 사진 없음. 글자는 검은색.

저는 대표 사진 유무와 관계없이 오른쪽처럼 깔끔한 디자인으로 통일해보려고 합니다.

 

 

 

제목 사진 없애는 법

헬로 스킨에서 제목 사진을 없애려면 HTML 227행을 수정해야 한다.
헬로스킨 HTML 227행

먼저 블로그 관리 - 스킨 편집 - HTML 편집으로 진입합니다.

227행으로 이동해서 코드 맨 앞에 <!-- 을 적고 맨 뒤에 --> 적습니다.

 

간단히 원리를 설명하자면, 227행이 대표 사진을 지정했을 때의 제목 디자인을 담은 코드이고, 코드 앞뒤로 넣는 <!-- -->는 해당 코드를 반영하지 않겠다는 의미입니다. 즉, 해당 코드를 지워버린 것과 같은 효과를 냅니다. 

<!--<div class='thumbnail absolute right-0 top-0 w-full h-64 before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:h-64 before:bg-h-900/50 before:z-10 [&+.description]:text-h-200'><img class="absolute right-0 top-0 w-full h-64 z-0 object-cover" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzS0Vg%2Fbtr1UTltjqe%2FPV8WMskskqynrdzSLFsyJ1%2Fimg.png" alt=""></div>-->

 

코드를 제대로 수정했다면 227행의 코드가 초록색으로 바뀐다.
227행 코드 앞뒤로 <!-- -->을 삽입한 모습

코드 앞뒤로 <!-- -->을 넣어주면 227행 전체가 초록색으로 바뀝니다. 혹시 227행 아래까지 전부 초록색으로 바뀌어버렸다면 227행 코드 끝에 -->가 제대로 안 들어갔기 때문입니다. 꼭 확인하세요!

 

 

 

코드를 수정한 뒤 새로고침을 누르면 제대로 반영됐는지 확인할 수 있다.

코드를 변경해 준 후에 왼편에 새로고침 버튼을 눌러서 게시글에 들어가 보면 대표사진 없이 깔끔하게 제목만 뜨는 걸 확인할 수 있습니다. 혹시 바뀌지 않았다면 html 편집 화면에 적용 버튼을 누르고 확인해 보시면 됩니다.

 

 

 

제목 사진 바꾸는 방법

이번엔 대표 사진을 지정하더라도 제목 사진을 특정 이미지로 통일하는 방법을 알아보겠습니다. 이미지는 자유롭게 찾아주시면 되는데, 제목 글씨가 하얀색이기 때문에 어두운 이미지로 찾는 것이 좋습니다.

 

 

제목 사진에는 어두운 이미지가 좋다. 글자가 하얀색이기 때문.

 저는 이 정도 밝기의 이미지를 사용해 보겠습니다.

 

 

제목 사진으로 쓸 이미지를 등록해주는 과정.

마찬가지로 HTML 편집으로 진입해서 '파일업로드' 탭을 눌러줍니다.

아래에 '+추가' 버튼을 누른 뒤 제목 사진으로 쓸 사진을 업로드합니다. 이때 사진파일명은 영어나 숫자여야 합니다.

 

 

제목 사진으로 쓸 이미지의 링크 주소를 복사해둔다.

해당 이미지가 정상 업로드됐다면 마우스 우클릭을 해서 링크 주소를 복사해 둡니다.

 

 

마찬가지로 227행을 수정할 건데요.

<div class='thumbnail absolute right-0 top-0 w-full h-64 before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:h-64 before:bg-h-900/50 before:z-10 [&+.description]:text-h-200'><img class="absolute right-0 top-0 w-full h-64 z-0 object-cover" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzS0Vg%2Fbtr1UTltjqe%2FPV8WMskskqynrdzSLFsyJ1%2Fimg.png" alt=""></div>

227행 후반부에 src="~~~" 가 있습니다.

따옴표 안에 적힌 걸 지우고 복사해 둔 링크 주소를 넣어주면 됩니다.

src="복사한 링크 주소" 이런 식으로요.

 

 

HTML 227행에 제목 사진으로 쓸 이미지 링크 주소를 삽입하면 된다.
대표사진 변경 적용

마찬가지로 새로고침 버튼을 눌러보면 제대로 적용됐는지 확인할 수 있습니다.

이렇게 하면 대표 사진으로 지정하더라도 제목 부분은 미리 지정해 놓은 사진이 뜨게 됩니다.

 

 


회사 다니면서 취미로 html을 끄적끄적 배워봤는데 이렇게 쓰이게 되네요. 이걸 알아내는 데까지 상당한 시간이 걸리긴 했지만요. 깔끔한 헬로스킨 만들어주신 제작자님 감사합니다!

 

 

 

 

같이 보면 좋은 글

 

티스토리 본문 글자색 바꾸는 방법 (스킨 편집)

티스토리 본문 글자색 바꾸기 티스토리를 운영하고 계신다면 스킨을 바꿨더니 기본 글자색이 마음에 안 드는 경우 있으실 겁니다. 저는 현재 티스토리 기본 스킨 '포스터'를 이용 중입니다. 위

tomorrows-yoon.tistory.com

 

 

3개월만에 티스토리 저품질 탈출 후기 (다음 고객센터)

티스토리 저품질 탈출기 2023년 2월 16일 티스토리에 첫 글을 올렸다. 애드센스 승인을 위해 꾸준히 글을 써갔다. 하지만 시간이 흐르고, 심지어 애드센스 승인까지 났는데도 내 티스토리는 여전

tomorrows-yoon.tistory.com

 

 

블로그 애드포스트 세금 환급받는 방법 (=종합소득세 신고)

블로그 애드포스트 세금 환급받기직장 다니면서 블로그 운영으로 소소한 용돈벌이하시는 분들 많으실 겁니다. 네이버 애드포스트는 연간 수입이 125,000원 초과일 경우 소득세를 뗍니다. 푼돈에

tomorrows-yoon.tistory.com

 

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유