320x100
|
제 블로그의 경우 글을 적을때 왼쪽정렬이 우선이며 그림을 올릴때도 왼쪽정렬로 올립니다. 애드클릭스 에디터링크를 본문 상단에 설치했지만, 애드클릭스의 마크인 AdsByDaum 그림을 살펴보면 아래와 같이 생겼습니다.
그림의 양쪽에 투명공간이 있기에, 왼쪽정렬로 올리더라도 왼쪽에 11px 정도 공간이 생기게 됩니다.
공백을 그림수정없이 없애고 왼쪽에 붙여서 나오게 하는 방법에 대해서 소개합니다.
* 다음 애드클릭스 에디터링크의 앞부분 그림은 임의로 손상시키거나 어떤 광고인지 알 수 없도록 변경해서는 안됩니다.
2009/04/02 - [Useful Tips] - 블로그 광고 시스템 써보고 느낀 점
애드클릭스에 실제로 이 코드를 적용해도 되는지 질문을 했고 받은 답변 내용
애드클릭스 관리자 실제 답변 내용 :
4. 광고타이틀 위치조절
=>기본적인 광고형태를 유지하면서 타이틀을 숨기지 않는 위치의 조절은 하실 수 있습니다.
애드클릭스 관리자 실제 답변 내용 :
4. 광고타이틀 위치조절
=>기본적인 광고형태를 유지하면서 타이틀을 숨기지 않는 위치의 조절은 하실 수 있습니다.
잠깐! 제 블로그의 주수입원인 애드클릭스의 수익을 살짝 공개합니다. 5월분것만 살짝 공개 할께요.
다음 애드클릭스 에디터링크 정렬하기 전 모습 (Before)
Y축의 녹색선은 본문의 시작점입니다.
① 를 보면, 오른쪽을 11px 밀려서 [AdsbyDaum] 그림이 나오는걸 볼 수 있습니다.
② 를 보면 FF를 제외한 IE7 이하 버전에서는 본문을 작성할때 위에 공백을 두지 않고 작성하더라도 에디터링크와 한 줄 비어서 나오는 현상이 있습니다. 임의로 띄우지 않는 이상은 붙어서 나와야하는게 맞습니다. (FF 에서는 띄우지 않으면 붙어서 나옵니다.)
다음 애드클릭스 에디터링크 정렬 후 모습 (After)
CSS 를 사용하면 왼쪽의 공백을 그림 수정없이 정렬할 수 있으며, 아래쪽의 1줄 비는 현상도 없앨 수 있습니다.
① 를 보면, 본문이 시작하는 점과 일치해서 그림이 시작합니다.
② 를 보면, 아래쪽에 1줄 비는 현상이 없어졌습니다. (FF,IE6 에서 다르게 뜨던 현상이 사라짐)
CSS 수정으로 에디터링크 정렬 하는 방법
/* 다음애드클릭스 에디터링크 왼쪽에 바짝 붙이기 */
#Clixad {
margin-left: -12px;
}
/* 다음애드클릭스 에디터링크 IE 7 이하에서 <p>태그 때문에 아래쪽 1줄 여백 생기는 부분 없애기 */
/* 줄이 밀리지 않는다면, 아래부분은 꼭 사용하지 않으셔도 됩니다. */
html*#Clixad {
margin-bottom: -18px;
}
#Clixad {
margin-left: -12px;
}
/* 다음애드클릭스 에디터링크 IE 7 이하에서 <p>태그 때문에 아래쪽 1줄 여백 생기는 부분 없애기 */
/* 줄이 밀리지 않는다면, 아래부분은 꼭 사용하지 않으셔도 됩니다. */
html*#Clixad {
margin-bottom: -18px;
}
위에 코드를 복사한뒤, 자신의 스킨에 style.css 의 맨하단에 붙여넣습니다. 저장을 합니다.
/* 주석 */ 은 필요없다면 삭제를 하셔도 괜찮습니다.
설명 :
margin-left: -12px; 는 Clixad div 를 왼쪽으로 12px 이동시킨것이며,
margin-bottom: -18px; 는 CSS 핵을 이용해서 아래쪽 공간을 -18px 만큼 빼서 밑에 공간을 없앤것입니다.
아래부분의 코드는 <p> 태그 등으로 한줄 밀림현상등이 발생하지 않는 이상은 꼭 사용하진 않으셔도 됩니다. *
응용하신다면 다른 위젯이나 그림등의 위치도 원하시는 위치로 고정시킬 수 있습니다.
더 좋은 방법이 있는 분은 댓글로 부탁드리며, 궁금한점이 있거나 문의점이 있는분도 댓글 달아주세요.
스킨 관련 링크
2009/09/20 - [Useful Tips] - 파이어버그로 티스토리 스킨 미리 수정하기
2009/08/16 - [Useful Tips] - 블로그 서식 꾸미기 #1 (동영상)
2009/09/01 - [Useful Tips] - 블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상)
2009/07/23 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 둘째편
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편
스킨 무료로 최적화 해 드립니다.
2009/09/11 - [Hardware/Tuning/Lab] - 블로그 스킨 수정해 드립니다.
스킨공부에 도움이 될 책들
|
반응형
'유용한_팁 > 블로그_팁' 카테고리의 다른 글
CCL 라이센스 표시 발행된 글에서 CSS팁으로 없애 보자 - 블로그팁 (23) | 2009.09.24 |
---|---|
블로그 팁 다음뷰 버튼 배경 꾸미기 (145) | 2009.09.23 |
파이어버그로 티스토리 스킨 미리 수정하기 (32) | 2009.09.20 |
피드버너 한RSS 구독자 통합 (68) | 2009.09.09 |
블로그 방문자 늘리기 - 아이태그 활용해보자 (33) | 2009.09.06 |
댓글