• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

애드센스, 애드핏 광고 꾸미기 - 광고 가운데 정렬과 테두리 넣기

이윰
26 2 0

애드센스, 애드핏 광고를 블로그나 홈페이지의 디자인에 맞게 꾸미는 방법입니다.
광고 자체를 변형하는 것은 정책에 위반하는 것이므로 많은 것을 할 수는 없지만, 광고의 위치, 광고 배경, 테두리 등으로 최대한 블로그나 홈페이지의 디자인과 조화를 이루도록 꾸밀 수가 있습니다. 

 

# 광고 가운데 정렬 배치하기

<div class="center">

광고 코드
.. 중략 ..

</div>

애드핏은 이렇게만 해 주어도 가운데로 정렬됩니다. 하지만, 애드센스는 안 먹히더라고요. class에 스타일을 지정해 줘야 합니다.
스타일 시트 (style.css)에 다음을 추가합니다.

. center : { text-atext-align: center; }

# 광고에 테두리 넣기 + 가운데 정렬까지

저는 큰 박스 안에 광고가 들어갈 작은 박스를 만들어 넣고 바깥쪽 박스에 padding을 줘서 배경색으로 테두리를 만들려고 합니다. (이미지 참조)

  • 먼저 (아래처럼) 광고 코드를 div로 감싸줍니다.
<div class="ad_box_outline">
<div class="ad_box_inner">
 
광고 코드
.. 중략 ..
 
</div>
</div>
  • div의 class명을 임의로 만들고 (아래처럼) 스타일을 지정해줍니다. 
. ad_box_outline { background-color: #2d313b; border-radius: 20px; padding: 15px; height: 90px; text-atext-align: center;}
. ad_box_inner {width: 100%; height: 90px; background-color: #ec99a9; border-radius: 5px;}

다음과 같이 스타일을 설정했습니다. 

  • 적용한 광고 크기:  애드센스 728X90 / 애드 핏 광고 728X90
  • 바깥쪽 박스(ad_box_outline)의 배경 색상을 지정해 테두리를 만들어 줌 색상 #2d313b
  • 바깥쪽 박스(ad_box_outline)에 padding  테두리 굵기 15px
  • 바깥쪽 박스(ad_box_outline) 테두리 라운드 20px
  • 안쪽 박스 (ad_box_inner)의 배경 색상을 지정해 짧은 광고가 나올 경우 배경색이 보이게 함
  • 안쪽 박스 (ad_box_inner) 테두리 라운드 5px
  • 광고 가운데 정렬

 

현재 (2020.12.02) 사이트 다크모드에 적용한 모습니다.광고가 가운데 정렬되었고, 광고가 자리하고 남는 빈 공간에 (ad_box_inner)에서 지정해 준 배경색이 보입니다.
직사각형 광고 하나 있는 거보다 훨씬 단정해지고 사이트 디자인과 어느 정도 조화를 이루게 되었네요!

 

복사해서 padding값을 변경해서 테두리 굵기 조정하고, background-color를 원하는 색상으로 변경해서 사용하세요!

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 최종 글 조회 수
+1
image
  10
+1
normal
  11
+1
image
  9
+1
image
  13
0
normal
  11
0
normal
  24
+1
normal
이윰12시간 전 40
+1
normal
  11
+1
normal
  13
+1
image
  12
+1
normal
  20
+1
normal
  19
+1
normal
  15
+2
image
  49
0
normal
  34
+2
image
  16
+1
normal
  13
+1
normal
  11
+1
image
  45
+2
image
  26