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="https://mapoo.net/owner/entry/post" class="jb_sns jb_sns_twitter"><i class="fa fa-twitter-square"></i></a>
      <a href="https://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(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 'Nanum Gothic' */
@font-face{font-family:'Nanum Gothic'; src:url('https://mapoo.net/downfiles/nanumgothic.woff')}
@font-face{font-family:'Nanum Gothic'; src:url('https://mapoo.net/downfiles/nanumgothic.eot')}

블로그 엔진 업그레이드와 스킨 수정

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다