티스토리 블로그 썸네일 정사각형 만드는 법 (Odyssey 오디세이 스킨)

3번째 블로그 zipmox111 공인중개사 블로그의 썸네일을 미리캔버스에서 통일된 이미지를 카테고리 별로 적용할 것이기 때문에 이미지를 정사각형으로 만들어 놓고 정작 직사각형으로 잘리는 일이 없도록 미루던 티스토리 블로그 썸네일을 정사각형으로 변경하였다.

예 : 첫번째 블로그 moxnox111의 썸네일 직사각형

티스토리 블로그 썸네일을 정사각형으로 바꾸는 방법(스킨마다 방법이 다름)

블로그 관리-꾸미기-스킨 편집을 누른다.(Odyssey 오디세이 스킨인 경우)

html 편집을 누른다.

상단 CSS로 간다.

그리고 Ctrl+F를 통해 thum img(근데 스킨이 달라서 없음)를 검색해본다.

 

검색을 통해 위 내용을 먼저 했는데, 알고보니 스킨마다 다르다. 그래서 난 thum img가 없다.

찾아보니 Odyssey 오디세이 스킨은 최근 스킨이다. 2020년 9월 9일에 출시된 공식 스킨(기본 스킨)이다.

 

참고로 이때 주의할 점이 Ctrl+F를 눌렀을 때 CSS 아래 일부가 노랗게 변하면서 검색 : 이런 문구가 있는 노란색이 생겨야 한다는 거다. 크롬으로 접속해서 html 줄이 선택 안 된 상태로 Ctrl+F를 누르면 CSS를 덮으면서 하얗게 찾기가 생기는데 이러면 검색이 안 된다.

이러면 안 되고 CSS 아래 노란색이 생겨야 한다.

▼오디세이 스킨에서 정사각형 썸네일 설정하는 법

① CSS의 2458, 2459줄에 80px를 100px로 바꿔 준다.

① 전→후

동그라미 1번을 한 뒤 새로고침을 하면 별 차이가 없다.

② CSS의 2162줄의 display: none;을 주석처리한다.

② 전→후

/* */를 넣는다.

동그라미 1번까지는 새로고침해도 별 차이가 없었는데, 동그라미 2번을 하고 새로고침하니 난리가 났다.;

③ CSS의 맨 아래에 아래 코드를 복사 붙여넣기 한다.

 

.link-article>.thumbnail{
 background-image:none !important;
}

.img-thumbnail {
 width:125px !important;
 height:125px !important;
 margin-left:20px;
}

@media (min-width: 320px) and (max-width: 767px) {
 .img-thumbnail {
  width:100px !important;
  height:100px !important;
  margin-left:0px;
  }
}

맨 아래에 빈 공간을 만들기 위하여 Enter를 친다.

결과물. 직사각형 사진을 대표이미지로 설정한 것은 찌그러져 나온다.

나는 정사각형 썸네일이 꼭 필요한 블로그는 zipmox111 공인중개사 블로그이므로 moxnox111은 다시 직사각형으로 돌리고(찌그러진 사진 싫다) zipmox111만 미리캔버스에서 정사각형 썸네일을 만들어서 등록해야겠다.

 

moxnox111, youmox111, commox111은 안 찌그러진 직사각형 이미지 그대로 간다!

 

추가적으로 글이 있는 포스팅 목록의 글(제목, 본문 첫 몇 줄) 가로를 키우기 위해서는 CSS 1414줄의 640px를 숫자바꾸면 된다.(Odyssey 오디세이 스킨 기준)

포스팅 목록의 글 가로 길이 수정

zipmox111 블로그 수정 과정

대표 이미지가 없거나, 있더라도 글 내부의 내가 그린 그림들이 대표 이미지로 설정되어 있었는데 미리캔버스에서 만든 로고를 일일이 수정해가며 삽입했다. 물론 글에 삽입하지 않고도 대표 이미지 설정이 가능하지만, 글 내에 없으면 검색에서 누락이 발생한다는 얘기도 있고, 또 글 안에 200으로 작게 삽입하면 되기 때문에 그냥 글 안에 삽입하고 대표를 체크했다. 그게 더 빠르기도 하고 말이다. Ctrl+C, Ctrl+V하면 빠르다.

회별로 다른 기출 풀이 썸네일

썸네일은 일단 직사각형이어도 글자가 다 보인다. 그래서 넘어갔다.

 

직사각형을 정사각형으로 바꿀 예정이었어도 확인한 이유는, 티스토리 앱에서는 정사각형이 적용되지 않을 거 같았기 때문이다. 모바일로도 확인해봐야 한다.

중간중간 다른 탭들(pc)로 홈화면 체크했다.

공인중개사 1차 과목인 부동산학개론은 민법과 똑같이 보라색 바탕으로 했는데,(2차는 다른 색으로 통일할 예정)

처음에 1차가 좀 잘려서 1차과목 중앙 네모박스 위 가시 문양을 아래 네모박스와 그룹으로 묶어 위 아래 양 옆 중앙 정렬 했더니 1차가 잘리지 않고 글자가 모두 나왔다.

네모박스 위 문양이 있다.

위 모양에 글자만 부동산학개론을 민법으로 바꾸어 민법도 똑같이 대표이미지 설정했다.

 

전에 moxnox111 포스팅을 위해 임시로 공인중개사 블로그 썸네일을 만들었는데 그 이미지가 무척 마음에 안 들어서 그때 이렇게 썸네일로 대대적인 수정을 하지 않았다.

moxnox111.tistory.com/145

팁10. 글에 삽입하지 않고도 통일성있는 썸네일,대표이미지 추가하기 #미리캔버스 로고 만들 때

포스팅을 위해 이렇게 임시로 만들었다.

 

블로그 특성상 썸네일 한 번 설정하면, 그 주제로 글을 쓸 때 계속 써야하니(나중에 수정하려면 많은 글들을 수정해야해서 힘들다.) 처음 만든 이미지가 중요하다.

 

이번에는 썩 마음에 드는 이미지를 만들었다.

 

사각형과 삼각형의 조합으로 단순하면서도 깔끔하며, 잔잔하게 화려하다.(화려하지만 눈에 띄지 않는 디자인을 원하는 의뢰인이 된 거 같았다...)

 

이제 기출, 부동산학개론, 민법 카테고리 글들의 대표이미지 수정은 끝났으니까 이제 남은 건 '공부방법' 카테고리이다.

 

이건 통일성 있는 썸네일이 애매해서 그냥 글 안 이미지로 대표이미지 설정을 그대로 한 채 정사각형으로 바꾸자니 사진이 정사각형이 아니면 찌그러지고, 난감했다.

문제의 카테고리... 수정 전

나는 현재 대표 이미지들이 마음에 들어 일단 정사각형으로 바꾸고 상황을 봐보기로 했다.

난리를 다시 겪은 뒤..(새로고침 안 하면 안 볼 수 있다.) 정사각형으로 수정했다.

감격의 정사각형 썸네일이다.

Odyssey 스킨은 마음에 쏙 드는데 단 하나 불만족스러운 것이 직사각형 썸네일이다.

다섯 개 글 중 시험시간 글의 사진만 빼 놓고 다행히 정상적으로 나왔다.

 

이제 zipmox111은 대충 다 수정한 거 같으니 시험시간 포스팅은 냅두고 나중으로 미뤄야겠다^^

4블로그 중 유일하게 직사각형이 아닌 정사각형 썸네일인 3번째 블로그 zipmox111 썸네일 구경 가러 가기▼

zipmox111.tistory.com/ 3번째 블로그 공인중개사 블로그

 

*사담이지만, 사실 토요일에 3, 4번째 블로그까지 포스팅하고 포스팅 시간을 새벽으로 맟추려 했는데 이거 하느라 1, 2번째 블로그 포스팅도 못했다. 이 글은 일요일에 올리니 새벽에 얼른 올리고 일단 자야겠다.

---

오 근데 오늘 처음으로 html 편집 있는 스킨 편집 처음 창을 내려봤더니 사이드바-프로필에 인스타그램 바로가기 URL이 있어서 한 번 테스트해봤다.

인스타그램 바로가기 URL을 넣고 적용해서 테스트해봤더니, 크롬에서는 내가 설치했던 인스타그램 pc에서도 글 올릴 수 있는 확장프로그램이 뜨고, 네이버 웨일이나 인터넷 익스플로어는 오류가 떠서 다시 삭제했다.

인스타그램 오류 나서 삭제했다. 원 상태로 돌아감.

또 푸터는 무엇인고.. ㄷㄷ

외부링크1에 시도해보니까, 외부링크1에 내가 입력한 이름만 뜨고 이름을 클릭하면 URL에 들어가진다. 괜히 전에 모르고 오른쪽 관련사이트에 우겨넣었다. 왼쪽 푸터의 외부링크랑 오른쪽 관련사이트를 수정했다.

푸터 테스트

1차 수정 후 pc 화면

웁스... 나는 위아래로 외부링크 이름이 생길 줄 알았지... 너무 길게 썼다.

2차 수정 후 pc 화면. 만족! 완료!

위 사진과 같이 4블로그 모두 수정했다.

근데 모바일은 외부링크가 위아래로 생겼다.

참고로 오른쪽 관련사이트는 블로그 관리-링크-나의 링크에서 수정할 수 있다.

또 모바일 이미지도 수정했다. 2번째 블로그 youmox111의 '닭염소개, 일상'을 '생활정보, 일상'으로.

공지사항도 수정했다.

 

하하하 밤 샜더니 이것저것 미뤄놨던 거 싹다 수정하니 좋구나~~(글 내에 구분선도 이 글에서 처음 사용함.)

(한 번 수정하면 모두 수정해야하는 것들 : pc 하단(왼쪽 오른쪽), 모바일 그림, 공지사항)

썸네일 정사각형으로 만들려고 스킨 편집 들어가서 이것저것(푸터 등) 스스로 찾아냈다.

 

+추가) 썸네일 정사각형으로 바꾸고 티스토리 앱으로 확인했더니 중앙만 보이게끔 매우 작게 잘라서 보여준다.

왼쪽 내가 만든 통일성 있는 썸네일 사진, 오른쪽 찌그러지지 않는 일반 사진

나는 다른 블로그도 티스토리 앱으로 확인해봤는데, 다른 블로그들도 정사각형으로 표시되었다. 즉 내 스킨이 뭐든 티스토리 앱은 썸네일을 무조건 정사각형으로 해준다.

 

그리고 티스토리 앱이 아닌 그냥 인터넷 앱에서 블로그 들어가봤더니 4블로그 모두 썸네일이 정사각형이었다.(즉 시험시간이 안 찌그러지고 정사각형으로 나왔다.)

 

그래서 나중에 zipmox111에 2차도 포스팅할 때는 보라색 말고 다른 색으로 하려는데, 그 때 중앙의 찐 보라색도 수정해야겠다는 생각이 들었다. 티스토리 앱을 확인해본 결과 글자가 있는 네모 부분만 나온다.