Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

2017년 5월 28일 일요일

[Theme2017] 테마 적용하기

Master/Detail 2017 테마에 대한 4번째 글입니다.
이번에는 제가 만든 테마를 적용하는 방법에 대해 포스팅을 하도록 하겠습니다.

우선 블로거 관리자 메뉴에서 테마로 가서 현재 테마를 백업받으시기 바랍니다.




이제 본격적으로 테마를 적용해 보겠습니다.

1. Master/Detail 2017 테마 적용

얼마전 블로그 소스들을 Github에 업로드 하였는데요.
아래 경로에서 xml 파일을 다운받겠습니다.

https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/Theme/MasterDetail2017/MasterDetail2017.xml

위 링크를 타고 이동해서 Raw 버튼를 우 클릭 후 다른이름으로 저장합니다.


다음 다시 블로거 관리메뉴 테마에서 다운로드한 xml 파일을 업로드 해주시면 됩니다.


업로드를 하시면 우선 기본적인것은 적용이 되었을 텐데요.
여기서 저와 같이 적용할지 아니면 각자 원하는 위젯들을 적용하실지는 여러분의 선택사항입니다.
우선 저는 제 위젯들을 하나씩 설치해 나가겠습니다.

2. 기본 js 세팅

레이아웃으로 가서 상단 Hidden 영역에 2개의 기본 스크립트 위젯들을 세팅하겠습니다.
Script / CSS 는 필요한 것이 있다면 설정을 해 나가는 곳으로...
필요없다면 지워주셔도 됩니다.


해당 위젯들을 열어보시면 내용이 모두 비어 있을 텐데요.
이를 채워줘야 합니다.
역시 Github로 이동합니다.

G1sUtil.js : https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/common/js/G1sUtil.js
G1sBlogger.js : https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/common/js/G1sBlogger.js

이번에는 소스를 다운받으실 필요까지는 없고, 소스를 복사하시기만 하면 됩니다.


전체 소스를 선택 후 복사합니다.
그리고 다시 블로거 레이아웃의 G1sUtil.js 편집을 연 후 스크립트 태그를 만든 후 그 안에 복사한 js 소스를 넣어줍니다.

<script>
<-- 붙여넣기
</script>


저장 한 후 G1sBlogger.js 도 동일하게 붙여넣습니다.

3. 카테고리 메뉴 적용

다음은 카테고리 메뉴를 적용 할 건데요.
블로거의 링크목록 가젯을 이용하여 링크를 구성하고, 
G1sNavigationList 위젯을 이용하여 해당 링크를 배치할 겁니다.


우선 링크목록 가젯을 세팅합니다.


사이트 이름과 URL을 설정해 주시면 되는데요.
사이트 이름과 정렬에 주의해 주세요.

메뉴는 2Depth 메뉴로 구성이 됩니다.

1Depth 메뉴, 즉 기본적으로 노출되는 메뉴는 일반적인 이름을 쓰시면 되고
2Depth 메뉴는 제일 앞에 언더바('_')를 하나 추가해 주시기 바랍니다.

1Depth 메뉴가 상위메뉴가 되고 그 밑에 있는 2Depth 메뉴는 하위 메뉴가 됩니다.

다음으로 G1sNavigationList 위젯을 세팅하겠습니다.
아래 Github 링크로 이동해 주세요.


이번에는 별다른 작업없이 소스 전체를 복사해 가젯에 붙여넣으시면 됩니다.


좌측의 카테고리가 우측처럼 정렬되었습니다.
1Depth 메뉴에 마우스를 올리거나, 우측 + 버튼을 누를경우 2Depth 메뉴가 열리게 됩니다.

4. Google OAuth 적용

구글 로그인 여부를 확인하고 로그인 안된 방문자에게 로그인 버튼을 노출하기 위해 구글 OAuth를 적용하였습니다.
하지만 이번 페이지에 적용하는 법을 모두 쓰기에는 글이 길어질 것 같네요.
우선 간단하게 소개하고, 자세한 것은 별도 포스팅으로 포스팅 하도록 하겠습니다.


역시 아래 Github 소스를 복사하여 붙여넣습니다.



소스중에 위와같이 Google Oauth ClientKey를 발급 후 <head> 적용 필요. 라는 글이 있을 텐데요.
네 다음 구글 개발 콘솔에서 Google Oauth ClientKey를 발급받아야 합니다.


키를 발급받은 후에는 

블로거 관리메뉴 > 테마 > html 편집으로 이동해서
<head> 태그부분에 주석되어있는 google-signin-clientk_id 메타태그의 주석을 푼 후
[YOUR_SECURE_KEY::Google OAuth ClientKey] 부분을 발급받은 Client Key를 넣어주시면 됩니다.


5. Feature 이미지 적용

다음은 블로그의 주요 포스트를 이미지 위주로 보여주는 Feature 이미지입니다.
정확히는 특정 태그를 보여주도록 되어 있습니다.


역시나 Github에서 소스를 복사해서 붙여넣으면 됩니다.

https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/widget/feeds/G1sFeature.html

소스를 붙여넣고 가장 하단에 보시면 아래와 같이 특정 태그의 Feed를 가져오도록 되어있는데요. 태그만 원하시는 태그로 변경해주시면 됩니다.


다음과 같이 지정한 태그의 이미지 포스트 3개가 노출됩니다.


6. G1sMainPost 적용

주요 소식도 Feature와 마찬가지로 지정한 태그의 포스트를 가져와서 인기소식의 UI 형태로 만드는 것입니다.


역시 Github에서 소스를 복사 후 태그만 바꿔주시기 바랍니다.

https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/widget/feeds/G1sMainPost.html


다음과 같이 주요소식과 동일한 형태로 포스트를 가져와 그려줍니다.
위젯 타이틀은 적당히 괜찮은 것으로 바꿔주시면 됩니다.
저는 '주요소식' 이라는 타이틀을 적용하였습니다.


7. G1sPostList 적용

이 위젯은 2012년에 만들어서 아직까지 잘 쓰고 있는 위젯입니다.
자세한 내용은 아래의 포스팅을 참고하셔도 좋을 것 같네요.

http://blog.g1s.kr/2012/02/blogger-label-posts-list.html



위 링크의 포스팅에 있는 소스를 사용하셔도 되며,
현재 제가 사용하고 있는것은 거기에 추가로 수정이 된 버전으로
아래 Github에 최신 소스가 있습니다.

https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/widget/feeds/G1sPostList.html


역시나 복사/붙여넣기만 해주시면 됩니다.
이 소스가 만들어진지 오래되다 보니 그전에는 별문제 없겠지.. 라고 생각했던 부분에서 약간의 문제가 있어서 언젠가 개선된 버전을 만들려고 생각중인데요.

포스트가 30페이지 즉 150개 이상 일경우 그 이상의 포스트를 보여주지 못한다는 겁니다.
언제 그렇게 포스팅을 하려나 했는데 어느덧 포스트가 150개를 훌쩍 뛰어넘었네요.

혹시라도 개선을 하게 된다면 이곳에도 업데이트 하겠습니다.



여기까지....
따로 언급하지 않은 부분인 CCL이나 광고영역은 각자 원하시는데로 적용을 하시면 됩니다.
물론 다른 위젯들도 더 추가하거나 원하시는데로 수정을 하시면 될 테구요.

아, 참고로 CCL은 아래 경로로 가시면 CCL 적용을 위한 소스를 발급받으실 수 있습니다.


2017년 5월 27일 토요일

[Theme2017] 테마 맞춤설정 수정 기능.

Master/Detail 2017 테마 에 대한 3번째 글입니다.
이번에는 테마의 맞춤설정 수정기능에 대해서 포스팅 하였습니다.
여기에서의 포스팅은 블로거의 기본적인 테마 맞춤설정 메뉴에 설명이라기 보다는 제가 만든 테마에 대한 맞춤설정 기능 설명이 주가 될 것입니다.



블로거의 관리화면에서 테마메뉴로 가면 위와같이 설정화면이 나오는데요.
이중 맞춤설정에서 블로거의 테마를 동적으로 수정할 수 있습니다.

테마의 맞춤설정을 보면 다음과 같이 5개의 메뉴가 있습니다.

테마/배경/너비 조정/레이아웃/고급

1. 테마

테마는 블로거에서 기본적으로 적용하는 테마들을 사용할 수 있습니다.
저는 자체 제작한 테마를 사용할 것이기 때문에 해당 메뉴는 쓸 일이 없을 것 같은데요.

기존 단순한 디자인의 테마들과 달리 동적뷰테마를 시작으로 최근에 새로운 테마들이 조금씩 올라오고 있는 편입니다.

하지만 저는 제가 만들걸 써야죠. ㅎㅎ


2. 배경

배경은 배경 이미지와 미리 정의 된 기본 색상 테마를 사용할 수 있습니다.
저는 제가 찍은 이미지 중에 하나를 선택해서 배경이미지로 사용중입니다.
기본 색상 테마는 딱히 고려를 하지 않고 만든거라 여기서 적용하기 보다는 고급에서 각각의 색상을 적용하는 것을 권장드립니다.


3. 너비조정

너비조정은 이번 테마에서는 해당 기능을 사용하지 못하도록 빼고 모두 고급설정의 각 메뉴에서 설정 할 수 있도록 적용하였습니다.

4. 레이아웃

레이아웃은 레이아웃 위젯영역을 바꿀 수 있지 않을까 싶은데요.
저도 아직은 해보지는 않았습니다.
해당 기능을 고려하여 만들기는 했는데 잘못하면 레이아웃이 다 깨질수도 있을 것 같네요.


5. 고급

고급에서 그외 다양한 기능을 설정할 수 있을텐데요.
제가 만든 테마의 편집 기능은 주로 이곳에서 수정할 수 있도록 구현을 한 상태입니다.
현재 고급의 메뉴는

Blog : 블로그 전체적으로 적용 될 설정
헤더 : 상단 헤더 영역의 설정
Master : 좌측 마스터 영역의 설정
Detail : Detail 영역의 설정
Mobile : 모바일 모드와 관련 된 설정
CSS 추가 : 블로거 기본 기능으로 추가 CSS 사용을 위한 메뉴

각각에 대해 간단하게 보겠습니다.

Blog

블로그 전체적으로 적용 될 설정으로 배경색과 제목 글꼴을 설정 할 수 있습니다.
배경 색은 배경메뉴에서 이미지를 선택하였다면 적용이 되지 않으니 배경에서 이미지 적용한 것을 해제 후 설정을 해주시면 됩니다.


헤더

상단 헤더영역의 배경색, 높이, 글꼴, 폰트 색등을 설정할 수 있습니다.


Master

좌측 마스터 영역에 대한 설정으로
배경색, 글꼴(기본, 제목), 색(기본, 링크), 영역의 넓이를 설정 할 수 있습니다.


Detail

디테일 영역의 대한 설정으로
위젯영역들의 반투명한 배경색, 최대 넓이, 글꼴(기본, 제목), 글꼴색(기본, 링크)을 설정할 수 있습니다.


Mobile

모바일과 관련된 설정으로 현재는 Max Width 하나의 설정밖에 없습니다.
이 설정은 해당 값 이하일 경우를 모바일로 본다는 뜻으로 이에 따라 각 영역에 대한 배치가 달라집니다.


CSS 추가

블로거에서 기본적으로 제공하는 기능으로 CSS를 적용하고자 할때 사용하는 메뉴입니다.
하지만 저는 이곳에 스타일을 적용하기보다는 레이아웃에 숨겨진 위젯을 만들어 CSS를 적용하는 방식을 즐겨 사용하고 있어 이 메뉴는 사용하지는 않고 있습니다.



[Theme2017] 레이아웃 영역 구분

Master/Detail 2017 테마 적용에 대한 두번째 포스팅이네요.
지난번 포스팅에 이어 적용한 레이아웃의 상세 설명 부분입니다.


히든 영역        (빨간색) : 실제로 보이지 않는 영역으로 Javascript/CSS 등 배치.
헤더 영역        (주황색) : 기본 메뉴버튼에 추가로 로그인, 글쓰기 등의 위젯 삽입.
마스터 영역     (노란색) : 블로그제목, 검색, 메뉴, 통계, 구독, CCL 라이센스 위젯 삽입.
광고 영역        (초록색) : 현재 광고 심사중.
메인 전용 영역 (파랑색) : 메인에서만 보이는 위젯 영역.
포스트 영역     (남색) : 포스트 영역으로 포스트리스트 위젯 추가.
푸터 영역        (보라색) : 블로그보관함, 태그, 상단이동 버튼 위젯 추가.



현재 적용한 테마의 블로그 레이아웃 설정에 대해서 위와 같이 7가지 영역으로 나누어 설명할 수 있다고 했었는데요.
이에 대해 좀 더 상세하게 설명하도록 하겠습니다.

1. 히든영역

빨간색 부분으로 실제로는 보이지 않으며,
주로 블로그의 기능과 디자인을 담당할 Javascript, CSS 부분을 삽입할 영역입니다.



2. 헤더 영역

주황색 부분으로 기본적으로 Master 영역을 닫았다 열 수 있는 메뉴 버튼이 좌측에 존재하며,
추가로 우측에 위젯을 넣을 수 있는 영역이 있습니다.
저는 현재 구글 OAuth을 연동한 로그인과, 글쓰기(편집자용) 기능을 위젯으로 만들어 넣어주었습니다.



3. Master 영역

노란색 영역으로 화면이 넓은 PC나 테블릿에서는 Left Side에 보여지며,
모바일에서는 Navigation Drawer 형태로 보여질 영역입니다.
블로그 헤더, 검색, 메뉴, 통계, 구독, CCL 등 위젯을 넣었습니다.


4. 광고 영역

초록색 영역으로 광고나 혹은 Detail 영역 상단에 공통적으로 넣고 싶은 부분이 있다면 추가할 수 있는 영역입니다.
기존 애드센스를 사용하고 있었으나 현재는 개편을 하면서 블로그 도메인도 사서 변경을 하였는데,
도메인이 바껴 애드센스에서 승인을 안해주고 있어 사용을 안하고 있는 상태입니다.
현재 헤더 아래 비어있는 영역이 해당 영역입니다.



5. 메인 전용 영역

파란색 부분은 메인에서만 보이는 영역입니다.
주요 포스트를 이미지 위주로 보여주고 있는 Feature 영역과 블로거 기본위젯인 인기소식, 그리고 인기소식과 스타일을 맞춰 자체 제작한 주요 소식을 적용했습니다.



6. 포스트 영역

남색 영역은 블로그 포스트가 위치한 메인 영역으로 포스트 리스트 위젯를 상단에 배치했습니다.
추후 메인에서는 상단 위젯을 안보이게 바꾸고, 포스트도 간략한 스니펫 형태로 나오게 수정할 계획입니다.



7. 푸터 영역

마지막 보라색 영역으로 블로그보관함, 태그 위젯 및 상단으로 이동할 수 있는 상단버튼을 위젯으로 추가하여 배치하엿습니다.




[Theme2017] 반응형 디자인을 적용한 블로그 디자인 적용

며칠전 블로그를 테마부터 레이아웃, 그에 맞는 위젯까지 대대적으로 개편을 하였습니다.
이번에 테마에 대해 Master/Detail 2017 테마 라고 나름대로 이름을 붙였습니다. ㅎㅎ

테마를 수정하기 시작한 것은 1년 전부터였으나...
일이 바빠 손을 놓고 있다가 며칠전부터 어느정도 여유가 생겨 수정한 결과를 블로그에 적용하였습니다.



이번 블로그를 꾸미면서 중점을 둔 것은 다음과 같습니다.

1. 모바일 웹 UI를 고려한 반응형 디자인.
2. 블로거의 기능인 테마, 레이아웃, 위젯을 사용한 편집기능 활용.
3. 메인 화면만을 위한 고유 UI 적용.

아직 디자인 적인 부분은 부족한 것이 많지만 기능적인 면에서는 위 3가지를 어느정도 충족한 것 같아 1차적으로 블로그에 적용을 한 상태입니다.
나머지 부분은 조금씩 수정을 해나가면서 적용을 할 수 있을 것 같네요.

그럼 간단하게 현재 수정 된 블로그에 대해서 설명을 하고 다음 포스팅에서 지금 적용한 탬플릿을 사용하고 싶으신 분이 있다면 어떻게 적용할 수 있는지 설명을 드리도록 하겠습니다.

링크 >> [Theme2017] 테마 적용하기

1. 모바일 웹 UI를 고려한 반응형 디자인.

우선 첫번째, 이번 개편에서 가장 우선시 한 부분으로 이를 위해 블로거에서 기본적으로 제공하는 모바일 UI를 사용안함으로 설정하고 기본적인 UI에서 웹환경과 모바일 환경을 고려한 디자인을 하기로 하였습니다.

다행히 요즘 사이트들 중에 참고할 만한 사이트들이 많이 있는데요.
그 중에 Master와 Detail로 영역을 나눠서 브라우저 넓이에 따라 반응하여 레이아웃을 다르게 가져갈 수 있는 Master/Detail 형태의 디자인으로 만들었습니다.

넓이가 일정 이상(PC,태블릿)일 경우 Master 영역을 Left Side에,
일정 이하일 경우(모바일) Master 영역을 숨겼다가 메뉴버튼을 누르면 Detail 앞으로 나오는 형태의 Navigation Drawer 형태가 됩니다.


윈도우용

모바일용

2. 블로거의 기능인 테마, 레이아웃, 위젯을 사용한 편집기능 활용.

다음으로 단순히 HTML로 수정을 할 경우 고정 된 형태로 되어 레이아웃을 수정할 때마다 일일이 소스를 수정을 해야할 텐데요.
다행히 블로거는 이러한 것을 편하게 레이아웃의 위젯기능과 테마의 맞춤설정에서 고정값이 아닌 동적인 값인 옵션형태로 수정할 수 있도록 기능을 제공하고 있습니다.

우선 레이아웃을 보면....


빨주노초파남보. 7가지 부분으로 구분을 할 수 있겠네요. ㅎㅎ

히든 영역        (빨간색) : 실제로 보이지 않는 영역으로 Javascript/CSS 등 배치.
헤더 영역        (주황색) : 기본 메뉴버튼에 추가로 로그인, 글쓰기 등의 위젯 삽입.
마스터 영역     (노란색) : 블로그제목, 검색, 메뉴, 통계, 구독, CCL 라이센스 위젯 삽입.
광고 영역        (초록색) : 현재 광고 심사중.
메인 전용 영역 (파랑색) : 메인에서만 보이는 위젯 영역.
포스트 영역     (남색) : 포스트 영역으로 포스트리스트 위젯 추가.
푸터 영역        (보라색) : 블로그보관함, 태그, 상단이동 버튼 위젯 추가.

하나씩 설명하기에는 글이 길어지니 자세한 부분은 다음글에서 설명하기로 하겠습니다.

링크>> [Theme2017] 레이아웃 영역 구분

다음으로 테마의 맞춤설정을 보면 다음과 같이 5개의 메뉴가 있습니다.

테마/배경/너비 조정/레이아웃/고급

테마는 블로거에서 기본적으로 적용하는 테마들을 사용하는 것으로 생략.


배경은 배경 이미지와 미리 정의 된 기본 색상 테마를 사용할 수 있습니다.


너비조정은 이번 테마에서는 해당 기능을 사용하지 못하도록 빼버렸습니다.

레이아웃은 레이아웃 위젯영역을 바꿀 수 있지 않을까 싶은데요. 저도 아직은 해보지는 않았습니다. 해당 기능을 고려하여 만들기는 했는데 잘못하면 레이아웃이 다 깨질수도 있을 것 같네요.


고급에서 그외 다양한 기능을 설정할 수 있는데요. 테마의 편집 기능은 주로 이곳에서 수정할 수 있도록 구현을 한 상태입니다.


자세한 설명은 길어지니 역시 자세한 것은 다음 포스팅에서 설명 하도록 하겠습니다.

링크>> [Theme2017] 테마 맞춤설정 수정 기능.

3. 메인 화면만을 위한 고유 UI 적용.

블로거에서 제공하는 기본 테마들은 동적뷰와 최근에 추가 된 몇개의 테마들을 제외한 기존 테마들에서는 메인과 포스트 영역을 큰 구분없이 유사한 레이아웃으로 사용을 하고 있었습니다.

이에 메인화면에서 좀 더 다양한 컨텐츠들을 노출할 수 있도록 수정을 하였습니다.

이 부분에 대해서는 위에 레이아웃을 설명하면서 잠깐 언급이 되었는데요.

메인에서만 노출되는 위젯 영역을 추가하였으며,
추후 포스트영역을 스니펫 영역으로 수정할 계획입니다.

아래 부분이 현재 메인에서만 노출되고 있는 영역으로..


상단 이미지 형태위주로 주요 포스트만 노출하고 있는 Feature 영역과
스니펫 형태의 기본 제공 위젯인 인기소식 위젯과
동일한 형태 특정 태그의 위젯을 보여주고 있는 주요소식 위젯을 배치하여
메인에서 주요한 포스트들을 소개하고 쉽게 접근할 수 있도록 만들었습니다.


고생해서 만든 만큼 자랑을 하고 싶은 마음에 글이 길어졌네요.
레이아웃과 테마에 대한 자세한 설명과 위 테마를 어떻게 적용할 수 있는지는 별도의 포스트에서 소개하도록 하겠습니다.