1. WNSKIN5 배경이미지 변경.
2. ABOUT 페이지 사용방법.
3. 블로그 색상 변경방법.
4. 블로그에 동영상 넣는 방법.
WNSKIN5 배경이미지 변경.
먼저, 변경할 이미지 3장을 준비 합니다.
이미지 사이즈는 보통 컴퓨터 배경화면으로 쓰이는 해상도 사이즈면 됩니다.
웹페이지 로딩을 위해서 1280x960 사이즈 정도면 되겠습니다.
(꼭 위 사이즈 대로 하지 않아도 됩니다.)
저는 무료이미지를 얻기위해 pixabay 에서 이미지를 3장 구했습니다.
위 준비된 이미지의 파일명을 변경 해줍니다.
01.jpg 는 메인화면에서 첫번째 이미지로 사용 됩니다.
02.jpg 는 메인화면의 두번째 이미지로 사용 됩니다.
bg.jpg 는 기본 배경이미지로 사용 됩니다.
이제 티스토리 관리자에 들어와서 이미지를 변경 해 주셔야 합니다.
HTHML/CSS 편집을 클릭 해서 들어옵니다.
파일업로드 탭을 클릭 하면,
추가 버튼이 보입니다. 추가버튼을 클릭 하고, 준비된 이미지를 추가 해 주시면 됩니다.
상단의 저장 버튼을 클릭 후 블로그를 확인 해 보시면 됩니다.
ABOUT 페이지 사용방법.
먼저, 블로그 글 작성에서 공지사항으로 소개페이지로 사용할 글 하나 작성 해 주셔야 합니다.
저는 임시로 이렇게 소개 페이지를 만들었습니다.
물론, 능력자 분들은 더 괜찮은 소개글을 더 잘 작성 하시겠죠 ?
글 목록에 보면, 공지 글로 작성된 소개페이지가 등록 되었습니다.
해당 주소를 잘 기억 합니다. "notice/9” 9번 입니다.
관리자에서 다시 "HTML/CSS 편집” 을 클릭 합니다.
에디터에서 ctr+f 키 또는 찾기를 눌러서 “notice/“ 를 검색 합니다.
그럼 찾은 notice/ 부분에 색상이 변하면서 3곳을 찾아줍니다.
기본으로 notice/1 로 되어 있습니다.
이 부분을 notice/9 로 수정 해줍니다. (3곳 전부 수정 해줍니다)
전부 수정 되었으면, 위 저장버튼을 클릭 하면 아까 작성한 소개페이지가 등록 됩니다.
추가로, 공지사항으로 작성된 글 이기 때문에 공지사항에도 노출 됩니다.
블로그 색상 변경방법.
블로그의 기본 색상으로 노란색으로 되어 있습니다.
이 색상을 원하시는 색상으로 변경 하실 수 있습니다.
관리자에서 HTML/CSS 편집 에서 HTML 을 수정 합니다.
기본 색상코드는 “cca83c” 입니다. 에디터화면에서 검색 색상코드를 검색 합니다.
그럼 색상코드 부분에 색상이 변하면서 여러군대 찾아 줍니다.
해당 색상코드를 원하시는 색상코드로 변경 하시면 됩니다.
마찬가지로 CSS 부분에도 같은 방법으로 색상코드를 변경 해 주시면 됩니다.
전부 수정이 되었으면, 저장 버튼을 클릭 후 완료 해주시면, 블로그 색상이 변경 됩니다.
이 작업이 노가다? 작업이라, 노가다 작업을 원치 않을 경우는 에디터프로그램(atom 에디터)으로 해당 코드를 찾아서 치환 하시면 편합니다.
CSS도 마찬가지로 변경 해주셔야 합니다.
블로그에 동영상 넣는 방법.
먼저, 유투브에서 동영상 코드를 가져 옵니다.
소스코드 가져오는건 쉽죠?!
티스토리 글쓰기 에디터에 들어 오면, 동영상 코드를 넣어야 합니다.
오른쪽에 보시면, HTML 앞에 체크 박스를 클릭 합니다.
에디터에 작성한 글이 html 코드와 함께 나옵니다.
동영상소스를 넣고 싶은 위치에 넣고,
<div id="video"> [동영상소스] </div>
위 형태로 수정해야 합니다.
그 다음으로 width="숫자" height="숫자" 를 제거 해 줍니다.
수정된 소스는 위 화면과 같이 됩니다.
에디터 화면에서는 이제 동영상이 표시 됩니다.
사이즈를 뺐기 때문에, 에디터에서는 위 이미지 처럼 표시 됩니다.
미리보기, 또는 글 등록을 하시면, 아래 이미지와 같이 동영상을 넣을 수 있습니다.
동영상을 위 과정 처럼 넣는 이유는, 해당 스킨에 동영상 을 넣을때, 반응형으로 사이즈를 변하게 만들기 위해, 위 과정으로 동영상을 넣어야 합니다.
조금 번거롭지만, 위 과정으로 넣어 주셔야 정상으로 동영상이 노출 됩니다.
'스킨수정 관련' 카테고리의 다른 글
| wnskin free 버전 댓글 오류문제 수정. (0) | 2017.09.19 |
|---|---|
| WN-SKIN2 티스토리스킨 내용수정 방법 (12) | 2016.12.03 |
| WN-SKIN2 티스토리 스킨 해더슬라이더 이미지 변경 방법 (2) | 2016.12.02 |
