블로그 링크(link) - 이미지 아이콘으로 강조하기

블로그/블로그 꾸미기

블로그에 글을 쓰다 보면 내부나 외부에 링크(link)를 걸어야 하는 경우가 생기는데 이럴 때 대부분은 글자색을 변경하거나 밑줄을 긋고 또는 굵은 글자로 강조해서 표시하게 됩니다. 또한, 중요한 부분을 강조할 경우에도 똑같은 방법으로 글을 쓰는데 이런 식으로 글을 작성하면 링크가 걸린 문구와 강조된 문구가 같은 방식으로 표시되므로 구별하기가 어렵습니다.

따라서 링크(link)가 걸린 문구는 이미지 아이콘으로 다르게 표시되도록 설정해 보겠습니다.
[보기] 블로마리 노트 결과물은 보기처럼 링크가 걸린 문구 옆에 화살표 아이콘이 표시됩니다.

링크(link) - 이미지 아이콘으로 강조하기

티스토리 링크(link) - 화살표 아이콘으로 표시하기

제가 운영중인 블로그가 티스토리이므로 티스토리를 기준으로 설명드리겠습니다. 타 사이트나 블로그도 원리는 똑 같으므로 참고하셔서 적용하시면 될 것 같습니다. 작업을 시작하기 전에 사용 중인 스킨을 먼저 저장해 둡니다.
관리자 페이지 ▶ 꾸미기 ▶ 스킨 ▶ 스킨저장

1. 이미지 파일 업로드
이미지 파일을 구글링[이미지 검색]을 통해 적당한 크기(10~16px)로 구한 다음 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS 편집 ▶ 파일업로드 항목을 통해 파일을 업로드합니다.

2. 스타일시트 수정
아래의 코드를 HTML/CSS 편집의 style.css에 복사하여 붙여 넣습니다.

.external a[href^="http://"] {
    background: url("./images/index.png") no-repeat right center;
    margin-right: 3px;
    padding-right: 15px;
}
.external a[href^="http://cfile"] {
    background: none;
}

위의 코드에서 "index.png"는 여러분이 구글 검색에서 다운로드한 이미지 파일 이름으로 바꾸세요!

href^="http://" 설명
보통 링크(link)가 "http://"로 시작하기 때문에 "http://"으로 시작하는 모든 링크를 말합니다.

right center 설명
이미지 파일의 가로(left, center, right), 세로(top, center, bottom) 정렬 위치를 지정합니다. 현재는 화살표 아이콘이 오른쪽에 표시되지만, 왼쪽에 표시하고 싶다면 소스코드의 모든 right를 left로 바꾸면 되겠죠.

href^="http://cfile" 설명
본문에 첨부되는 이미지에 화살표 아이콘이 붙는 것을 방지합니다. 티스토리에 첨부되는 이미지는 주소가 "http://cfile"로 시작합니다. 따라서 링크(link) 주소가 "http://cfile"로 시작하는 링크(link)는 배경이미지가 없음(none)으로 설정하여 화살표 아이콘이 표시되지 않도록 합니다.

3. skin.html 태그 수정
위의 모든 내용이 본문에만 적용되게 하도록 skin.html을 수정합니다. 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS 편집 화면에서 키보드의 Ctrl 키와 F 키를 동시에 눌러 검색창을 호출한 다음 article_rep_desc를 넣고 검색한 후 아래처럼 앞뒤에 코드를 추가해줍니다.

<div class="external">[##_article_rep_desc_##]</div>

이상으로 링크(link)를 이미지 아이콘으로 강조하는 방법에 대해 살펴보았는데 블로그 운영에 도움이 될 것 같으면 공감()으로 표시해 주시기 바랍니다!

+ 댓글은 큰 힘이 됩니다. 4