티스토리 서식 공유 (내가쓰는 서식 공유)

 꿍스뿡이의 드림빌더 

티스토리 서식 공유 (내가쓰는 서식 공유)

안녕하세요. 꿍스뿡이입니다!

오늘은 최근에 바꾼 티스토리 서식을 공유하고자 합니다. 

맨 처음부터 제가 만든 서식은 아니며, 기존에 있는 서식을 기본으로 하여 약간씩 변형했습니다.

글을 작성하는 포멧이 일정하지 않거나 새로운 포멧이 필요하신 분들께 유용한 정보였으면 합니다~

기존서식

기존에 사용하던 서식입니다.

제목 부분에 하늘색 막대모양이 있는것이 전부인 화면이었습니다.

포스팅의 제목과, 소제목 그리고 결론 부분에 대한 특별한 구분은 없었고,

마지막에 공통적으로 들어가는 멘트 역시 글로서만 남아 사용하고 있었습니다.

변경서식

변경된 서식입니다. 제목부분과 본문을 색상의 차이를 두어 구분했습니다.

제목의 상단에는 코멘트를 넣을 수 있는 공간이 있는데

저는 제 블로그명을 넣었습니다.

결론을 넣는 부분도 별도의 색상을 구분했으며

하단의 공감, 댓글을 남겨달란 메뉴도 색이 있는 박스 안에 넣음으로서

기존의 글과 차별성을 두었습니다.

기본구조

기본 구조 입니다. 

위에 부터 차례대로 제목, 소제목, 마무리, 관련글, 안내문구 순으로 구성되어 있습니다.

각자 원하시는 방향대로 수정하시면서 사용하시면 좋지 않을까 싶습니다.

소스파일

서식파일.txt

즉시 사용이 가능한 서식파일입니다. 

별도의 설명이 필요없으신 분들이거나, 새로운 서식을 적용하고자 하시는 분들께서는

다운받아 사용해 주시면 됩니다.

소스설명 - 색상변경 중심

<!-- 타이틀 시작 -->
<p style="FLOAT: none; CLEAR: none">
<span style="FONT-SIZE: 10px; FONT-FAMILY: Verdana, sans-serif; COLOR: rgb(255,255,255); TEXT-ALIGN: left; 
BACKGROUND-COLOR: rgb(105,139,226)"> *** rgb(105,139,226) : 상단 타이틀의 배경색입니다. ***
 상단 타이틀 입력부분 </span></p>
<p style="COLOR: rgb(101,101,101); TEXT-ALIGN: left"></p>
<p style="TEXT-ALIGN: center"></p>
<h3 style="BOX-SIZING: border-box; MARGIN-BOTTOM: 5px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-COLOR: ; WORD-SPACING: 3px; 
MARGIN-TOP: 5px; BORDER-BOTTOM: rgb(105,139,226)   *** rgb(105,139,226) : 타이틀의 밑줄색입니다. ***
2px solid; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; PADDING-LEFT: 5px; 
BORDER-LEFT: rgb(105,139,226) *** rgb(105,139,226) : 상단 타이틀의 왼쪽 막대색입니다. ***
12px solid; BORDER-RIGHT-COLOR: ; LETTER-SPACING: 1px; LINE-HEIGHT: 1.5; PADDING-RIGHT: 5px; 
BORDER-TOP-WIDTH: 0px; MARGIN-RIGHT: 0px; border-image: initial">
<font color="#5d5d5d" face="Arial">
<span style="FONT-SIZE: 21px">제목입력</span></font></h3>
<p style="TEXT-ALIGN: left">타이틀 입력부분</p>
<p style="TEXT-ALIGN: center"><br /></p>
<!-- 타이틀 종료 -->

<!-- 소제목1 시작 -->
<h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; 
word-spacing: 3px; border-bottom-style: solid; 
border-bottom-color: rgb(204, 204, 204); *** rgb(85, 85, 91) : 소제목의 밑줄색 입니다. ***
padding: 3px 5px; border-left-style: 
solid; border-left-color: rgb(85, 85, 91); *** rgb(85, 85, 91) : 소제목의 왼쪽 막대색 입니다. ***
margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;">
<font color="#5d5d5d">
<span style="font-size: 21px;">소제목1</span></font></h3>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 소제목1 종료 -->

<!-- 소제목2 시작 -->
<h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; 
word-spacing: 3px; border-bottom-style: solid; 
border-bottom-color: rgb(204, 204, 204);  *** rgb(85, 85, 91) : 소제목의 밑줄색 입니다. ***
padding: 3px 5px; border-left-style: 
solid; border-left-color: rgb(85, 85, 91);*** rgb(85, 85, 91) : 소제목의 왼쪽 막대색 입니다. ***
 margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;">
<font color="#5d5d5d">
<span style="font-size: 21px;">소제목2</span></font></h3>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 소제목2 종료 -->

<!-- 마무리 시작 -->
<h4 style="FONT-SIZE: 10px; FONT-FAMILY: dotum, sans-serif; COLOR: rgb(31,31,31); PADDING-BOTTOM: 0px; 
PADDING-TOP: 0px; PADDING-LEFT: 7px; BORDER-LEFT: rgb(255,50,127) *** rgb(255, 50, 127) : 마무리의 왼쪽 막대색 입니다. ***
10px solid; MARGIN: 0px 0px 10px; 
LETTER-SPACING: -1px; LINE-HEIGHT: normal; PADDING-RIGHT: 0px; font-stretch: normal">
<span style="font-size: 21px; color: rgb(255, 50, 127); font-family: Arial;">마무리</span></h4>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 마무리 종료 -->

<!-- 관련글 시작-->
<h4 style="font-family: dotum, sans-serif; padding: 0px 0px 0px 7px; border-left: 10px solid 
rgb(254, 137, 67); *** rgb(254, 137, 67) : 관련글의 왼쪽 막대색 입니다. ***
margin: 0px 0px 10px; letter-spacing: -1px; line-height: normal; font-stretch: normal;">
<font color="#FE8943">
<span style="font-size: 21px; font-family: Arial;">관련글</span></font></h4><div>
<div class="txc-textbox" style="box-sizing: border-box; font-size: 2px; border-width: 2px; border-style: 
solid; border-color: rgb(254, 137, 67); *** rgb(254, 137, 67) : 관련글의 테두리색 입니다. ***
font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; padding: 10px; 
margin: 0px; line-height: 1.5; background-color: rgb(255, 255, 255);">
<p style="font-size: 13px; font-family: "맑은 고딕", sans-serif; color: rgb(101, 101, 101); text-align: left;">
<span style="font-size: 14px; font-family: Dotum, sans-serif; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><b>
<span style="font-family: Arial; color: rgb(85, 85, 91);">1.URL</span></b></span></p></div>
<p style="float: none; text-align: center; clear: none;"> </p></div><div><br /></div><div>
<font color="#FE8943"><span style="font-size: 15.3333px;"><br /></span></font></div>
<p style="TEXT-ALIGN: left"> </p>
<!-- 관련글 종료-->

<!--안내문구 시작1-->
<div class="txc-textbox" style="BOX-SIZING: border-box; FONT-SIZE: 14px; 
BORDER-TOP: rgb(254,137,67) 10px solid; *** rgb(254,137,67) 위 테두리의 색, 10px 위 테두리의 두께 입니다. ***
FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif; 
BORDER-RIGHT: rgb(254,137,67) 10px solid; *** rgb(254,137,67) 오른쪽 테두리의 색, 10px 오른쪽 테두리의 두께 입니다. ***
BORDER-BOTTOM: rgb(254,137,67) 10px solid;  *** rgb(254,137,67) 아래 테두리의 색, 10px 아래 테두리의 두께 입니다. ***
PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; 
BORDER-LEFT: rgb(254,137,67) 10px solid;  *** rgb(254,137,67) 왼쪽 테두리의 색, 10px 왼쪽 테두리의 두께 입니다. ***
MARGIN: 0px; LINE-HEIGHT: 1.5; PADDING-RIGHT: 10px; 
BACKGROUND-COLOR: rgb(254,222,199)"> *** rgb(254,222,199) 박스 안쪽의 음영색입니다. ***
<p style="FONT-SIZE: 13px; FONT-FAMILY: "맑은 고딕", sans-serif; COLOR: rgb(101,101,101); TEXT-ALIGN: center">
<span style="FONT-SIZE: 14px; FONT-FAMILY: Dotum, sans-serif; 
FONT-WEIGHT: bold; COLOR: rgb(0,0,0); 
BACKGROUND-COLOR: rgb(250,224,212)"*** rgb(250,224,212) 글자의 음영색입니다. ***
>안내문구</span></p></div>
<!--안내문구 종료1-->

<p style="FLOAT: none; TEXT-ALIGN: center; CLEAR: none"><br /></p>

소스에 대한 설명입니다. 

글자의 크기는 티스토리에서 충분히 편집 가능하기에

여기에서는 색이 변경되는 부분을 위주로 코멘트를 남겨드립니다.

***로 시작되는 부분이 설명부분입니다.

잘 사용하세용!

글을 쓰는 방법은 다양합니다. 꼭 이런 서식도 필요없으신 분들도 많습니다. 

블로그를 함에 있어 꼭 이런 서식을 사용해야지만 되는것도 아니니 형식에 얽매이지 않길 바래봅니다. 

관련글

1. 티스토리 블로그 POSTER 스킨 꾸미기[1탄 : 레이아웃]

2. 티스토리 블로그 POSTER 스킨 꾸미기[2탄 : 소스코드]

 

 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트♥공감 버튼을 꾹 눌러주세요! 

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!