#1 티스토리의 밋밋한 기본 첨부파일..
필자는 티스토리 블로그에 'Poster' 스킨을 적용하고 있었다.
그런데 파일을 첨부하니까 위 사진처럼 이미지가 깨져 업로드가 돼서 불편함을 느꼈다.
다른 사이트에서는 첨부파일이 버튼형으로 멋스럽던데 티스토리는 어떻게 못할까 하는 생각이 들었다.
그래서 이번에는 첨부파일 디자인을 바꾸는 방법에 대해 글을 써보려고 한다.
#2 티스토리 스킨 편집
위 사진처럼 첨부파일 디자인을 적용해보려 한다
이제부터 몇가지 작업을 해야하는데 조금 복잡할수 있으니 천천히 따라와주길 바란다.
먼저 티스토리 관리자 탭에 들어간후 '스킨편집' 버튼 클릭.
우측에 'html 편집' 버튼 클릭
이런 화면이 나오는데 <head>라고 써진 부분을 찾아 그 다음줄에 아래 코드를 그대로 붙여넣기 해준다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
붙여넣기 한 모습.
잘 모르겠다면 위 사진처럼 똑같이 해주면 된다.
방금 과정과 아주 유사한 방법으로 하나 더 해준다.
우측 상단의 'CSS' 버튼 클릭후 맨 아래로 쭉 내려준다.
쭉 내려서 마지막줄에서 한칸 띄고 아래코드 붙여넣기.
.imageblock>a { height: 60px; line-height: 60px; padding-right: 18px; padding-left: 70px; background-color: #eee; display: block; text-align: center; border-radius: 2px; overflow: hidden; margin: 18px; color: #282828; -webkit-transition: .3s; transition: .3s } .imageblock>a:hover { background-color: #ec008c; color: #fff; text-decoration: none } .imageblock>a:before { font-family: "Material Icons"; content: '\e2c4'; display: inline-block; width: 60px; margin-left: -70px; position: absolute; border-radius: 2px 0 0 2px; color: #fff; background-color: #282828; font-size: 36px } .imageblock { max-width: 100%; height: auto } .imageblock { color: #aaa; font-size: .9em }.imageblock>a img[src*="gif"] { display: none }
역시 잘 모르겠다면 위 사진과 똑같이.
다 끝났으면 우측 상단의 '적용' 버튼을 꼭 눌러주자.
마지막으로 첨부파일 디자인이 잘 적용된 모습을 확인할수 있다.
'티스토리 (Tistory) > 관리 팁' 카테고리의 다른 글
| 티스토리 글쓰기 - 이미지에 워터마크 넣기 (0) | 2018.07.08 |
|---|---|
| HTML, CSS, JavaScript 주석 처리 하는법. (0) | 2018.06.17 |
| 티스토리 사진 이미지 경계선 테두리 적용하기 ( 추가 또는 삭제 ) (0) | 2018.06.16 |
| 티스토리 사이트맵(sitemap) 만드는 방법: 네이버/구글 웹마스터 도구 (0) | 2018.06.15 |
| 티스토리 블로그 최적화, 구글 웹마스터 도구 등록하기 RSS 제출하기 (2) | 2018.05.21 |
