블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상)

블로그에 글을 쓰다보면 본문에 여러 소제목을 사용하면서 글을 쓸 때가 있습니다.

예를 들면,

제목 : 큰제목
내용 :

1. 소제목입니다.

어쩌고 저쩌고 어쩌고 저쩌고

2. 소제목 2입니다.

어쩌고 저쩌고 어쩌고 저쩌고

이렇게 글을 쓸 수있겠죠. 이때 소제목에 해당하는 부분을 플래쉬 글꼴로 나타나도록 서식을 만드는 방법에 대해서 설명하고 쓰는 방법을 공유하겠습니다. 서식을 만드는것은 코드를 복사한뒤 붙여넣고 서식을 만든뒤, 글을 쓸때 서식을 불러와서 소제목을 입력해주기만 하면 됩니다. 참 쉽죠.


먼저 사용 예시를 보여드리겠습니다.

글 본문 부분입니다

11111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111

22222222222222222222222222222222222222222222222222222222222222222222222222222222222222
22222222222222222222222222222222222222222222222222222222222222222222222222222222222222
22222222222222222222222222222222222222222222222222222222222222222222222222222222222222

지금 이것은 서식에서 불러와서 간단히 제목에 해당하는 부분만 입력하고 완성한것입니다. 복잡한 설정으로 만든것이 아니라는것이죠.
그림으로도 처리할 수 있겠지만, 포토샵이나 기타 툴을 이용해서 만들고 업로드하고 좀 복잡하겠죠? 근데 쉽게 하는 방법이 있습니다.

포토샵 NO , 복잡한것 NO


급하신분은 맨아래 동영상파일을 다운로드 후 압축 해제해서 보세요. 바로 이해가 가실겁니다.

<object height="50" width="600" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="always" name="allowScriptAccess" />
<param value="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" name="movie" />
<param value="transparent" name="wmode" />
<param value="false" name="menu" />
<param value="high" name="quality "/>
<param value="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=/994&amp;detailText=" name="FlashVars" />
<embed flashvars="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=/994&amp;detailText=" height="50" width="600" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="title_flash" quality="high" menu="false" wmode="transparent"  src="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" /></object>

먼저 위에 코드를 복사를 합니다.

티스토리 관리자 페이지 > 글쓰기 > 서식 체크 > HTML 체크 > 서식 제목 입력 > 복사한 코드를 내용에 붙여넣기 > 저장하기

위와 같이 서식을 저장을 합니다. 서식 제목은 햇갈리지 않게 자세히 적어서 입력해 둡니다. 서식은 글관리에서 언제든 불러와서
편집 가능합니다.

티스토리 관리페이지에서 글 쓰기를 합니다. 서식에 위에 과정에서 만들어두었던 서식을 확인합니다.

미리 만들어둔 서식을 불러오기를 합니다. 서식을 불러올까요? 물음에 예를 누릅니다.

서식이 불러와지면 저렇게 Object 가 생성됩니다. 생성되지 않고 실패한다면 다시 서식을 불러옵니다.

<object height="50" width="600" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="always" name="allowScriptAccess" /><param value="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" name="movie" /><param value="transparent" name="wmode" /><param value="false" name="menu" /><param value="high" name="quality "/><param value="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=/994&amp;detailText=" name="FlashVars" /><embed flashvars="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=/994&amp;detailText=" height="50" width="600" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="title_flash" quality="high" menu="false" wmode="transparent"  src="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" /></object>

<!-- 코드설명 -->
<!-- 초보자를 위한 설명 : 출력할타이틀부분 2부분만 수정해서 사용하세요. 아래설명은 패스* -->
<!-- 출력할타이틀부분 은 소제목 타이틀 부분입니다. 이부분이 플래쉬 글자로 나타나게 됩니다. 2부분 모두 같은 제목으로 수정해줍니다. width="600" 은 넓이 부분입니다. 기본적으로 600 사이즈로 해놓았지만 자신의 블로그가 좀 더 넓고 글자를 길게 넣고 싶은경우에는 넓게 수정하세요. 플래쉬 주소 부분은 기본적으로 제가 저 플래쉬를 지우지 않을것이기에 변경하지 않아도 상관없지만, 따로 플래쉬파일을 자신의 블로그에 업로드 해놓고, 사용하고 싶다면 아래의 플래쉬 파일을 다운로드 후 자신의 계정에 업로드 한뒤 플래쉬 주소를 수정한뒤 사용하세요. -->

subtitle.rar

HTML 를 체크합니다. 하단 부분쯤에 출력할타이틀부분  2개 부분을 원하는 소제목으로 변경을 해줍니다.
(예) 출력할타이틀부분 → 나 글쓰는 중 말리지 마!

나 말리지 말라고 했지? 말리지 마요!!~  라고 저는 입력했습니다.

HTML 체크를 다시 해제한뒤 소제목 아래에 본문에 해당하는 글을 적고 글을 완성해 나갑니다. 소제목 아래에 또 다른 소제목이 있어야한다면 위에 과정을 다시 반복해서 또 소제목을 입력해줍니다.

글을 모두 완성한 뒤, 저장하기를 하면 플래쉬 타입의 Object 에 입력했던 글들이 나타납니다. 완성!

* 넉두리

처음에 이부분을 따서 만들때 고민을 좀 많이 했습니다. 조금 쉽게 사용가능하게 하려고 스크립트를 썻지만, 그렇게 할 경우에는 글을 길게 적었을때, 어느부분에 소제목을 추가했는지 나타나지 않으니 알 수 가 없더군요. 그래서 <embed> 부분은 꼭 살아있어야했는데 그래서 어쩔 수 없이 코드가 전체적으로 다 들어가도록 만들어서 서식을 만들었습니다. 덕분에 소제목을 2번 입력해야하는 수고는 있지만, 소제목 2번만 입력하면 깔끔하게 플래쉬 소제목이 뜨는군요.

<embed> 태그만 바로 쓰는것보다는 <object> 태그로 묶어서 사용하는게 아무래도 더 좋기에 (여러 브라우저에서 통용하기 위해서) 가능한 에러가 안나도록 만들어보았습니다.

정말 여러가지 실험을 해봤네요. 좀 쉽게 쓰게끔 만들어보려고했는데 계속 벽에 부딪치네요. 한참 스크립트를 만들어놓고 돌리니 FF 에서는 잘 되지만 IE 에서는 출력이 안되고 또는 서식이 재대로 동작을 안하고..  지금 이코드는 IE,FF 둘다 잘 돌아가는걸 확인했습니다.

플래쉬파일도 사실 제가 게시물에 넣어둔것을 끌어가는 형태이기때문에 스킨에 업로드해놓은것보다 가벼울듯하네요.
스킨에 올려놓는다면 항상 로드하기 때문에 무거워질테니까요. 플래쉬파일은 삭제하거나 하진 않겠지만 꼭 불안하신분은
파일을 압축해서 올릴테니 자신의 계정에 업로드 후 경로를 따서 코드를 수정하시기 바랍니다.

subtitle.rar

플래쉬타입의 제목을 블로그의 본문글 제목으로 사용하는경우도 있는데요(스킨) 이경우에는 SEO 때문에 좀 신경을 써 주어야할듯합니다. 좀 찾아보니 플래쉬글자는 당연 Object 이기때문에 검색사이트에 검색이 안된다고 하는글이 보이네요. 저는 본문에 플래쉬 제목을 넣은것이기때문에 이것과는 무관합니다.

동영상을 다운 받은뒤 (파일) 보시면 더 깨끗한 영상을 볼 수 있습니다. (800x600 영상)

Untitled2.part1.rar

Untitled2.part2.rar

2009/08/16 - [Useful Tips] - 블로그 서식 꾸미기 #1 (동영상)

아 참고로 피드버너가 100명이 넘었네요 구독자분들께 감사드립니다. 조만간 선물 행사를 해야겠네요 ^^