Etc

[블로그팁] 카카오 Adfit 광고 가운데 정렬하는 CSS

착한아줌마 2020. 4. 17. 23:13
반응형

 

 

 

 

 

카카오 애드핏(구 다음 애드핏) 광고를 블로그에 노출하시는 분들을 위한 글

 

 

 

처음 광고 매체 승인을 받으려고

 

광고 스크립트를 블로그에 적용시켰을때

 

광고 위치가 이상하다!!

 

 

 

블로그의 페이지 가로길이가

 

광고의 가로길이 보다 크기 때문.....

 

 

ㅡㅡ.....

 

 

둘 다 굳이 수정하기에는 일이 커진다.

 

하면 광고를 가운데 정렬하면 어떨까?

 

 

 

방법이 있다.

 

일단 이 방법 원글을 보고싶다면 맨 아래 링크를 참조하면 된다.

 

 

 


 

 

 

 

 

1. 아래 내용을 메모장에 작성

 

 

 

혹시나 위 코드의 해석이 필요한 분은 클릭 ㅋ

더보기

<!--티스토리 테마 style-->

 

<sytle>

 

/* AdFit */ 

.kakao_ad_area{width:100% !important; text-align:center;} 

.kakao_ad_area iframe{position: ingerit !important;}

 

</style>

 

 

혹시나 요 코드 해석이 필요한 분들을 위해 ㅋ

 

 

kakao_ad_area는 애드핏에서 주는 스크립트에서 광고가 들어가는 클래스

 

상단의 style에 적용할 시에 실제 본문 inline 방식의 style에 우선순위가 밀리기 때문에 !important

 

text-align:center 부분이 실제 정렬 방식, 이 부분을 right나 left로 해도 된다.

 

iframe{position: ingerit} 는 부모의 속성 값들을 물려받는다는데 이 부분은 웨 있는지 잘 모르게따

 

 

 

 

 

 

2. 관리자 페이지 목록 중에서 "스킨 편집" 클릭

 

 

 

 

 

 

 

 

3. 스킨 편집 창에서 오른쪽 상단 부근의 "html 편집" 클릭

 

 

 

 

 

 

 

 

 

4. html 코드의 head 태그 안에 1에서 작성한 내용 붙여넣기

 

 

아래가 에디터 창으로 바뀌면서 스킨의 코드들이 나온다.

 

상단에 head 태그 안에 어디든 1에서 작성한 내용을 붙여넣고 적용을 클릭한다.

 

<head>

.

.

</head>

 

 

 

 

 

 

 

 

다른 방법도 있는 듯 하지만 깔끔하고 간단한 것 같아 나는 이 방법을 애용

 

정렬 방식이 가운데가 싫다면

 

작성한 내용 중에서

 

text-align:center 

 

부분의 center를 right나 left로 변경하면 된다.

 

 

 

 

 

 

 

 

 

 

 

- 참조

https://gigas-blog.tistory.com/34