본문 바로가기
컴퓨터/인터넷

티스토리 사용법

by Begi 2017. 12. 25.
반응형

티스토리 사용법

"전기 전자 상식"이 있을 때 "전기 상식" 또는 "상식 전기" 또는 "상식 전자" 등으로 검색하면 검색되지 않고 "전자 상식" 또는 "전자상식" 또는 "전기전자" 등으로 검색해야 한다. 티스토리 검색은 잘 안되는 경우가 있다.

유튜브 재생 위치 지정

티스토리에 유튜브를 삽입하여 특정 위치에서 재생할 때 아래와 같이 "?t=60"이라고 하면 안된다.

 https://youtu.be/u36QpPvEh2c?rel=0?t=60 

 

티스토리에서 유튜브를 삽입하여 특정 위치에서 재생할 때는 다음과 같이 start와 end를 사용해야 한다.

 https://youtu.be/u36QpPvEh2c?rel=0&start=60&end=90 

 

유튜브 동영상 크기 변경

편집 화면에서 HTML를 클릭하여 HTML 에디터 모드로 들어간다.

 

HTML 에디터에서 유튜브 삽입 코드의 width와 height 값을 변경한다.

<iframe width="560" height="420" src="https://www.youtube.com/embed/u36QpPvEh2c?rel=0&amp;start=88&amp;end=150" frameborder="0" allowfullscreen=""></iframe> 

 

16:9를 위해서는 width=560 height=315로 설정한다.

 

줄간격 조절

티스토리의 줄간격은 기본적으로 스킨에서 정해져 있다. 스킨의 CSS을 편집하면 기본 줄간격을 변경할 수 있다.

 

티스토리 편집화면에서 줄간격을 설정하면 스킨의 기본 줄간격이 아닌 사용자가 설정한 줄간격이 적용된다. 사용자가 설정한 줄간격을 스킨 기본 줄간격으로 변경하기 위해서는 다음 그림과 같이 편집화면의 오른쪽 상단에 있는 HTML을 클릭한다.

 

HTML 편집화면에서 "line-height"이 나오는 모든 부분을 삭제한다."line-height"는 다음과 같은 형태로 나올 수 있다.    

    line-height: 2;

    line-height: 18.48px;

    line-height: normal; 

    <span style="line-height: 1.5;">

 

티스토리 편집화면에 텍스트를 입력하면 다음과 같이 HTML이 생성된다. 여기서, 줄간격은 스킨 기본 줄간격이 적용된다.

<p>티스토리</p>

<p>편집화면</p>

 

편집화면에서 줄간격을 설정하면 다음과 같이 HTML이 변경된다.

<p style="line-height: 2;">티스토리</p>

<p style="line-height: 2;">편집화면</p>

 

카테고리 자동 펼치기

HTML/CSS 편집에서 "

분류 전체보기
수학
철학과 삶
지능&지식
전자
컴퓨터
기계
공학
과학
제품
아트
사회
Misc
"을 찾아서 그 아래에 다음 코드를 삽입한다.

<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

 

 

댓글 자동 펼치기

관리자 모드에서 '화면설정 - 화면출력'에서 '댓글 펼침'을 체크한다. 그리고, 저장을 클릭한다.

 

CSS 편집

티스토리의 CSS는 폰트, 색깔, 화면 크기 등 스타일을 정의하는 파일이다.

 

CSS 파일은 스킨마다 다르기 때문에 각 스킨 마다 수정하는 방법이 다르기 때문에 아래 설명은 대략적인 참고로만 할 수 있다.

 

관리자 화면에서 HTML/CSS 편집을 클릭하여 나오는 화면에서 CSS를 클릭하면 CSS 편집 화면이 나온다.

 

포스트의 본문은 CSS 파일에서 다음을 찾아서 편집한다.



.article {  width:/*@post-width*/ 750px /*@*/; font-size:/*@post-body-font-size=*/ 16px /*@*/; font-family: /*@post-body-font-family=*/ Arial /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden; line-height:2em; }

 

전체 폰트는 CSS 파일 제일 위에 있는 다음을 편집한다.

/* 본문 공통 */
body{ font:14px/1.5 Arial, Verdana, AppleGothic, Sans-serif; color:#666;
    line-height:1.2em;

 

화면 제일 위에 있는 블로그 이름은 다음을 편집한다.

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ Arial /*@*/; /*@title-color=color:;*/ color: #ffff00; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 10px /*@*/; line-height:1.0;} 

 

포스트의 제목은 다음을 편집한다.

.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 24px /*@*/; font-family: /*@post-title-font-family=*/ Arial /*@*/; color: /*@post-title-color=*/ #007f00 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;} 

 

line-height : 줄간격

font-family : 폰트 종류

font-size : 폰트 크기

color : 폰트 색 (3바이트 헥사 RGB)

width : 화면 폭

 

애드센스

애드센스 중앙에 배열하기

애드센스 광고 태그 앞뒤에 <center>와 </center>를 각각 삽입한다.

 

티스토리 포스트 본문 상단에 애드센스 넣기

방법1

플러그인의 구글 애드센스 (PC)를 선택하여 구글 코드를 붙여 넣는다.

 

방법2

티스토리 본문 상단 우측에 애드센스를 넣기 위해서는 HTML/CSS 편집 화면에서 

반응형

티스토리 사용법

"전기 전자 상식"이 있을 때 "전기 상식" 또는 "상식 전기" 또는 "상식 전자" 등으로 검색하면 검색되지 않고 "전자 상식" 또는 "전자상식" 또는 "전기전자" 등으로 검색해야 한다. 티스토리 검색은 잘 안되는 경우가 있다.

유튜브 재생 위치 지정

티스토리에 유튜브를 삽입하여 특정 위치에서 재생할 때 아래와 같이 "?t=60"이라고 하면 안된다.

 https://youtu.be/u36QpPvEh2c?rel=0?t=60 

 

티스토리에서 유튜브를 삽입하여 특정 위치에서 재생할 때는 다음과 같이 start와 end를 사용해야 한다.

 https://youtu.be/u36QpPvEh2c?rel=0&start=60&end=90 

 

유튜브 동영상 크기 변경

편집 화면에서 HTML를 클릭하여 HTML 에디터 모드로 들어간다.

 

HTML 에디터에서 유튜브 삽입 코드의 width와 height 값을 변경한다.

<iframe width="560" height="420" src="https://www.youtube.com/embed/u36QpPvEh2c?rel=0&amp;start=88&amp;end=150" frameborder="0" allowfullscreen=""></iframe> 

 

16:9를 위해서는 width=560 height=315로 설정한다.

 

줄간격 조절

티스토리의 줄간격은 기본적으로 스킨에서 정해져 있다. 스킨의 CSS을 편집하면 기본 줄간격을 변경할 수 있다.

 

티스토리 편집화면에서 줄간격을 설정하면 스킨의 기본 줄간격이 아닌 사용자가 설정한 줄간격이 적용된다. 사용자가 설정한 줄간격을 스킨 기본 줄간격으로 변경하기 위해서는 다음 그림과 같이 편집화면의 오른쪽 상단에 있는 HTML을 클릭한다.

 

HTML 편집화면에서 "line-height"이 나오는 모든 부분을 삭제한다."line-height"는 다음과 같은 형태로 나올 수 있다.    

    line-height: 2;

    line-height: 18.48px;

    line-height: normal; 

    <span style="line-height: 1.5;">

 

티스토리 편집화면에 텍스트를 입력하면 다음과 같이 HTML이 생성된다. 여기서, 줄간격은 스킨 기본 줄간격이 적용된다.

<p>티스토리</p>

<p>편집화면</p>

 

편집화면에서 줄간격을 설정하면 다음과 같이 HTML이 변경된다.

<p style="line-height: 2;">티스토리</p>

<p style="line-height: 2;">편집화면</p>

 

카테고리 자동 펼치기

HTML/CSS 편집에서 "

분류 전체보기
수학
철학과 삶
지능&지식
전자
컴퓨터
기계
공학
과학
제품
아트
사회
Misc
"을 찾아서 그 아래에 다음 코드를 삽입한다.

<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

 

 

댓글 자동 펼치기

관리자 모드에서 '화면설정 - 화면출력'에서 '댓글 펼침'을 체크한다. 그리고, 저장을 클릭한다.

 

CSS 편집

티스토리의 CSS는 폰트, 색깔, 화면 크기 등 스타일을 정의하는 파일이다.

 

CSS 파일은 스킨마다 다르기 때문에 각 스킨 마다 수정하는 방법이 다르기 때문에 아래 설명은 대략적인 참고로만 할 수 있다.

 

관리자 화면에서 HTML/CSS 편집을 클릭하여 나오는 화면에서 CSS를 클릭하면 CSS 편집 화면이 나온다.

 

포스트의 본문은 CSS 파일에서 다음을 찾아서 편집한다.



.article {  width:/*@post-width*/ 750px /*@*/; font-size:/*@post-body-font-size=*/ 16px /*@*/; font-family: /*@post-body-font-family=*/ Arial /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden; line-height:2em; }

 

전체 폰트는 CSS 파일 제일 위에 있는 다음을 편집한다.

/* 본문 공통 */
body{ font:14px/1.5 Arial, Verdana, AppleGothic, Sans-serif; color:#666;
    line-height:1.2em;

 

화면 제일 위에 있는 블로그 이름은 다음을 편집한다.

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ Arial /*@*/; /*@title-color=color:;*/ color: #ffff00; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 10px /*@*/; line-height:1.0;} 

 

포스트의 제목은 다음을 편집한다.

.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 24px /*@*/; font-family: /*@post-title-font-family=*/ Arial /*@*/; color: /*@post-title-color=*/ #007f00 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;} 

 

line-height : 줄간격

font-family : 폰트 종류

font-size : 폰트 크기

color : 폰트 색 (3바이트 헥사 RGB)

width : 화면 폭

 

애드센스

애드센스 중앙에 배열하기

애드센스 광고 태그 앞뒤에 <center>와 </center>를 각각 삽입한다.

 

티스토리 포스트 본문 상단에 애드센스 넣기

방법1

플러그인의 구글 애드센스 (PC)를 선택하여 구글 코드를 붙여 넣는다.

 

방법2

티스토리 본문 상단 우측에 애드센스를 넣기 위해서는 HTML/CSS 편집 화면에서  위에 다음 코드를 삽입한다.

<div class="googleAd"  style="float:right; width:336px; height:280px; border:1px solid; margin-right:10px; margin-bottom:10px; margin-left:10px;">
<구글 애드센스 광고 코드>
</div>

여기서, border는 애드센스 외곽선 두께를 설정하고 margin-right, margin-left, margin-bottom은 본문 글과 애드센스 사이의 간격을 설정한다.

 

사이드바에 애드센스 넣기

● 플러그인에서 배너출력을 활성화한다.

● 관리센터의 사이드바 메뉴에서 HTML 배너를 위치 시키고 세로방향의 애드센스 광고 코드를 복사한다.

 

티스토리 애드센스 위치 변경

● 글 타이틀과 글 내용 사이에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 내용 표시화면에서 카테고리의 다른 글 아래에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 타이틀과 블로그 타이틀 사이에 애드센스 위치시킬 때

</s_article_protected>

[애드센스 광고 코드 삽입]

<s_article_rep>

<div class="entry">

<div class="titleWrap">

 

● 글 목록과 블로그 타이틀 사이에 애드센스 위치시킬 때

<s_list>

[애드센스 광고 코드 삽입]

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

 

반응형
위에 다음 코드를 삽입한다.

<div class="googleAd"  style="float:right; width:336px; height:280px; border:1px solid; margin-right:10px; margin-bottom:10px; margin-left:10px;">
<구글 애드센스 광고 코드>
</div>
반응형

티스토리 사용법

"전기 전자 상식"이 있을 때 "전기 상식" 또는 "상식 전기" 또는 "상식 전자" 등으로 검색하면 검색되지 않고 "전자 상식" 또는 "전자상식" 또는 "전기전자" 등으로 검색해야 한다. 티스토리 검색은 잘 안되는 경우가 있다.

유튜브 재생 위치 지정

티스토리에 유튜브를 삽입하여 특정 위치에서 재생할 때 아래와 같이 "?t=60"이라고 하면 안된다.

 https://youtu.be/u36QpPvEh2c?rel=0?t=60 

 

티스토리에서 유튜브를 삽입하여 특정 위치에서 재생할 때는 다음과 같이 start와 end를 사용해야 한다.

 https://youtu.be/u36QpPvEh2c?rel=0&start=60&end=90 

 

유튜브 동영상 크기 변경

편집 화면에서 HTML를 클릭하여 HTML 에디터 모드로 들어간다.

 

HTML 에디터에서 유튜브 삽입 코드의 width와 height 값을 변경한다.

<iframe width="560" height="420" src="https://www.youtube.com/embed/u36QpPvEh2c?rel=0&amp;start=88&amp;end=150" frameborder="0" allowfullscreen=""></iframe> 

 

16:9를 위해서는 width=560 height=315로 설정한다.

 

줄간격 조절

티스토리의 줄간격은 기본적으로 스킨에서 정해져 있다. 스킨의 CSS을 편집하면 기본 줄간격을 변경할 수 있다.

 

티스토리 편집화면에서 줄간격을 설정하면 스킨의 기본 줄간격이 아닌 사용자가 설정한 줄간격이 적용된다. 사용자가 설정한 줄간격을 스킨 기본 줄간격으로 변경하기 위해서는 다음 그림과 같이 편집화면의 오른쪽 상단에 있는 HTML을 클릭한다.

 

HTML 편집화면에서 "line-height"이 나오는 모든 부분을 삭제한다."line-height"는 다음과 같은 형태로 나올 수 있다.    

    line-height: 2;

    line-height: 18.48px;

    line-height: normal; 

    <span style="line-height: 1.5;">

 

티스토리 편집화면에 텍스트를 입력하면 다음과 같이 HTML이 생성된다. 여기서, 줄간격은 스킨 기본 줄간격이 적용된다.

<p>티스토리</p>

<p>편집화면</p>

 

편집화면에서 줄간격을 설정하면 다음과 같이 HTML이 변경된다.

<p style="line-height: 2;">티스토리</p>

<p style="line-height: 2;">편집화면</p>

 

카테고리 자동 펼치기

HTML/CSS 편집에서 "

분류 전체보기
수학
철학과 삶
지능&지식
전자
컴퓨터
기계
공학
과학
제품
아트
사회
Misc
"을 찾아서 그 아래에 다음 코드를 삽입한다.

<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

 

 

댓글 자동 펼치기

관리자 모드에서 '화면설정 - 화면출력'에서 '댓글 펼침'을 체크한다. 그리고, 저장을 클릭한다.

 

CSS 편집

티스토리의 CSS는 폰트, 색깔, 화면 크기 등 스타일을 정의하는 파일이다.

 

CSS 파일은 스킨마다 다르기 때문에 각 스킨 마다 수정하는 방법이 다르기 때문에 아래 설명은 대략적인 참고로만 할 수 있다.

 

관리자 화면에서 HTML/CSS 편집을 클릭하여 나오는 화면에서 CSS를 클릭하면 CSS 편집 화면이 나온다.

 

포스트의 본문은 CSS 파일에서 다음을 찾아서 편집한다.



.article {  width:/*@post-width*/ 750px /*@*/; font-size:/*@post-body-font-size=*/ 16px /*@*/; font-family: /*@post-body-font-family=*/ Arial /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden; line-height:2em; }

 

전체 폰트는 CSS 파일 제일 위에 있는 다음을 편집한다.

/* 본문 공통 */
body{ font:14px/1.5 Arial, Verdana, AppleGothic, Sans-serif; color:#666;
    line-height:1.2em;

 

화면 제일 위에 있는 블로그 이름은 다음을 편집한다.

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ Arial /*@*/; /*@title-color=color:;*/ color: #ffff00; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 10px /*@*/; line-height:1.0;} 

 

포스트의 제목은 다음을 편집한다.

.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 24px /*@*/; font-family: /*@post-title-font-family=*/ Arial /*@*/; color: /*@post-title-color=*/ #007f00 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;} 

 

line-height : 줄간격

font-family : 폰트 종류

font-size : 폰트 크기

color : 폰트 색 (3바이트 헥사 RGB)

width : 화면 폭

 

애드센스

애드센스 중앙에 배열하기

애드센스 광고 태그 앞뒤에 <center>와 </center>를 각각 삽입한다.

 

티스토리 포스트 본문 상단에 애드센스 넣기

방법1

플러그인의 구글 애드센스 (PC)를 선택하여 구글 코드를 붙여 넣는다.

 

방법2

티스토리 본문 상단 우측에 애드센스를 넣기 위해서는 HTML/CSS 편집 화면에서  위에 다음 코드를 삽입한다.

<div class="googleAd"  style="float:right; width:336px; height:280px; border:1px solid; margin-right:10px; margin-bottom:10px; margin-left:10px;">
<구글 애드센스 광고 코드>
</div>

여기서, border는 애드센스 외곽선 두께를 설정하고 margin-right, margin-left, margin-bottom은 본문 글과 애드센스 사이의 간격을 설정한다.

 

사이드바에 애드센스 넣기

● 플러그인에서 배너출력을 활성화한다.

● 관리센터의 사이드바 메뉴에서 HTML 배너를 위치 시키고 세로방향의 애드센스 광고 코드를 복사한다.

 

티스토리 애드센스 위치 변경

● 글 타이틀과 글 내용 사이에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 내용 표시화면에서 카테고리의 다른 글 아래에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 타이틀과 블로그 타이틀 사이에 애드센스 위치시킬 때

</s_article_protected>

[애드센스 광고 코드 삽입]

<s_article_rep>

<div class="entry">

<div class="titleWrap">

 

● 글 목록과 블로그 타이틀 사이에 애드센스 위치시킬 때

<s_list>

[애드센스 광고 코드 삽입]

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

 

반응형

여기서, border는 애드센스 외곽선 두께를 설정하고 margin-right, margin-left, margin-bottom은 본문 글과 애드센스 사이의 간격을 설정한다.

 

사이드바에 애드센스 넣기

● 플러그인에서 배너출력을 활성화한다.

● 관리센터의 사이드바 메뉴에서 HTML 배너를 위치 시키고 세로방향의 애드센스 광고 코드를 복사한다.

 

티스토리 애드센스 위치 변경

● 글 타이틀과 글 내용 사이에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

반응형

티스토리 사용법

"전기 전자 상식"이 있을 때 "전기 상식" 또는 "상식 전기" 또는 "상식 전자" 등으로 검색하면 검색되지 않고 "전자 상식" 또는 "전자상식" 또는 "전기전자" 등으로 검색해야 한다. 티스토리 검색은 잘 안되는 경우가 있다.

유튜브 재생 위치 지정

티스토리에 유튜브를 삽입하여 특정 위치에서 재생할 때 아래와 같이 "?t=60"이라고 하면 안된다.

 https://youtu.be/u36QpPvEh2c?rel=0?t=60 

 

티스토리에서 유튜브를 삽입하여 특정 위치에서 재생할 때는 다음과 같이 start와 end를 사용해야 한다.

 https://youtu.be/u36QpPvEh2c?rel=0&start=60&end=90 

 

유튜브 동영상 크기 변경

편집 화면에서 HTML를 클릭하여 HTML 에디터 모드로 들어간다.

 

HTML 에디터에서 유튜브 삽입 코드의 width와 height 값을 변경한다.

<iframe width="560" height="420" src="https://www.youtube.com/embed/u36QpPvEh2c?rel=0&amp;start=88&amp;end=150" frameborder="0" allowfullscreen=""></iframe> 

 

16:9를 위해서는 width=560 height=315로 설정한다.

 

줄간격 조절

티스토리의 줄간격은 기본적으로 스킨에서 정해져 있다. 스킨의 CSS을 편집하면 기본 줄간격을 변경할 수 있다.

 

티스토리 편집화면에서 줄간격을 설정하면 스킨의 기본 줄간격이 아닌 사용자가 설정한 줄간격이 적용된다. 사용자가 설정한 줄간격을 스킨 기본 줄간격으로 변경하기 위해서는 다음 그림과 같이 편집화면의 오른쪽 상단에 있는 HTML을 클릭한다.

 

HTML 편집화면에서 "line-height"이 나오는 모든 부분을 삭제한다."line-height"는 다음과 같은 형태로 나올 수 있다.    

    line-height: 2;

    line-height: 18.48px;

    line-height: normal; 

    <span style="line-height: 1.5;">

 

티스토리 편집화면에 텍스트를 입력하면 다음과 같이 HTML이 생성된다. 여기서, 줄간격은 스킨 기본 줄간격이 적용된다.

<p>티스토리</p>

<p>편집화면</p>

 

편집화면에서 줄간격을 설정하면 다음과 같이 HTML이 변경된다.

<p style="line-height: 2;">티스토리</p>

<p style="line-height: 2;">편집화면</p>

 

카테고리 자동 펼치기

HTML/CSS 편집에서 "

분류 전체보기
수학
철학과 삶
지능&지식
전자
컴퓨터
기계
공학
과학
제품
아트
사회
Misc
"을 찾아서 그 아래에 다음 코드를 삽입한다.

<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

 

 

댓글 자동 펼치기

관리자 모드에서 '화면설정 - 화면출력'에서 '댓글 펼침'을 체크한다. 그리고, 저장을 클릭한다.

 

CSS 편집

티스토리의 CSS는 폰트, 색깔, 화면 크기 등 스타일을 정의하는 파일이다.

 

CSS 파일은 스킨마다 다르기 때문에 각 스킨 마다 수정하는 방법이 다르기 때문에 아래 설명은 대략적인 참고로만 할 수 있다.

 

관리자 화면에서 HTML/CSS 편집을 클릭하여 나오는 화면에서 CSS를 클릭하면 CSS 편집 화면이 나온다.

 

포스트의 본문은 CSS 파일에서 다음을 찾아서 편집한다.



.article {  width:/*@post-width*/ 750px /*@*/; font-size:/*@post-body-font-size=*/ 16px /*@*/; font-family: /*@post-body-font-family=*/ Arial /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden; line-height:2em; }

 

전체 폰트는 CSS 파일 제일 위에 있는 다음을 편집한다.

/* 본문 공통 */
body{ font:14px/1.5 Arial, Verdana, AppleGothic, Sans-serif; color:#666;
    line-height:1.2em;

 

화면 제일 위에 있는 블로그 이름은 다음을 편집한다.

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ Arial /*@*/; /*@title-color=color:;*/ color: #ffff00; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 10px /*@*/; line-height:1.0;} 

 

포스트의 제목은 다음을 편집한다.

.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 24px /*@*/; font-family: /*@post-title-font-family=*/ Arial /*@*/; color: /*@post-title-color=*/ #007f00 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;} 

 

line-height : 줄간격

font-family : 폰트 종류

font-size : 폰트 크기

color : 폰트 색 (3바이트 헥사 RGB)

width : 화면 폭

 

애드센스

애드센스 중앙에 배열하기

애드센스 광고 태그 앞뒤에 <center>와 </center>를 각각 삽입한다.

 

티스토리 포스트 본문 상단에 애드센스 넣기

방법1

플러그인의 구글 애드센스 (PC)를 선택하여 구글 코드를 붙여 넣는다.

 

방법2

티스토리 본문 상단 우측에 애드센스를 넣기 위해서는 HTML/CSS 편집 화면에서  위에 다음 코드를 삽입한다.

<div class="googleAd"  style="float:right; width:336px; height:280px; border:1px solid; margin-right:10px; margin-bottom:10px; margin-left:10px;">
<구글 애드센스 광고 코드>
</div>

여기서, border는 애드센스 외곽선 두께를 설정하고 margin-right, margin-left, margin-bottom은 본문 글과 애드센스 사이의 간격을 설정한다.

 

사이드바에 애드센스 넣기

● 플러그인에서 배너출력을 활성화한다.

● 관리센터의 사이드바 메뉴에서 HTML 배너를 위치 시키고 세로방향의 애드센스 광고 코드를 복사한다.

 

티스토리 애드센스 위치 변경

● 글 타이틀과 글 내용 사이에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 내용 표시화면에서 카테고리의 다른 글 아래에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 타이틀과 블로그 타이틀 사이에 애드센스 위치시킬 때

</s_article_protected>

[애드센스 광고 코드 삽입]

<s_article_rep>

<div class="entry">

<div class="titleWrap">

 

● 글 목록과 블로그 타이틀 사이에 애드센스 위치시킬 때

<s_list>

[애드센스 광고 코드 삽입]

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

 

반응형

 

● 글 내용 표시화면에서 카테고리의 다른 글 아래에 애드센스 위치시킬 때

반응형

티스토리 사용법

"전기 전자 상식"이 있을 때 "전기 상식" 또는 "상식 전기" 또는 "상식 전자" 등으로 검색하면 검색되지 않고 "전자 상식" 또는 "전자상식" 또는 "전기전자" 등으로 검색해야 한다. 티스토리 검색은 잘 안되는 경우가 있다.

유튜브 재생 위치 지정

티스토리에 유튜브를 삽입하여 특정 위치에서 재생할 때 아래와 같이 "?t=60"이라고 하면 안된다.

 https://youtu.be/u36QpPvEh2c?rel=0?t=60 

 

티스토리에서 유튜브를 삽입하여 특정 위치에서 재생할 때는 다음과 같이 start와 end를 사용해야 한다.

 https://youtu.be/u36QpPvEh2c?rel=0&start=60&end=90 

 

유튜브 동영상 크기 변경

편집 화면에서 HTML를 클릭하여 HTML 에디터 모드로 들어간다.

 

HTML 에디터에서 유튜브 삽입 코드의 width와 height 값을 변경한다.

<iframe width="560" height="420" src="https://www.youtube.com/embed/u36QpPvEh2c?rel=0&amp;start=88&amp;end=150" frameborder="0" allowfullscreen=""></iframe> 

 

16:9를 위해서는 width=560 height=315로 설정한다.

 

줄간격 조절

티스토리의 줄간격은 기본적으로 스킨에서 정해져 있다. 스킨의 CSS을 편집하면 기본 줄간격을 변경할 수 있다.

 

티스토리 편집화면에서 줄간격을 설정하면 스킨의 기본 줄간격이 아닌 사용자가 설정한 줄간격이 적용된다. 사용자가 설정한 줄간격을 스킨 기본 줄간격으로 변경하기 위해서는 다음 그림과 같이 편집화면의 오른쪽 상단에 있는 HTML을 클릭한다.

 

HTML 편집화면에서 "line-height"이 나오는 모든 부분을 삭제한다."line-height"는 다음과 같은 형태로 나올 수 있다.    

    line-height: 2;

    line-height: 18.48px;

    line-height: normal; 

    <span style="line-height: 1.5;">

 

티스토리 편집화면에 텍스트를 입력하면 다음과 같이 HTML이 생성된다. 여기서, 줄간격은 스킨 기본 줄간격이 적용된다.

<p>티스토리</p>

<p>편집화면</p>

 

편집화면에서 줄간격을 설정하면 다음과 같이 HTML이 변경된다.

<p style="line-height: 2;">티스토리</p>

<p style="line-height: 2;">편집화면</p>

 

카테고리 자동 펼치기

HTML/CSS 편집에서 "

분류 전체보기
수학
철학과 삶
지능&지식
전자
컴퓨터
기계
공학
과학
제품
아트
사회
Misc
"을 찾아서 그 아래에 다음 코드를 삽입한다.

<SCRIPT language=JavaScript>try{expandTree();}catch(e){}</SCRIPT>

 

 

댓글 자동 펼치기

관리자 모드에서 '화면설정 - 화면출력'에서 '댓글 펼침'을 체크한다. 그리고, 저장을 클릭한다.

 

CSS 편집

티스토리의 CSS는 폰트, 색깔, 화면 크기 등 스타일을 정의하는 파일이다.

 

CSS 파일은 스킨마다 다르기 때문에 각 스킨 마다 수정하는 방법이 다르기 때문에 아래 설명은 대략적인 참고로만 할 수 있다.

 

관리자 화면에서 HTML/CSS 편집을 클릭하여 나오는 화면에서 CSS를 클릭하면 CSS 편집 화면이 나온다.

 

포스트의 본문은 CSS 파일에서 다음을 찾아서 편집한다.



.article {  width:/*@post-width*/ 750px /*@*/; font-size:/*@post-body-font-size=*/ 16px /*@*/; font-family: /*@post-body-font-family=*/ Arial /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden; line-height:2em; }

 

전체 폰트는 CSS 파일 제일 위에 있는 다음을 편집한다.

/* 본문 공통 */
body{ font:14px/1.5 Arial, Verdana, AppleGothic, Sans-serif; color:#666;
    line-height:1.2em;

 

화면 제일 위에 있는 블로그 이름은 다음을 편집한다.

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ Arial /*@*/; /*@title-color=color:;*/ color: #ffff00; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 10px /*@*/; line-height:1.0;} 

 

포스트의 제목은 다음을 편집한다.

.entry h2                { font-size:1.2em;  line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 24px /*@*/; font-family: /*@post-title-font-family=*/ Arial /*@*/; color: /*@post-title-color=*/ #007f00 /*@*/;  line-height:1.2em; padding:8px 0 6px 0;} 

 

line-height : 줄간격

font-family : 폰트 종류

font-size : 폰트 크기

color : 폰트 색 (3바이트 헥사 RGB)

width : 화면 폭

 

애드센스

애드센스 중앙에 배열하기

애드센스 광고 태그 앞뒤에 <center>와 </center>를 각각 삽입한다.

 

티스토리 포스트 본문 상단에 애드센스 넣기

방법1

플러그인의 구글 애드센스 (PC)를 선택하여 구글 코드를 붙여 넣는다.

 

방법2

티스토리 본문 상단 우측에 애드센스를 넣기 위해서는 HTML/CSS 편집 화면에서  위에 다음 코드를 삽입한다.

<div class="googleAd"  style="float:right; width:336px; height:280px; border:1px solid; margin-right:10px; margin-bottom:10px; margin-left:10px;">
<구글 애드센스 광고 코드>
</div>

여기서, border는 애드센스 외곽선 두께를 설정하고 margin-right, margin-left, margin-bottom은 본문 글과 애드센스 사이의 간격을 설정한다.

 

사이드바에 애드센스 넣기

● 플러그인에서 배너출력을 활성화한다.

● 관리센터의 사이드바 메뉴에서 HTML 배너를 위치 시키고 세로방향의 애드센스 광고 코드를 복사한다.

 

티스토리 애드센스 위치 변경

● 글 타이틀과 글 내용 사이에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 내용 표시화면에서 카테고리의 다른 글 아래에 애드센스 위치시킬 때

[애드센스 광고 코드 삽입]

 

● 글 타이틀과 블로그 타이틀 사이에 애드센스 위치시킬 때

</s_article_protected>

[애드센스 광고 코드 삽입]

<s_article_rep>

<div class="entry">

<div class="titleWrap">

 

● 글 목록과 블로그 타이틀 사이에 애드센스 위치시킬 때

<s_list>

[애드센스 광고 코드 삽입]

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

 

반응형

[애드센스 광고 코드 삽입]

 

● 글 타이틀과 블로그 타이틀 사이에 애드센스 위치시킬 때

</s_article_protected>

[애드센스 광고 코드 삽입]

<s_article_rep>

<div class="entry">

<div class="titleWrap">

 

● 글 목록과 블로그 타이틀 사이에 애드센스 위치시킬 때

<s_list>

[애드센스 광고 코드 삽입]

<div id="searchList" class="nonEntry">

<h3>''에 해당되는 글 건</h3>

 

반응형
저작자표시 비영리 변경금지

'컴퓨터 > 인터넷' 카테고리의 다른 글

처음으로 받은 애드센스 수익금  (0) 2018.05.24
블로그나 웹페이지의 가독성을 높이는 배치  (0) 2018.05.22
SNS란 무엇일까?  (0) 2018.05.07
핀터레스트  (0) 2018.05.06
네이버와 구글의 검색 차이  (0) 2018.03.27

관련글

댓글

티스토리툴바