블로그에 포스팅을 하다보면 글이나 구문등을 강조하기 위해 밑줄이나 글자색깔 등을 수정하게 됩니다. 그런데 이렇게 밑줄 등을 넣다보면 링크가 있는지 없는지 확인하기 위해서 마우스 포인터를 올려보게 되죠. 이런 사소하지만 하지 않아도 될 일을 없애기 위해 여기 링크가 있다는 것을 알려주는 것은 블로그 구독자에 대한 작은 배려라고 하겠습니다. 따라서 오늘은 외부링크 또는 내부링크에 링크가 되어있다는 표시인 링크아이콘을 표시를 스타일시트(CSS) 수정을 통해 자동으로 되게 하는 방법을 배워보겠습니다. 이 글은 티스토리 뿐만아니라 스타일시트(CSS) 편집이 가능한 설치형 블로그는 어디든 적용할 수 있습니다. 단, 모바일폰에는 적용이 안됩니다.
오늘 강좌를 적용하게 되면 링크 오른쪽에 위 그림과 같은 아이콘이 생기게 됩니다.
자 그럼 내부링크/외부링크 용어부터 간단히 정리하겠습니다.(정말 간단하게...)
내부링크 : 내 블로그 내에 있는 컨텐츠나 이미지/파일 등을 읽어오는 링크.
외부링크 : 내 블로그 밖에 있는 컨텐츠나 이미지/파일 등으로 나가게 되거나 읽어오는 링크.
먼저 링크 오른쪽이나 왼쪽으로 아이콘을 넣기 위해서는 해당 아이콘을 블로그에 업로드 해야합니다. 제가 사용하는 아이콘은 위키디피아에서도 사용하는 아이콘인 
exlink.zip ◀ 이걸로 다운 받으세요.
[관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ 파일업로드] 에서 링크아이콘 파일 업로드.
링크 아이콘을 업로드 하셨다면, 이제 style.css 의 가장 아래부분에 아래 코드를 추가해야합니다.
[관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ HTML/CSS ▶ Style.css] 에 아래코드 추가.
소스코드 다운 ->
exlink.txt
※ 위 코드에서 굵은 파란색은 업로드한 파일 이름이니, 자신이 업로드한 파일명으로 바꿔주세요.(대소문자 구분 필수!)
※ 붉은색 굵은 글자는 자신의 블로그 주소로 바꿔주세요.
※ 위 코드의 파란색 박스는 외부링크 아이콘 표시하는 코드이고, 아래 붉은색 박스는 내부링크 아이콘 표시하지 않는 코드입니다.
※ 만약 내부링크에도 아이콘을 표시하고 싶다면 위 그림의 아래 빨간색 박스는 삭제하시면 됩니다.
만약 제 블로그처럼 왼쪽이나 오른쪽에 플로팅 아이콘 배너가 있다면 모든 http:// 로 시작하는 배너에도 링크아이콘이 표시가 되어 버립니다. 특히 특정 스킨에서는 사이드바에 있는 링크까지 모조리 링크아이콘이 생길 수도 있습니다. 이런 문제점을 해결하기 위해서는 링크아이콘이 표시될 부분만 따로 지정해줄 필요가 있습니다.
저는 각종 배너나 SNS아이콘을 제외하고 제가 작성하는 본문에만 링크아이콘을 표시하고 싶기 때문에 아래와 같이 Skin.html 에서 ##_article_rep_desc_## 부분을 찾아서 앞 뒤로 <div class="exlink"> ~ </div> 를 넣어주었습니다. 다른 부분에도 적용하고 싶다면 해당 부분에 아래 그림과 같이 앞/뒤로 코드를 넣어 주시면 됩니다.
※ 포스팅 본문에만 링크아이콘을 적용하시려면 ##_article_rep_desc_## 앞/뒤에 위 그림과 같이 넣어주세요.
어렵지 않죠?
누구나 쉽게 하실 수 있는 쉬운 팁입니다.
안되는 부분은 댓글로 질문해주세요.
이미지 맵
블로그 정보
언젠간날고말거야™의 여행블로그. 국내여행기, 해외여행기, 영화리뷰 등을 다룹니다.
✔ 댓글이 개 있습니다.