티스토리 뷰
티스토리 / 링크(Link) 아이콘 추가하기
이번에는 밋밋한 하이퍼링크가 이쁘지 않아서 눈에 잘 띄도록 아이콘을 추가해보았습니다. 보통 글에 하이퍼링크를 걸게 되면 아래 사진 처럼 굵은 파란색 텍스트로 변경됩니다. 그리고 마우스를 해당 위치로 옮기면 텍스트에 언더라인이 생깁니다. 이게 아무 효과도 걸지 않은 기본 상태의 하이퍼링크 입니다.
저는 스킨을 편집하여 보시는 것처럼 하이퍼링크에 아이콘을 추가했습니다.
리소스 구하기
그래픽을 하시는 능력자분들은 직접 리소스를 제작하시면 되지만, 저 같이 디자인 감각이 없는 사람들은 구글링을 통해 적당한 아이콘을 구하시면 됩니다. [아이콘 검색 바로이동]
마음에 드는 아이콘을 구하셨으면 이제 스킨편집으로 이동합니다.
우선 아이콘 리소스를 [스킨편집 -> 파일업로드] 업로드 합니다.
그 다음 소스코드를 넣어줍니다.
저 같은 경우 HTML을 변경하기 귀찮아서 이미 선언된 클래스에 해당 내용을 추가했습니다.
1. CSS: .linkIcon 클래스 a 속성 추가 / url 뒷 부분, 업로드한 이미지 파일과 이름 동일하게 변경
.linkIcon a[href^="http://"] {
background: url("./images/link_Icon.png") no-repeat right center;
margin-right: 3px;
padding-right: 15px;
}
.linkIcon a[href^="http://cfile"] {
background: none;
}
2. HTML:
이번에는 밋밋한 하이퍼링크가 이쁘지 않아서 눈에 잘 띄도록 아이콘을 추가해보았습니다. 보통 글에 하이퍼링크를 걸게 되면 아래 사진 처럼 굵은 파란색 텍스트로 변경됩니다. 그리고 마우스를 해당 위치로 옮기면 텍스트에 언더라인이 생깁니다. 이게 아무 효과도 걸지 않은 기본 상태의 하이퍼링크 입니다. 저는 스킨을 편집하여 보시는 것처럼 하이퍼링크에 아이콘을 추가했습니다. 리소스 구하기 그래픽을 하시는 능력자분들은 직접 리소스를 제작하시면 되지만, 저 같이 디자인 감각이 없는 사람들은 구글링을 통해 적당한 아이콘을 구하시면 됩니다. [아이콘 검색 바로이동] 마음에 드는 아이콘을 구하셨으면 이제 스킨편집으로 이동합니다. 우선 아이콘 리소스를 [스킨편집 -> 파일업로드] 업로드 합니다. 그 다음 소스코드를 넣어줍니다. 저 같은 경우 HTML을 변경하기 귀찮아서 이미 선언된 클래스에 해당 내용을 추가했습니다. 1. CSS: .linkIcon 클래스 a 속성 추가 / url 뒷 부분, 업로드한 이미지 파일과 이름 동일하게 변경 .linkIcon a[href^="http://"] { background: url("./images/link_Icon.png") no-repeat right center; margin-right: 3px; padding-right: 15px; } .linkIcon a[href^="http://cfile"] { background: none; } 2. HTML: 을 검색 한 후 상위 div 클래스를 위에서 선언한 클래스(.linkIcon)로 변경 <div class="linkIcon"></div> 조그만 변화지만 블로그를 꾸미는 느낌이 들어서 기분이 좋습니다. 요즘 다른 블로거 분들의 디자인을 보는 재미가 있습니다. 많은 도움을 받고 있는데, 저도 누군가에게 도움이 되는 블로그가 되길 바랍니다. [참고] 블로그 꾸미기 다른 글티스토리 / 링크(Link) 아이콘 추가하기
<div class="linkIcon">
티스토리 / 링크(Link) 아이콘 추가하기
이번에는 밋밋한 하이퍼링크가 이쁘지 않아서 눈에 잘 띄도록 아이콘을 추가해보았습니다. 보통 글에 하이퍼링크를 걸게 되면 아래 사진 처럼 굵은 파란색 텍스트로 변경됩니다. 그리고 마우스를 해당 위치로 옮기면 텍스트에 언더라인이 생깁니다. 이게 아무 효과도 걸지 않은 기본 상태의 하이퍼링크 입니다.
저는 스킨을 편집하여 보시는 것처럼 하이퍼링크에 아이콘을 추가했습니다.
리소스 구하기
그래픽을 하시는 능력자분들은 직접 리소스를 제작하시면 되지만, 저 같이 디자인 감각이 없는 사람들은 구글링을 통해 적당한 아이콘을 구하시면 됩니다. [아이콘 검색 바로이동]
마음에 드는 아이콘을 구하셨으면 이제 스킨편집으로 이동합니다.
우선 아이콘 리소스를 [스킨편집 -> 파일업로드] 업로드 합니다.
그 다음 소스코드를 넣어줍니다.
저 같은 경우 HTML을 변경하기 귀찮아서 이미 선언된 클래스에 해당 내용을 추가했습니다.
1. CSS: .linkIcon 클래스 a 속성 추가 / url 뒷 부분, 업로드한 이미지 파일과 이름 동일하게 변경
.linkIcon a[href^="http://"] {
background: url("./images/link_Icon.png") no-repeat right center;
margin-right: 3px;
padding-right: 15px;
}
.linkIcon a[href^="http://cfile"] {
background: none;
}
2. HTML: 을 검색 한 후 상위 div 클래스를 위에서 선언한 클래스(.linkIcon)로 변경
<div class="linkIcon"></div>
조그만 변화지만 블로그를 꾸미는 느낌이 들어서 기분이 좋습니다. 요즘 다른 블로거 분들의 디자인을 보는 재미가 있습니다. 많은 도움을 받고 있는데, 저도 누군가에게 도움이 되는 블로그가 되길 바랍니다.
[참고] 블로그 꾸미기 다른 글
조그만 변화지만 블로그를 꾸미는 느낌이 들어서 기분이 좋습니다. 요즘 다른 블로거 분들의 디자인을 보는 재미가 있습니다. 많은 도움을 받고 있는데, 저도 누군가에게 도움이 되는 블로그가 되길 바랍니다.
[참고] 블로그 꾸미기 다른 글
