홈페이지형 블로그 설정 - hompeijihyeong beullogeu seoljeong

홈페이지형 블로그는 홈페이지처럼 생긴 블로그를 말합니다. 기업이나 지자체에서 이런 홈페이지형 블로그를 사용하기도 합니다. 아래는 대구 달서구청 블로그입니다. 멋지죠~~~

출처: 대구 달서구청 블로그

욕심이 나서 직접 지난 주말에 종일 네이버 블로그에서 홈페이지형을 만들어 봤습니다. 인터넷에서 자료를 찾아가면서 공부했죠. 좀 어렵더군요... 좀 쉽게 하는 방법이 없을까... 고민하다가, 그래서 전문가들이 설명한 내용을 토대로 제가 딱 6단계로 쉽게 정리했습니다.

1. 레이아웃 변경

2. 스킨 만들기

3. 투명위젯 설치

4. 메뉴 위젯 설치

5. 프롤로그 만들기

6. 모바일 화면 정리

1. 레이아웃 변경

내 블로그에서 '관리>꾸미기 설정>레이아웃·위젯 설정'으로 갑니다. 거기에서 레이아웃을 우측에 끝에서 두 번째 레이아웃을 선택합니다.

​

2. 스킨 만들기

다음 스킨을 직접 만들어야 합니다. 기존 스킨과 타이틀 자리를 없애고 직접 만든 스킨을 올려야 합니다.

사이즈는 가로 1920px, 세로는 500px로 합니다. 가로는 반드시 1920로 하고, 세로는 600이하로 해야 합니다. 일단은 500으로 하기 바랍니다.

스킨을 만들었으면, 스킨을 '세부디자인 설정>스킨변경>직접등록'하면 됩니다.

​

3. 투명위젯 설치

투명위젯 개념이 중요합니다. 이 건만 이해하고 설치하면 80%는 끝난 겁니다.

투명위젯을 만드는 이유는 일반 블로그는 타이틀과 본문 메뉴들이 위치가 정해져 있습니다. 보통 이런 모양이죠.

그런데 이 모양을 변경하는 겁니다. 이때 스킨을 직접 등록하게 되면 안에서 위젯이 가려집니다. 그래서 보이지 않는 투명위젯으로 안에서 쭉 밀어줘서 새로운 메뉴 위젯을 밖으로 보이게 하는 겁니다.

투명위젯은 가로 170px, 세로 600px로 만듭니다. 5개의 투명 위젯을 설치하도록 하겠습니다. 만드는 html은 아래와 같습니다. 그대로 복사해서 위젯을 만들면 됩니다. 단, 길이를 조정할 때는 "height="600 이 기본인데요, 600을 400이나 500으로 조정하면 됩니다. 저도 처음에 500으로 했다가 400으로 재조정했더니 사이즈가 맞더군요. 아마 디자인 하면서 조금씩 조정할 필요도 있습니다.

<table width="170" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td width="170" height="400>

</tr>

</tbody>

</table>

만든 투명위젯은 '레이아웃 위젯 설정'에서 맨 위로 드래그해서 올립니다. 그리고 나중에 만들 메뉴 위젯도 위로 드래그 해야 합니다.

​

4. 메뉴 위젯 설치

자, 투명위젯으로 공간을 만들었다면, 메뉴 위젯을 만들어 넣으면 됩니다. 메뉴 위젯은 홈페이지에 보이는 메뉴입니다. 위젯 설치방법은 아래 포스팅을 참조 바랍니다.

http://pr0bang.com/221627814923

​

5. 프롤로그 만들기

홈페이지형 블로그는 꼭 프롤로그를 세팅해야 합니다. 먼저, '투명위젯 만들기'에서 언급한 메뉴위젯을 위로 올려 메뉴를 구성합니다. '스토리엔11', '홍보교육1', '스토리텔링1', '소셜콘텐츠1', '김태욱1'이 바로 메뉴위젯입니다.

그리고, 메인 이미지 목록을 활용하여 메뉴를 구성했습니다. 그리고 이미지 강조형으로 했습니다.

짠. 이제 완성되었습니다. www.story-n.net 나 blog.naver.com/story-n 에서 확인해보세요.

​

6. 모바일 화면 정리

모바일로도 확인해 보세요. 모바일 화면은 조금 다르므로 모바일에 맞게 조금 수정하면 좋습니다. 우리 블로그를 찾는 사람의 절반은 모바일로 방문하니 꼭 모바일을 확인하고 정리하는 게 좋습니다.

​

모바일 디자인 정리는

첫째, 메인 스킨화면

둘째, 공지 세팅

셋째, 대표글 선정

넷째, 카드형 or 목록형 세팅

첫째, 메인이 되는 스킨화면입니다. PC에서 가로가 1920px의 긴 폭이었다면, 모바일은 세로로 긴 직사각형입니다. 저는 400px, 500px로 했습니다.

둘째, 공지를 만드세요. PC에서 '공지사항'으로 선택하면 모바일에서는 NOTICE로 메인화면 바로 아래에 보입니다.

셋째, 대표글을 선정하세요. 대표글을 만들면, 상단에 올라 메뉴위젯 효과를 줍니다. 대표글 세팅은 아래 포스팅 참고하세요.

http://pr0bang.com/221611947204

넷째, 카드형, 목록형 등이 있습니다. 목록형으로 바꿔주세요.

모바일에서는메인화면에 있는 <홈편집>에서 위 정리를 할 수 있습니다.

​

※ 업그레이드

그후 업그레이드 했습니다. 4월 1일.

무엇이 변경되었을까요?

금방 알 수 있는 건 스킨 이미지입니다. 제 강의 장면으로 변경했습니다.

그런데, 잘 보시면 메뉴 위젯(스토리엔, 홍보교육, 스토리텔링, 소셜콘텐츠, 김태욱)이 스킨 이미지 안으로 들어갔습니다. 그전에는 메뉴가 좀 떨어져 있었죠. 자꾸 눈에 거슬려 위로 올리기로 마음 먹고 변경 작업을 했습니다.

​

생각보다 쉬웠습니다.

투명 위젯에서 높이(height)를 줄이면 투명위젯이 작아지니, 메뉴가 올라가더군요. 물론 한번에 맞추기 어려웠죠.

​

처음에 400에서 300으로 줄였더니 좀 올라갔죠. 그래서 다시 200으로 줄였더니, 너무 올라가더라고요. 250, 215, 214, 결국 213에서 정확히 알맞은 위치에 가더군요. 이렇게 조금씩 발전하고 있답니다.

​

※ 업그레이드 2

4월 15일 21대 총선. 점심 먹고 서너 시간 선거 방송보다 지루해서 노트북 켰어요.

홈페이지 커버 업그레이드 한번 더 했습니다. 무엇이 변경되었을가요?

네, 메뉴 위젯입니다.

지난 4월 1일, 메뉴 위젯을 커버 이미지 위에 올렸는데, 이 메뉴들이 잘 보이지 않는 것 같아서 공사를 했습니다.

메뉴 들어갈 부분을 별도 디자인으로 하기로 했어요.

처음엔 흰색 라인을 쳐 봤어요, 다시 박스를 넣고 반투명으로 해보기도 했죠.

무려 25번 수정 끝에 둥근 흰색 박스를 넣고, 가는 라인을 아래에 넣었습니다. 위젯과 센터 맞추기가 가장 까다로웠어요. 일단 오늘은 여기까지 했습니다.

이제 투표 마감시간이 임박했어요. 정리하고, 6시 15분에 출구조사 봐야죠.

​

■ 김태욱 강사/컨설턴트 T.010 3030 2023

- 홍보 분야: 홍보 종합, 언론 보도자료, 사회복지기관, 공공기관,기업 홍보 강의

- 스토리텔링 분야: 브랜드스토리마케팅, 스토리 개발, 퍼스널 스토리텔링 교육

- 소셜미디어 분야: 온라인 소셜 홍보, SNS콘텐츠, 블로그 인스타그램 교육

- 1기업 분야: 홍보마케팅 전략, 퍼스널 브랜딩, 창직(創職) 교육 코칭

* 교육형태: 전국 출장 강의, 소그룹 코칭, 그룹 워크숍