목차

마이크로 블로거 템플릿 1 - 다운로드 및 적용 방법 에서는 블로그 스팟 마이크로 블로거 템플릿을 다운로드 받아서 내 블로그에 적용하는 방법까지 알아보았는데요!! 이번 시간에는 내 블로그에 적용된 마이크로 블로거 템플릿의 메인페이지를 좀 더 가독성있고 멋지게 수정을 해보도록 하겠습니다.





메인 화면 꾸미기 변경 전/후 화면

먼저 결과물 부터 보시겠습니다. 변경 전 / 후 화면을 보시면, 변경 전은 마이크로 블로거 템플릿의 기본 폰트와 썸네일 크기를 사용 하였는데, 외관적으로 보았을 때 뭔가 부족한 느낌이 드는데요!! 변경을 하고 나서는 글자 제목이나 요약내용을 좀 더 가독성 있게 확인 할 수 있고 외관적으로도 깔끔한 느낌을 줄 수 있습니다. 그럼 지금부터 마이크로 블로거 템플릿 메인 화면 꾸미는 방법에 대해 알아보겠습니다.



글자 웹 폰트 가져오기

1 먼저 마이크로 블로거 메인 페이지에 사용 할 글자 웹 폰트를 적용하는 방법부터 알아보겠습니다. 구글 포탈 사이트에서 "눈누"라고 검색 후 사이트에 접속 합니다.



2 사이트 접속 후 여러분들의 블로그에 잘 어울릴 것 같은 폰트를 클릭 합니다.



3 상세 사이트에서 크기 별로 폰트 및 라이선스 정보를 확인 할 수 있습니다. 모든 확인이 끝났으면 우측 상단에 "웹폰트로 사용" 항목에 웹폰트 소스를 그대로 복사를 합니다.



마이크로 블로거 메인페이지 꾸미기

HTML 편집 화면으로 이동하기

1 블로그 스팟 관리 페이지에서 테마 - 맞출 설정 버튼을 클릭 합니다.



2 그 다음 HTML 편집 메뉴를 클릭 합니다.



3 블로그 디자인 및 HTML을 편집 할 수 있는 화면이 뜨게 됩니다.



마이크로 블로거 템플릿에 웹 폰트 추가하기

1 앞서 눈누에서 여러분들이 확인한 웹 폰트 소스를 추가하기 위해서 블로그 스팟 HTML 편집 화면에서 "CTRL + F"를 누른 다음 검색어에 " /*-- Google Fonts --*/ " 를 입력하고 찾기 버튼을 클릭 합니다.



2 /*-- Google Fonts --*/ 문구를 기준으로 스크롤을 아래로 쭉 내려서 " Reset CSS " 문구 바로 위에 눈누에서 복사한 웹폰트 소스를 붙여넣기 합니다. 그 다음 웹폰트 소스에서 " font-familt : '폰트 명'; "으로 되어 있는 코드를 복사하여 메모장이나 기타 붙여넣기 할 수 있는 곳에 붙여넣기 해줍니다.



메인 페이지 컨텐츠 목록 제목 폰트 변경

1 먼저 메인 페이지에서 컨텐츠 목록의 제목 폰트를 변경해 보겠습니다.



2 편집 화면에서 CTRL: +F 키를 눌러서 " .index-post .post-info > h2{ " 를 입력 후 찾기 버튼을 클릭하여 " .index-post .post-info > h2{ " 아래에 위치한 곳에 메모장에 붙여넣었던 웹 폰트명( " font-family: '폰트명'; " )을 추가해 줍니다.



3 블로그 메인 페이지 컨텐츠 목록 쪽 제목이 여러분들이 추가한 웹 폰트로 변경 되어 있는 것을 확인 할 수 있습니다.



메인페이지 사이드바, 메뉴, 컨텐츠 목록 요약 내용 폰트 변경

1 메인 페이지 상단 메뉴, 사이드마, 컨텐츠 목록 요약 내용 등 거의 대부분의 폰트 변경을 진행해 보겠습니다.



2 HTML 편집 화면에서 " CTRL + F " 키를 눌러서 " /*-- Body Content CSS --*/ " 검색 한 다음 요약 내용에 사용 할 폰트명(font-family:'폰트 명';)을 수정 합니다. ( 눈누 사이트에 필요한 폰트를 확인 하세요 )



3 상단 메뉴, 컨텐츠 목록 요약 내용, 사이드바 등 대부분의 폰트가 변경 된 것을 확인 할 수 있습니다.



썸네일 크기 및 요약내용 글자수 변경

1 썸네일 크기와 요약내용을 보면 요약내용의 길이가 길어서 썸네일의 크기보다 요약내용이 더 많아서 보기가 안좋고, 썸네일 크기가 정사각형이 아닌 가로가 긴 사각형이라 썸네일을 만들 때 크기를 설정하기가 쉽지 않습니다. 그래서 썸네일은 정사각형으로 만들고 요약내용의 글자 수를 썸네일 크기게 맞게 줄여보도록 하겠습니다.



2 편집 화면에서 CTRL+F 키를 눌러서 " .index-post .post-image-wrap " 검색 한 다음 Width , height 픽셀 값을 180px으로 수정해줍니다. 제가 테스트 해본결과 180px이 제일 조화롭게 보였는데 혹시 다른 크기를 원하신다면 Width, Height 픽셀 값을 변경 하시면 되겠습니다.



3 편집 화면에서 "CTRL + F" 키를 눌러서 " data:post.snippets.long snippet " 검색 한 다음 length 값을 줄이거나 늘리면서 썸네일 크기에 맞게 글자수를 맞춰보시면 되겠습니다. 기본적으로 썸네일 Width, Height 픽셀 값이 180px 일 경우에는 length를 250으로 설정하시면 되겠습니다.



4 썸네일과 요약내용의 크기가 일치해서 좀 더 가독성 있고 깔끔하게 보이는 것을 확인 할 수 있습니다.




긴 글 읽어주셔서 감사합니다.

끝.