Mfer

구글블로그 꾸미기 모바일 - 사용자지정으로 바꾸기

구글블로그 꾸미기를 하실 때에 웹에서 수정한 것들을 모바일에서도 동일하게 보여주기 위한 설정을 하시는 것이 좋습니다.

템플릿 -> 모바일 설정

사용자지정 클릭 -> 저장

모바일 글자크기 그리고 줄간격수정을 하였는데 모바일에서 수정한 것들이 보이지 않을 수가 있습니다. 위사진처럼 수정을 하여주시면 정상적으로 적용이 되니 참고하시기 바라겠습니다.

구글블로그 꾸미기 모바일 최적화 검사하기

구글 및 네이버에서 본인의 블로그 노출이 잘되려면 모바일 최적화가 되어야 한다고 합니다.

블로그 및 홈페이지 모바일 최적화 검사를 하는 사이트는 아래의 링크를 참고하시면 되겠습니다.

모바일 최적화 검사 사이트

이는 구글에서 제공을 하는 모바일 최적화 검사 사이트입니다.

구글블로그 꾸미기 웹에서 모바일버전 보는법

본인의 블로그 주소뒤에 아래의 코드를 입력하시면 되겠습니다.
/?m=1

전(웹버전) -

mfer1106.blogspot.com

후(모바일버전) -

mfer1106.blogspot.com/?m=1

구글블로그 꾸미기 할 때에 웹버전과 모바일버전을 함께 켜서 보시면 좋을 거 같습니다.

구글블로그 꾸미기 줄간격, 글자크기 조절 [가독성 올기기] - PC / 모바일

블로그를 운영할 때 글자의 크기 및 줄 간격은 매우 중요하다고 생각을 합니다.

PC(웹버전)

수정 전 -

<사진을 클릭하면 크게 볼 수가 있습니다.>

수정 후 -

모바일(스마트폰)

수정 전 -

<사진을 클릭하면 크게 보여요.>

수정 후 -

pc (웹버전)

코드복사가 안될 때 <- 클릭 모바일 (스마트폰) 코드복사가 안될 때 <- 클릭 글자 크기 font-size:
줄 간격 line-height:
글자크기인 font-size:는 한번 입력을 하여두시면 기본글자 크기가 되겠습니다. 구글블로그의 폰트사이즈는 그닥;; 좋지가 않아서 수정을 좀 하는 것이 좋더군요. 줄 간격인 line-height: 에서는 본인이 원하는 간격으로 조절을 하시면 되겠습니다. 현재는 1.9;인데 대부분 1.7;를 많이 사용하는 거 같습니다.

모바일 줄 간격을 하고나서는 꼭 템플릿 -> 모바일 -> 사용자지정으로 하시기 바랍니다.

구글블로그 꾸미기 임베드란? 임베드 [embed] - 개체삽입

임베드라는 것은 html의 태그를 통하여서 동영상 혹은 음악을 재생시키는 태그입니다. 그러나 저는 동영상, 음악 재생을 하지 않고 단지 텍스트만 사용을 하고 있습니다.

위 사진처럼 만드는 방법?

저는 현재 구글문서를 이용하여서 만들고 있습니다.
예)
abcdefg
위 영어를 넣어보겠습니다.

<사진을클릭하면 크게보여요.>

구글문서에 abcdefg를 입력을 하고 파일을 눌러줍니다.

웹에 게시... 라는 문구를 클릭합니다.

임베드를 클릭하고 아래에 있는 게시라는 글자를 클릭하여줍니다.

위 화면에서 복사를 하여줍니다. (ctrl + C)

HTML 수정 창으로 들어 갑니다.

<사진을클릭하면 크게보여요.>

본인이 원하는 곳에 붙여넣기를 하여줍니다.

임베드 위치?
해당 코드의 가장 앞에는 <center>를 그리고 가장 뒤에는 </center>를 넣어주시면 중앙정렬이 됩니다.

이는 많은 텍스트를 삽입해야할 때 혹은 노래의 가사들을넣을 때 사용을 하면 편리할 거 같습니다.

구글블로그 꾸미기 포스팅과 제목 사이에 줄 넣기

게시물의 타이틀과 게시줄 사이에 줄을 넣는 코드입니다.

수정 전 -

<사진을 클릭하면 크게 볼 수가 있습니다.>

수정 후 -

이는 CSS추가로 삽입을 하시면 되겠습니다.

CSS코드 삽입하는 방법 <- 바로가기

코드복사가 안될 때 <- 클릭 줄의 색상, 크기조절 및 줄의 종류: 줄 굵기 bottom:1px

줄 굵기 bottom:10px

줄 색상 #e6e6e6 -> 원하는 색상코드 삽입

줄 스타일은 간단하게 그림으로 보여드리겠습니다. 현재의 줄 스타일은 solid 입니다. solid

ridge

groove

double

dotted

dashed

색추출 방법은 아래의 링크를 참고하시면 되겠습니다. 색상추출프로그램 설치 및 사용법 <-클릭

색추출 프로그램 - 색상 추출

<사진을 클릭하면 크게 볼 수 있습니다.>

네이버에 Color cop라고 검색하고 다운로드를 받습니다.

다운을 받으시고 해당 압축파일을 실행시킵니다.
압축풀기를 굳이 할 필요가 없이 바로 실행을 시키면 됩니다.

위처럼 실행파일에서 스포이드모양의 아이콘을 마우스로 클릭 한 상태에서 본인이 원하는 색상에 놓으면 색 추출을 할 수가 있습니다.

구글블로그 꾸미기 게시물의 타이틀(제목) 색상 바꾸기

구글블로그는 스킨들마다 게시물의 타이틀(제목) 색상변경을 할 수가 없습니다. 그럴때는 간단하게 Html수정을 통하여서 구글블로그 포스팅 제목 색상변경을 할 수가 있겠습니다.

수정 전

수정 후

html 수정을 할 때는 블로그 백업을 미리 받아두시기 바랍니다.
구글블로그백업방법 <- 바로가기

템플릿 -> Html편집으로 들어갑니다.

(컨트롤 + F) 찾기 -
/* Variable definitions

코드복사가 되지 않을 때 <- 클릭 위 임베드의 코드로 대체하여 줍니다. 전 -

후 -

그리고 한번 더 (컨르롤 + F) 찾기 - ]]></b:skin> 코드복사가 되지 않을 때 <- 클릭 위 임베드의 코드로 대체하여줍니다. 전 -

후 -

두 번의 수정이 모두 끝이나면 템플릿 저장 -> 맞춤설정 -> 고급으로 들어가시면 최초 사진처럼 나올 것 입니다.

구글블로그 꾸미기 포스팅(게시물) 간격 조절하기

수정 전

수정 후

CSS추가

코드복사가 안될 때 <- 클릭

bottom:60px;}라고 되어있는데 이 60px를 조절하시면 되겠습니다. 숫자가 높을 수록 간격이 커지니 참고하시면 되겠습니다.

구글블로그 백업 및 가져오기

구글블로그 꾸미기 할 때에 가장 먼저 해야할 것이 바로 백업(저장)입니다. 만약 Html수정하다가 실수를 할 경우를 꼭 대비하는 것이 좋습니다.

구글블로그 백업을 하는 방법은 아래의 사진을 참고하시면 되겠습니다.

사진을 클릭하면 크게 볼 수가 있습니다.

템플릿 -> 백업/복원

구글블로그 가져오기 역시 템플릿에서 가서 백업/복원을 누르시면 되겠습니다.

구글블로그 꾸미기 파비콘(Favicon) 수정 - 인터넷 주소창에 아이콘달기

파비콘(Favicon)이란?

수정 전

수정 후

레이아웃 -> Favicon 수정을 클릭하시고 본인이 원하는 아이콘을 삽입하시면 되겠습니다.

그러나 이 패비콘은 윈도우익스플로러에서는 잘 보이지만 크롬브라우저에서는 잘 안보일 것인데요. 이는 약간의 코드삽입이 필요하겠습니다.

템플릿 -> Html 편집

위 코드복사가 안될 때 "클릭" Html편집에서 위 코드를 찾아주고 해당 코드 위에 Html 이미지 링크를 넣어주시면 되겠습니다.