티바이트



티스토리는 모바일버전 스킨의 HTML/CSS를 수정할 수 없기 때문에

모바일 화면에 광고를 넣으려면 블로그글마다 HTML모드로 들어가서

직접 광고 코드를 추가해 주어야 한다.


그렇게 본문하단에 320x50 크기의 모바일배너 광고를 삽입하면,

모바일 기기에서 봤을 때 이런 현상이 나타난다.




모바일티스토리의 고유 스킨 때문에  광고의 왼쪽 부분에는 빈 공간이 생기고,

오른쪽 끝부분은 짤리게 되는 현상이다.






이 때는 center 태그로 가운데정렬을 해 주고 div태그로 스타일을 준 뒤,

그 안에 애드센스 코드를 넣으면 제대로 보이게 할 수가 있다


<center>

<div style="margin-left:-12px;">

<!-- 애드센스 코드 삽입 -->

</div>

</center>



왼쪽 margin 값을 -12로 준 것은 왼쪽끝에 생기던 공간의 폭이 12픽셀이었기 때문이다.

또, center태그로 가운데 정렬을 한 것은 PC화면에서도 가운데에 맞춰서 보여지게 하기 위해서이다.

위 태그를 적용한 뒤 모바일 화면을 보면 아래와 같이 광고가 화면에 맞게 표시된다.








http://toon.pe.kr/778 글을 보면,  position:absolute와 left:50% 를 써서 위치를 잡아주는 방법을 볼 수 있다.

또한 모바일 광고를 모바일페이지에서만 보여지게 하는 방법도 나와 있으니 참고하면 좋을 것이다.










 


  1. 고맙습니다~~ 덕분에 달았어요!

  2. 덕분에 모바일에 다는방법 알아갑니다. 오늘 적용해야겠어요

댓글을 다는 공간입니다. (로그인하지 않아도 댓글을 남길 수 있습니다.)



게시판 목록은 좌측상단에 있습니다.

Statistics Graph