내 블로그가 노출량도 많지 않고
어차피 모두 검색을 통한 개별 페이지 유입이라 스킨에 크게 신경을 안쓰고 있었는데
자기만족의 일환으로 스킨을 꾸미고 싶어졌다.
직접 스킨을 만들어서 적용할 수도 있는 모양이지만
나에게 그런 재주는 없어서 지원되는 스킨 목록에서 선택,
가장 마음에 들었던 Poster 포스터 스킨을 적용!
홈 커버 설정도 간단하게 적용이 가능한데
아직은 포스팅이 많지 않으니 슬라이더, 섬네일리스트, 리스트 이렇게 3개만 적용해 두었다.
적용하고 보니 슬라이더는 그렇다 쳐도
썸네일리스트 섹션의 썸네일 비율이 가로로 길게 노출되었는데
썸네일리스트랑 포스팅 리스트의 썸네일 비율이 같아야 이래저래 편하고 예쁠 것 같아서
1:1 비율로 수정할 수 있는지 검색을 시작했다.
시작부터 난관 봉착… CSS와 HTML을 수정해야 한다고…
나 왜 티스토리를 시작한거냐…☠
그렇지만 썸네일 사이즈를 너무 바꾸고 싶은걸.
일단 모든 블로그에서 공통적으로 시키는 방법을 적용해
썸네일리스트 항목을 찾아서 사이즈를 변경해 보았다.
음…??? 안된다. 큰일이다 🤯
사이즈는 바뀌고 C, R, P 등 설정도 먹히는데 비율이 안바뀐다.
모든 썸네일 관련 항목의 사이즈 수치를 수정해봐도 비율이 바뀌지 않는다…
스킨마다 구조가 다른데 대부분 Book Club 북클럽 스킨 사례라서
내가 원하는 정확한 내용을 찾을 수가 없었다.
이쯤되니 스킨을 바꾸는 게 합리적이라는 생각이 드는데
Book Club... 도무지 마음에 들지 않는다.
다시 포스터 스킨을 붙잡고 검색 시작…
그렇게 며칠을 정보의 바다를 헤매다가… 몇 가지 힌트와 자신감을 얻어서
직접 이것저것 만져보다가 드디어 썸네일리스트 썸네일 비율 변경에 성공했다.
세상 뿌듯 😚
그래서 정리해보는
Poster 포스터 스킨 썸네일리스트 썸네일 사이즈 비율 변경 방법!
나처럼 마이너한 취향 가지신 분… 계시면 꼭 도움이 되었으면 좋겠다🥰
1. 수정하고 싶은 영역의 소스 코드 확인
수정하고 싶은 해당 영역에서 마우스 우클릭 > 검사 > 소스 코드 확인
어떤 항목을 수정해야 하는지 정확히 체크하기 위함이다.
대부분 우클릭이 막혀있기 때문에 본인 블로그에 로그인 한 상태에서 진행 필요하고
다른 영역에서 마우스 우클릭 해도 무관하다.
검사창에서 마우스를 움직여보면 위 이미지처럼, 해당하는 영역에 컬러 음영이 적용된다.
(크롬, 엣지 모두 가능)
Poster 포스터 스킨의 썸네일리스트는 “cover-thumbnail-list” 영역으로 구분돼 있다.
이렇게 자신이 수정하고 싶은 영역을 확인하면 된다.
2. HTML 수정 : 썸네일 사이즈 수정
Ctrl+F 기능으로 “cover-thumbnail-list” 검색
썸네일 세팅값 부분에서 이미지를 원하는 사이즈로 변경
👇썸네일 사이즈 변경하는 부분 (C250x250 자리)👇
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C250x250/?fname=" alt=""></s_cover_item_thumbnail></span>
썸네일 사이즈 변경 시 사이즈는 원하는 비율대로 입력하면 되지만
썸네일 사이즈 앞에 붙는 치환자는 꼭 알아둘 필요가 있는데,
C, R, P, S 4가지가 있고, 반드시 대문자로 입력해야 한다.
[썸네일 치환자 간단 설명]
C (Crop) : 원본 이미지의 비율을 유지하되, 지정된 사이즈 외의 부분은 잘라낸다.
P (Portrait) : 지정된 사이즈 안에 원본 이미지가 모두 포함되도록 원본 비율에 맞춰 리사이즈 한 후, 남은 영역은 흰색 배경으로 채운다.
R (Resize) : 원본 이미지 비율과 상관없이 지정된 사이즈에 맞추며, 원본 이미지 비율과 썸네일의 비율이 다를 경우, 이미지가 변형돼 보인다.
S (Snapshot) : C (Crop) 옵션과 동일한 기능을 하지만, 원본이 GIF 파일이라면, C, P, R 은 GIF 형태로 보이는 반면, S는 GIF 속성이 사라지고, 이미지만으로 썸네일을 생성한다.
사이즈와 썸네일 치환자를 이것저것 바꿔보며 원하는 방향으로 적용하는 것을 추천한다.
나는 C264x200 👉 C250x250으로 수정했다.
여기서 사이즈 숫자 사이에 x는 소문자로 입력해야 한다.
그리고 다른 영역의 썸네일 사이즈를 변경하고 싶다면
각 영역의 코드 중에서 “thum”와 “img src=”를 찾으면 될 것 같다.
혹시 모를 상황에 대비하고자 원본 소스를 메모장에 백업해 놓고 수정했다.
어떤 블로그에서는 CSS 먼저 수정 후 HTML을 수정해야 한다고 했는데
나는 HTML 먼저 수정하고 CSS를 수정했음에도 이상없이 잘 적용됐다.
어느것을 먼저 적용하는 지는 크게 상관없는 듯하다.
“적용” 버튼을 누른 후 “새로고침”을 하면 변경 사항이 잘 적용됐는지 확인할 수 있다.
3. CSS 수정 : 설정값 수정
Ctrl+F 기능으로 “cover-thumbnail-list ul li .thum” 검색
“.cover-thumbnail-list ul li .thum {“ 항목에서 “padding-bottom” 값을 100%로 변경
“padding-bottom”은 기본으로 “75.757575757575758%”으로 세팅돼 있었고,
이 수치를 100%로 바꾸니 원하는 비율대로 노출이 됐다.
코딩 알못인 나는 이 세팅값 찾기가 세상 어려웠는데 🤮
“cover-thumbnail-list” 관련된 속성값에서 사이즈 관련된 걸로 보이는 수치들을 모두 수정해가며 찾았다.
“margin”, “padding”이 여백 관련된 속성이라는데
(각각 오브젝트 기준 바깥쪽 여백, 안쪽 여백이라는 것 같다)
자세한 걸 알고 싶다면 전문가의 글을 찾아보는 것으로 하자…
(그래서 찾아본 전문가의 글 : 링크)
뭔가 복잡해 보이지만 막상 해보면 어렵지 않다.
Poster 스킨 쓰는 분들 모두 만족스러운 스킨으로 꾸미시길…★
