에드센스 스킨 수정하는 방법

게시자: 대문 demun 카테고리: 티스토리스킨수정 2013.05.26 20:20

여러가지를 만들었지만 이것 저것 사용자 입맛에 맞게 수정을 하고자 하는 분들을 위해 이글을 작성합니다.

이글은 한참전에 작성되었으나 추가적인 문제점을 모두 적은다음 발행하려 했으나 그닥 많은 문제점이 나오지 않았고, 포스팅할 정도의 글이 없어 그냥 발행합니다


이글은 추가 사항이 있을때마다 새페이지로 작성하지 않고 현재 페이지에서 업데이트 시킬 생각입니다.

에스센스 스킨은 다양한 경우의 수를 생각해서 제작되었기때문에 수정할 부분은 많이 없을거라 생각되지만 그래도 있는경우 추가하도록 하겠습니다.


현재는 글쓸 시점에는 두가지만 이야기하고 이글아래부분에서 계속 추가하겠습니다.


광고부분 수정하기

광고를 어떻게 넣는냐는 블로그에 많은 글이 있으니 참고하시구요. 여기서는 에드센스 스킨에서의 광고 영역에 대해서 말씀드립니다.

기존에 제가 만들어놓은것을 안쓸 경우에는 코드를 삭제하지마시고 그냥 주석처리하세요. 

그래야 다음에라도 써먹을 수 있습니다.


또한가지 예를들어 본문에 광고를 하나만 넣을경우 가운데 정렬을 하고 싶을때 <center>.....</center> 태그를 넣은 경우가 종종 있습니다.

<center> 태그를 없어진 태그입니다. 가급적 사용을 자체하시고 대신에 아래의 방법대로 사용하면 됩니다.


본문폭이 600px 인경우 

<div style="width:600px; margin:0 auto;">.......</div>

하면 가운데 정렬이 됩니다.



해더부분을 고정시켜서 탑메뉴를 사용하는 방법

어떤 분들은 해더부분을 고정시켜서 스크롤을 해도 탑메뉴를 계속 사용하고 싶은 분들이 있을겁니다.

에드센스의 모는 스킨은 header, main, footer 로 나뉘어져 있어 이런 설정이 무척 쉽습니다. 

구조가 잘 되어있다는 자랑.ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ.


동영상을 첨부하겠습니다. 방법은 간단합니다.

동영상의 소리가 작습니다.




스타일시트 즉 style.css 의 맨 아래에 아래 코드를 추가해주기만 하면 됩니다. 컬러는 본인의 컬러에 맞게 수정하세요.


body {
	padding-top: 160px;
}
#header {
	position: fixed;
	top: 0;
	background: #D1F2F7;
}


항상 경우의 수는 있는거니까요?

이렇게 했는데도 안될경우......

z-index 문제 살펴보기


위 동영상처럼 하면 본문이 아래로, 해더가 위로 있으면서 스크롤이 되야하는데 간혹 아래이미지처럼 위로 올라오는 것들이 있습니다.



또 드롭다운 자체도 광고보다 아래로 깔려서 보기좋지 않습니다.

이런경우 해당 부분에만 z-index 를 높게준다고해서 해결되지 않습니다.

이렇때는 부모요소에 z-index 를 높게줘야 합니다.

즉 아래처럼 두가지 코드가 더 필요합니다.


#header {
	z-index: 19;
}
#main {
	z-index: -1;
}


결과 화면을 볼까요?




드롭다운까지 모두 위로 올라가는것을 볼 수 있습니다.


비로그인시 댓글창보이기

로그인을 했을때는 댓글창이 안보이도록 했습니다. 내가 내블로그에 로그인한다음 댓글을 달 이유가 없으니 아예 그렇게 제작하지는 않았습니다.

하지만 경우의 수는 항상 있는법.


내가 로그인하고 내 댓글창에 댓글을 달거나 보고 싶다면 아래처럼 수정해주면 됩니다.

아래 이미지를 보시면 </s_rp_member> 티스토리 치환자가 보입니다.




</s_rp_member> 이 </s_rp_guest> 다음에 있으면 됩니다.

즉 </s_rp_guest> </s_rp_member> 순서겠죠.

그럼 로그인을 해도 댓글창과 비밀글에 체크하는 체크박스까지 모두 보이게 됩니다.


방명록도 마찬가지로 하고 싶다면 </s_guest_member> 를 </s_guest_form> 다음에 놓으면 됩니다.

참고로 이 부분은 수정해놓지 않았습니다.




신고

댓글

  1. 2013.07.04 20:44  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2016.03.18 11:32 신고 유카리  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 포스팅 잘읽어봤습니다. 저가 만들고있는 플레시게임 웹사이트가 반응형인데
    홈페이지를 최대화 까지 하면 광고까지 넓어져서 곤란한데 최대화해도 에드센스가 플레시게임 옆에 고정되도록 할순없을까요? 워드프레스 사이트입니다.

    • BlogIcon 대문 demun 2016.03.21 09:04 신고  댓글주소  수정/삭제

      최대크기를 제한하는 코드는 max-width 입니다.
      예들들어 플래시하고 에드센스하고 감싸고 잇는 부분을 1200px 이상 커지게 하고 싶지 않다고하면
      .클래스 { max-width: 1200px; } 이런식으로 지정해주면 됩니다.