2019.01.21 티스토리 발행글에도 보안접속이 강제 적용되었는데요.
https로 전환된 보안접속은 이전에 티스토리 공지글로 올라와 있었지만 저는 맥을 놓고 있다가 엊그제 폰으로 제 블로그에 접속했다가 깜놀했습니다.
아래 샷은 현재는 오류 수정으로 카테고리 메뉴 버튼이 이전 http 적용 때와 같은 상태로 표시된 샷이구요.
아래 샷은 지금은 블로그에 손을 놓고 계신 FastBoot 스킨 개발자 Readiz님 블로그와 역시 방치하고 있는 제 딸래미 블로그인데요.
문제점이 뭔 줄 아시겠죠?
티스토리가 https로 강제 적용 후 발생한 FastBoot 스킨 문제점을 해결하지 않으면 폰으로 접속한 블로그 방문자가 혹시 카테고리의 다른 글을 보려고 해도 볼 수 없다는 데에 있습니다.
문제점은 이뿐만이 아닙니다.
PC에서 블로그에 접속했을 시 운영자 발행 글에 댓글이 올라왔을 경우, 페이지로 이동해서 답글을 달으려고 하면 수정/삭제, 댓글쓰기 버튼이 활성화되질 않아 답글을 달 수가 없었구요.
그외 SNS 글 보내기 플러그인 아이콘이 보이지 않는 등의 오류가 있습니다.
(플러그인 오류는 미해결)
또 카테고리 펼침 버튼과 다음 글 및 이전 글 버튼이 아래 샷처럼 보여야 되는데요.
오류를 해결하지 않으면 이전 글 및 다음 글 버튼은 안 보이고 카테고리 펼침 버튼에 ▶ 아이콘이 표시되지 않습니다.
그렇다면 위에 열거한 오류는 어떤 식으로 해결해야 할까요?
문제의 핵심은 블로그 관리 홈 > 스킨 편집 > html 편집 > HTML에서 http로 되어있는 부분을 https로 바꿔주면 문제는 해결됩니다 ㅎㅎ
*****
그럼 해결 팁을 알아볼까요?
HTML 탭에서 찾기 기능(Ctrl + F)으로 http를 입력해서 아래 코드 부분을 찾습니다.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" /> |
그리고 위 코드의 주소 http를 https로 바꾼 후 적용 버튼을 누르고 페이지를 새로고침하면 위에 열거했던 오류는 한방에 해결됩니다.
여기서 끝이 아니고 위 오류 해결은 FastBoot 스킨에 적용되는 각종 아이콘 및 버튼에 대한 문제 해결이지만 썸네일 오류를 해결하려면 더 해야할 작업이 있는데요.
티스토리가 보안접속을 강제 적용하면서 패스트부트 스킨은 썸네일 이미지가 깨져 표시되고 있습니다.
이유는 보안접속, 즉, https로 적용되면서 스킨 편집 > 파일업로드로 가서 gif나 png 등 이미지 파일을 우클릭하고 링크 주소 복사를 해서 확인해 보면 이유를 알 수 있는데요.
강제 적용 이전 http로 접속했을 때는 우클릭 주소가 http://cfile2 ~~~~이런 식으로 표시되던 게, https 적용 후론 https://tistory2 ~~~~ 등으로 주소가 바뀌었습니다.
따라서 스킨 개발자가 손을 놓은 FastBoot 스킨 사용자는 손수 아래 코드를 찾아 변경해 줘야 합니다.
class="article">',0),tl);var a;e='http://cfile';if(b.match(e+"(.*?)"+g)!=null) |
위 코드에서 이미지를 나타내게 해주는 주소 http://cfile을 https://t1, t2, t3, t4 등으로 변경해서 적용해 주시구요.
파일업로드 탭으로 가서 images/fastboot.min.js 파일을 적당한 폴더(ex, 바탕 화면 등)로 내려받습니다.
그리고 내려받은 images/fastboot.min.js 파일을 메모장으로 전환해 열고 찾기 기능(Ctrl + F)으로 http를 검색하면 딱 2개가 검색되는데요.
첫번째 검색되는 http://","" 를 https://",""로 변경하고 두번째로 검색되는 http://cfile을 https://t1, t2, t3, t4 등으로 바꿔주고 저장해 주세요.
수정된 images/fastboot.min.js 파일은 다시 업로드하여 덮어쓰기하고 혹시 모르니 활성화되지는 않겠지만 적용 버튼을 누른 후 페이지 새로고침하면 썸네일 이미지도 되살아 날 겁니다.
그런데 위 images/fastboot.min.js 파일 편집이 귀찮은 분은 아래 첨부된 파일을 내려받아 파일업로드에서 추가하여 덮어쓰기 하세요.
fastboot.min.js여기까지가 패스트부트 스킨 아이콘 및 버튼, 썸네일 오류 해결 팁이었구요.
저처럼 예전 방식의 나눔 고딕 웹폰트을 적용한 블로그는 폰트가 풀리더군요.
그래서 저는 한결 간편해진 구글 웹폰트로 대체했는데요.
블로그에 구글 웹폰트 적용하기
위 페이지에 접속, Nanum Gothic으로 검색합니다.
Nanum Gothic을 검색하지 않아도 한국인이라면 페이지 첫머리에 나눔 고딕 폰트가 첫머리에 올라와 있을 텐데요.
Nanum Gothic체 오른쪽 상단 붉은 원형으로된 + 아이콘을 누릅니다.
그러면 페이지 하단에 Family Selected라는 검은색 바가 생성되는데요.
바를 클릭하고 확장된 메뉴에서 CUSTOMIZE 탭으로 이동, reguar 400, bold 700, extra-bold 800 세가지 옵션 중 선호하는 글꼴 굵기를 선택한 후, Languages에서는 Latin만 선택되어 있는데, Korean도 함께 선택하고 EMBED 탭으로 이동합니다.
EMBED에서 1번으로 표시한 코드가 블로그 html 편집 <head>와 </head> 사이에 넣어주면 되는데요.
STANDARD 코드를 넣을건지, @IMPORT 코드로 넣을건지 입맛대로 하시구요.
2번 코드는 'Nanum Gothic', sans-serif; 만 복사해서 CSS에서 font-family: 바로 뒤에 붙여넣기 하면 됩니다.
저는 @IMPORT 코드로 적용한 상태이구요.
CSS font-family 제일 앞에 'Nanum Gothic', sans-serif;를 배치하면 간단히 적용됩니다.
그런데 만약 이전 웹폰트를 적용했었다면 대부분 CSS 제일 상단에 코드가 심어져 있을 텐데요.
이전 코드를 제거하면 좀 더 간결한 CSS가 되겠죠?
이상으로 이 글은 여기까지 이고 끝까지 읽어 주셔서 감사합니다.
'블로그 Tip' 카테고리의 다른 글
| 구글 웹폰트 티스토리 블로그에 적용하기 (3) | 2020.02.29 |
|---|---|
| 티스토리 새 에디터 어떻게 생각하시나요? (2) | 2019.04.01 |
| 티스토리 공감 버튼 클릭 숫자 늘리는 나쁜 방법 (9) | 2019.02.02 |
| 블로그 발행글 검색 노출 누락 여부 확인하기 (0) | 2019.01.20 |
| 티스토리 새 발행글 카테고리에 표시되는 N 아이콘 색상 변경하기 (3) | 2019.01.12 |
| 애드센스 사이트 목록에 새 사이트(티스토리 블로그) 추가하는 방법 (2) | 2018.12.31 |