category: Tistory 2018.07.23 01:15

tags: ,

[Tip] 티스토리 Html/Css/Script 최적화 팁

 

아는 분은 알겠지만 자유도가 높은 블로그로는 단연 티스토리가 탑이다 css 다운로드

필수적으로 사용해야만 하는 블로그 치환자 몇 개를 포함하더라도 자신이 원하는 그대로 블로그를 꾸밀 수 있기 때문이다

 

오늘은 그 와중에도 부득이하게 수정할 수 없었던 부분을 html/css 수정함으로써 또는 스크립트를 추가함으로써 보다 더 만족스러운 형태로 블로그를 만들어가는 팁 몇 가지를 적어 본다

 

아래에 설명된 팁들은 언제나 동일 효과를 볼 수 있다고 장담할 수 없으며, 필히 블로그에 적용 전에 관련 파일을 백업한다던가 하는 작업이 필요하다

 

가장 효과적인 방법은 테스트 블로그 내지 세컨드 블로그를 생성하여 디자인을 미리보기하여 확인한 후에 자신의 블로그에 적용하는 것이 보다 더 안전하고 정확한 방법이다

 

1. 미디어로그

미디어로그는 어찌 보면 전혀 티스토리답지 않지만 어찌 보면 또 티스토리다운 메뉴이다

미디어로그는 사용자가 건드릴 수 없는 부분이지만 전체적인 미디어로그와 그 크기는 수정이 가능하다

 

미디어로그 치환자:

<s_media>

[##_media_content_##]

</s_media>

 

미디어로그에 div 추가:

<s_media>

<div class="content_admin">

<h1>media log</h1>

</div>

[##_media_content_##]

</s_media>

 

그 외 아래 아이디 선택자를 쓸 수 있다.

#medialognest /* 카테고리 및 파일 종류를 포함하는 div */

#medialogcontent /* 이미지만 포함하는 div */

 

사용 예:

#mediaLogNest {

padding-left: 17px;

width: 620px !important;

height: 1352px !important;

}

 

#mediaLogContent {

height: 1312px !important;

}

 

2. 카테고리 펼치기

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

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

 

[##_category_##]

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

[##_article_rep_desc_##]</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>

 

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

[##_category_##]

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

'Tistory' 카테고리의 다른 글

[Tip] 티스토리 Html/Css/Script 최적화 팁  (0) 2018.07.23
[기타] Avast Free Antivirus 18.2.2328  (0) 2018.04.05
[Tip] 유토런트(uTorrent) 광고 제거  (0) 2016.04.22
[기타] Firefox 44.0.2  (0) 2016.02.19
[예능] 집밥 백선생  (0) 2015.06.16
[드라마] TVN 신분을 숨겨라  (0) 2015.06.11
[예능] MBC 복면가왕  (0) 2015.06.11
[드라마] SBS 썸남썸녀  (0) 2015.06.02
[안현수] 前 여자 친구  (0) 2015.05.14
[드라마] OCN 실종느와르 M  (0) 2015.05.14
옹달샘과 행복바다  (0) 2015.04.30

prev | 1 | ··· | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ··· | 599 | next

티스토리 툴바