mapoo.kr 도메인이 2014년 6월 1일 부로 만료되어 mapoo.net 도메인만 운영하기로 하고,
오래간만에 텍스트큐브 엔진을 업그레이드 하였다.
엔진 업그레이드는 TextCube 텍스트큐브 업그레이드하기 포스트를 참조.
2014년 5월 27일에 갓 출시된 1.9.3 버전으로 엔진을 업그레이드 하면서 스킨도 변경했고,
스킨은 jb_just_white_v04 이며 아래와 같이 수정함.
1. 블로그 폭 변경
전체폭 940px(기존) -> 1020px (= 780 + 220 +20)
본문폭 620px(기존) -> 780px 으로 변경
사이드바폭 300px(기존) -> 220px 으로 변경
vim /home/xxx/skin/blog/jb_just_white_v04/style.css --> 7 ~ 32 라인 사이
#jb_header_wrap {width: 1020px; margin: 0px auto 0px auto; padding: 30px 20px 30px 20px; background-color: #ffffff;}
#jb_header_wrap:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#jb_header_site_title {float: left;}
#jb_header_sns {float: right; margin-top: 20px;}
#jb_top_menu_area {}
#jb_top_menu_wrap {width: 1020px; margin: auto; padding: 0px 20px; margin-bottom: 20px; background-color: #ffffff;}
#jb_top_menu {border-top: 1px solid #bcbcbc; border-bottom: 1px solid #bcbcbc;}
#jb_top_menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#jb_blog_menu {float: left;}
#jb_category_menu {float: right;}
#jb_slider_area {}
#jb_slider_wrap {width:1020px; margin: 0px auto 0px auto; padding: 0px 20px 0px 20px; background-color: #ffffff;}
#jb_slider {}
#jb_main_area {}
#jb_main_wrap {width: 1020px; margin: 0px auto 0px auto; padding: 0px 20px 0px 20px; background-color: #ffffff;}
#jb_main_wrap:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#jb_main_content {float: left; width: 780px;}
#jb_main_right_sidebar {float: right; width: 220px;}
#jb_footer_area {}
#jb_footer_wrap {width: 1020px; margin: 0px auto 0px auto; padding: 5px 20px 5px 20px; background-color: #ffffff;}
#jb_footer_wrap:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#jb_footer_1 {width: 300px; float: left; margin-right: 20px;}
#jb_footer_2 {width: 300px; float: left;}
#jb_footer_3 {width: 300px; float: right;}
#jb_copyright_area {}
#jb_copyright_wrap {width: 1020px; margin: 0px auto 0px auto; padding: 5px 20px 5px 20px; background-color: #ffffff;}
2. 광고 제거 및 메뉴 위치 변경
vim /home/xxx/skin/blog/jb_just_white_v04/skin.html --> AdSense(광고) 293 ~ 295 라인 주석처리
<s_sidebar_element>
<!-- AdSense -->
<!--<div style="float: right; width: 300px; height: 250px; background-color: #bcbcbc; margin: 5px 0px 10px 20px; text-align: center;">
<p><strong>AdSense</strong></p>
</div>-->
</s_sidebar_element>
435 라인부터의 Notices와 Search 메뉴의 상하 변경
<!-- Search -->
<div class="jb_sidebar jb_sidebar_search">
<h3><i class="fa fa-search"></i> Search</h3>
<s_search>
<p>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }" class="jb_form_text" />
<input type="submit" value="Search" onclick="" class="jb_form_submit" />
</p>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- Notices -->
<div class="jb_sidebar jb_sidebar_notice">
<h3><i class="fa fa-volume-up"></i> Notices</h3>
<s_rct_notice>
<ul>
<s_rct_notice_rep>
<li><a href=""></a></li>
</s_rct_notice_rep>
</ul>
</s_rct_notice>
</div>
</s_sidebar_element>
3. 메인페이지 이미지 변경
기본 제공되는 이미지는 블로그 스타일과 맞지 않는다.
따라서 웹에서 구한 이미지를 포토샵으로 900 * 300 사이즈로 리사이징 하여 올려서 변경함
/home/xxx/skin/blog/jb_just_white_v04/images 디렉토리내의
slider-01.png, slider-02.png, slider-03.png 이미지를 변경
4. 메인페이지 이미지 문구 변경
/home/xxx/skin/blog/jb_just_white_v04/skin.html --> 134라인
<a href="#"><img src="./images/slider-01.png" title="Powered by OpenSource." /></a>
5. favicon 변경
아래 사이트에서 이미지 파일을 icon 파일로 변경 후 관리자 페이지에서 변경.
http://converticon.com
만약 반영이 안될 경우 웹 브라우져의 쿠키, 웹사이트데이터 등을 삭제 후 웹브라우져를 재실행하면 반영된것이 보인다.
그리고 모바일페이지의 글목록에서의 이미지 변경
/home/xxx/resources/style/iphone/images 디렉토리내의
noPostThumb.png, textcube_logo.png 파일을 변경한다.
6. 새글, 관리자 페이지 링크
jb_just_white_v04 스킨은 별도의 새글, 관리자창 링크 버튼이 없다.
따라서 잘 사용하지않는 상단의 트위터와 구글플러스 링크버튼을 링크걸어서 사용함
/home/xxx/skin/blog/jb_just_white_v04/skin.html --> 104라인
<a href="http://mapoo.net/owner/entry/post" class="jb_sns jb_sns_twitter"><i class="fa fa-twitter-square"></i></a>
<a href="http://mapoo.net/owner" class="jb_sns jb_sns_gplus"><i class="fa fa-google-plus-square"></i></a>
7. 폰트 배포 서버 변경
폰트를 구글 서버에서 받아오면 폰트가 바뀌는게 눈에 띌 정도로 조금 느린 단점이 있다.
따라서 기존 구글 서버에서 받아오는 나눔고딕 css 폰트를 블로그서버 저장된 곳에서 받아오도록 변경하여 폰트 적용시간을 단축시키는 방법을 사용한다.
나눔고딕 2.0을 웹에서 다운받아서 윈도우에 설치 후 설치된 윈도우 ttf 폰트를 sfnt2woff, EOTFAST-1 프로그램으로 각각 woff와 eot 포맷 형태로 변환한다.
블로그 서버의 특정 디렉토리에 저장 후 아래처럼 적용한다.
/home/xxx/skin/blog/jb_just_white_v04/style.css 파일의 2라인을 주석처리하고 2줄을 추가한다.
/* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 'Nanum Gothic' */
@font-face{font-family:'Nanum Gothic'; src:url('http://mapoo.net/downfiles/nanumgothic.woff')}
@font-face{font-family:'Nanum Gothic'; src:url('http://mapoo.net/downfiles/nanumgothic.eot')}