-
티스토리｜스킨 수정｜홈 화면 게시물 썸네일 크기, 글씨 크기 수정｜Letter스킨｜관리자 도구｜HTML / CSS티스토리/스킨｜수정 2020. 12. 30. 22:20
Letter 스킨에 프로필 사진 넣기에 이어
홈 화면에 표시되는 게시물의 전체적인 크기를 수정하고 싶어
검색을 조금 더 해보고 만지작 해본 결과를 공유한다
먼저 기존 구성이 어떻게 되어 있는지, 그리고 어느 부분을 수정해야 하는지
방법을 조금 익힌 바에 의하면
관리자도구를 활용하여 HTML / CSS 확인 (홈 화면 게시물 제목)
이것이 현재 블로그의 홈 화면인데
여기서
- 화면 빈 곳 오른쪽 마우스 -> 검사 (N) or
- Ctrl + Shift + I or
- F12
를 누르면 관리자 도구가 실행이 된다
크롬은 오른쪽에 실행된다
여기서 윗칸의 Elements 부분이 HTML,
아래칸의 Styles 부분이 CSS를 확인 할 수 있는 부분이라고 한다
여기서 위 칸의 Elements의 좌측에 마우스 아이콘 혹은
Ctrl + Shift + C
를 누르고 왼쪽 원래 화면에 수정하고 싶은 부분에 마우스를 가져가면 그 영역의 색깔이 바뀌면서
해당 영역의 정보를 확인할 수 있다
(color, font 등)
그리고 클릭을 하면 오른쪽 관리자 도구 칸에
HTML과 CSS 정보를 확인할 수 있다
CSS 위치 확인하기 (홈 화면 게시물 제목)
방금 확인했던 해당 영역의 정보에서
'Font 20px'
이 부분의 숫자를 수정하면 글씨 크기가 줄어들거 같은데
CSS의 어느 부분에서 찾을 수 있는지 확인하는 방법은
Skyles에서
빨간 박스 부분이 위에서 확인한 해당 영역의 정보와 일치하는 부분이고
빨간 박스 오른쪽 상단에 보면
style.css? ...317756 : 1122
라는 부분이 있다
바로 여기 1122가 우리가 CSS를 열었을 때 1122행에 저 정보가 들어있다는 뜻이다
혹은 박스 맨 윗줄 ' .index_type_~~~ ' 부분을 한번 클릭하면 블록이 잡히는데
그 상태로 Ctrl+C 복사하여서 블로그 CSS 부분에 클릭 후 Ctrl+F로 찾기를 실행하여
복사한 ' .index_type_~~~ '를 찾으면 찾는 부분으로 이동할 수 있다
* 주의
HTML, CSS 편집 칸에서
Ctrl+F로 찾기를 하면 여러 개의 값이 나올 수 있는데
평소처럼 Enter를 반복하여 누르면 안되고
한번만 Enter를 누르고 다음값을 찾을때에는 Ctrl+G로 다음값으로 넘어간다
그냥 Enter를 난사하면 처음 찾은 자리에서 빈칸을 계속 생성하게 될 것이다
아무것도 모르는 상태에서 건들면 안될거같아 조심히 다룬다
CSS에서 font-size 수정 (홈 화면 게시물 제목)
그렇다면 다른 탭으로 블로그에 가서
관리 - 꾸미기 - 스킨 편집 - 오른쪽 상단 html 편집
으로 가서 CSS의 1122 칸에 가면
정말 그 자리에 정보들이 있다
(기존 letter 스킨은 24px로 되어 있는데 나는 20px으로 줄였다)
그러면 이제 font-size 숫자를
새로 고침 시 눈에 띄게 변경되도록 큰 숫자를 넣어 (ex 50px)
오른쪽 상단에 적용 -> 중간 상단에 새로 고침까지 해보면
수정이 되는 것을 확인할 수 있다
홈 화면 게시물 제목 글씨크기 수정 이외에도 사이즈처럼 보이는 값들을 수정하면서 확인해본 결과 (추측)
padding : 상단부터의 여유 공간
font-size : 글씨 크기
line-height : 상단으로부터 제목글씨 위아래 높이
(우측 사진은 line-height : 200px로 적용시)
CSS 편집
그 외 다른 바꾸려고 시도한 정보들을
CSS 편집하는 공간에 Ctrl+F로 찾아가는 방법으로 공유하자면 (Letter 스킨에서 수정한 것이라 다른 스킨은 확인 안됨)
* 주의 : 맨 끝 ' { ' 이후에 공백까지 복사 X
썸네일 사진 크기 수정 (홈 화면)
.index_type_horizontal .thumbnail_post { <- 복사하여 찾아가기 .index_type_horizontal .thumbnail_post {
width: 192px;
height: 192px;
margin-right: 24px;
}width : 폭
height : 높이
margin-right : 썸네일 기준으로 오른쪽 글씨들과의 여유 공간카테고리 · 날짜 · 시간 글씨크기 수정 (홈화면 게시물 제목 아래)
@media screen and (min-width <- 복사하여 찾아가기 /* media query - pc */
@media screen and (min-width: 821px) {
body, button, input, select, table, textarea {
font-size: 14px;
}font-size : 글씨 크기 홈 화면 게시물 글 내용 글씨크기 수정 (카테고리 · 날짜 · 시간 아래 2줄로 된)
.article_content .txt_post { <- 복사하여 찾아가기 /* article_content common */
.article_content .txt_post {
font-size: 16px;
}font-size : 글씨 크기 홈 화면 게시물 글 내용 위치 관련 수정 (카테고리 · 날짜 · 시간 아래 2줄로 된)
.index_type_horizontal .txt_post {
max-height: 55px;
margin-bottom: 20px;
line-height: 24px;
-webkit-line-clamp: 2;
}max-height : 상단 기준으로 내용줄이 보여지는 높이
margin-bottom: : 내용줄 기준으로 하단 이후 Read more 버튼까지 여유 공간 (버튼이 아래로 밀려남)
line-height : 제목 아래 카테고리·날짜줄 기준으로 날짜줄~내용줄 높이홈 화면 게시물 글 하나의 전체(썸네일+글전체) 위치 관련 수정
.inner_index { <- 복사하여 찾아가기 / 두가지 나오는데 하나는 모바일용 ( /* search mobile open */ 아래) /* main */
.inner_index {
position: relative;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}max width : 좌측 기준으로 전체 폭
마무리
그러나 이것들 말고도 하고 싶었던
홈 화면 게시물과 게시물 사이의 간격 조정
은 아직 방법을 찾지 못하였다
조금 더 줄이고 싶은데
다음에 방법을 찾으면 공유해보도록 한다
Rmx
반응형'티스토리 > 스킨｜수정' 카테고리의 다른 글