블로그 스킨을 반응형 Odyssey로 변경한다.

2013년 9월부터 사용했던 neutral 스킨을 떠나보내고... Odyssey (오디세이) 스킨으로 바꾸기로 하였다.

이유는 '모바일웹 자동연결'을 사용하지 않기로 결정했기 때문이다. 

티스토리 모바일웹에서는 내가 추가하는 <script> 태그가 먹히지 않는데, 이를 시정하려면 반응형 스킨으로 모바일 전용 웹페이지를 구현해놓고 자동연결을 해제해야 한다.

 

본래는 이 스킨을 반응형 스킨으로 개조하려고 했는데... 그게 어렵더라. 잘 안된다.

그래서 안타깝지만 이제 7년동안 달아놓은 스킨과는 작별하기로 하였다.

(neutral 스킨의 마지막 모습)

비록 스킨은 Odyssey로 바꾸지만, 가급적 예전에 사용하던 스킨과 비슷하게 개조하도록 하겠다.

* 개조 내역

프로필 이미지, 블로그 설명, 공지사항, 카테고리, 달력, 카운터 외에는 전부 안 보이게 처리.

게시물 제목 뒤에 백그라운드 이미지 안 뜨게 조치.

게시물·방명록 댓글 수정 버튼 오류 수정.

- <li><a href="#" onclick="">수정</a></li> 태그를 주석처리.

- 옆의 '삭제'를 '수정/삭제'로 명칭변경.

CSS 세부 사항 변경

- 게시물 제목 영역(#tt-body-page .main) 이 너무 넓어서 줄임. 470px에서 200px로 수정.

- 블로그 로고 세로길이(.header .link_logo img) 를 18px에서 45px로 수정.

- 모바일 페이지용 inner-header의 padding-top을 50에서 70으로 수정.

- 모바일 페이지용 area_gnb의 margin-top을 30에서 5로 수정.

- 데스크탑 페이지용 area-main (본문 영역)의 max-width를 넉넉하게 760px로 수정.

- 데스크탑 페이지용 (.wrap-right .area-aside)의 위쪽 margin을 32px에서 1px로 수정.

- 프로필 사진(img-profile)의 border-radius를 0으로 수정. 140x140 출력에서 260x195 출력으로 수정.

- 달력의 지난달(a:first-child:before) 의 left값을 0으로 수정.

- 달력의 다음달(a:last-child:before) 의 right값을 0으로 수정.

- 카테고리 글 목록(.article-type- .reply)에서 댓글 표시가 되지 않은 걸 되도록 수정. (display:none 부분을 주석 처리)

- 본문 제목 영역 (.article-header) 의 세로 픽셀을 400px에서 220px로 수정.

- 본문 제목 크기 (.article-header .title-article) 를 48pt에서 24pt로 수정. (모바일도 24pt로 수정)

- 커버/단순 텍스트 타입/타이틀(.area-cover .title-cover)의 min-height를 12px 로 줄이고, font-size를 36pt로 수정.

- 데스크탑의 본문 영역 글자 크기(.article-view p) 를 16pt에서 14pt로 변경.

- 전체적인 (body) 폰트로 '맑은 고딕'을 우선적으로 사용하도록 변경. 

  (이유를 알 수 없지만 모바일에서는 차순위인 '나눔고딕'이 먼저 나오는데, 수정하지 않음)

- 전체적인 (body) 줄 간격 (line-height) 를 1.5로 지정.

- 오른쪽 메뉴의 <b> 태그를 적용한 글씨는 (.area-aside b) 맑은 고딕을 우선적으로 사용하도록 변경.

- 블로그 메뉴에 커서를 올릴때 (.header .topnavmenu > ul > li:hover > a:after) 밑줄이 조금 아래쪽에 나오도록 top값을 20px로 수정.

- 표의 padding 값(.article-view table tr td)을 7px에서 1px로 수정. 

- 이미지(#tt-body-page .area-view img)에 테두리 추가. (border:1px solid #ddd;)

'카테고리 다른 글 보기' 플러그인이 활성화 되도록 수정.

(CSS의 .another_category의 display:none 부분을 주석 처리)

'카테고리 다른 글 보기' 에 테두리가 그어지지 않도록 수정. (.another_category 밑에다 아래 내용을 추가)

.another_category table {

border:none;

}

.another_category tbody {

border:none;

}

.another_category table tr {

border:none;

}

.another_category table tr td {

border:none;

}

.another_category table tr th {

border:none;

}

본문 밑줄(u)이 글자 맨 아래와 겹치지 않도록 수정. (body 밑에다 아래 내용을 추가)

u {

    text-decoration-line: underline;

    text-underline-position: under;

}

검색, 방명록 화면에서도 페이지를 넘길 수 있도록 수정.

(#tt-body-guestbook .area-paging 의 display:none 부분을 주석 처리)

태블릿, 휴대폰에서 관련사이트 목록이 위쪽으로 나오도록 수정.

@media screen and (max-width: 1060px)

#footer .box-site ul

top, bottom 값 모두 주석 처리.

2019~2020년에 작성되었던 모든 게시물의 CCL을 '저작자표시' - '비영리' - '변경금지' 로 처리. 그리고 모든 게시물의 CCL 표시 비활성화.

관리자로 로그인한 경우 본문 최상단에 관리자 메뉴가 뜨도록 설정 (<div class="article-view"> 위에다 아래 내용을 추가)

<s_ad_div>

<div class="admin">

<center>

<font size=2>

<table border=1 style="border-collapse:collapse" bordercolor="#b7bbb5"> <tr>

                <td width=100>

<script type="text/javascript">

var modify1 = decodeURIComponent(location.href);

var modify2 = decodeURIComponent(location.pathname);

modify2 = modify2.replace("/","");

document.write('<a href="/admin/entry/post/?id=' + modify2 + '&returnURL=' + modify1 + '" title="글수정">수정(구에디터)</a>');

</script>

</td> 

<td width=100>

<a href="" title="글수정">수정(신에디터) </a> </td> 

<td width=100>

<a href="#" onclick="" title="글수정(새창으로)">수정(새 창)</a> </td>

<td width=100> ()→<a href="#" onclick=""></a> </td>

<td width=100><a href="#" onclick="" title="트랙백전송">트랙백</a> </td> 

<td width=100><a href="#" onclick="" title="글삭제">삭제</a>

</td></tr> </table>

</font>

</center>

</div>

</s_ad_div><br>

(* 2021.02.28 : 구에디터 지원하도록 수정.)

PC 검색창에 검색 버튼을 추가하고 디자인 상 투명버튼 처리 (<div class="search"> 속을 아래 내용으로 변경)

<s_search>

        <input class="searchInput" type="text" name="" value="" placeholder="Search..." onkeypress="if (event.keyCode == 13 ) { requestSearch('.util.use-top .searchInput') }">

        <button type="submit" style="opacity:0" onclick="{ requestSearch('.util.use-top .searchInput') }">검색</button>

    </s_search> 

댓글 및 방명록 placeholder - '내용을 입력해주세요.' 뒷부분에 '(로그인 한 사용자만 댓글 작성 가능)' 이라는 문장 추가.

맨 위로 화면을 올리는 기능 추가.

표에 스크롤을 구현하는 기능 추가.

마우스 우클릭 및 드래그 방지 / 부분허용 기능 추가. 

(블로그 주인에 한해 전면허용 되도록 개조. 방법은 여기에다 작성함.)

* 2020.12.31

블로그 상단 메뉴 / 본문 제목 영역 세로 길이 축소. (CSS값 수정) : 링크를 참조.

* 2020.01.02

관련사이트 목록 투명링크 버그 수정 : 링크를 참조.

* 개조 중에 참고한 게시물

맨 위로 화면을 올리는 기능 : https://sometimes-n.tistory.com/17

표에 스크롤을 구현하는 기능 : https://nubiz.tistory.com/445 에서 일부 수정.

마우스 우클릭 및 드래그 방지 기능 / 부분 허용 기능 : https://lee-life.tistory.com/52 에서 일부 수정.

검색창 수정 : https://starggangsol.tistory.com/5 에서 일부 수정 / https://mingggu.tistory.com/74 

CCL 표시 비활성화 : https://bigenergy.tistory.com/775

--------------------------