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
인간은 같은 실수를 반복 ㅠㅜㅠㅜㅠㅜㅠㅜ
