-
티스토리｜스킨 수정｜홈 화면 커버 - MORE POST 박스 수정｜Letter스킨｜관리자 도구｜HTML / CSS티스토리/스킨｜수정 2020. 12. 31. 14:40
스킨 편집 - 홈 설정에서
메인화면에 뜨는 게시글들을 '최신 글'이 아닌
'커버'로 하여 커버아이템 '리스트'로 설정해보니
홈 화면에
기존의 '최신 글'처럼 좌측 썸네일과 우측 제목, 내용의 구성으로 되었는데
게시글이 2개만 노출되고
그 아래 MORE POST 버튼이 생겼다
깔끔해 보여서 좋긴 한데 저 MORE POST 버튼을 수정하고 싶었다
MORE POST 박스 수정하기 - F12 관리자 도구 확인
F12 관리자도구, Ctrl + Shift + C 크롬 - 홈 화면에서
F12 관리자 도구 - Ctrl + Shift + C로
MORE POST 박스에 가져가니 정보가 나오고
클릭하니 우측에 HTML / CSS 정보가 나온다
CSS의 884행에 가면 수정할 수 있는데
만져보면서 알아낸 것은
곧바로 CSS 편집으로 가서 하나하나 수정하고 새로 고침하며 확인하는 것보다는
여기 크롬 관리자 도구 화면에서 수치 등을 수정하면 바로 결과물이 좌측 화면에 보인다
그리고 여기서 수정한 결과는 이 화면 안에서만 일시적으로 보이는 것이기 때문에
실제로 블로그의 CSS 설정이 바뀌는 것이 아니고
F5 새로 고침을 하거나 다른 페이지로 넘어가면 다시 원래 화면으로 돌아온다
그러므로 이 크롬 화면 관리자 도구에서 이것저것 해보고 괜찮은 설정을 픽스 해서
티스토리 CSS 편집으로 가서 설정하면 될듯하다
Letter 스킨의 기존 설정을 미리 백업해두면
- MORE POST 박스 수정
.index_type_common .btn_post_more { <- 복사하여 찾아가기 (or 884) .index_type_common .btn_post_more {
width: 100%;
padding-top: 2px;
background: none;
border: 1px solid #e0e0e0;
letter-spacing: 0.25px;
color: #666;
text-align: center;
cursor: pointer;
outline: none;
}MORE POST 박스 높이, 모서리 둥글게 수정 확인 (크롬 관리자 도구)
먼저 박스 높이와 모서리 반지름부터 설정을 한다
박스 높이는 884가 아닌 다른 곳에 있어서
보다시피 높이 설정은 648에 있고
모서리 반지름 값은 19에 있다
높이 100px에 모서리 50px가 보기 좋아 보인다
스킨 기존 설정 백업 - 박스 높이
- MORE POST 박스 높이
.index_type_common .btn_post_more { <- 복사하여 찾아가기 (or 648) .index_type_common .btn_post_more {
height: 48px;
}참고로 CSS에서 복사하여 찾아가면 3가지가 나오는데
맨 아래 2294 즈음에
.index_type_common .btn_post_more {
height: 36px;
}여기의 height 설정은 핸드폰 설정이다
2168행에 /* media query - mobile */
라는게 있고 그 아래로는 모바일 설정인 거 같다
스킨 기존 설정 백업 - 모서리 반지름
- MORE POST 모서리 반지름
19 button, input {
border: 0;
border-radius: 0
}MORE POST 박스 나머지 수정 확인 (크롬 관리자 도구)
.index_type_common .btn_post_more { <- 복사하여 찾아가기 (or 884) .index_type_common .btn_post_more {
width: 100%;
padding-top: 2px;
background: none;
border: 1px solid #e0e0e0;
letter-spacing: 0.25px;
color: #666;
text-align: center;
cursor: pointer;
outline: none;
}width : 버튼 폭 (상단 썸네일+글씨 폭에 맞춤 : 100%, 왼쪽 정렬)
padding-top : MORE POST 글씨가 중심 기준으로 아래로 몇 px 내려가는지 (박스를 넘어가면 더 이상 안 내려간다)
background : 배경색
border : 테두리 두께 / 테두리 채우기 / 테두리 색
letter-spacing : MORE POST의 글씨 사이 간격
color : MORE POST 글씨 색
text-align : 박스 안에서 MORE POST 글씨 위치
cursor : 마우스를 박스로 가져갔을 때 마우스 커서 모양
outline : 모르겠다 (무엇이 바뀌는지 눈에 안 보인다)■ width : 80%로 줄이고 가운데로 옮기고 싶은데 그건 모르겠다
기본은 왼쪽 정렬이다
■ background : (크롬 관리자 화면에서) background의 'none'에
마우스 클릭 후 다 지우면
들어갈 수 있는 많은 색들이 위에 자동으로 나온다 ('none'은 색 없음)
■ border : 테두리 두께 5, 테두리 채우기는 아마 solid가 아니면 점선 등이 있을 텐데 아직 모르겠다
색은 '#e0e0e0'가 기본이고 다른 색을 어떻게 넣어야 할지 해서 구글에 #e0e0e0'를 검색해보니
이런 색 설정 서비스가 나온다
저 동그라미 두 개를 옮겨 원하는 색이 나오면
색이름이 바뀐다
그것을 복붙하면 원하는 색으로 변경 가능하다
■ color : 글씨 색 또한 '#666'을 color code에 따라 변경 가능, HEX('#e0e0e0') 등으로 변경 가능,
지우고 자동으로 나오는 컬러도 수정 가능
∴ 색깔 수정은
color code / HEX / 크롬 관리자 제공 색
이렇게 모두 다 변경 가능해 보인다
■ cursor 또한 지우고 나면 여러 옵션이 뜬다
그냥 기본 pointer로 한다
전 / 후 이렇게 수정을 하고 크롬 화면을 보니
이렇게 바뀔 수 있다는 것을 알았다
이젠 CSS 편집화면으로 가서 저대로 수정해본다
MORE POST 박스 수정 CSS 편집
티스토리 CSS 편집창에서는
크롬처럼 색 설정 등에 이름을 지우면 자동으로 목록이 나오지 않아
수정해놓은 크롬 관리자 도구 창과
새로운 탭에 티스토리 CSS 편집으로 들어가 색이름 등을 복사하여 붙여 넣는다
결과 이렇게 수정이 되었다
그런데 19행에 있던 'border-radius'모서리 둥글게는
거의 최상단에 위치해있고
4행의 /* basic */ 아래에 소속되어 있어 느낌이 이상했는데
역시나 적용을 해보니
다른 Read More 박스의 모서리에도 적용이 되어버린다... 모든 박스에 다 적용되는듯 하다
어차피 저 초록색 Read More 박스는 없애버릴 건데 나머진 그때 가서 알아봐야겠다
그리고 MORE POST의 글씨 크기 또한
30px로 수정을 해보았는데
이렇게 카테고리, 최상단 블로그 이름의 크기까지 같이 수정이 되어 버린다.....
나중에 따로 알아봐야겠다
Rmx
반응형'티스토리 > 스킨｜수정' 카테고리의 다른 글