[수성비전자방 2022 스킨 수정기록]4. description 삭제 및 스킨 적용

수성컴|프로그래밍/웹개발(HTML, CSS, JS 등)|2022. 3. 12. 09:49

수성비전자방입니다. 드디어 수성비전자방 2022 스킨 수정기록 시리즈 마지막 화입니다. 오늘 할 내용은 description 삭제 및 스킨 적용입니다. 스킨 적용까지 하고 나면 드디어 그동안의 소스코드 수정의 실체(?)를 보게 되는 것입니다!

목차

1. 엠원리액트 사이드바, 메뉴바 수정
2. 헤더, 댓글, 방명록, 이웃 및 구독
3. 글 목록(본문 미리보기), 본문
4. description 삭제 및 스킨 적용(현재 글)
4.1. description 삭제, 검색 엔진 메타태그
4.2. 스킨 적용
4.3. 글 목록 설정

4.1. description 삭제, 검색 엔진 메타태그

4.1.1. index.html의 head 부분(title 태그와 메타 태그들 모여 있는 부분. body 태그 위에 있습니다.)을 보시면 아래와 같은 태그가 있습니다.

1
<meta name="description" content="컴퓨터(PC, 스마트폰 등)를 주제로 하는 누리사랑방인 수성비 전자방입니다.">
cs

이것은 블로그 설명을 나타내는 부분인데, 이 태그를 굳이 스킨에 넣지 않아도 티스토리에서 알아서 추가해 줍니다. 따라서 삭제하셔도 좋습니다.(삭제가 좀 꺼려진다면 주석 처리하시면 되겠죠?)

4.1.2. 검색 엔진 관련 메타태그를 추가합니다.(네이버 웹마스터 도구, 구글 서치 콘솔 등)
네이버 웹마스터 도구: https://searchadvisor.naver.com/
구글 서치 콘솔: https://www.google.com/webmasters/tools/

4.2. 스킨 적용

드디어 스킨을 다 수정하고 블로그에 적용합니다!

4.2.1. 관리자 화면(본인블로그주소/manage)으로 접속합니다.
4.2.2. 스킨 변경으로 들어갑니다.

4.2.3. 스킨 등록을 클릭합니다.

4.2.4. 추가를 클릭합니다.

4.2.5. index.xml, preview.gif, skin.html, style.css를 업로드합니다.
preview256.jpg, preview560.jpg, preview1600.jpg를 만드셨다면 함께 업로드해 줍니다.

4.2.6. 파일들이 잘 추가되었는지 확인하고 추가를 또 클릭합니다.

4.2.7. 이번에는 images 폴더 안에 있는 파일들을 업로드 합니다.
참고 및 주의사항) 티스토리 스킨에서는 index.xml, preview.gif, skin.html, style.css, preview256.jpg, preview560.jpg, preview1600.jpg 외의 모든 파일은 images 폴더 안(하위)로 들어가게 되어 있습니다.

4.2.8. 파일이 다 올라가는 데 시간이 걸리니 적당한 시간동안 기다려 줍니다.
*. 다 올라갔는지 확인하려면 스킨 용량을 확인해 보시면 됩니다. 본인 PC에서 스킨 용량과 추가 버튼 옆의 용량을 비교해 보세요.(약간의 차이는 있을 수 있음.)
4.2.9. 저장을 클릭합니다.

4.2.10. 스킨명을 적절히 입력하고 확인을 클릭합니다.

4.2.11. 스킨 보관함을 클릭합니다.

4.2.12. 스킨 보관함에서 방금 등록한 스킨을 적용합니다.

4.2.13. 확인을 클릭합니다.

4.3. 글 목록 설정

스킨을 적용하고 나면 이렇게 글 목록 밑에 본문이 나오게 됩니다.(위의 스크린샷에 3편에서 수정한 내용이 적용되지 않은 점 양해 부탁드립니다. 수정 순서가 뒤죽박죽이 되어서...) 3편에서 수정한 내용에 따라 글 목록 페이지에서는 글 목록만 나오는 것이 더 예쁩니다.
원래는 index.xml에서 설정을 지정할 수 있다고는 하는데 저는 잘 모르겠습니다.. 제가 티스토리 가이드를 이해하지 못했네요.

4.3.1. 관리자 화면에서 스킨 편집을 클릭합니다.

4.3.2. 홈 설정과 기본 설정에서 목록 구성 요소를 목록만으로 지정합니다.
4.3.3. 적용을 클릭합니다.

4.3.1~4.3.3은 스킨을 수정할 때마다 해 주어야 하는 작업인 것 같습니다.(안타깝군요.)

제 글을 읽어 주셔서 감사합니다.

제가 보기에는 수정하고 싶은 부분이 더 있긴 한데 그건 나중에 별도의 글들로 정리해 보겠습니다.
이렇게 1~4편에 걸쳐서 엠원리액트 스킨을 수정해 보았습니다. 엠원스토리님이 스킨을 잘 만들어 주신 덕에 편하게 수정할 수 있었습니다.
티스토리는 HTML, CSS 등을 수정해서 스킨을 꾸밀 수 있다는 점이 큰 장점인 것 같습니다. 여러분도 소스 코드 수정을 통해 자신만의 블로그를 만들어 보세요!
다음에 만나요!

댓글()