블로그 스킨, 반응형으로 교체

 

20141219

 

하루종일 티스토리 블로그 스킨 교체작업을 했다.

아무래도 난 공순이가 되었어야 했다는 생각이 심하게 들었다^.^ㅎㅎㅎ

 

마크쿼리 반응형 블로그 스킨을 적용시켜 보았다.

http://markquery.com/

 

 

이전부터 반응형 스킨에 도전해보고 싶었는데, 드디어 짬이 나서 시도...!!

 

 

반응형 스킨이란?

화면 크기에 따라 스킨의 크기가 자동으로 바뀌는, PC 외에도 모바일 등 화면이 작은 디바이스 환경에 알아서 최적화되는 스킨

 

그래서 이렇게 창이 작아져도 깔끔하게 표시가 된다.

'

 

 

 

여기저기 뜯어보며 수정했는데... 적응하기 좀 힘들었다.ㅜㅠㅜㅠ

그래도 여차저차 해서 마음에 드는 수준으로까지는 완성했다.

아직 조금 복잡한 것 같아서 다듬을 생각.

 

 

 

수정한 부분들

 

일일이 야매로 한거라....... 블로그가 돌아가는 게 놀랍다^_^

 

상단 커버 이미지

커버이미지는 cover.jpg를 따로 제작해서 넣으면 된다.

다만 가로/세로 비율을 지정해 입력해 줘야 한다.

(참고: http://markquery.com/docs/responsive-cover-image/)

 

네비게이션바

skin.html에 <div id="menu-layout">~~~를 검색해 이런 애들을 추가해주면 된다.

  <li role="menuitem"><a href="/location">Location</a></li>
  <li role="menuitem"><a href="/media">Media</a></li>
  <li role="menuitem"><a href="/guestbook">Guestbook</a></li>

 

 

T, A+, A- 부분

원래있던 SNS 공유 부분은 삭제하고, 프린트 버튼도 삭제했다.

 

타이틀 폰트

style.css에 이런 애를 추가했다.

.entry-title {
font-weight:lighter ;  FONT-FAMILY: 휴먼편지체,나눔고딕,돋움,Sans-serif; font-size: 25px;}

옛날에 어디 블로그에서 알게됐는데....!

아무래도 제목을 휴먼편지체로, 휴먼편지체가 없으면 나눔고딕으로.... 돋움으로... 표시해주는 걸로 기억한다.

 

 

관리자 메뉴

노란색으로 경고창처럼 뜨는게 싫어서~ 아예 밀어버리고 다른 스킨에서 떼어왔다.

<!-- Entry : admin
================================================== -->
뒷부분을 싹 밀고 이걸로 대체 

<s_ad_div>
<div class="article_admin">
 <a href="">수정</a> : <a href="#" onclick="">수정(창으로)</a> | ()→ <a href="#" onclick=""></a> | <a href="#" onclick="">관련글(트랙백)</a> | <a href="#" onclick="">삭제</a>
</div></s_ad_div>
</p></p>

 

사이드메뉴에 캘린더 추가

사이드메뉴에서 Link같은 쓰지 않는 건 지우고, 태그 뒤에 캘린더를 추가했다.

캘린더를 잘 쓰는지라~

  <s_sidebar_element>
 <!-- Calendar -->
 <div class="widget">
  <div class="widget-inner">
  <h3>Calendar</h3>
   <ul>
    <s_rctrp_rep>
    <li>
    

«   2024/11   »

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

</span></a>
    </li>
    </s_rctrp_rep>
   </ul>                        
  </div>
 </div>
 </s_sidebar_element>

 

 

캘린더 꾸미는 건, style.css로 수정해야 한다.

근데 뭘 잘못했는지 줄간격이 달라서.......... 수정을........... 하........아.......... 

 

+) 캘린더수정

위엘 보면, div class가 widget-inner로 되어있다. 이 class 로 설정되어 있으니 링크에 효과가 걸리면서.... 줄간격이 흐트러졌다.

어떻게 수정하면 될지 모르겠어서 아예 class를 바꿔버렸다. CSS 부분을 뜯어보니, widget-feed-inner라는 게 있길래..

<div class="widget-feed-inner">

로 그냥 바꿔버렸다! 그랬더니 잘 출력된다^_^다행

ctrl+f로 찾아봤을 때 widget-feed-inner는 안쓰였던데.. 원래 뭘위해 만들어진 feed-inner인지를 모르겠다 ㅋㅋㅋ  (지워버렸나?)

되기만하면 됐지.

 

그밖에 CSS부분에 추가해서 꾸미기 요소를 추가 해줬다.

/* 달력 월 표시 */
.cal_month {color:#959595; font-size: 14px; background:#f6f6f6; font-weight:bold; font-family:Tahoma, Verdana, sans-serif; margin:10px}
.cal_month a {color:#959595;}
/* 달력 요일 표시(th 영역) */
.cal_week1 {color:#767676; text-align: center; font-weight: normal; font-size: 13x; padding:5px;
border-bottom:1px solid #d5d5d5; }
/* 달력 일요일 표시(th 영역) */
.cal_week2 {color:#dc0a25; text-align: center; font-weight: normal; font-size: 13px;
border-bottom:1px solid #d5d5d5; }
/* 달력 Week(tr 영역)  */
.cal_week {}
.cal_current_week {}
/* 달력 Day(td 영역) */
.cal_day {color:#959595; text-align: center; font-size: 13px; font-family:Tahoma, Verdana, sans-serif; padding:5px;}
/* 달력 Day, 일요일 (td 영역)  */
.cal_day_sunday {}
.cal_day_sunday a {}
/* 달력 지난 달 날짜 표시(td)   */
.cal_day1 {}
/* 달력 다음 달 날짜 표시(td)   */
.cal_day2 {}
/* 달력 이번 달 날짜 표시(td) */
.cal_day3 {}
/* 달력 오늘 날짜 표시(td) */
.cal_day4 {color:#dc0a25; font-weight: bold; text-decoration:underline;}
/* 달력 글쓴 날 링크 스타일 */
a.cal_click:link {color:#868686; font-weight: bold; text-decoration:underline;}
a.cal_click:visited {color:#868686; font-weight: bold; text-decoration:underline;}
a.cal_click:hover {color:#868686; 딕-weight: bold; text-decoration:underline;}

 

 

페이징

페이지 버튼을 수정하고는 싶은데, 모르겠어서~ 마크쿼리 커뮤니티에서 능력자님의 댓글을 참고해서 고쳤다.

.pagination li a, .pagination li span {
    padding: 6px;
    line-height: 1.42857;
    text-decoration: none;
    margin-left: -1px;
    position: relativer;
    border: medium none;
    color: #000;
    font-size: 12px;
    border: none;
}

 

여기서 아마 밑에 ul.pagination .interword 에서

  border: 어쩌고 저쩌고~~ 라고 되어있을텐데,

  border: none; 으로 바꿔줘야 '...'부분에 필요없는 밑줄이 사라진다.

 

footer

<footer role="contentinfo">를 검색해 원하는 부분을 고치면 된다.

 

그밖에 링크폰트 색상교체

링크가 파란색 계열로 표시되는데, 너무 튀는 것 같아 회색으로 고쳤다.

style.css에서 global link style.. 뒷부분을 고치면 된다.

내가 아는거랑 좀 달라서.... 잘 모르겠어서 그냥 밀고 다시 썼다.

 a:link {color: #000000; text-decoration: none;}
      a:visited {color: #000000; text-decoration: none;}
      a:hover {color: #8c8c8c; text-decoration: underline;}
      a:active {color: white; background-color: #f4f4f4;}

 

걱정됐는데 다행히 정상적으로 출력됨 ㅎㅎㅎㅎ

visited는 방문했던 링크, hover은 마우스 올렸을 때, active는 실행될 때 상태이다.

 

+) 키워드 기능을 사용하게 되면서,

본문 내의  키워드도 모두 하이퍼링크이다보니... 싸잡아서 바뀌게 되는게 싫었다. 그 과정에서 Style.CSS 부분에 키워드 부분은 위 소스를 따르지 않게 다음을 추가했다.

/* 키워드 */

.key1 { color: inherit ; border-bottom: 1px dotted #000000; }

'inherit'의 의미는 정해진 스타일을 그대로 따르겠다는 뜻이다. 그러니 본문에서 장한 색상을 따르게 하려면 inherit으로 해주면 된다.

관련글: 키워드기능 사용하기 포스팅<-클릭

 

태그에 마우스 올리면 파란색으로 변하는 것도 시행착오를 거치며... 수정하면 된다.

Such a 노가다

 

티에디션도 반응형으로

이부분은 정말 잘 모르겠어서~ 하라는대로 했다. ㅎㅎㅎ 동영상 강의를 참고하세요.

참고 : http://markquery.com/docs/tistory-responsive-tiedition-patterns/

 

제발!!!!!! html/css수정하기 전에!!! 티에디션 해제하고 수정하세요!!!

하루 종일 이것 땜에 삽질 ㅎㅎㅎㅋㅋㅎㅋㅎㅋㅎㅋㅎㅋㅎㅎㅋ

해제 안하고 건들이면... 폭이 줄어들어서 다 다시 해야합니다ㅜㅠㅜㅠ

Such a 노가다2

인간은 같은 실수를 반복 ㅠㅜㅠㅜㅠㅜㅠㅜ