본문 바로가기

티스토리

티스토리 초대장 배포합니다. (마감)

2008. 2. 26.


최초 10장 중에서 2장은 아는 분께 이미 드렸고,
잊고있던(;;) 남은 8장 나눠 드릴께요.

댓글로 이메일 주소랑 어떤 목적의 블로그 만드실 건지만 남겨주시면 되고요.
저처럼 게으른 사람 보다는 열심히 블로깅 하실 분이었으면 좋겠네요 (같이 놀게요 하하~~)

마감되면 제목 수정해 놓을께요~! ^,.^!

-----------------------------------------------------------------------------------------
마감되었습니다.
생각보다 초대장을 못 받아서 블로깅을 못하시는 분들이 많나보네요..
초대장이 추가로 생기면 또 배포하도록 하겠습니다~!

티스토리는 초대장 개수를 늘려달라! 늘려달라!

댓글 24

블로그 스킨 변경 완료 (Easy Black)

2008. 2. 20.


블로그에 새 옷을 입혔습니다. 우훗~

굳이 따지고 보면 새 옷을 입히고 싶어서 입혔다기 보다는,
우리글닷컴에서 판매하는 우리돋움90c1이라는 웹폰트가 너무 이뻐보여서 구입한 후, 이전 스킨에 적용해보니
영~ 스타일이 살지 않아.. 웹폰트와 어울릴만한 스타일의 스킨을 찾고 찾던 중..

seevaa님께서 어제 티스토리 포럼에 올려주신 Easy Black이라는 스킨이
웹폰트와 너무 잘 어울릴 것 같아 바로 적용하였습니다.

그냥 업로드만 하면 끝날 줄 알았는데, 이게 의외로 바꿔줄 것이 많네요.
1. css 파일에 웹폰트 적용해 주고,
2. 이전에 쓰던 통계 script(다음 웹인사이드) 추가해 주고,
3. 이전에 쓰던 google Syntaxhighlight script 추가해 주고,
4. 전에는 카테고리를 2Level로 나눠 관리했는데, 지금 스킨은 1Level로 보는게 이쁠 것 같아서
    이전에 쓰던 서브 카테고리들을 상위 카테고리에다가 전부 합쳐주고,
5. 그 외 이것저것 자잘한 것들 다 수정해 주니..

시간이 꽤나 흘러갔군요. 핫핫~
그래도 이 깔끔한 페이지를 보니 확실히 옷이 날개인 것 같습니다. 만족~ 만족~

 
(Internet Explorer 7.0에서 보이는 fly32.net - 웹폰트가 적용됨)


그런데 제가 쓰고 있는 웹폰트가 ClearType 환경에서만 제대로 보인다고 하니
깨져 보이시는 분은 요기를 클릭하셔서 환경을 ClearType으로 바꿔 주시고요.

원래 이 웹폰트 라는 게 Internet Explorere 전용이라
FireFox나 Safari같은 웹브라우져에서는 제대로 보이지 않는다고 하길래
컴퓨터에 FireFox를 설치하여 웹폰트 없이도 최대한 이쁘게(?) 보이도록 css를 수정하였습니다.
(웹브라우져별 css 적용하는 법은 무쇠다리님의 글을 참고)

 
(FireFox 2.0에서 보이는 fly32.net - 웹폰트가 적용되지 않음)


마지막으로.. 티스토리에서 형광색으로 줄을 그어 메모를 남길 수 있는
레몬펜이라는 플러그인을 오픈하였다길래 이것도 적용해 보고,

첫페이지를 꾸밀 수 있는 태터데스크도 만들어 이것저것 넣어 보았습니다.

어때요.. 괜찮은가요!!?? ^^;

'끄적끄적' 카테고리의 다른 글

airwalk 크로스백을 샀는데.. 아 놔~  (6) 2008.02.25
블로그 스킨 변경 완료 (Easy Black)  (7) 2008.02.20
장세척하다..  (4) 2008.02.20
블로그 이사 완료  (2) 2008.02.13
댓글 7
  • 쎄바넷에서 트랙백 타고 찾아왔어요~ 예쁘네요 'ㅡ'
    둘러보다 보니; 여기 폰트가 돋움12px인가요? 좀 더 작고 귀여운 것 같아서 ''; (파폭사용자!)
    웹폰트 적용시켰다는 말을 듣고 익스플로러 켜서 설치하고 봤어요ㅋ 예쁘네요~ㅋ

    • Favicon of http://fly32.net BlogIcon 삼이 2008.02.21 09:45 댓글주소 수정/삭제

      이쁘게 봐주셔서 감사합니다 ^^;;
      파폭에서는 굴림12px에 웹폰트랑 한줄당 글자 수를 좀 비슷하게 해볼라고
      LETTER-SPACING:-1을 주었어요~
      이쁘긴 한데 가독성은 그다지.. -_-;;

  • 이 스킨으로 변경해볼까 하고 잠깐 고민했었습니다.

    근데, 수정할려고 생각하니 머리부터 아프더군요!! 일단 백업이라도 해두어 할텐데 말이죠~

    스킨 이쁘네요`!~ 잘 어울리는것 같습니다.

    • 좀 딱딱하기는 하지만, 깔끔해 보여서 저는 바로 적용했어요~
      그런데 제가 좀 초보라 이것저것 바꾸는 데 굉장히 오래 걸리드라고요 ^^;;
      아마 한 몇 년(?)간은 그대로 갈 듯 싶습니다 ㅋ
      재아님 블로그도 굉장히 깔끔해서 보기 좋아요~

  • 와우, 쎄바넷에서 트랙백 보고 왔는데,
    저랑 같은 스킨인데도 뭔가 많이 달라보이네요, 깔끔하고 좋네요..^-^b
    잘 보고 갑니다~

  • 저도 이 스킨으로 변경해볼까 합니다만
    tistory skin 직접올리기를 하는데 skin파일과 css파일이 업로드제한이 되어 있다는 메세지가 나오더군요.
    무슨 의미 인지요. 부탁드립니다.

  • 바퀴의 블로그Software Hardware Game Technology

    https://roachsblog.tistory.com/
    어떤폰트 알고싶어용 알려주세용 ㅎ

티스토리에 Google Syntax Highlighter 적용하기

2008. 2. 11.

프로그램 소스 코드를 포함하여 포스팅 할 때
특수문자 삽입, 줄 맞춤 등등에 굉장히 신경을 써야하고,
글쓴이의 생각과 소스 코드가 얽혀 어지럽게 보일 수 있는데
Syntax Highlighter를 사용하면 코드를 깔끔하게 보여줄 수 있습니다.

설치를 위해서 Google Syntax Highlighter 홈페이지로 들어가
상단의 Download 탭을 눌러 최신버젼을 다운받습니다.

다운받은 파일의 압축을 풀어
티스토리 관리자 페이지 - 스킨 - 직접올리기 페이지로 들어가
Scripts, Styles 폴더에 있는 모든 파일을 업로드 합니다. (images 폴더에 저장됨)

업로드가 완료 되었으면,
티스토리 관리자 페이지 - 스킨 - HTML/CSS 편집 페이지로 들어가
skin.html 소스의 </body> 바로 윗 줄에 아래 코드를 삽입합니다.
※ 모든 brush script 삽입시 페이지 로딩에 영향을 줄 수 있으므로
   아래 script 중 자신이 사용할 것만 삽입하는 것이 좋다고 합니다.

<!-- google code for syntaxhighlight -->
<link href="./images/SyntaxHighlighter.css" type="text/css" rel="stylesheet" /></link>
<script language="javascript" src="./images/shCore.js"></script>
<script language="javascript" src="./images/shBrushCpp.js"></script>
<script language="javascript" src="./images/shBrushCSharp.js"></script>
<script language="javascript" src="./images/shBrushCss.js"></script>
<script language="javascript" src="./images/shBrushDelphi.js"></script>
<script language="javascript" src="./images/shBrushJava.js"></script>
<script language="javascript" src="./images/shBrushJScript.js"></script>
<script language="javascript" src="./images/shBrushPhp.js"></script>
<script language="javascript" src="./images/shBrushPython.js"></script>
<script language="javascript" src="./images/shBrushRuby.js"></script>
<script language="javascript" src="./images/shBrushSql.js"></script>
<script language="javascript" src="./images/shBrushVb.js"></script>
<script language="javascript" src="./images/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- google code for syntaxhighlight -->

사용법은 Google Syntax Highlighter 홈페이지를 참고하시고요,

더 자세한 설치법은 bluenlive님의 아래 포스트를 참고하세요.
- 블로그팁 : 티스토리에서 Google Syntax Highlighter 사용하기
- 블로그팁 : Code Highlighter 더 쉽게 사용하기

댓글 4