현재 티스토리 새로운 스킨인 Poster, Whatever, Letter에만 해당하는 내용입니다.
티스토리 새로운 스킨 3종인 Poster, Whatever, Letter 스킨 버그
다들 아시겠지만, 스마트폰 웹 브라우저에는 "홈 화면에 추가"라는 기능이 있습니다. 홈 화면에 추가를 하면 스마트폰 홈 화면(바탕화면)에 아이콘이 생성됩니다.
티스토리는 블로그 설정에서 등록한 이미지가 홈 화면 아이콘이 되도록 html 코드가 자동으로 생성됩니다만 새로운 스킨에서는 코드에 문제가 있어 바로 가기 아이콘이 생성되지 않고 있습니다. 브라우저 개발자 도구를 이용해서 HTML 코드 head 부분을 보면 apple-touch-icon이 있습니다.
- URL 디코딩
|
1
2
3
4
5
|
<!-- 새로운 스킨 apple-touch-icon-->
<link rel="apple-touch-icon" sizes="152x152" href="//i1.daumcdn.net/thumb/C152x152/?fname=https://tistory3.daumcdn.net/tistory/1895926/attach/">
<!-- 기존 스킨 apple-touch-icon -->
<link rel="apple-touch-icon" sizes="152x152" href="//i1.daumcdn.net/thumb/C152x152/?fname=https://tistory3.daumcdn.net/tistory/1895926/attach/37b7c532be944bc4ac193a4e92bebe3f">
|
cs |
첫 번째 새로운 스킨 코드와 두 번째 기존스킨의 코드를 보면 차이점이 있습니다. 새로운 스킨 코드 끝을 보면 attach/ 다음에 암호코드처럼 생긴 이미지 파일명이 나와야 하는데 없습니다. 두 번째 기존스킨 코드를 보면 attach/37b7c532be944bc4ac193a4e92bebe3f 이렇게 되어 있습니다.
홈 화면에 추가 바로가기 아이콘 설정
버그 신고하는 곳도 없고 티스토리 측에서 언제 버그를 수정해 줄지도 모르기 때문에 직접 코드를 넣도록 하겠습니다.
아래는 티스토리 블로그 관리에서 블로그 이미지를 등록하는 방법입니다. 원래 여기에 이미지를 등록하면 블로그 이미지로도 사용되지만 스마트폰에서 홈 화면 추가 시 바로가기 아콘으로도 사용이 됩니다.
- 아이콘으로 사용할 이미지 등록 (이미 등록했다면 생략)
아이콘으로 사용할 이미지 준비
우선 아이콘으로 사용할 이미지(확장자 png)를 크기 별로 다섯 개를 준비합니다.
이미지 크기는 가로 256px 세로 256px과 180x180, 152x152, 120x120, 76x76 픽셀
이미지 파일명을 나중에 식별하기 편하도록 apple-touch-icon-76x76.png 이런식으로 정해 줍니다.
이미지 파일 업로드
1. 블로그 관리 메뉴중 > 스킨 편집 > html편집
2. 파일업로드에서 > 추가
준비해둔 이미지 다섯 개를 업로드하고 저장합니다.
3. 이미지 주소 복사
업로드한 이미지를 마우스 오른 쪽 메뉴로 선택한 후 이미지 주소를 복사를 합니다.
- 참고 : IE는 바로가기 복사 / 크롬은 이미지 주소복사 / 파폭은 링크 주소 복사 입니다.
4. 복사한 이미지 주소로 코드 만들기
복사한 이미지 주소를 아래 코드 "복사한이미지주소"에 붙여 넣습니다.
|
1
2
3
4
5
|
<link rel="apple-touch-icon" sizes="76x76" href="복사한_이미지_주소">
<link rel="apple-touch-icon" sizes="120x120" href="복사한_이미지_주소">
<link rel="apple-touch-icon" sizes="152x152" href="복사한_이미지_주소">
<link rel="apple-touch-icon" sizes="180x180" href="복사한_이미지_주소">
<link rel="apple-touch-icon" sizes="256x256" href="복사한_이미지_주소">
|
cs |
5. HTML코드에 삽입 하기
HTML 코드 편집창으로 가서 <head> 아래 타이틀 부분 `<title>[##_page_title</title> 아래에 작성한 코드를 아래 그림 처럼 넣고 저장을 하고 나옵니다.
마지막으로 스마트폰으로 가서 내 블로그에 접속하고 홈 화면에 추가를 해 봅니다. 홈 화면에 바로 가기 아이콘이 생성된 것이 확인되면 성공입니다.
2018/10/12 - [Blog Tip] - 티스토리 블로그이미지와 아이콘 그리고 파비콘
