스토리 티에디션 발행 소식을 접하고, 저의 첫번째 티에디션을 발행해봤습니다.
이 티에디션으로 제 블로그 첫번째 화면을 구성할 거라, 첫번째 티에디션은 제 블로그에 있는 주요 주제를 통괄하는 내용으로 만들었습니다. 기존에 테더데스크가 발행이 안되서 방문자들이 적었던 반면에, 티에디션은 테더데스크의 모든 기능을 물려받으면서도, 더 다양한 편집기능과 발행의 기능까지 추가된 점이 특징인것 같네요.
티에디션은 아래와 같이 티스토리 로그인 후에 블로그 홈에 접속하면, 오른쪽하면에 뜨는 티에디션 버튼을 눌러 시작할 수 있습니다.


 블로그 관리화면의 스킨 탭에서 선택하여 편집을 시작할 수도 있습니다. 글을 작성하고 나서 바로 티에디션을 관리할때 편한 기능일 것 같네요.



이제 티에디션으로 진입했습니다. 아래 그림은 시작 화면입니다. 언틋 보면 테더데스크 편집화면과 크게 달라진점은 없어 보이는데, 따로 보관함을 만들어 저장할 수 있는 기능도 있네요. 아쉬운 점은 이 화면에서 바로 발행하는 기능이 아직 마련되지 않았다는 것 같습니다.


왼쪽 위의 작은 편집도구는 이동과 최소화가 가능합니다. 구체적인 기능은 아래와 같습니다.



이것저것을 포괄하는 구성으로 티에디션을 편집한후, 저장하기를 눌러 나갑니다.


완성된 화면을 보니, 위 그림에 표시한 것과 같이 너비가 맞지 않네요. 너비를 조정하기 위해 다시 티에디션 버튼을 누릅니다.



편집화면에 들어오면, 위의 너비조정 버튼을 눌러 너비를 알맞게 늘려줍니다.
위치도 원하는 대로 움직일 수 있군요~



너비가 알맞게 조정이 됐습니다. 저장한 티에디션은 보관함에 저장돼 언제든지 다시 이용할 수 있습니다.


이제 발행을 해 보겠습니다. 아래 그림과 같이 관리화면으로 접속해, 티에디션 설정 화면으로 들어가면, 발행하기 편집탭이 있습니다. 발행처는 현재 트위터와 다음VIEW 두 개 군요. 발행처를 선택한 후 제목을 만들어 주고, 발행 버튼을 누르면 끝~!




발행된 제 첫번째 티에디션을 확인할 수 있습니다.
주소는 http://자신의티스토리블로그주소/te/발행호수와 같이 설정되는군요.
제 첫 번째 티에디션 주소는, http://shymean.tistory.com/te/1 이네요.
그리고 두 번째 티에디션은 IT계열로 꾸며봤습니다.(http://shymean.tistory.com/te/2)
다음 티에디션 발행 계획은 자동차(http://shymean.tistory.com/te/3) 그리고 경제 부문 입니다.


다음뷰에 티에디션을 발행했기 때문에 다음 뷰를 통한 구독도 가능합니다. 이 점이 바로 티에디션의 가장 큰 장점이라고 생각하는데요, 나만의 티에디션 발행을 이용해서 출판을 할 수 있는 것입니다. 일일히 RSS피드를 확인할 필요없이 관심블로거의 티에디션을 확인하면 되니 정말 편리한 기능이 아닐수 없군요.^^ 2호 발행부터는 주제를 가진 티에디션을 만들어 봐야겠습니다.

Posted by designeer shyfragrance

댓글을 달아 주세요

  1. Favicon of https://mamanim.tistory.com BlogIcon 경빈마마 2010.05.15 21:21 신고 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

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



티스토리도 트위터처럼 스마트폰에서 이용이 가능하답니다. 아이튠즈에서 무료로 받을수 있는 티스토리어플 덕분인데요,
아이팟뿐만아니라 오즈앱으로도 출시가되서 곧 모든 스마트폰 기종에서 티스토리 어플을 즐길 수 있게 됐습니다.
아이팟/아이폰에서는 가로자판모드를 지원하지않기때문에 내용 입력에 다소 불편함이 있군요.


티스토리 제 블로그를 등록한뒤에 제 블로그가 목록에 뜨는군요^^


글쓰기를 누르면, 이렇게 간단한 인터페이스가 나옵니다.


일단 아이팟/아이폰에서 티스토리어플로 작성한 글은, 이렇게 로컬에 저장, 혹은 공개와 비공개로 포스팅 할 수 있습니다. 발행은 차후에 컴퓨터 웹상에서 등록해야한답니다.










가로모드를 지원하지 않아서 불편함이 있기 때문에,
주로 바로바로 찍은 사진을 밖에서 포스팅할때 정말 유용하게 쓰일듯 하네요^^
짦은 생각들을 웹상에 올리는건 트위터로도 충분하니,
요 어플은 사진 업로드용으로 해야겠습니다.


iPod 에서 작성된 글입니다.

블로그코리아에 블UP하기
Posted by designeer shyfragrance

댓글을 달아 주세요