구글 블로그 블로거 줄간격 조정하는 법 (본문 가독성 향상)

구글 블로그 블로거 줄간격 조정하는 법 (본문 가독성 향상) 



줄간격을 조절한 글의 이미지
 


구글 블로그릉 운영하다보면 느끼는 것은 하나하나 정성을 들여야되는 것이 한두개가 아니라는 것이 느껴집니다. 


구글 블로그를 글을 열심히 썼는데, 결과물로 본문글이 너무 답답해보이고 글의 줄간격을 조정하고 싶을 때가 있습니다. 


이경우 구글에서 이러한 서비스를 친절히 제공하면 좋겠지만, 그렇지가 않죠.

그래서 직접 html 코드를 입력하여 조정해야합니다. 


제가 이런것을 직접하게 될줄은 몰랐지만, 하게 되더라고요. 

해보고 보니 방법은 간단합니다.


불로그 줄간격 조정하는 법 천천히 따라서 해보시기바랍니다. 



1. 설정-테마-맞춤설정-HTML편집 


블로그를 이제 조금 운영하신 분들은 HTML편집기에 들어가는 것이 한결 자연스러워졌을 수도 있습니다. 

저도 한번 배워볼까 생각중이기도 하고요. 

이 편집기에 들어가서 우리가 준비한 코드만 입력하면 됩니다. 정말 간단하죠.





2. 줄간격 조절하는 코드 입력하기 

여러가지 코드 방법이 있는데요, 우선 제일먼저 본문의 글이기 때문에 본문을 찾아야합니다. 

본문을 뜻하는 코드는 바로 이것  .Post-body{


Ctrl + F를 클릭하여 Post-body{ 를 검색하여 주세요. 

저는 확인해보니 아래처럼 되어있더라고요. 

. item .post-body.. static~~~~.post-body{width:100%~~~~~hidden}

이렇게 아래 표시를 해두었습니다. 
이 코드가 바로 본문의 글 상태를 알려주는 코드입니다. 





사람들마다 조금씩 다르게 생겼을 수도 있는데요, 대체로 다 비슷하게 생겼습니다. 


.post-body{font-size: 100%;line-height: 1.6;position:left;}


.post-body{width:100%;color:#5E5E5E;font-size:15px;line-height:2em;overflow:hidden}


이런식으로 나눌 수 있더군요. 

여기서 그럼 본문 줄간격을 뜻하는 것을 찾아야합니다. 

바로 line-height: 입니다. 


1번의 예시에는 line-height: 1.6
2번의 예시에는 line-height:2em

이것을 조정해주시면 됩니다. 

눈치가 빠르신 분들은 저는 2번의 예시대로 되어있으며 2em을 2.2em으로 변경을 한 상태입니다. 

위의 코드를 보시면 알 수 있습니다. 


한번 사진으로 정확하게 확인해보시죠. 




예시1) line-height:2em




예시2) line-height:2.2em






구분이 가시나요? 줄간격을 조금 늘렸을 뿐인데 가독성이 늘어난 것을 확인 할 수 있습니다. 
줄간격을 줄이거나 늘이거나하는 것은 개인적인 취향이기때문에 편하신대로 조정하시면 될 듯합니다. 

더 좋은글을 쓰기위해서 항상 노력하겠습니다. :) 

도움이 되셨으면 좋겠습니다. 


댓글 없음:

Powered by Blogger.