[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 지식이 없는 사용자에게는 상당히 불편한 플랫폼인 것 같다.

Read More

Blogger CSS 수정 및 스크롤 고정하기

Blogger CSS 수정 및 스크롤 고정하기

  오후 6:10    홍다슬

---

* Blogger 테마 중 '세련' 테마 적용 중에 작성하였다.

블로그 디자인을 좀 수정했다.

간단하게 말하면 Navbar, Header 및 Tap 스크롤 고정 작업이다.
[디자인] - [테마] - [HTML 편집] 을 건드리면 된다.

고정은 모두 position: fixed; 를 추가한다.

첫번째로 Navbar.
Blogger 기본 서식에 navbar 라는 class가 적용되어 있어 이것을 추가하고 작성하면 된다.
z-index는 중첩시 우선순위를 결정하는 것으로, 어느정도 높은 수치를 주면 된다.
(그렇지 않을 시 스크롤때마다 다른 항목들에 가려지면서 흔들리는것같은 효과를 가진다.)
기본 서식은 배경이 반투명한 색이나, background-color 속성을 추가하면 불투명한 해당 색상으로 바뀐다.

.navbar {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 99;
}



Header는 header-outer 라는 class로 지정되어 있다.
기본 서식에 있으니 수정해주면 된다.

.header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    position: fixed;
}



Tap 은 왼쪽 기준으로 column-left-outer라는 class로 지정되어 있다.
마찬가지로 기본 서식에 있으니 수정해주면 된다.
위치는 margin-right와 top, 크기는 width와 height를 조정해주면 된다.
overflow-y: auto; 는 스크롤바를 생성한다.

.main-inner .column-left-outer,
.main-inner .column-right-outer {
    margin-top: $(widget.outer.margin.top);
    position: fixed;
    top: 180px;
    margin-right: -300px;
    width: 120px;
    height: 600px;
    overflow-y: auto;
}



덤으로, 게시물 내용이 너무 왼쪽으로 붙어있어서 padding-left를 추가했다.
post-outer 를 수정하면 된다.

.post-outer {
  padding-bottom: 10px;
padding-left: 50px;
}

Read More