'페이지 화살표'라는건... 음-_- 그러니까 아래 그림처럼
좌우 끝에 있는 화살표여요
근데 보통 마이피에선 위처럼 검은색 화살표가 아니라 옅은 파랑색의 작은 화살표일거에요
그걸 수정하는게 이 글의 목적이어요' v')
왜 거.. 기존 화살표는 마이피 디자인이랑 안 맞는 부분이 많으니까요-_-;
흑백으로 이루어진 디자인인데 (링크는 파랑색이지만) 난데없이 옅은 파랑색 화살표라니...
-
먼저, 저 화살표를 출력하는 CLASS는 [ .btn_comm btn_next ]와 [ .btn_comm btn_prev ]입니다
이미지를 열어보면 알 수 있지만 일반적인 이미지가 아니라 좌표등 설정해서 넣어야하는 이미지네요
저 이미지는 [ .wrap_paging .btn_comm ]에서 볼 수 있습니다
좀 더 알기 쉽게 설명하자면
먼저 [ .wrap_paging .btn_comm ]에서 전체 이미지를 읽어옵니다
[ .btn_comm btn_next ]와 [ .btn_comm btn_prev ]에선 필요한 좌표를 이용하여, 읽어온 이미지를 부분적으로 출력합니다
그러니까, 손봐야 할 곳은 [ .wrap_paging .btn_comm ], [ .btn_comm btn_next ], [ .btn_comm btn_prev ]입니다
또한 화살표로 사용할 이미지도 있어야겠지요. 가급적 크지 않은게 좋겠습니다
이 글에선 이 이미지를 기준으로 설명합니다
다른 이미지를 사용할 경우 좌표값을 조금씩 바꿔야해요
-
먼저 사용할 이미지를 자신의 계정에 업로드합니다
'자신의 계정'이라는건... 마이피에 그냥 올려둬도 되고, 다른 블로그(외부 링크를 허용하는 블로그)에 업로드하면 되요
전 티스토리를 사용하고 있으므로, 티스토리를 사용하도록 하겠습니다
티스토리가 없고, 별다른 계정이 없는 경우 그냥 마이피에 비공개 글로 올리시면 됩니다
업로드를 하였다면 [ 마이피 - 관리 - 디자인설정 - 스타일 시트(CSS) - 편집 ]에서 아래의 CSS 코드를 입력합니다
코드
.wrap_paging .btn_comm { background-image:url( [ 업로드한 이미지 주소 ] ); width:15px; height:17px; }
background-image:url( [ 업로드한 이미지 주소 ] ); 는 우리가 업로드한 이미지를 불러오는 부분이며
width:15px; height:17px; 는 이미지를 출력하는 범위입니다. 그러니까 가로 15px, 세로 17px의 직사각형씩 출력됩니다
왜 하팔 15x17이냐하면, 미리 만들어둔 이미지에서 화살표만 출력하기 위한 최소한의 범위거든요
당연한 말이지만, 다른 이미지를 직접 만들어서 사용하실 경우 범위를 작게 또는 크게 해주셔야해요
이제 화살표가 제대로 출력되도록 CSS를 수정합니다
위의 작업만 했다면 이미지가 반복출력되서 보기 안 좋아요
코드
.paging_comm .btn_next { background-p-osition:15px 17px; }
.paging_comm .btn_prev { background-p-osition:0px 17px; }
※ p-osition 은 마이피에서 자동 수정되는 부분입니다
'피-오지션'이 아니라 '포지션'이에요' v');
background-p-osition은 배경의 위치 조절입니다
그러니까 큰 이미지를 미리 불러와놓고, background-p-osition를 이용하여 부분적으로 출력하는거에요
15px 17px 부분은 가로 15px 세로 17px 부분을 출력, 0px 17px 부분은 가로 0px 세로 17px 부분을 출력입니다
저쪽 위의 코드에서 설정한 크기인 15x17 크기와 똑같은 이유는 어쩌다 그런거니까 신경쓰지 않으셔도 되요
이 부분도 마찬가지로 이미지를 직접 만드신 경우엔 넣어야할 숫자가 조금씩 다르므로 신경써야합니다
-
여튼 요점은, [ .wrap_paging .btn_comm ]에 전체 이미지를 불러오고
[ .btn_comm btn_next ], [ .btn_comm btn_prev ]에서 범위를 조정하는겁니다
꼭 저렇게 할 필요는 없지만 말이죠-_-ㅋ
