demun(대문블로그)

티스토리스킨수정/제목2010. 9. 25. 06:00

글 제목이나 글의 줄꿈을 할 대가 있습니다. 제가 스킨을 만들고 꾸미고,,,,,만지작하다보니 궁금한점이 있어서 찾아봤습니다. 우선 제 블로그 타이틀에 살짝 적용해봤습니다. 일반적으로 블로그 타이틀은 중요하기 때문에 이라는 태그를 사용합니다. 또는 h1 을 이용하기도 합니다. 티스토리의 경우 아래와 같은 식이죠. [#\#_article_rep_title_##] 그런데 문제점은 본문의 폭은 한정되있고 블로그를 하다보면 긴 제목의 글이 있을수 있습니다. 짧은글의 경우는 문제가 없는데요. 저는 일단 제목의경우 css 로 살짝 변경하여 배경이 들어가게끔 했습니다. 그리고 padding으로 간격을 조정해서 간단하게 배치를 하였습니다. 줄 바꿈 하지않고 ... 보이게 하기. 일단 사용된 이미지는 아래와 같습니다. 그..

티스토리스킨수정/사이드바2010. 9. 12. 12:06

스킨을 제작할때 가장 유용하게 사용할수 있는 레이아웃이 바로 3가지 형태의 사이드바이더군요. 그래서 그러한 형태로 만들었는데 어느날 한가지 레이아웃을 더 추가하면 좋겠다싶어 급수정에 들어가서 4가지 형태로 만들었습니다. 참고 링크studiopress_adsense ver_2 티스토리 스킨배포 재 포스팅을 합니다. 먼저 스킨을 배포할때의 사이드바는 아래와 같습니다. 사이드바를 수정한후는 아래와 같습니다. 제가 수정하는것을 글로 쓸려고 하니 코드로는 얼마 안되는데 이걸 이해시킬려고 글을 작성하니 넘 많아서 그냥 코드를 변경해서 업로드합니다. div id="sidebar 부터 여기까지 모두 지우세요. 그리고 아래의 코드를 삭제한곳에 넣으세요. 다음에 css 부분입니다. /* ===== 사이드바 ====== *..

티스토리스킨수정/스킨수정팁2010. 6. 13. 06:00

괜찮은 패턴중에 아래것을 사용하기로 했습니다. 근데 블로그에 사용하려니 삭막해서 평소 이뻐라하는 소녀시대 유리를 나타내게 하는것이 어떨까 생각하다가 넣어봤습니다. 이 작업은 블로그 배경으로 사용하는걸로 전제합니다. 일단 배경으로 사용하려는 이미지 주소를 알아야겠죠. 일단 소녀시대 유리로 검색을 해서 전체 그림이 있는것을 찾아봤습니다. 그래서 아래의 그림으로 낙점했죠. http://www.sportsseoul.com/news2/entertain/news/2009/0624/200906241057481002_1.jpg 그리고 패턴으로 사용할 이미지는 막상 글쓸때 찾아보려니 어디에 있는지 모르겠네요. 대략 아래의 이미지 입니다. 패턴은 구하려 하면 얼마든지 구할수 있으니 구하시면 되구요. 아래주소에 몇가지 있으..

티스토리스킨수정/스킨수정팁2010. 6. 13. 06:00

이전에 이미지를 패턴으로 만들기와 소녀시대 유리를 패턴위에 넣는법을 배웠습니다. 관련글 [팁/포토샵] - 소녀시대 유리 블로그 배경 패턴으로 만들기 [팁/포토샵] - 이미지를 패턴으로 만들기 이번에는 배경으로 만든 소녀시대 유리를 블로그 배경으로 사용하고 항상 따라다니게 할려고 합니다. ㅎㅎㅎ 결론은 간단합니다. 혹 모르시는 분을 위해 작성하니 아시면 넘어가시기 바랍니다. 현재 제 블로그에 유리가 항상 따라다닐겁니다. 물론 해상도가 작으면 안보입니다. 커야만 보이죠. 서론 접고 , 만든 배경을 html 편집창에서 업로드합니다. 이미지파일(유리)이름이 예를들어 blogBg.jpg 라고 가정합니다. 업로드했으면 css 편집창에서 body 부분에 배경을 지정한 부분만 아래처럼 추가해줍니다. 또는 수정해줍니다...

티스토리스킨수정/스킨수정팁2010. 6. 6. 06:00

카테고리의 모든글 또는 검색을 해서 나오는 리스트 부분을 배경색을 넣어서 하나의 블럭이 적용되는것을 알아보겠습니다. 이 방법은 마우스를 갖다 대었을때 즉 hover 기능이 좋습니다. 따로 지정하지 않아도 하나의 줄 전체가 선택이 되어지거나 마우스를 따라 가듯이 하는것이 좋습니다. 현재 제 블로그의 카테고리 분류 전체보기를 클릭해보세요. 그럼 아래처럼 나올겁니다. 티스토리의 치환자 부분을 참고하세요. http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4#2-1 html 편집창에서 로 되어있는지? 또는 로 되어있는지 확인합니다. id 로 되어있을경우 css 편집창에서 # 로 하고, class 로 되어있을경우 . 으로 합니다. 이점 ..

티스토리스킨수정/사이드바2010. 6. 2. 14:31

이전에 작성한 글이 있는데 스킨 수정에 어려움을 겪고 있는 분들을 위해 비교적 쉽게 정리하겠습니다. 사이드바의 링크나 글 보관함 , 또는 추가적으로 링크를 추가하실때 사용하시면 좋은 팁입니다. 참고로 아래 참고사이트를 링크했고 제가 사용할때는 이정도만 하면 head부분에 자바스크립트 추가 없이 html 수정만으로 사용할수 있습니다. 혹시 안되시거나 하시면 댓글 바랍니다. 사이드바의 html 은 대략 이렇습니다. 링크 모듈 수정하기 링크 [#\#_link_site_#\#] 위의 강조된 부분을 아래처럼 수정합니다. 링크 --- 블로그 이웃 --- ▶대문블로그 --- 링크 ---▶ 스킨 수정팁 width, color...등등은 본인이 원하는것으로 수정해도 됩니다. 그럼 아래처럼 변경됩니다. 글 보관함 모듈 수..

티스토리스킨수정/사이드바2010. 6. 2. 09:00

티스토리 스킨을 사용하던중 카테고리 부분에 대해서 이해가 안가는 분을 위해 몇자 적습니다. 초보분들과 티스토리 스킨에서 카테고리를 수정하고 싶은 분들은 이 글이 도움이 될겁니다. 일단 제일먼저 카테고리를 리스트 형식으로 볼거냐?그냥 카테고리 형식으로 볼거냐?.를 결정하셔야 합니다. 카테고리 리스트 스킨 - html/css 편집에서 단축키 Ctrl + F (찾기)를 통해 _category_ 를 찾습니다. 그럼 [#\#_category_list_##] 인경우(1번)와 [#\#_category_#\#] 인경우(2번)를 볼수가 있습니다. 1번 리스트의 경우는 아래처럼 리스트 모양으로 나옵니다. 2번인경우 아래그림처럼 + 버튼이 나오게끔 나옵니다. 위의 두경우다 큰메뉴가 있고 그 아래에 하위메뉴가 있는경우 입니다..

티스토리스킨수정/스킨수정팁2010. 5. 14. 09:00

블로그를 하다보면 방문자에게 보여주고 싶은 글이나, 좋은 글들을 보여주는것이 좋습니다. 다음뷰나 베스트에 뽑힌글등은 자체적으로 만들어진 메뉴등으로 보는이에게 깔끔하게 다가가서 좋습니다. 베스트에 뽑힌글이 아니더라도 보여주고 싶은 글이나 또는 링크, 글 보관함 등등 다른 링크를 깔끔하고 역동적인 화면으로 보여지게끔 하는것도 좋지요. 그중에서 단연 Horizontal CSS Menu 나 Vertical CSS Menu 가 돋보입니다. 허나 이것도 IE 라는 무서운 넘을 만나면 어떻게 변할지 모르지요. 또는 이미지를 삽입하거나하면 로딩이 느려지거나 웹 접근성을 해치거나하면 안 다느니만 못한 결과를 낳기도 합니다. 이것 저것 고려해서 저도 한번 달아봤습니다. 이전에 사이드바에 달아놓았던 demun 추천글과 현재..

티스토리스킨수정/제목2010. 5. 13. 09:00

간단하게 css 몇글자만으로 그럴뜻한 그림자효과를 줄수 있습니다. 한가지 IE 6,7,8 은 지원을 하지 않아서 사용을 안했는데요. 그래도 요즘은 파이어폭스나 크롬을 많이 사용하기 때문에 사용하면 좋습니다. 안한것보다 좋다는 이야기죠^^; 많은 부분에 적용하는것보다 포스트의 제목부분에 적용하면 좋습니다. 여러가지 꾸미는 방법이 있겠지만 간단이 그림자만 넣어보겠습니다. 파이어폭스 본 화면 크롬으로 본 화면 오페라로 본 화면 역시 좋습니다. 하지만 안되는것도 있다는점은 알아두세요. IE 6.0 로 본 화면 IE 7.0 로 본 화면 먼저 html에서 제목에 해당하는 부분을 찾아야 합니다. 치환자인 _article_rep_title_ 를 찾기를 통해서 찾아보세요. 공지사항에도 잇고 블로그 본문에 해당하는 부분도..

티스토리스킨수정/제목2010. 5. 11. 09:00

블로그 타이틀은 매우 중요하죠. 저도 실력이 없어서 좋은 이미지를 만들어 내지를 못하는데요... 여하는 롤오버효과를 내는 방법을 알아보겠습니다. 이전에 블로그 타이틀을 이미지로 교체하는 방법은 지난 포스팅을 참고하세요. studiopress adsense 스킨 타이틀 이미지로 수정하기 => http://demun.tistory.com/1588 타이틀의 이미지를 롤오버효과를 내는것은 하나의 그림을 두고 포지션을 이용해서 롤오버효과를 내는것이 있고 그냥 두장으로 효과를 내는것이 있습니다. 현재 제 블로그에 상단 우측에 RSS 버튼이 한장의 이미지로 포지션을 이용해서 롤오버효과를 낸 것입니다. 마우스를 올려보세요. 여기서는 두장의 이미지로 롤오버효과를 내보겠습니다. 먼저 이미지가 두장이 필요합니다. 저의 경우..