Korean English Japanese

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

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

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

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

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

 

1. 함수 사용법

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

<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 선택자(Selector) JQuery 선택자입니다. 돔(DOM) 구조에서 여러가지 조건에 따라 선택할 수 있는 선택자입니다. 전체를 선택하거나, 특정 ID를 선택하거나 태그 또는 클래스를 선택할 수 있는 조

creativestudio.kr

 

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

버튼 형태의 모달창(data-modal)을 Pageload가 될 때, 자동으로 클릭하게 하는 방법은 매우 간단하다. HTML 기능은 3가지 방식으로 구현할 수 있다. Javascript JQuery .trigger( ) JQuery .click( )

creativestudio.kr

 

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

JQuery 공부하기 JQuery를 공부할 때 유용한 사이트는 아래와 같다. https://www.w3schools.com/jquery/default.asp https://api.jquery.com/trigger/ http://www.devkuma.com/books/3 영어가 어렵게 느껴진다면..

creativestudio.kr

 

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

타이핑 애니메이션 효과 라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 5분 내에 적용이 가능합니다. 중요한 것은 타이핑 효과를

creativestudio.kr