티스토리를 하다 보면 내용도 내용이지만
아무래도 안정적으로 보이는 부분도 중요하게 느껴진다.
공부한 내용이나 일상 글을 잘 적어두고
분류하는 공간인데 사진이 어그러지거나 내 마음대로 배치되어 있지 않다면
자꾸만 신경이 쓰여서 조금씩 손보고 있다.
오늘은 썸네일 사진 비율이 망가진 부분이 신경 쓰여서
비율을 유지하면서 내가 원하는 크기로 보여질 수 있게 수정해 보았다.
매우 간단 !
그리고 한번 수정해 두면 다음에
어렵게 찾지 않아도 되는 인덱스 기능도 설명해보겠다.
스킨 타입 확인
북클럽 스킨에서 뉴북 리스트 타입을 사용하고 있다. 다른 타입도 대부분 가능하다.
관리 > 꾸미기 > 스킨 편집 > html 편집에서 대부분 스킨 편집이 이루어진다.
썸네일 이미지 비율 유지 C
위 사진처럼 내가 설정한 썸네일 사이즈가 정사각형일때
직사각형의 사진을 대표 사진으로 설정한다면
중심을 기준으로 꽉 차게 나머지 부분을 잘라내는 (Crop) 설정 방법이다.
이미지의 여백이 크게 중요하지 않고
대부분 정사각형 이미지를 사용하고 있을때
적용하면 좋을 것 같다.
왼쪽에 보면 숫자가 있는데 모든 행의 숫자라고 생각하면 된다.
아무행에 커서를 클릭하고 ctrl+F 를 눌러서 찾기 기능을 이용한다.
rep_thumbnail 검색
여러개가 검색되는데 위아래 텍스트를 확인해서 이미지와 같은 위치를 찾는다.
우리는 여기서 C230x230으로 적혀있는 부분을 수정하면 된다.
본인의 스킨 타입과 이전 설정에 따라서 알파벳과 숫자는 다를 수 있다.
원하는 대로 바꿔주면 된다.
공백이나 한 글자의 오타가 있어도 + 또는 괄호를 삭제하거나 추가해도
제대로 작동하지 않을 수 있으니 꼭 필요한 부분만 수정을 해야 된다.
썸네일 비율을 유지하면서 나머지 여백은 잘려나가게 하고 싶다면
가장 앞쪽에 Crop의 의미로 대문자 C를 작성해주면 된다.
나는 이 형태를 선호한다.
대부분 정사각 썸네일을 만들고 있고 앞으로도 그렇게 통일할 예정이라서
이렇게 적용하도록 하겠다.
썸네일 꽉 차게 R
하지만 티스토리 전체 이미지에 따라서
이렇게 이미지가 잘리지 않고 꽉 차게 보여지고 싶은 경우도 있을 것이다.
그럴 땐 썸네일 크기에 따라서 이미지 사이즈를 변경하는 Resize를 사용하면 된다.
C를 넣었던 위치에 대문자 R로 바꿔주면 적용된다.
모든 수정 이후에는 상단 우측의 적용 꼭 눌러주는 것도 까먹지 말자.
스킨 편집 인덱스 메모 남기기
가장 중요한 꿀팁 ! 바로 인덱스 기능이다.
상황에 따라서 내가 스킨 설정을 변경하고 싶을 때 원하는 행을 손쉽게 찾을 수 있는 방법이다.
이번에 수정한 위치 바로 위에
코드에 전혀 영향을 미치지 않는 나만의 메모를 적어두는 것이다.
<!-- 원하는 텍스트 입력-->
이렇게 메모를 적어두면 다음에 한글로 금방 검색해서 위치를 찾을 수 있다.
수정한 결과를 다시 바꾸고 싶을 때도 바로 찾을 수 있으니 간편하다.
이번에 인덱스는 사진에서 보이는것처럼 이렇게 적어두었다.
<!--썸네일 비율 조정-->
인덱스를 정상적으로 달았다면 텍스트 색이 초록색으로 변하니
이것까지 확인하면 인덱스 달아두기도 성공이다.
댓글