안녕하세요. 카페24 운영도우미 입니다.
1.9 뉴 모바일웹 사용시 갤러리 게시판 사용 방법에 대해서 안내해드립니다.
HTML 모드 편집을 사용하시는 고객이라면 사용이 가능합니다.^^
아래의 가이드 참고하여 이용해주세요~
--------------------------------------------------------------------------------------------
1. 제목 : 뉴모바일웹 갤러리게시판 기능 사용 안내
2. 갤러리 게시판 사용시 사전 체크 항목 :
1) FTP에 gallery 폴더 만들기
ㄴ 어드민 > FTP > 웹FTP > 웹FTP 접속 >웹FTP 접속
ㄴ sde_design > mobile > board > gallery 폴더생성
2) gallery 폴더에 > 갤러리게시판 HTML 압축 파일 다운 > 파일 풀기한 html 파일 업로드
- HTML 파일 다운받기 >>
- 위의 다운 받은 압축 파일을 > 내 컴퓨터에 저장 > 압푹 풀기
- FTP gallery 폴더에 업로드
3) 모바일쇼핑몰 편집창 접근
- 어드민 > 상단 [모바일쇼핑몰] > HTML디자인 > "모바일 꾸미기 시작" 클릭
- 편집창 내 왼쪽 [상세보기] > board > gallery 폴더 생성 확인
* tip : 디자인모드설정 > HTML 디자인 모드 사용자만 가능합니다!
4) CSS 수정하기
- 편집창 왼쪽에 [상세보기] > [CSS] 클릭 > common.css 파일을 클릭합니다.
- common.css 파일 내에 아래의 소스 추가하며, 컬러별 css 수정은 아래 참조
.mGallery { position:relative; font-size:12px; line-height:1.2em; overflow:hidden; }
.mGallery .notice { margin:0 0 10px; padding:0 0 5px 5px; font-size:12px; line-height:18px; }
.mGallery .notice li { overflow:hidden; }
.mGallery .notice a { float:left; }
.mGallery .notice span { float:right; padding:0 5px 0 0; }
.mGallery.typeGallery .inner { position:relative; margin-left:-2%; }
.mGallery.typeGallery .inner ul { min-width:300px; margin:0 auto; overflow:hidden; }
.mGallery.typeGallery .inner li { float:left; width:31%; margin:0 0 10px; padding:0 0 10px 2%; }
.mGallery.typeGallery .inner li a { color:rgb(99,102,110); }
.mGallery.typeGallery .inner li a:hover { text-decoration:none; }
.mGallery.typeGallery .inner li span { display:block; }
.mGallery.typeGallery .inner li span.picture { text-align:center; }
.mGallery.typeGallery .inner li span.picture img { width:100%; height:95px; }
.mGallery.typeGallery .inner li span.title { margin:5px 0 10px; }
.mGallery.typeGallery .inner li span.date { font-weight:bold; }
.mGallery.typeList .inner li { overflow:hidden; position:relative; min-height:105px; }
.mGallery.typeList .inner li span { display:block; }
.mGallery.typeList .inner li span.picture { position:absolute; left:0; top:10px; }
.mGallery.typeList .inner li span.picture img { height:85px; }
.mGallery.typeList .inner li span.title { min-height:60px; padding:15px 0 0 100px; }
.mGallery.typeList .inner li span.date { padding:0 0 0 100px; }
맨 하단, @media all and (orientation:landscape) { [이곳] } 에 아래 코드 추가
.mGallery.typeGallery .inner li span.picture img { height:150px; }
|
|
각 색상 스킨별로 CSS를 별도로 업데이트 해야합니다.
빨간색 스킨을 사용하고 있다면 red.css를 찾아서 아래 코드로 업데이트 하면 됩니다.
custom.css - .mGallery .notice { border-bottom:1px solid rgb(67,68,71); }
pink.css - .mGallery .notice { border-bottom:1px solid rgb(202,0,104); }
gray.css - .mGallery .notice { border-bottom:1px solid rgb(67,68,71); }
brown.css - .mGallery .notice { border-bottom:1px solid rgb(91,62,45); }
black.css - .mGallery .notice { border-bottom:1px solid rgb(0,0,0); }
red.css - .mGallery .notice { border-bottom:1px solid rgb(140,6,6); }
|
|
5) 갤러리 게시판 확인
- 편집한 소스가 정상적으로 반영되었는지 확인합니다.
- 먼저, 어드민 > 커뮤니티 > 게시판관리 > 갤러리 게시판의 게시판 ID가 몇번인지 확인합니다.
(기본적으로 갤러리게시판 ID는 8번입니다)
- 모바일기기(휴대폰) 또는 웹에서는(크롬,사파리 등)에 브라우저에서
m.쇼핑몰아이디.cafe24.com > 뒤에 주소에 /board/gallery/list.html?board_no=8 붙여서 확인합니다.
>> m.쇼핑몰아이디.cafe24.com/board/gallery/list.html?board_no=8 (no=게시판ID)
6) 갤러리 게시판 > 노출하고 싶은 곳에 링크
- 이제 노출하고 싶은 메뉴 및 위치에 편집창에서 링크 추가하여 사용합니다.
4. 예외 사항
- 뉴모바일웹 HTML 모드 사용자에 한합니다. (간편설정모드사용자는 HTML 모드로 변경해야 사용가능)
5. 기타
- 뉴모바일웹 전반적인 매뉴얼 확인하기는 [링크]를 클릭해주세요~
- 게시판 모듈 안내는 [링크]를 클릭해주세요~
--------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다.
끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]
감사합니다.
