목차
✈ Square 티스토리 스퀘어 스킨 애드센스 플러그인 PC 모바일 화면에서 가운데 정렬 float:none
티스토리 스퀘어 스킨에는 오류가 있습니다.
티스토리 Square 스킨 제작자의 블로그에 가면 오류 수정된 스킨을 받을 수 있습니다.
오류가 수정된 스킨도 그렇고 티스토리 기본스킨의 스퀘어도 반응형이기 때문에 애드센스 PC플러그인을 사용하면 모바일 화면에서 상단 배너 옆으로 글이 한 줄만 보이게 됩니다.
float:left나 float:right가 인라인 스타일로 들어가 있기 때문에 CSS로 수정이 안됩니다.
때문에 스킨 수정의 html에서 Jquery로 스타일을 수정해 주어야 합니다.
상단 배너가 가운데 정렬되고 float:none이 되도록 설정합니다.
<script>
$(document).ready(function(e) {
if ($('#content').width() < 720) {
$('.article > div:eq(0)').css('float','none'); //플로트 속성을 없앱니다.
$('.article > div:eq(0)').css('margin','0'); //좌우측 마진을 없앱니다.
$('.article > div:eq(0)').css('text-align','center'); // 가운데 정렬해 줍니다.
$('.article > div:eq(0)').css('width','auto'); //폭을 자동으로 바꾸어 주어야 가운데 정렬이 적용됩니다.
}
});
</script>이 스크립트는 페이지 맨 하단에 삽입해주면 됩니다.
단 너무 마지막에 삽입하면 페이지 로딩이 다 된 후에 배너와 글씨가 움직이는게 보이기 때문에,
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>다음에 삽입해 주면 됩니다.
<head></head>사이에 삽입하면 더 빠르지만, jquery-1.11.3.min.js보다 먼저 Jquery가 기술되면 에러가 발생하기 때문에 위의 Jquery파일 삽입도 같이 HEAD 안으로 옮기면 더 빠르게 동작합니다.
짤방 : 레이싱 모델 정은혜 각선미 몸매 우앙~~~쉐보레 모델이군요. 저는 쏘렌토 타는데 갑자기 쉐슬람이 되고픈...
반응형
'Tistory Adsense > Tistory Tip' 카테고리의 다른 글
| 티스토리 새 에디터 소스코드 코드블럭으로 깔끔하게 하이라이트 (0) | 2019.04.07 |
|---|---|
| 티스토리 새 에디터 모바일 사진 등록 수정도 가능 with mobile 웹 브라우저 (0) | 2019.03.28 |
| 티스토리 앱 로그인 실패 차단 시 해결방법 (0) | 2018.11.27 |
| 티스토리 게시글 통계 기능 신설 (0) | 2018.11.08 |
| 티스토리 로그인 기기 인증 해제, 한메일 다음 휴면계정 수신불가 이메일 아이디 변경 방법 - 블로그 소유자 확인을 위한 정보 시리즈5 (0) | 2018.11.01 |
댓글