티스토리 리본 제목 서식 만들기 1

게시자: 대문 demun 카테고리: 티스토리/티스토리가이드 2012.01.26 06:00
제목에 사용하기 좋은 서식으로써 이름을 리본으로 정했습니다. 몇가지가 있기에 순서대로 1,2,3... 형식으로 나갑니다.
먼저 둥근 형태의 리본서식으로 제목에 사용하기 좋은 형태입니다. 
오늘 사용하는 방법은 이미지가 필요합니다. 그래서 제가 먼저 이미지를 만들어 보았습니다.
이미지를 두개로 슬라이스해서 CSS 코드로 사용하는 방법으로 sliding doors 기법이라고 합니다.
완성작을 한번 보시죠.

티스토리에 리본 제목 서식 만들기 1-1

 
이 방법은 티스토리에서도 사용하기 편하고 IE6까지 모두 지원합니다. 물론 크로스 브라우징을 하려면 약간의 코드가 더 추가되어야만 하지만요.... 
여하는 티스토리에서 적용하는 방법을 알려드리겠습니다.
먼저 이미지 파일을 다운로드 받아서 압축을 해제하세요.
이미지 파일은 아래 링크에 있습니다.

디자인 리소스의 리본 서식 1 =>  http://demun.tistory.com/2065 

다운로드 받은 폴더안에 아래의 html 파일을 같이 두고 브라우져로 열어보보세요.
그럼 어떤 형식으로 나오지는 미리보기를 할 수 있습니다.

1.html


대략 아래와 같은 형태이지요. 1.html 파일과 images 폴더안에 이미지를 두고 브라우져로 실행시키면 됩니다.

자 이제 티스토리에서 적용하는 방법을 알아보겠습니다.
images 폴더안에 이미지들을 모두 html 편집에서 파일업로드를 통해 업로드해주세


티스토리에 리본 제목 서식 만들기 1-2


위의 이미지를 모두 업로드 하였다면 이제 스타일을 작성해보도록 하겠습니다.

CSS 코드 작성.

아래의 코드를 CSS 편집에서 style.css 의 맨 아래에붙여넣기 하세요.

.article h3.tForm {
    margin: 0 0 20px -15px; /* -15px를 본인의 환경에 맞추어서 수정하세요. */
    padding: 0 10px 0 30px;
    position: relative;
	line-height: 60px; /* 본인의 환경에 따라 수치를 수정하세요. */
    color:#222; /* 환경에 따라 설정하세요. a 에 설정해야 하는 경우도 있습니다. */
    text-shadow:0 1px 0 #fff;
    *zoom:1; /* ie6,7 */
}
.article h3 span { 
	height: 70px;
	left: -10px;
	position: absolute;
	top:0;
	width: 10px;
	*zoom:1; /* ie6,7 */
}

.article h3.blue { background:url(images/blue-right.png) no-repeat right 0; }
.article h3.blue span { background:url(images/blue-left.png) no-repeat; }
.article h3.orange { background:url(images/orange-right.png) no-repeat right 0; }
.article h3.orange span { background:url(images/orange-left.png) no-repeat; }
.article h3.red { background:url(images/red-right.png) no-repeat right 0; }
.article h3.red span { background:url(images/red-left.png) no-repeat; }
.article h3.green { background:url(images/green-right.png) no-repeat right 0; }
.article h3.green span { background:url(images/green-left.png) no-repeat; }
.article h3.gray { background:url(images/gray-right.png) no-repeat right 0; }
.article h3.gray span { background:url(images/gray-left.png) no-repeat; }
.article h3.black { background:url(images/black-right.png) no-repeat right 0; color:#888;}
.article h3.black span { background:url(images/black-left.png) no-repeat; }

이제 티스토리에서 글을 작성할때 사용하는 방법을 알려드리겠습니다.
티스토리에서 사용하도록 .article 라는 클래스를 붙여서 css 코드를 작성한 것이 보여질겁니다.
마크업은 아주 간단합니다. 단 한줄만 작성하면 됩니다.

티스토리에 리본 제목 서식 만들기 1-3


위의 이미지를 보시면 아시겠지만 기본 스타일은 tForm 에 작성되었고, blue, orange.... 등등을 사용할 수 있도록 하였습니다.
원하는 색상에 맞쳐서 작성하시면 됩니다.



신고

댓글

  1. 2012.01.26 22:44 신고 BlogIcon 라임's  댓글주소  수정/삭제  댓글쓰기

    정말 이쁜 리본 서식들이네요. 대단하십니다. 제가 포스팅할때 서식을 잘 이용하지 못해서 모바일에서도 그대로 표출되곤 했는데 이 리본서식을 이용하면 PC에서나 모바일에서나 볼때 매우 좋을것 같네요. 감사합니다.

    • BlogIcon 라임's 2012.01.26 23:47 신고  댓글주소  수정/삭제

      근데 수정하다보니까 대문님처럼 깔끔하게 적용이 안되네요 ㅠ 여러군데 만져봐도 잘 안되는군요. 스킨에 맞게 수정할려면 어느곳을 건드려야할까요..

    • BlogIcon 대문 demun 2012.01.27 13:02 신고  댓글주소  수정/삭제

      제가 라임님 글 보고 왜 안되는지 살펴보고 그에 대한 답변을 글로 포스팅했습니다.
      보시고 적용해보세요.
      리본서식1이 적용되지 않을때 사용법 => http://demun.tistory.com/2068

  2. 2012.01.30 20:23 신고 BlogIcon 유기.  댓글주소  수정/삭제  댓글쓰기

    덕분에 잘 적용했습니다.
    그런데 밑에 줄은 어떻게 해야 없앨 수 있나요?

  3. 2012.09.06 20:19  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다