퓨어 갤러리를 사용하고 싶은데
최근글 리스트에 나오는 이미지 크기가
원래 리스트 이미지와 같은 크기로 설정이 되네요..
최근글 리스트에 나오는 이미지는 1줄에 4개
본 리스트 이미지는 1페이지에 3개 나오게 하고 싶은데요.
본 리스트 이미지를 3개로 나오게 하는 방법은 게시판 검색을 통해서 알게 되었습니다.
1. 최근글 리스트에 나오는 이미지만 1줄에 4개 설정할 수 있나요?
2. 이미지 사이의 간격이 좀 좁아서 답답해 보이는데요 각 이미지 사이에 간격을 늘릴 수 있을까요?
안녕하세요~^^
KBoard 퓨어 갤러리 스킨은 게시글 목록 페이지와
최신글 레이아웃에 동일한 CSS 코드가 적용되어 있습니다.
또, 화면의 너비에 따라 이미지의 크기가 다르게 표시되며
한 줄에 표시되는 게시글의 수도 다릅니다.
최신글 숏코드는 어느 부분에 추가하셨는지요?
비회원으로도 확인 가능한 페이지 주소 알려주시면
CSS 코드로 해결이 가능할지 살펴보겠습니다.
고맙습니다.
이 페이지에는 최신글 숏코드를 적용했어요
http://cutecla.cafe24.com/?page_id=4273
지역소식이 퓨어갤러리 최신글이 적용되어 있습니다.
검색을 통해서 퓨어갤러리 리스트 3개 1줄로 변경하는 CSS를 다음과 같이 적용하였더니
최신글에서도 크기가 커졌습니다...
#kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width:32.3333333333%;; }
그리고 본 페이지는
http://cutecla.cafe24.com/?page_id=5966
입니다.
깔끔하고 좋은데 여백이 너무 없어서 답답한 느낌이 들어서요.. 이미지간 간격을 좀 둘 수 있을까요???
올려주신 페이지에서 최신글 쪽을 한 줄에 4개씩 표시하게 하시려면
기존 추가하신 코드 밑에
아래의 CSS 코드도 추가해보시겠어요?
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width:24%; }
이미지간 여백 조절은 margin: 0 1% 0 0 쪽에서 1%의 수치를 적절히 변경해보세요.
margin 수치가 늘어나는 만큼 width 수치를 줄여주셔야 합니다.
만약, margin: 0 5% 0 0으로 설정하신다면 width:19% 이런 식으로 적용해보세요.
고맙습니다.
고맙습니다. ㅎㅎ 덕분에 원하는대로 되었네요
그런데 이미지 4개 (혹은 3개)가 가운데 정렬이 되어있지 않고 왼쪽으로 붙어있는데요.
이미지가 가운데 정렬이 될 수는 없나요??
그리고. 이미지 모서리를 둥글게 처리하고 싶습니다.
으흑 초보자라서..ㅜㅜ
border-radius를 어떻게 적용해야할지 잘 모르겠습니다.
안녕하세요.
올려주신 페이지 주소로 확인해보니
아래의 CSS 코드가 추가되어 있는 듯합니다.
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 7% 0 0; width: 18%; border-radius: 30px; }
게시글을 가운데 정렬하시려면
margin 속성을 margin: 0 3.5% 0 3.5% 이런 식으로 적용해보시겠어요?
0 3.5% 0 3.5%는 상단, 오른쪽, 하단, 왼쪽 순서의 여백입니다.
썸네일 이미지에 border-radius 속성을 추가하는 건
아래의 코드를 추가해보세요.
.post-entry-4273 #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-thumbnail { border-radius: 3px; }
크롬 브라우저 개발자 도구(F12)를 활용하시면
CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.
고맙습니다.
이미지 테두리를 둥글게 하는 방법을 적용하였더니 아주 잘 되었습니다. 고맙습니다.
그런데 가운데 정렬은
말씀해주신대로
.post-entry-4273 #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 3% 3% 0 0; width: 19%; }
로 변경하였는데 그래도 화면은 좌측으로 쏠려있습니다. ㅜㅜ
마진이 오른쪽만 적용되는 것 같습니다. ;;;
http://cutecla.cafe24.com/?page_id=4273
아마도 테마의 문제인가봅니다..
어떻게 방법은 없는 걸까요???
margin 속성은 이전 댓글에 안내해드린 것처럼
상단, 오른쪽, 하단, 왼쪽 순서의 여백입니다.
좌우 여백을 3%로 적용하시려면
margin: 3% 3% 0 0 부분을 margin: 0 3% 0 3%로 적용해보시겠어요?
또는 margin: 0 3% 이런 식으로 적용하셔도 됩니다.
margin 속성에 대한 자세한 내용은
아래의 링크를 참고해보세요.
https://www.w3schools.com/css/css_margin.asp
고맙습니다.
ㅜㅜ 제가 잘못 읽었군요..ㅜㅜ 이런 것에도 차근차근 대답해주셔서 너무 감사합니다.
퓨어게시판을 원하는 용도로 충분히 사용할 수 있게 되었습니다. 고맙습니다.
마지막으로
첫화면에 퓨어 게시판 최신글 사진을 걸어놓았는데요
여기는 제목이 안나오게 하고 싶거든요.
#kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display:none; }
이렇게 했더니
모든 화면의 타이틀이 안나옵니다.. ㅜㅜ
이 화면입니다.
첫화면만 안나오게 하는 방법이 있겠지요..?
가르쳐주세요...ㅜㅜ
워드프레스 사이트에서 특정 페이지만 CSS를 적용하시려면
<body> 태그 내에 추가되어 있는 페이지 id를 적용해주시면 됩니다.
올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?
.page-id-734 #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display:none; }
워드프레스에서 페이지(포스트) ID를 찾는 방법도 참고해보세요.
고맙습니다.