티스토리 블로그 오디세이 스킨 썸네일 정사각형으로 변경하기

티스토리 블로그 오디세이 스킨 썸네일 정사각형으로 변경하기

안녕하세요. 파파대니입니다.

블로그 글을 작성하다 보니 정사각형으로 만든 썸네일이 제대로 보이지 않는 것을 확인하였습니다.

그래서 제가 만든 정사각형 썸네일이 제대로 보일 수 있게 수정하였고, 그 방법을 소개해드리고자 합니다.

제가 쓰고 있는 스킨은 오디세이 스킨입니다.

오디세이 스킨이 아닐 경우 정상적으로 처리되지 않을 수 있기 때문에 주의하시기 바랍니다.

 

현재 보면 썸네일들이 위아래로 잘려서 보이는 것을 확인할 수 있습니다.

 

썸네일이 제대로 보이게 하기 위해서는 스킨 편집을 해야 합니다.

관리자 - 스킨편집 - html 편집으로 진입해야 하며, CSS를 수정해야 합니다.

아래 순서대로 진행하시기 바랍니다.

1. .article-type-thumbnail .thumbnail 수정

ctrl+f 를 눌러서 아래의 문구를 찾아서 수정해 주세요.

.article-type-thumbnail .thumbnail

스킨 편집에 따라 위치 정보는 다를 수 있으므로 주변 코드가 동일한지 위치를 잘 확인 후 적용 하세요.

변경 코드

.article-type- .thumbnail,
.article-type-thumbnail .thumbnail {
  /* PC 모드 썸네일 이미지 위치를 위한 크기 설정 */
  width: 150px;
  height: 150px;
  /* PC 모드 썸네일 이미지와 글자 사이 간격 */
  margin-left:40px;
}

---

2. .article-type-common .thumbnail .img-thumbnail  수정

ctrl+f 를 눌러서 아래의 문구를 찾아서 수정해 주세요.

.article-type-common .thumbnail .img-thumbnail

스킨 편집에 따라 위치 정보는 다를 수 있으므로 주변 코드가 동일한지 위치를 잘 확인 후 적용 하세요.

변경 코드

.article-type-common .thumbnail .img-thumbnail {
  /* PC 모드 썸네일 이미지 크기 설정 */
  /* display: none; */
  width: 150px;
  height: 150px;
}

---

3. 기본 썸네일 이미지 처리

두 번째에서 처리 했던 .article-type-common .thumbnail .img-thumbnail  의 display: none; 에 대한 처리를 하지 않으면,

기본 썸네일 이미지가 출력되는 것을 볼 수 있습니다.

 

그리고 두 번째에서 코드를 처리하면 썸네일 이미지가 출력되는데, 그렇게 되면 중첩되게 보이게 됩니다.

 

그래서 기본 썸네일 이미지가 출력되지 않게 코드를 추가해줘야 합니다.

코드 제일 아래쪽에 추가해 주세요.

변경 코드

 /* 기본 제공 썸네일 이미지 안보이게 처리 */
.link-article>.thumbnail{
  background-image:none !important;
}

 

코드가 수정이 완료되면, 상단에 있는 미리 보기 버튼을 눌러서 제대로 적용되었는지 확인해야 합니다.

미리 보기 화면에서 썸네일이 정사각형으로 깔끔하게 화면에 출력되는 것을 확인할 수 있습니다.

 

 

이렇게까지 진행하면 PC 모드에서는 문제가 없는데, 모바일 모드에서는 썸네일이 중첩되는 문제가 되는 것을 확인할 수 있습니다.

 

 

그래서 마지막으로 모바일 모드에서 정상적으로 볼 수 있게 코드를 수정해야 합니다.

---

4. 모바일 모드를 위한 코드 수정

ctrl+f 를 눌러서 아래의 문구를 찾아서 수정해 주세요.

.article-type-thumbnail .thumbnail

스킨 편집에 따라 위치 정보는 다를 수 있으므로 주변 코드가 동일한지 위치를 잘 확인 후 적용 하세요.

변경 코드

 .article-type-common .thumbnail .img-thumbnail {
    /* 모바일 모드 썸네일 이미지 크기 설정 */
    /* display: none; */
    width:90px;
    height:90px;
  }

  .article-type- .thumbnail,
  .article-type-thumbnail .thumbnail {
    /* 모바일 모드 썸네일 이미지 위치를 위한 크기 설정 */
    width: 90px;
    height: 90px;
    /* 모바일 모드 썸네일 이미지와 글자 사이 간격 */
    margin-left:20px;
  }

코드를 추가하고, 수정을 해야 하기 때문에 잘 확인 후 따라 하시기 바랍니다.

 

이렇게 모바일 모드에 대한 설정을 완료 후 확인 해보면, 정상적으로 정사각형 썸네일이 화면에 출력되는 것을 확인할 수 있습니다.

---

 

지금까지 오디세이 스킨에서 정사각형 썸네일을 깔끔하게 볼 수 있는 방법을 알아봤습니다.

오디세이 스킨을 쓰시는 분에게 도움이 되었으면 좋겠습니다.

감사합니다.

 

 

⬇️ 참고하면 좋은 글 ⬇️

 

티스토리 블로그 오디세이 스킨 관련글 썸네일 정사각형으로 변경하기

티스토리 블로그 오디세이 스킨 관련글 썸네일 정사각형으로 변경하기