[워드프레스] 목록페이지 블로그처럼 만들기

by

#WordPress #GeneratePress #추가css #네이버나 #티스토리랑 #비슷하게 #이쁘게들어보자

안녕하세요, 배곧동개발자 입니다.

티스토리 탈출 후 워드프레스를 이용해서 블로그를 만들어보고 있는 나, 글쓰는 것도 조금씩 편하게 만들고 기존에 쓰던 티스토리나 네이버와 같이 이쁜 모습의 블로그 형태를 만들고싶었기에 고민을 하였으나 생각보다 generatePress가 제공하는 기능 내에서는 기존 블로그와 비슷한 모양을 찾기가 어려웠습니다.

그나마! 지난번에 특성이미지 제거한거 기억 나시나요? 모르겠다면 아래 링크에서 확인하세요-

[워드프레스] GeneratePress 특성이미지 제거(숨기기)

그거 제거하고 이러저래 폰트 수정해서 아래와 같이 만들었었지요.

아, 근데 뭔가 마음에 안든단 말입니다. 저렇게 지멋대로 a태그 붙어있는것도 마음에 안들고 read more은 무엇이며 댓글은 왜 저렇게..

하지만 나는 개발자! 불평불만 하지 말고 마음에 안들면 바꾸면 될 일. 지금 얼른 제 블로그 메인페이지 가보세요- 위에랑은 좀 다르게 이쁘게 바뀌었죠?

자! 제가 어떻게 해서 바꾸었는지, 한번 알아보겠습니다.

1. 잔잔바리 없애기

저는 말입니다. 날짜, 글쓴이, 메뉴, 댓글, readmore! 이 잔잔바리 친구들이 너무도 거슬렸었습니다. 특히나 파란색에 밑줄? 지저분해요.

정말 신기하게도 readmore를 제외하고는 다 entry-meta라는 클래스를 사용하고 있습니다. 이것들을 숨겨줘봅시다.

.entry-meta{
	display:none;
}

그리고 readmore는 정말 정직하게 클래스 이름이 read-more군요. 위에 entry-meta를 숨긴곳에 함께 넣어줍니다.

.entry-meta, .read-more{
	display:none;
}

위 css를 추가css에 넣어준 다음 발행을 해봅니다. 그러면 어떻게 될까요?

아주 깔끔하게 잔잔바리들이 사라졌습니다. 어때요? 깔끔해졌죠? 저 꼴랑 3줄로 이렇게 깔끔해집니다.

저번시간에 숨겼던 특성이미지를 보여주고, 옆으로 이동시켜보는것도 한번 해볼게요.

2. 특성이미지 배치

이전 글에서 숨겨놨던 추가css부터 수정해줍니다. 아마 제 글 보고 따라하신분들은 아래처럼 되어있을껀데요. .post-image를 삭제해줍니다.

>> 기존 
.featured-image , .post-image{
    display: none;
}

>> 수정
.featured-image {
    display: none;
}

본문에서 특성이미지는 숨겨주고 리스트페이지에서만 보여준다는겁니다. 이러고 적용하면 대빵만한 이미지가 보이실건데요, 저 친구를 한번 수정해보도록 하겠습니다.

이미 우리는 저 친구의 클래스가 post-image라는 것을 알고 있죠? 간단히 로직을 보자면 이미지의 크기를 보기좋게 지정해주고 왼쪽으로 박아버릴겁니다.

.post-image{
	width:130px;
	float:left;
}

위에 말했듯이 첫줄에 width를 130px로 고정을 주고 float를 이용해서 옆으로 밀어버렸죠? 그러면 어떻게 되나 한번 봅시다.

짜잔, 말도 안되게 쉽게 저렇게 배치가 되었습니다. 진짜 엄청 쉽죠? 업체에선 이걸 돈 받고 한다니까요? 사실 여기까지만 해도 완성이긴한데, 저는 옆에 요약글도 조금 손봐서 위에 띄우고 글자색 변경을 좀 해줬습니다. 

/*리스트 페이지 요약글 설정*/
.entry-summary{
	padding-top:5px;
	color:#A6A6A6;
}

/*리스트 페이지 글 간격*/
.type-post{
	margin-bottom:45px;
}

그래서 완성한 화면이 바로 위와 같습니다. 어때요! 이쁘죠? 좀 티스토리나 네이버 블로그 같나요?

3. 정리

위에 장황히 적은 글들이 읽기 힘드신 분들을 위해서 정리해드리겠습니다.

/*리스트 페이지 특성이미지 왼쪽으로 */
.post-image{
	width:130px;
	float:left;
}

/*리스트페이지요약글설정*/
.entry-summary{
	padding-top:5px;
	color:#A6A6A6;
}

/*리스트페이지글간격*/
.type-post{
	margin-bottom:45px;
}

/*더보기/댓글/*/
.read-more, .entry-meta{
	display:none;
}

네, 뭔가 많은걸 한거같은데 추가css에 꼴랑 이거 4개 추가한 것입니다.

제가 css 컨트롤 하는 포스팅들을 보시면 아시겠지만 개발자도구(F12)를 열어서 해당 클래스를 확인하고 없애주거나 배치를 바꿔주거나 이쁘게 꾸며주거나, 생각보다 어렵지 않고 간단한 작업들이지요?

여러분들도 다 할 수 있습니다! 마음껏 바꿔보고 더 이쁘게 꾸며보세요!

이만,

배곧동개발자 였습니다.

Leave a Comment