안녕하세요. 예화 사랑입니다. 오늘은 티스토리에서 새롭게 선보인 커버기능을 기존 블로그에 이식하는 방법에 대해 알아보도록 하겠습니다.예전에 생성한 블로그는 첫화면을 꾸밀때 티에디션으로 꾸밀수가있었습니다. 하지만 최근에 생성한 블로그는 티에디션 기능자체가 없어졌으며 대신 커버기능을 제공합니다. 즉 이제는 티에디션에서 커버로 업데이트 되었다고 보시면 됩니다. 티에디션은 설정하는 방법이 까다롭고 이쁘게 꾸미는것이 숙달되지 않으면 매우 힘든 작업이였습니다. 저또한 첨에 너무 헷갈리고 어려워서 포기했으니깐요~^^; 하지만 새롭게 선보인 커버기능은 모든사람이 범용적으로 사용할수있도록 잘 세팅되어져 나와서 따로 손볼게 별로 없습니다. 기껏해야 카테고리 뭘선택할지 그리고 인기글로 정할지 최신글로 정할지 선택해주고 갯수는 얼마나 할지 정도만 지정해주면 끝입니다. 그리고 커버기능은 css 로 pc에서 보여질레이아웃과 모바일에서 보여질 레이아웃을 따로 지정해줘서 어느기기에서 접속하더라도 보기 불편하지 않고 최적화 시킬수가 있답니다. 티에디션은 주로 pc 에서 만족하게 세팅하면 모바일에서는 조금 레이아웃이 틀어져 보이는 경우가 많았습니다.암튼 커버가 한단계 업그레이드되었다고 보시면 됩니다.그럼 이제부터 이 커버기능을 fastboot 스킨에 이식해보도록 하겠습니다.fastboot 스킨이 아니라면 조금은 소스를 더 수정해야할듯하긴합니다. 수정안해도 될수도 있구요~^^ 아무튼 커버를 이식하시고자 하시는 분들에게 조금이나마 도움이 되었으면 좋겠네요~^^
1. 커버 이식하기 STEP1 - index.xml 업로드
제일 먼저 하셔야 할 일은 스킨을 백업해 놓는것입니다. 커버 이식 작업하시다가 에러나면 책임은 전부 본인에게 있다는것을 명심하시고 스킨을 꼭 백업해두세요~
백업을 하셨다면 이제는 "스킨편집" 메뉴를 눌렀을때 "커버" 라는 메뉴를 활성화 시켜야합니다. 오래된 블로그라면 티에디션이 활성화 되어 있을것이고 최근에 만든 블로그라면 아무 메뉴도 활성화 되지 않은 상태일것입니다.이것을 활성화 하기 위해서는 커버기능을 탑재한 스킨에서 index.xml 을 추출해서 업로드 하셔야 합니다.
티스토리에서 기본으로 제공하는 poster, Whatever, Letter 세가지는 커버를 지원하므로 이중 하나에서 추출하시면됩니다. 번거러우시면 아래 파일을 다운로드하시면 됩니다. 압축푸신후 스킨에 업로드 하시면 됩니다. 이 포스팅을 보시는 분이라면 기본적인 html 정도는 하신다고 가정하고 간단한것은 생략하고 설명하겠습니다.index.xml 을 업로드할때 무슨 주의사항같은 메세지가 뜨는데 확인 눌려주시면 됩니다. 그러면 이제 커버버튼이 활성화 된걸 확인하실수가 있을겁니다. 아래그림과 같이 나온다면 성공입니다.
↓index.xml 파일↓
index.zip
2. 커버 이식하기 STEP2 - javascript 업로드및 연결
두번째로 하실일은 자바스크립트 파일을 업로드하고 연결해주는작업이 필요합니다. 아래 첨부한 파일을 스킨에 업로드 해주세요~ 그러면 image 폴더 아래 경로에 업로드가 될것입니다.
script3.js업로드 한후에는 html 편집에 가셔서 아래 소스를 <body></body> 안에 넣되 제일 하단에 넣어주세요.
<SCRIPT type=text/javascript src="./images/script3.js"></SCRIPT> | cs |
3. 커버 이식하기 STEP3 - 폰트어썸 아이콘연결하기
스킨커버기능중 "커버 슬라이드"에 아이콘폰트인 "폰트어썸"이 포함되었기 때문에 폰트어썸을 사용할수있도록 세팅해주는 작업이 필요합니다. 아래 소스를 <head></head> 사이에 넣어주세요
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> | cs |
fastboot 스킨 사용자라면 <head></head> 사이에 넣되 아래 소스를 찾은후 아래 소스의 바로 위쪽에 넣어주세요.
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" /> | cs |
왜 이소스 위쪽에 넣느냐 하면 위 소스는 폰트어썸 예전 버젼를 로드하는 소스입니다. 새로운소스를 먼저 로드한후에 예전버전을 로드해야 모든 아이콘이 제대로 나오기때문에 순서를 지켜줘야만 합니다.
4. 커버 이식하기 STEP4 - 커버 html 소스 삽입
커버의 핵심 html 을 삽입하셔야합니다. <div id="content"> 로 검색하신후 <div id="content"> 바로아래에 아래소스를 다운받아서 전체복사후 붙여넣으시면 됩니다.
↓커버 html 소스↓
cover.txt5. 커버 이식하기 STEP5 - 커버 css 소스 삽입
이번에는 커버의 레이아웃을 잡아줄 css 입니다. 아래 소스를 다운받으셔서 css 제일 하단부분에 붙여넣어주세요.
↓커버 css 소스↓
아참 그리고 한가지 추가 옵션기능이 있어서 알려드립니다. 커버기능중 슬라이드 기능의 옵션입니다.
슬라이드 되는 이미지가 저는 전부 안짤리고 나오는걸 선호해서 이미지가 무조건 다 나오도록 설정을 했습니다. 그런데 원래는 이미지가 꽉차게 다나오고 빈공간이 없이 나오게 하되 중앙정렬되어서 나옵니다. 즉 빈공간이 없이 꽉차게 나오게 되며 넘치는 부분은 이미지를 컷팅해버리고 가로세로 중앙정렬하는 방법에 대해 알려드리게습니다.
CSS 에 가셔셔 "background-size: contain;" 를 검색하신후 background-size: cover; 로 수정하시면 됩니다.
풍경이미지나 디테일한 큼직큼직한 사진을 많이 올리시는 분들에게는 이렇게 변경하시는게 더 좋을듯하며 저처럼 주로 사진이 작아서 확대되면 해상도가 깨어지는경우가 많다면 그대로 두시는게 좋을것입니다.
[background-size: contain;]
[background-size: cover;]
이렇게해서 커버 이식하는 방법에 대해 알아보았습니다. 저에게는 css 를 추출하는것이 가장 힘들었습니다. 노가다로 일일이 대입해보며 작업한 저의 땀과 노력이 들어간 자료들 이랍니다 ^^;; 이렇게 다섯가지 단계를 모두 마치고 적용하셨다면 이제 커버를 사용하시면 됩니다. 슬라이드, 썸네일리스트, 리스트, 벽돌리스트, 갤러리 이렇게 5가지 커버기능을 모두 사용하실수가 있게 되었습니다. 이 기능들이 궁금하시다면 제 블로그 홈으로 가보시면 커버기능이 이런거구나 하고 바로 이해하실겁니다. 이렇게 했는데 레이아웃이 흐트러지거나 잘 나오지 않을가능성이 많이 있습니다. 그래서 앞에 백업하시라고 강조도 하였구요~ 레이아웃이 잘 안맞는경우는 css 쪽을 수정하셔야합니다. 잘된다면 다행이고 이것저것 만져봐도 잘 안된다면 다시 백업한것을 복원하셔야 할겁니다.혹시 제 포스팅 따라하셔서 성공했다면 댓글달아주는 센스!! 그리고 잘 안되더라도 댓글달아주세요. 혹시라도 도움이 될지도 모르니깐요~^^ 사실 저도 css 에 대해서는 잘 모르지만 이번 작업하면서 많이 배웠습니다. 아직 배워야할게 많지만요~
'정보나라' 카테고리의 다른 글
| 노트북/사무실/컴퓨터 배경이미지 [ pixabay무료이미지사이트] (0) | 2019.05.05 |
|---|---|
| [AUTOCAD FONT] 오토캐드 폰트/글꼴/글자 깨짐 오류 (0) | 2019.04.26 |
| [AUTOCAD LISP]오토캐드 리습모음1,2,3 대방출~ (1) | 2019.04.25 |
| FastBoot 보안접속(https) 설정후 비보안접속 아이콘 해결팁 (0) | 2019.04.24 |
| 티스토리 블로그 인기글 최신글 사이드바에 넣기 (0) | 2019.04.21 |
| 대구지역 국비지원 무료교육 [한국디지털직업전문학교] (0) | 2019.04.20 |
| 아이콘 폰트 폰트어썸(Font Awesome) 목록과 적용방법 (1) | 2019.04.18 |
| 버츠비튼살크림/임산부튼살크림추천 소양증 피부가려움 (0) | 2019.04.13 |
댓글