퓨어 갤러리 최근글 이미지 크기만 변경 가능한가요

퓨어 갤러리를 사용하고 싶은데 

최근글 리스트에 나오는 이미지 크기가 

원래 리스트 이미지와 같은 크기로 설정이 되네요..

최근글 리스트에 나오는 이미지는 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; }

    이렇게 했더니 

    모든 화면의 타이틀이 안나옵니다.. ㅜㅜ 

    http://cutecla.cafe24.com/ 

    이 화면입니다. 

    첫화면만 안나오게 하는 방법이 있겠지요..? 

    가르쳐주세요...ㅜㅜ 

  • 워드프레스 사이트에서 특정 페이지만 CSS를 적용하시려면

    <body> 태그 내에 추가되어 있는 페이지 id를 적용해주시면 됩니다.

    https://imgur.com/a/0R2MrHF

     

    올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?

    .page-id-734 #kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-title { display:none; }

     

    워드프레스에서 페이지(포스트) ID를 찾는 방법도 참고해보세요.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기