[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. 카테고리 펼치기

티스토리 블로그는 사이드바의 카테고리를 생성할 때 기본적으로 접혀 있는 상태로 보여지게 되지만 아래와 같이 스크립트를 실행해 줌으로써 블로그가 열릴 때 자동적으로 카테고리를 펼친 상태로 나타나게 할 수 있다

아래와 같이 카테고리 치환자 바로 다음에 스크립트를 삽입하면 된다

 

옹달샘과 행복바다 (3451)
코로나 바이러스 (306)
급식이 개판이네 (27)
기상청 개판이네 (24)
노원구 하계한신 (8)
센다이 잊었는갘 (18)
의성군 쓰레기山 (9)
쿵쾅이 쿵쾅여대 (13)
모여라 똘아이山 (98)
한반도 비핵화쇼 (347)
문재인 탄핵하라 (386)
희대의 쑥대밭쇼 (184)
철가방 사퇴하라 (324)
나는야 혈세귀신 (285)
철가방 비리수북 (274)
옹원장 동서남북 (579)
여기는 티스토리 (569)

<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>

 

카테고리 치환자 바로 다음에 스크립트를 삽입하면 된다

옹달샘과 행복바다 (3451)
코로나 바이러스 (306)
급식이 개판이네 (27)
기상청 개판이네 (24)
노원구 하계한신 (8)
센다이 잊었는갘 (18)
의성군 쓰레기山 (9)
쿵쾅이 쿵쾅여대 (13)
모여라 똘아이山 (98)
한반도 비핵화쇼 (347)
문재인 탄핵하라 (386)
희대의 쑥대밭쇼 (184)
철가방 사퇴하라 (324)
나는야 혈세귀신 (285)
철가방 비리수북 (274)
옹원장 동서남북 (579)
여기는 티스토리 (569)

<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>

반응형