무 효과 없이 폰트로만 장식된 밋밋한 디자인의 포스트 제목에 플래쉬 효과를 넣어봅시다.
먼저 아래 파일을 받아서 압축을 풀고, 나온 세 개의 파일을 HTML/CSS 편집을 통해 파일업로드 합니다.



업로드를 끝낸후, HTML/CSS편집으로 돌아와, skin.html 탭에서 Ctrl+F를 이용해, article_rep_title을 찾아줍니다. 그리고 아랫 부분의 코드를 찾습니다.

<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>


위 코드를 아래의 코드로 대체합니다.

<script language="javascript"  src="./images/viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 600, 30, "[##_article_rep_title_##]", "[##_article_rep_link_##]", "center", "0x00000");
</script>

빨강색으로 된 center는 플래시 효과가 적용될 포스트 제목이 수평상에서 중앙에 위치하도록 한 것입니다. 왼쪽/오른쪽으로 바꾸고 싶을 때는, left나 right를 center대신 넣어주면 됩니다. 0x00000는 플래시 효과의 색깔인데, 16진수 RGB로 다른 색깔도 적용시킬 수 있습니다.





공개/보호/비공개가 각각 따로 article_rep_title이 있는 경우에는 각각 다 <h2>에서 </h2>사이에 있는 기존 코드를 저 코드로 대체해 주셔야 합니다. 제 스킨의 경우는 공개/비공개 글로만 따로 돼있어, 두번의 코드 수정을 하였습니다.


Tip from : 하늘과 바람과 별과 시와 코드와 기타(http://minsangk.com/91)
Posted by designeer shyfragrance

댓글을 달아 주세요

  1. Favicon of http://7047.blatsoffcomics.com/ghd.html BlogIcon ghd 2013.07.11 06:20 Address Modify/Delete Reply

    귀를 기울여봐 가슴이 뛰는 소리가 들리면 네가 사랑하는 그 사람 널 사랑하고 있는거야.

어떤 버튼등을 본문에 글을 쓸때마다 자동으로 표시되게 하고싶을때는, [##_article_rep_desc_##]를 찾아 그것 위 또는 아래에 원하는 소스를 붙여넣기만 하면 됩니다. 예를들어, 본문위에 항상 Bookmark/Share 위젯과, Subscribe위젯을 달고 싶다면, http://www.addtoany.com/에 접속해, 일단 위젯을 받은뒤 [##_article_rep_desc_##] 윗쪽줄에 붙여넣어주기만 하면 됩니다.



위 그림과 같이 www.addtoany.com/buttons/ 에서 버튼의 소스코드를 따옵니다.



그리고 HTML편집으로 돌아와, [##_article_rep_desc_##]의 윗쪽에 버튼들을 붙여줍니다. 저의 경우에는 북마크버튼과, 구독(Subscribe)버튼 두개를 본문 상단에 설치하고 싶어서 이렇게 [##_article_rep_desc_##] 위쪽에다가 소스를 달았습니다.



결과는 위 그림과 같습니다.

이제 본문 밑에 소스를 설치해 보겠습니다. 마이픽업 위젯을 설치하기로 하죠.
http://estorylab.com/18 에 들어가, 트위터와 연동되는 마이픽업 위젯의 코드를 받습니다. 이곳은 마이픽업 개발자분의 블로그인데, 각 블로그 서비스에 맞는 마이픽업 위젯 소스코드를 공개해 주셨습니다. 
저는 티스토리이용자이기때문에, 티스토리용 소스코드를 복사하겠습니다.


마이픽업 위젯은 본문 하단에 위치시키고 싶기때문에 위와같이 제가 분홍박스로 표시한, [##_article_rep_desc_##] 바로 아래쪽에 소스코드를 붙여넣으면 됩니다.
결과는 아래와 같습니다.





Posted by designeer shyfragrance

댓글을 달아 주세요


티스토리 글씨체를 바꾸는 법에 대해서 알아보겠습니다.
파일업로드 없이 그냥 단순한 소스수정만으로는 방문자가 블로그관리자가 소스로 설정한 폰트를 하드에 보유하고 있어야만 바뀐 글씨가 보여집니다. 그래서 방문자의 폰트보유여부와 상관없이 항상 블로그관리자가 지정한 폰트효과를 나타내기 위해 웹에 폰트를 올려 블로그 글씨체를 바꾸는 법을 알아보겠습니다.

단 아래 파일을 받아서 압축을 풉니다.


이 파일을 받아서 압축을 풀면, 설치 exe파일과, html파일하나, 그리고 txt파일 하나가 나오는데요, 설치파일을 제외한 index.htmlSubset.txt은 영어 디렉토리만으로 구성된 곳에 옮겨줍니다. 예를들어 c:에만 옮겨 놓는다는 식으로말입니다. 중간에 한글이나 영어가 아닌 다른 언어가 포함된 디렉토리에 넣어두면 안됩니다. 그리고 WEFTIII2b1.exe파일은 실행시켜 설치를 진행합니다. 설치시 꼭아래의 화면대로 진행해야만 합니다. 설치시 나오는건 대부분다 OK를 누르고 진행하면 되지만, 이부분이 나왔을때 꼭 아래 그림에 표시된 부분의 체크박스를 선택해주세요. Finish를 눌러 설치를 완료합니다.


바탕화면에 생성된 WEFT를 처음 실행시키면 이와같은 잠시후 창이 뜹니다. 여기서 절대로 예(Y)를 누르면 안됩니다. 아니오(N)를 눌러줍니다.






이름이랑 이메일쓰는곳은 대충 휘갈겨도 됩니다. 그리고 다음을 눌러줍니다.


이부분에서 삼각형모양 버튼을 눌러 http://로 선택돼있는것을 file://로 바꿔줍니다. 그리고 첨부파일 중 C:/로 옮겨 놨었던 index.html파일을 "..."버튼을 눌러 불러옵니다.


파일이 추가됐으면 저런 디렉토리의 그림이 나오고, 밑의 체크박스를 체크해 준뒤에 다음을 누릅니다.


그 다음 나오는 창에서도 밑의 체크박스를 체크한 후에 다음을 누릅니다.


이 창이 나오면 밑의 Add버튼을 눌러 폰트 파일을 추가합니다.


폰트 파일이 추가됐으면, Subset버튼을 누릅니다.



Load를 눌러 첨부파일 중 C:/로 옮긴 Subset.txt파일을 불러옵니다. 불러올때는 파일 종류를 All files로 해야 찾을 수 있습니다.


Subset.txt를 불러왔으면, Language를 Hangul로 바꿔줍니다. 그러면 밑의 글씨들이 한글로 나옵니다.


위 과정을 다 완료했으면 다음을 눌러줍니다.


이 창에서 "..."버튼을 눌러 eot파일로 변환시킬 폰트파일의 저장경로를 지정해 줍니다. 저는 c:/wwww/로 지정하겠습니다.



그리고 바로 밑에 있는 Edit버튼을 눌러 위 그림처럼 아까 폰트파일을 저장하겠다고 지정한 file:// 위치를 Add해줍니다. 또 탭을 http:// 으로 바꿔서 자신의 블로그주소를 Add해줍니다. 위 그림과 같은 형식으로 지정했으면 OK를 누릅니다.


그러면 위 그림처럼 경로와 블로그 주소가 지정된 것을 볼 수 있습니다. 밑에 있는 세 개의 체크박스 중 첫번째와 두번째것만 체크한 뒤, 다음을 누릅니다. 그러면 아래와 같은 창이 뜨는데 이때 절대로 다른 버튼을 누르면 안됩니다. 잠시 기다리면 소스가 생성된 것을 알 수 있습니다.


생성된 소스중에 밑줄친 글씨체이름부분은 복사해서 밑의 폰트이름 대신에 넣어줍니다. 확인하고 폰트 eot파일 변환을 마칩니다. 그리고 아까 지정한 경로에 생성된, 확장자가 eot인 파일이 있는지 확인합니다.



제 변환된 eot폰트파일을 블로그의 HTML편집 툴로 돌아와서 파일업로드로 직접 올려줍니다.
파일이 업로드 됐으면, HTML/CSS편집으로 돌아와 소스를 수정합니다. 첨가/변환 해야할 소스는 아래와 같이 총 세 개 입니다.

일단 Ctrl+F버튼을 눌러 <head>로 시작해서, </head>로 끝나는 부분을 찾아줍니다. 소스의 좀 윗부분에 있습니다. </head>윗줄에 아래 코드를 삽입합니다.

<style type="text/css">
@font-face {font-family:폰트이름; src:url(폰트주소);}
a:link {font-family: 폰트이름;font-size: 10pt;}
a:visited {font-family: 폰트이름;font-size: 10pt;}
a:hover {font-family: 폰트이름;font-size: 10pt;}
a:acvite {font-family: 폰트이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 10pt;}
</style>


빨강색글씨로 된 폰트이름 대신에 아까 마지막단계에서 밑줄친 부분에 있었던 폰트이름을 넣어줍니다. 폰트주소는 ./images/업로드한파일이름과 같이 적어주시면 됩니다. 저의 경우 이 소스의 결과는 다음과 같습니다.

<style type="text/css">
@font-face {font-family:나눔고딕; src:url(./images/DBFNT3.eot);}
a:link {font-family: 나눔고딕;font-size: 10pt;}
a:visited {font-family: 나눔고딕;font-size: 10pt;}
a:hover {font-family: 나눔고딕;font-size: 10pt;}
a:acvite {font-family: 나눔고딕;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 나눔고딕;font-size: 10pt;}
</style>


제 두번째 소스를 추가해 보겠습니다. 아래에 있는 소스는 <div class="article">을 찾아 그것 대신에 넣어줍니다. 빨강색으로 된 폰트이름에는 마찬가지로 아까와 같은 폰트이름을 넣어줍니다.
<div class="article">이 두 개가 있다면, 둘다 아래 소스로 바꿔줍니다.

<div class="article" style="font:10pt/150% 폰트이름;">

저의 경우는 아래와 같습니다.

<div class="article" style="font:10pt/150% 나눔고딕;">



지막으로 추가해야할 소스는 아래와 같습니다. 이 소스는 skin.html부분이 아니라 밑의 style.ccs부분의 맨 앞줄에 그냥 넣어줍니다. 이 소스도 마찬가지로 폰트이름대신에 아까와 같은 폰트이름을 넣어주고, 폰트주소부분에 업로드된 폰트파일의 주소를 올려줍니다.

@font-face{font-family:폰트이름; src:url(폰트주소)}

저의 경우에는 아래와 같습니다.

@font-face{font-family:나눔고딕; src:url(./images/DBFNT1.eot)}

이제 저장을 누르시고 바뀐 블로그 폰트 모습을 확인하시면 됩니다.
Posted by designeer shyfragrance

댓글을 달아 주세요

  1. 혼수상태 2010.05.01 02:42 Address Modify/Delete Reply

    복잡하네요..

    • Favicon of https://shymean.tistory.com BlogIcon designeer shyfragrance 2010.05.01 10:19 신고 Address Modify/Delete

      저도 직접 해보고 바꾸는데 익숙해지기까지 정말 오래걸렸네요^^;; 그래도 힘들게 한만큼 효과는 확실히 있으니 꼭 한번 해보세요^^화이팅

  2. Favicon of http://damonisch.tistory.com BlogIcon 데모니슈 2010.05.12 23:22 Address Modify/Delete Reply

    와우~ 정말 정말 감사합니다.
    글씨체가 마음에 안드는 건 평소에도 줄곧 생각했었는데, 귀차니즘에 허덕이다 우연히 포스팅을 보고 바꿨습니다. 으흐흐흐흐...
    글씨체도 이것저것 실컷 바꿔봤네요. 덜덜덜.
    다 좋은데요....ㅠㅠ
    그런데요....
    하나 문제가 있는데, 왜 포스팅 제목은 글씨체가 겹치는 걸까요.ㅠㅠㅠ 소스를 수정해야 하나요?

    • Favicon of http://shymean.tistory.com BlogIcon shyfragrance 2010.05.13 09:28 Address Modify/Delete

      저도 이것저것 글씨체를 바꿔봤는데, 폰트 종류에 따라서 띄워쓰기가 안되는 것도 있고, 겹쳐져 보이는 것도 있고 그렇더라구요^^; 맥용/윈도우용 글씨체가 따로 있고, 트루타입과 그렇지 않은 글꼴이 있는것 처럼, 글씨체에 따라 특정 사용자에게는 웹폰트가 제대로 보여지지 않을 수도 있는것 같아요. 요즘 웹에 보면 글씨체를 네이버에서 배포하는 나눔고딕체로 채택하는 사이트가 많아졌는데, 나눔고딕은 이런 충돌이 없어서 그런것 같습니다. 저도 개성있는 글씨체들을 포기하고 나눔고딕을 선택한 이유가 바로 여기 있지요^^; 감사합니다

  3. Favicon of https://mingoo426.tistory.com BlogIcon 민구사이륙 2010.06.06 12:54 신고 Address Modify/Delete Reply

    EOT 파일이 있긴한데, 안보이고 WEFT 으로만 열때 보이는데 어떻하죠?

    • Favicon of http://shymean.tistory.com BlogIcon shyfragrance 2010.06.08 13:08 Address Modify/Delete

      저도 처음할땐 그렇더라구요.
      다른 폴더를 새로 만들어서 한번 다시 해 보세요.
      그리고 혹시모르니 디렉토리에 한글이 있는지 확인해 보시구요.

  4. Favicon of http://525600minutes.tistory.com BlogIcon BeeAnne 2010.08.26 10:54 신고 Address Modify/Delete Reply

    정말 유용한정보! 잘쓸께요~

  5. Favicon of https://sweetecho.tistory.com BlogIcon 탁함 2011.05.26 23:49 신고 Address Modify/Delete Reply

    유용한 정보 감사합니다! 티스토리 글꼴 바꾸고 싶어서 이것 저것 찾아보다가 좋은 정보 발견했네요. 덕분에 글꼴 예쁘게 바꿨어요(^^)

  6. 2011.06.24 10:02 Address Modify/Delete Reply

    비밀댓글입니다

  7. Favicon of https://jinims.tistory.com BlogIcon 최찌니 2016.02.01 18:48 신고 Address Modify/Delete Reply

    글씨가 옆으로 누웠네요 ㅠㅠ