Category: 여기는 티스토리/내컴터 팁이에유 2018. 7. 23. 01:15
[Tip] 티스토리 Html/Css/Script 최적화 팁
티스토리 Html/Css/Script 최적화 팁
zc_category.css
아는 분은 알겠지만 자유도가 높은 블로그로는 단연 티스토리가 탑이다
필수적으로 사용해야만 하는 블로그 치환자 몇 개를 포함하더라도 자신이 원하는 그대로 블로그를 꾸밀 수 있기 때문이다
오늘은 그 와중에도 부득이하게 수정할 수 없었던 부분을 html/css 수정함으로써 또는 스크립트를 추가함으로써 보다 더 만족스러운 형태로 블로그를 만들어가는 팁 몇 가지를 적어 본다
아래에 설명된 팁들은 언제나 동일 효과를 볼 수 있다고 장담할 수 없으며, 필히 블로그에 적용 전에 관련 파일을 백업한다던가 하는 작업이 필요하다
가장 효과적인 방법은 테스트 블로그 내지 세컨드 블로그를 생성하여 디자인을 미리보기하여 확인한 후에 자신의 블로그에 적용하는 것이 보다 더 안전하고 정확한 방법이다
1. 미디어로그
미디어로그는 어찌 보면 전혀 티스토리답지 않지만 어찌 보면 또 티스토리다운 메뉴이다
미디어로그는 사용자가 건드릴 수 없는 부분이지만 전체적인 미디어로그와 그 크기는 수정이 가능하다
미디어로그 치환자:
<s_media>
</s_media>
미디어로그에 div 추가:
<s_media>
<div class="content_admin">
<h1>media log</h1>
</div>
</s_media>
그 외 아래 아이디 선택자를 쓸 수 있다.
#medialognest /* 카테고리 및 파일 종류를 포함하는 div */
#medialogcontent /* 이미지만 포함하는 div */
사용 예:
#mediaLogNest {
padding-left: 17px;
width: 620px !important;
height: 1352px !important;
}
#mediaLogContent {
height: 1312px !important;
}
2. 카테고리 펼치기
티스토리 블로그는 사이드바의 카테고리를 생성할 때 기본적으로 접혀 있는 상태로 보여지게 되지만 아래와 같이 스크립트를 실행해 줌으로써 블로그가 열릴 때 자동적으로 카테고리를 펼친 상태로 나타나게 할 수 있다
아래와 같이 카테고리 치환자 바로 다음에 스크립트를 삽입하면 된다
|
<script type="text/javascript">expandtree();</script>
3. 카테고리 글 더 보기
카테고리 글 더 보기 플러그인은 아주 유용한데 이상하게도 그 색상 설정은 사용자 마음대로 설정이 불가능하다
그래서 원하는 대로 포스트와 색상을 맞출 수 없어 답답한데 아래와 같이 설정하면 해당 플러그인의 색상을 바꿀 수 있다
아래의 css가 플러그인을 적용하면 자동으로 skin.html에 삽입되는 css 코드로 스킨의 헤드 섹션에 위치해 있다
그 코드 내용은 너무 길어 생략하고 중요한 것은 해당 css 설정에 !important 속성이 쓰여서 일반적인 css 속성보다 우선시된다는 것이다
<style type="text/css">
.another_category
...
.another_category_color_blue
...
</style>
이제 본격적인 작업을 해보자.
아래는 skin.html에서 블로그 포스트에 해당하는 치환자와 그를 감싸는 div class인데 class를 아래와 같이 별도로 생성해야 한다
<div class="content_article">
</div>
위에서 생성된 content_article이라는 class가 사용되는 것을 알 수 있다.
/* another category ***********************************************************/
.content_article div.another_category table th span,
.content_article div.another_category table td {
display: none;
}
.content_article div.another_category,
.content_article div.another_category h4 {
border: 0 !important;
padding: 0 !important;
}
.content_article div.another_category {
clear: none !important;
width: 655px !important;
margin: 24px 0 0 0 !important;
}
.content_article div.another_category h4 {
.content_article div.another_category h4 a {
font: bold 12px/2.0em "Malgun Gothic", verdana, gulim, sans-serif !important;
color: #ff4500 !important;
}
.content_article div.another_category h4 a:hover,
.content_article div.another_category table th a:hover {
text-decoration: underline !important;
color: #ff4500 !important;
}
.content_article div.another_category table {
margin: 0 !important;
}
.content_article div.another_category table th {
padding: 0 !important;
font: 12px/2.0em verdana, gulim, sans-serif !important;
color: navy !important;
}
.content_article div.another_category table th a {
color: navy !important;
}
.content_article div.another_category table th a.current {
border: 0 !important;
font-weight: normal;
color: #ff4500 !important;
}
위 코드로 자신의 스킨에 맞게 수정한 후 사용하면 되고
css를 테스트할 때 전부 적용하지 않고 일부만 변경하면서 분석하면 보다 더 쉽게 분석이 가능하다
또한 무턱대고 자신의 style.css를 수정할 것이 아니라 테스트 블로그를 생성하여 먼저 적용해 보는 것이 현명하다
4. 카테고리 새 글 아이콘 바꾸기
<head> 태그에 아래 스크립트를 삽입하고
<head>
...
<script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js"></script>
</head>
카테고리 치환자 바로 다음에 스크립트를 삽입하면 된다
|
<script type="text/javascript">expandTree();</script>
<script type="text/javascript">$('img[alt="N"]').each(function () { $(this).replaceWith('<img src="./images/new_ico_6.png">'); }); </script>
'여기는 티스토리 > 내컴터 팁이에유' 카테고리의 다른 글
| [MS] Wireless Mobile Mouse 4000 A/S 후기 (0) | 2020.05.30 |
|---|---|
| [게임] 워크래프트3 오리지널과 확장팩 프로즌쓰론, 리포지드 (0) | 2020.02.03 |
| [Win Erx03] 시스템 오류로 위장한 기술 지원 사기 주의 (0) | 2019.01.29 |
| [MS] 윈도우즈 IE 등 각종 팁 (0) | 2018.11.09 |
| [자막] CCCP Codec Pack 2015.10.18 (0) | 2015.11.20 |
| [게임] 삼국지11 PK (0) | 2014.09.23 |
| [MS] 윈도우 마우스 우측 단축 메뉴 관리하기 (0) | 2011.07.17 |
| [자막] 한방에 3.22 (0) | 2011.07.01 |