티스토리 특정 카테고리에서만 나타나는 이미지 추가 방법

특정 카테고리에서만 나오는 콘텐츠 또는 이미지 추가

티스토리 블로그에서 특정 카테고리에서만 나타나는 이미지를 추가하는 방법입니다.

※ 링크 : 해당 방법을 정리해놓은 콘텐츠를 토대로 구현했습니다.
구현 방식은 생각보다 쉽고 간단했습니다.

다만, 이렇게 구현하기 까지 많은 연구와 실험이 있었겠지요. 덕분에 쉽게 구현했습니다.

 

1. 함수 사용법

JQuery의 filter() 함수를 사용한 방식입니다. 특정한 카테고리에 속한 게시글에만 별도의 이미지 또는 콘텐츠를 추가하고 싶다면 아래와 같이 구현해볼 수 있습니다.

<script>
    if($('a').filter(":contains('카테고리명')").length > 0) {
    	document.write( '<style> 클래스 함수 변경 </style>' );
    }
</script>

특정 클래스를 포함하고 있는 구조에 클래스 속성과 함수를 변경하는 방법입니다.
이미지를 추가하고 싶을 땐, background : url() no-repeat;을 추가해서 구현했습니다.

예제 사이트는 현재 운영하고 있는 게임 블로그를 비교해보시면 쉽게 확인해보실 수 있습니다.

※ 위의 경우는 클래스에 이미지 속성만 추가한 것이고 콘텐츠의 경우에는 직접 응용해보세요.

if($('요소').filter(":contains('카테고리명')").length > 0) {
document.getElementById('아이디').innerHTML='<a href="" target="_top"><img src="logo.jpg"></a>'
}

특정 요소에 HTML을 추가하는 방식입니다. 이 방식으로 이미지를 구현해도 좋습니다.
이를 응용해서 다양한 것들을 구성해볼 수 있습니다.

 

2. 카테고리 내 콘텐츠 적용(비교)

• 일반 카테고리 (링크)
• 특정 카테고리 (링크)

위의 두개의 링크를 클릭해보시면 일반 카테고리와 특정 카테고리의 차이를 확인해보실 수 있을 것입니다.
직접 제작한 귀여운 안내 이미지가 추가된 것을 확인하실 수 있습니다.

 

같이보기

JQuery 선택자(Selector)

jQuery를 사용하여 페이지로드시 자동 클릭 단추 요소

JQuery 학습사이트 - 제이쿼리를 공부할 때 유용한 사이트

[JavaScript] 타이핑 애니메이션 효과 - JQuery