[티스토리 블로그 만들기] 홈프로모션 설정하기!라고 적고 티스토리 망치는 방법이라고 읽는다!

 안녕하세요!
다시 돌아온 <무인도 티스토리에서 살아남기>입니다!!!
 

 
티스토리 블로그 만들기 1편

[티스토리 블로그 만들기] 티스토리에서 살아남기 그 1장

 

이번 편은 바로

 

홈 프 로 모 션 설 정 하 기.

 

입니다! 지난 편에서 이거 때문에 아주 골머리가 아팠는데요..

당시 나의 심정

 
분명 티스토리 처음 시작하시는 분들 중에 저와 같은 문제에 부딪힌 분들이 있으실 것이기 때문에
제가 찾은 해결방법을 함께 공유해 드리려고 왔습니다!

 

하지만

이번 편은 망했다는 것을 미리 언급드립니다....

 

 

※망함주의※

※※망함주의※※

※※※망함주의※※※

 

---

제가 찾은 홈프로모션 설정 방법은 크게 두 가지입니다.

1. 홈프로모션에 넣을 이미지 크기를 직접 설정하기
2. 정사각형 프로필로 만들어서 홈 프로모션 포맷을 바꾸기

*홈프로모션 : 메인 홈 화면이나 게시판 상단 이미지 (홈대문)

 
저는 처음에는 두 가지를 다 시도해 봤는데요 여러분들은 이 글을 보시고 적합한 걸로 선택하시면 될 것 같아요!
 
 

▶ 홈프로모션 이미지 크기 설정하기

 
우선 첫 번째로 제가 생각한 해결 방법은 '아 그럼 홈프로모션 이미지 크기에 맞게 이미지를 설정하면 되는 거 아냐?'였습니다.
그래서 우선 홈프로모션 이미지의 크기를 측정하였습니다..... (일단 끝까지 읽어봐 주세요..ㅠ)
이미지 크기를 어떻게 측정하냐고요? 줄자로 재는 거죠!!! ㅎㅎ..
하지만 아쉽게도 (천만 다행히도) 줄자가 없었기에 문명인답게 인터넷을 활용하는 방법을 택했답니다.
구글에 '이미지 자르는 사이트'를 입력해서, 제일 상단에 노출되는 사이트에서 <별 헤는 밤> 티스토리 홈 화면을 전체 캡처한 후에 자를 영역을 선택했습니다. 자를 영역을 선택하면 우측에 그 영역의 크기를 친절하게 알려주더라고요!

 
그렇게 알아낸 홈프로모션 이미지 크기는 (맥북 에어 m1 모니터 화면 기준) 2880 x 679였습니다!!
이제 신나서 또 구글에 이미지 크기 줄여주는 사이트를 입력해서 맨 상단에 쓰는 사이트에 들어갑니다. (I러브IMG 사랑합니다)
그래서 원래 홈프로모션으로 설정하고 싶던 이미지를 '아이러브이미지야 줄여줘!'라고 외치면서 부탁합니다.

 
그럼 어떻게 되냐면요..!!!

...................

흑흑

뭔가 저는 이렇게 이미지 내용들이 압축되는 것이 아닌... 다 같이 알아서 촥! 하고 줄어드는 걸 기대했는데 말이죠...
그래도 직접 적용하면 다르겠지라는 마음을 가져보고...
희망차게 적용을 해보면
 
따란~~!!!!!

......

 

1. 관리 페이지에서 스킨 편집을 선택한다. (1편에 더 자세한 설명이 있습니다)

 

2. 우측 상단에 뜨는 홈프로모션 이미지를 클릭하고 (기존에 적용한 이미지가 뜨는 부분) 새롭게 바꾸고 싶은 이미지를 선택해서 적용한다.

 
그렇죠.. 티스토리는 받은 이미지를 그대로 출력한 죄 밖에 없는데..... 

I am.. 바보예요..

 
이렇게 해보고 느낀 이 방법의 문제점은
1. 사용하는 컴퓨터의 화면 크기에 따라서 보이는 이미지의 크기가 다르다! (당연하지..)
2. 기존 이미지 크기를 바꿔도 이미지 내용이 압축되는 거지 이미지 내용이 줄어들지는 않는다! (이걸 저는 해봐야 알았습니다.. 예...)
또 가장 큰 문제점

해결되지 않는다!!!

 
그래서 바로 두 번째 방법을 시도해 봅니다.
 

▶ 정사각형 프로필 만들기 

(일단 따라 하지 말아봐 주세요...)
 

1) HTML 수정하기

이 방법은 홈프로모션 화면을 기존처럼 상단에 길게 표시하는 게 아니라 좌측에 프로필 화면처럼 작게 만드는 방법입니다.
우선 기존처럼 동일하게 <스킨 편집> 화면으로 들어가면 됩니다.

 
대신에 이번에는 이렇게 좌측에 있는 'html 편집'을 클릭하셔야 합니다!!
그리고 ctrl + f를 이용해서 'promotion-1-image'를 찾으면 됩니다!
찾으면 되는데..

 
저는 왜 없죠..? 모든 구글 블로그 티스토리에서.. 저걸 찾으라고 하셨는데 저는 없더라고요.. 나만 없어 왜..
그래서 그냥 직접 눈알 빠지도록 찾았습니다.. 
(알고 보니까 코드 화면을 선택한 후에 ctrl+f 키를 눌러야 됐던 것이더라고요..)

역시 노가다가 짱

 
그다음에 아래의 화면에 나와있는 부분을 드래그하여 선택 후 지워줍니다.

대략 저 'promotion-1-image'에서 3번째 줄부터 'promotion-2-image'라고 언급되어 있는 줄의 윗부분까지 삭제해 주면 됩니다.
<별 헤는 밤> 티스토리 기준 82~108까지였습니다. 
삭제한 후 적용 버튼을 눌러줍니다! 그리고 좌측 화면에 있는 새로고침 버튼을 누르면

 
이렇게 홈프로모션 이미지가 아예 삭제되신 것을 보실 수 있을 겁니다.
다시 코드 화면을 선택한 후에 'id="aside"를 검색합니다.

 
검색 후 빨간 부분에

<s_sidebar_element>
  <!-- 프로필 이미지 -->
  <div class="profileBox">
    <ul>
      <li style="background-image: url();" />
    </ul>
  </div>
</s_sidebar_element>

 위의 코드를 입력하면 됩니다. 저는 제가 엔터를 눌러서 띄어쓰기를 했습니다.
 

2) CSS 수정하기

이번에는 CSS 화면으로 들어가서 '#aside"를 검색합니다.

 
그리고 빈부분에 아래의 코드르 입력하시면 되는데, 저는 빈 줄이 없어서 356에서 제가 엔터를 쳤습니다.
그 부분에 (빨간 상자)

#aside .sidebar-1 .profileBox ul li {
	max-height: 260px;
	max-width: 260px;
	height: 22.296296296296296vw;
	width: 22.296296296296296vw;
	background-size: cover;
	background-position: center;
}

위 코드를 입력해 줍니다. (이제 거의 다 왔어요!!)
이후  '@media screen and (max-width:767px)'를 검색하시고 아래의 코드를 입력하시면 됩니다.

#aside .sidebar-1 .profileBox ul li {
	width: 100%;
}

 

 
이렇게 다 하시고 적용을 누르시면! 좌측에 프로필 상자가 생긴답니다!!!

?

 
근데 저는 왜.. 왜 없죠..?? 저 빨간 부분에 제가 선택한 이미지가 짜란~! 하고 나와 있어야 하는데...
이게 뭐죠????????  도대체 무엇이.. 어떻게.. 어디서부터 잘못된 것일까요.. 

 
뭔가 잘못입력했나 싶어서 계속해서 다시 봤는데도 틀린부분이 나오지 않더라고요.. 
그래서 혹시 몰라 참고한 블로그 주소는 올리지 않겠습니다....
이 글을 보시는 누군가가 계신다면.. 잘못된 부분이 있다면 부디 알려주세요.....
그래서 결론은
 
오늘도 해결하지 못했다....

애증의 홈프로모션..

 
티스토리에서 살아남는 꿀팁을 알려드려야 하는데 그러지 못하고 있어서 송구스럽네요..
다음에는 꼭 꼭 꼭 해결방안을 들고 찾아오겠습니다... 
 

아직도 나의 심정

 

 

---

<별 헤는 밤> 사용해 보기 👇

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱