[Blogger / Blogspot / 구글 블로그] 사진, 동영상 크기 관련 팁

[Blogger / Blogspot / 구글 블로그] 사진, 동영상 크기 관련 팁

  오후 9:17    홍다슬

---

1. 사진 여러 장 업로드 시 일괄 크기 지정법

기본적으로 글쓰기 탭에서 사진을 여러 장 삽입할 경우,
별 중간과정 없이 그대로, 그것도 Blogger 기준 '크게' 사이즈로 삽입되기 때문에
그 크기를 바라지 않을 경우 일일히 노가다를 하는 수밖에 없다.

그런데 사실 Blogger에는 이를 보완할 기능이 있다.

바로 글쓰기 옆의 HTML 탭으로 변경 후 사진을 여러 장 삽입해보면,
아까와는 달리 이런 창이 등장한다.

딱 보면 알겠지만, 사진들을 일괄처리할 수 있는 기능이다.

추측으로는 만들었다가 현재 글쓰기 메뉴에 적용을 실수로 안한 게 아닐까 생각한다.



2. 동영상 크기 변경법

Blogger에서 제공하는 기능으로 개인 동영상을 올리든, 유튜브 동영상을 올리든
공통적으로 크기가 너무 작다.

html 값을 보면 희한하게도 크기를 320 * 266 으로 딱 고정해놓았다.

CSS 추가로 강제로 이 기본값을 바꿀 수 있다.


Blogger에서 테마 - 맞춤설정을 선택,
고급 탭에서 맨 아래의 CSS추가를 선택한다.
(간혹 외부 템플릿을 적용한 경우는 너비 조정 탭에서 나온다.)

그리고 아래 소스를 입력한다.

.b-hbp-video, .YOUTUBE-iframe-video
{
  width: 90%;
  height: 56vh;
}

간단히 설명하자면 b-hbp-video 와 YOUTUBE-iframe-video라는 클래스(각각 업로드 동영상, 유튜브 동영상)의 크기를 조정하는 것인데,

가로는 포스트창 기준으로 %가 적용되지만,
세로는 기준이 뭔지 %는 이상한 결과가 나오고
그 대신 vh라는 브라우저 높이값에 비례하는 값을 썼다.
이게 모바일에서도 제일 무난하게 나오는 것 같다.

위 값대로 하면 이 정도 사이즈가 되고,

만약 변경하고 싶다면 F12를 누르면 나오는 개발자모드에서 미리보기를 할 수 있다.
왼쪽 상단에 커서 버튼을 클릭하고 동영상을 누르면 해당 태그를 쉽게 찾을 수 있다.
(선택한 채로 위, 아래 방향키로 값 조정이 가능하다.)

계속 느끼는 지만, Blogger는 html 지식이 없는 사용자에게는 상당히 불편한 플랫폼인 것 같다.