제가 쓰는 스킨은 티스토리 최고의 인기스킨 공지용 블랙스킨!!
그런데 기본 스킨에서 공지용 블랙스킨으로 바꿨더니...
디자인은 깔끔한데 필수 기능 몇개가 사라졌더군요.
제일 마음에 안드는 것은
1. 링크가 전혀 표시되지 않는 것!!!
2. more/less 의 아이콘이 안나타나는 것!!!
부단한 연구와 노력 끝에 more/less 아이콘을 나오게 하는 건 성공해서
저번에 게시물도 올렸습니다.
티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법
하지만 여전히 링크는 해결되지 않았습니다.
저는 일일이 링크에 밑줄을 나오게 하거나 색깔을 바꾸었는데
귀찮기도 하고, 파랑실선이 계속 드러나 있으니 깔끔하지가 않더군요.
그러던 어느날, bluenlive님께서 무지몽매한 중생을 불쌍히 여기시어
하늘과 같이 높고 바다와 같이 넓으신 은혜를 베풀어 주시사~ 드디어 구원을 받았습니다.
지금은 제 블로그 게시물 내에 삽입된 관련글에 모두 빨간 점선이 나타나구요,
제 블로그 로고, 블로그 이미지, 공지, 사이드바 등 게시물이 있는 곳이면
"어디선가 누군가에 링크가 생기면~ 틀림없이 나타난다~ 홍반장~" 이 아니라;;
파란 줄이 생깁니다. 부러우시죠?? ^^
자자~ 침 닦으시고..
여러분도 할 수 있습니다~
조금 어렵지만 웹맹인 저도 했으니 여러분도 할 수 있습니다~
먼저 이것은 skin.html 이 아니라 style.css 에서 수정하셔야 합니다.
a:link - 링크가능한 곳을 나타내는 코드
a:visited - 한번 방문한 곳을 나타내는 코드
a:hover - 마우스를 가까이 대었을 때 밑줄 나오게 하는 코드
다음은 공지용 블랙스킨 style.CSS 파일의 기본 설정입니다. (본문이 아니라 사이드바의 설정)
- 중략 -
a:link { color:#333; text-decoration:none ; }
a:visited { color:#333; text-decoration:none ; }
a:hover { color:#666; text-decoration:underline ; }
a:active { color:#666; text-decoration:none ; }
사이드바 등의 링크에 마우스를 가까이 대면 파란 밑줄이 나오게 하는 명령어 코드입니다.
만약 빨간 민줄을 원하시면 blue를 red로 바꾸시면 됩니다.
저는 여기서 빨간 글자 부분을 아래와 같이↓↓↓↓↓↓ 수정해주었습니다.
a:visited { color:#333; text-decoration:none; }
a:hover { color:#666; border-bottom-width: 1px; BORDER-BOTTOM-COLOR: blue; border-bottom-style: solid; }
a:active { color:#666; text-decoration:none; }
border-bottom-width: 1px; ㅡ 밑줄의 굵기
BORDER-BOTTOM-COLOR: blue; ㅡ 밑줄의 색깔
border-bottom-style: solid; ㅡ 점선인지, 실선인지를 결정
저는 파랑색 실선이 나오도록 했습니다.
지금 제 블로그 아무 곳이나 마우스를 대보시면 파란 밑줄이 나올 것입니다.
다음은 본문 내의 링크 표시 부분입니다.
이 곳도 처음에는 다음이( text-cecoratin:none; ) 기본적인 상태입니다.
.article a:visited { color:#666; text-decoration:none; }
.article a:hover { color:#666; text-decoration:underline; }
.article a:active { color:#666; text-decoration:none; }
아래는 수정 후의 모습입니다.
.article a:visited { color:#208; border-bottom: #ffc0c0 1px dotted; text-decoration:none;}
.article A:hover { border-bottom-width: 1px; BORDER-BOTTOM-COLOR: blue; border-bottom-style: solid; }
.article a:active { color:#666; text-decoration:none;}
저는 링크될 부분의 색상은 빨간 점선으로 했구요, 링크에 밑줄, 점선 나오게 하는 스타일CSS.txt 파일 다운로드 하기
color:#508; border-bottom: #ffc0c0 1px dotted; - 링크에서 표시될 색상과 선 굵기, 선 모양(점선)
마우스를 가까이 댈 때는 위와 같이 파란 밑줄입니다.
현재 제 블로그는 복사가 안되므로, 보고 따라치기가 어려운 분들을 위해서 텍스트 문서를 첨부해드리겠습니다. 이것을 다운받으셔서 Style.css 에 복사해서 여러분 각자의 취향에 맞게 수정하시면 됩니다.
링크에 밑줄 나오게 하는 스타일CSS.txt
쉽죠? :)
링크가 제일 쉬웠어요.. 책 한권 낼까요?ㅋㅋ
'읽을 거리 > 블로그 이야기' 카테고리의 다른 글
| 블로그 통계 분석 2007년 11월~2008년 1월까지 (56) | 2008/02/14 |
|---|---|
| 너무 음란한 내 블로그? -_- (부제: 유입검색어 분석) (124) | 2008/01/30 |
| 펌질/불펌에 대한 단상 (부제: 절대바통 놀이 까칠맨님 바통터치) (72) | 2008/01/29 |
| 링크된 곳에 파란 점선/밑줄 나오게 하는 html태그!! (84) | 2008/01/28 |
| 다음 블로거뉴스와의 혈압 오르는 전화통화 내용 공개 (134) | 2008/01/22 |
| 포털싸이트의 횡포: 다음, 네이버는 왜 펌글에 관대한가?!! (160) | 2008/01/22 |
| 내 블로그 발견지수라ㅡㅡ;; (34) | 2008/01/21 |
트랙백 주소 :: http://blutom.com/trackback/400
-
Subject: 절대 바톤 놀이...새드개그맨님의 요청...m,.m
Tracked from 까칠맨의 버럭질! 2008/01/28 23:16 삭제- 절대바톤놀이?? - 새드개그맨님 - 조인스닷컴 - 내가 정한 다음 주자... * rince 님 - 유머란? * 파란토마토 님 - 펌질에 대해 * 좀비 님 - 가족이란?
댓글을 달아 주세요
멋진 팁입니다..파란토마토님도 이곳저곳에서 많은 재능을 보여주시네요..ㅎㅎ
감사합니다. 그저.. 시행착오를 통해 배우는 거죠^^
오오 ~ 이거 좋네요.
링크를 자주 써먹진 않지만
눈에 잘 띄어서 고민하고 있었는데, 한 번 사용해 봐야겠는데요.
유용한 팁 감사 드립니다
감사합니다.
저도 링크표시가 안나니까 너무 불편해서요^^
제 블로그가 링크되다니 영광입니당~
링크 지우지 말아주세요~~~
아이쿠.. 지우다뇨^^ 감사표시를 더 하고 싶은데 어떻게 해야될지를 몰라서.. 저번에 어떤분은 제 링크를 통한 유입자가 며칠간 제법 되었다는데.. bluenlive님께도 많이 가셨으면 좋겠습니다.
와~~~~ 궁금했었는데... 당장 적용해봐야겠습니다. 헤헤^^* 고맙습니다.
도움이 되면 저도 기쁘지요^^
@.@.. 여긴 어디 나는 누구......
저두 꼭 해볼랍니다 ㅠ.ㅠ!
하하.. 기대하겠습니다~~
와 이렇게 하는군요. 궁금했는데 역시 많은 도움 받고 갑니다.
Deborah님, 감사합니다^^ 격려의 댓글에 힘이 납니다.
센스쟁이~ㅎㅎ
감사합니다.^^
파란토마토님은 블로그에 유익한 정보 너무 많이 주시는 듯
하하..반맹님.. 그래서 불만이신가요? ㅋㅋㅋ
ㅎㅎ 제가 궁금해하는것은 왜케 인기가 많을까요 ㅎ
감사합니다. 꼼꼼히 잘 쓰셨습니다
안그래도 써야지 하던 참에 재아님 질문 보고 빨리 서둘렀습니다.^^
CSS에 대해 많이 알아가시는군요 ^^ 축하드립니다
아이쿠.. 아직도 헤매는 중입니다. CSS 나 html은 너무 어려워요~~
저는 그걸 모르고 본문에서 링크걸때 일일히 밑줄 그었는데 ㅠㅠ 아 이거 다시 고쳐야 하나...
설마 파워블로거 페니웨이 님께서... 이런...
하하..저도 그랬답니다^^
ㅎㅎ~~
미 투~~ ^^;
하하.. 다 그렇죠^^ 티스토리가 지원 안해주는데 우리가 무슨 수로 알겠냐고요?
한번 해 봐야겠는데요..
유용한 팁이에요^^
도움이 되면 저는 뿌듯한 보람을 느낍니다^^
언제나 공부하시는 파란토마토님 +_+
컴맹 중생을 위하여 이렇게 좋은 팁을... 굽신굽신.
유용하게 쓰겠습니다 ^^ 감사합니다!!
저야말로 컴맹 웹맹이랍니다^^
뭔가 머리깨질거같은 이 안습한 내용들은....
덜덜덜덜덜
하하하.. 웹맹인 저도 했으니 할 수 있을거에요
반성해야겠네요.
저는 링크를 걸때 굵은글씨, 파란글씨, 분홍바탕 이렇게 일일이 걸었었는데.
정말 부끄럽네요. ㅡㅡ^
부끄럽긴요.. 다들 그러는 걸요.. 저도 그랬답니다.ㅠㅠ
당황스러운 재미와 뜻하지 않은(?)정보를 얻게되는 파란토마토님의 블로그로 오세요~~~
이상 광고계의 이단아 가우스광고에서 제작한 광고였습니다.
개그는 개그일뿐 따라하지 말자~~[후다닥] ^^;;
하하하.. 감사합니다!! 이런 이런.. 가눔님께 잘 보여야겠내요.. 광고제작도 해주시고^^
가눔님도 개그콘서트 좋아하시나봐요^^ 저도 그 프로 완전 팬인데.ㅋㅋ
개콘은 제가 군대에 있을때가 절정이었죠.^^ 요즘은 통 못 봐서 잘 모르겠네요.
또 한가지 배우고 갑니다. ㅎ
음하하.. 뿌듯~
오~~나중에 필요하면 보고 따라하면 되겠네요..^^
조금 귀찮아도 한번만 하면 정말 편하답니다^^
배워서 남 주시는 파란토마토님을 보면서 느끼는 점이 많습니다.
도움된다는 댓글 보면 힘이 나지요^^
과연 2007년 행복컨텐츠상을 받으실만 합니다..^^
좋은팁을 또 알았네요..^^
하하..여우님.. 그런가요? 감사합니다.^^
정말 배워서 남주시는군요^^ 좋은 기술 고맙습니다
별빛님 댓글 감사합니다^^^^^
저도 그걸 계속 찾고 있었답니다. ㅎㅎㅎ
더불어 지금 댓글 쓰는 창아래 요 "악플보다~ 꾸벅..." 써져있는 이것도
찾고 있었죠. more/less도 역시요 ㅋㅋ
글 세개 다 정독하고 가겠습니다. 꾸벅(_ _)
이런 보람을.ㅠㅠ 저 정말 하나 쓰고 나서 아.. 힘들어.. 이젠 대충해야지. 이런 생각하다가 이런 댓글 보면 힘이 난답니다.
스킨 수정을 하시는 분들께 아주 좋은 팁이군요...수고하셨어요...^^
저 같으면 밑에 '무플 겁 안난다.. 악플은 싫어~~'라고 적을 듯...ㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷ
꼬이님, 감사합니다.^^ 사실 저도 악플 싫어요.ㅋㅋㅋ
역시 이곳은 올때마다 많은걸 훔쳐가게 만드네요.
오늘도 좋은거 배워 갑니다.
야매님. 댓글 감사합니다.^^
와 좋아요~~~~우와~
하하하.. 댓글 감사합니다
저도 좀 바꿔보고 싶었는데.. 이번 주말엔 파란토마토님께 배운 소스로 손 좀 대 봐야겠는데요~
늘 좋은 팁 감사해요!! 파란토마토님 덕분에 여기저기 헤메이지 않고 스킨을 업글하고 있어요..^^
라라윈님.. 늘 격려의 댓글 저도 감사합니다.^^
간결하게 잘 설명해 주시네요 ^^
수고 많으셨어요.
앞으로도 요런팁들 종종 부탁드립니다.
마틴님, 댓글 감사합니다. 앞으로도 이런 팁 부탁?? 그럼 앞으로도 제가 시행착오를 많이 겪길 바라신다는 말씀?? ㅋㅋ
멋집니다. 정말 유용한 팁이군요^^잘 활용할께요.. 고맙습니다.
감사합니다^^ 이런 댓글에 힘이 나지요.
저도 따라해볼려고 했는데... 제 블로그는 기본에 되어있는거 같아요..
아닌가;; 이해를 잘 못한건가;
방금 블로커님 블로그에 가서 실험해봤는데 적용 안되어있습니다. 마우스를 가까이 대면 회색줄은 나오는데 이건 원래 되는거고.. 링크표시 안납니다. 또 회색줄보다는 파란줄이 낫죠^^
Css쪽 기본은 알고 있으니 패스 = ㅅ=)
(은근 자랑중 엣헴엣헴)
아..안군님은 아시는군요.ㅋ 진작 물어볼걸 그랬나요? 혼자 낑낑대지 말고?^^
안녕하세요 토마토님 ^^ 까칠맨입니다. 포스트와 관계 없는 부탁하나... 혹시 절대 바톤 놀이라고 아시나요? ㅋ 저도 부탁을 받았는데...시간 되시면 제 바톤도 받아주십사 하구요...트랙백 걸고 갑니다. 반드시 하셔야 할 건아닙니다. 헐헐..^_^
꺅~>/////////<
너무너무 좋은 글이예용~*^-^*
감사해용~ㅋ
티스토리가 꼭 이렇게 중요한 거 몇개씩을 빼먹곤 하죠..긍정의 힘님께 도움이 된다니 기쁩니다.
저도 지금 점선 밑줄을 사용하고 있기는 한데..파란토마토님께서 조금만 일찍 포스팅해주셨더라면 고생을 덜했을텐데.
밉습니다^^
하하..그런가요? 그럼 장대비님이 먼저 하셨으면 저도 고생 좀 덜했을텐데요^^ㅋㅋ
와.. 이런 멋진 기능이...
근데.. 전 지금 쓰는 플러그인이 좋아요..ㅋㅋ
무지개 빛으로 빛나는거.. 나중에 저도 한번 이 방법을 써볼께요..ㅋ
이걸 지정하셔도 무지개색 빛내기는 됩니다. 이건 마우스가 안닿았을때 링크를 표시해주는거구요, 무지개는 마우스가 가까이 갔을때 표시해주는 기능이거든요.
어려운 CSS, HTML도 파란토마토님처럼 자기 경험과 더불어 설명해 주시니 이해하기 쉽네요. 물론 파란토마토님에게 팁을 알려주신 분들의 고마움이 먼저고요. 저도 적용해봐야겠어요. (언제 적용할지 모르지만...아 이 게으름..^^
CeeKay님, 감사합니다.
저도 웹맹이라 워낙 헤매다가 알게 된 경험이라서 초보자들이 더 쉽게 볼 수 있을 거 같긴 합니다.^^ 저한테 알려주시는 분들 정말 무보수에 친절하게 알려주시니 너무 감사하게 여기고 있습니다.
오호.. 지금 스킨엔 문제가 없지만 나중에라도 스킨 변경했을 때 생길 문제에 대해 즐겨찾기좀 해둬야겠습니다. ㅋㅋ
월고님, 현재 스킨에서도 사용하시면 됩니다. 월고님 스킨에도 지금 링크 표시 안되고 있습니다. 티스토리 몇몇 스킨 빼고는 대부분 이 기능이 지원이 안되는데 많은 분들이 무지개로 변하는 걸 이 기능이 된다고 착각하시는 것 같습니다.
아.. 저는 글씨가 진한 녹색으로 표시되어 되는 구나 싶었는데 아니였군요 ㅋ_ㅋ 바로 적용해봐야겠습니다. 좋은 지적 감사합니다. ㅎㅎㅎㅎ
네. 이제 되더라구요^^ 깔끔하니 보기 좋네요. 근데 사이드바에는 안하셨는지.. 카테고리에는 줄 표시가 안납니다.
소스 그대로 넣었는데 왜 카테고리는 적용이 안되었지
-_-;; 확인중입니다. ㅎㅎㅎ
저도 이런 건 한번 할 때마다 너무 어려워서 한참 헤맨답니다;;