반응형 스킨 쓰려는 이유는, 블로그에 축구 기록 관련 글 쓰다 보니, 참고 자료 검색 결과 보여줄 필요 있고, 웹 브라우저에 축구 관련 기록 스크린 샷 편집 이미지 파일 많이 씁니다.
블로그 방문하는 다른 사람들도 나와 동일한 화면 크기라면 상관없지만, 스마트폰 모바일로 보는 사람 많고, 내가 보는 것과 다르게 보일 수 있습니다.
1024 x 1014 사진 웹 브라우저 축소하면, 반응형은 축소된 브라우저 화면에 맞게 사진 축소되지만, 현재 스킨은 축소되지 않고 사진 일부만 보입니다.
처음 티스토리 블로그 쓸 땐 PC 방문자가 많았는데, 지금은 모바일 방문자가 많아졌고, 큰 화면 용 작은 화면 용 글 따로 쓸 순 없죠? 반응형이 좋은 것은 그것으로, 둘 다 맞출 수 있습니다.
최근 방문자 이탈 비율 늘어난 이유가 스킨 관련 있고, 300명 선에서 3800명 1000명 이상 늘어나니까,뭔가 모바일 속도에서 문제가 발생 이탈 늘리는 느낌 듭니다.
변경했더니 티스토리 애드센스 집계 리셋 돼서, 방문자 숫자 복구 시간 좀 걸릴 것 같은, 방문자 300명 선으로 뚝 떨어졌고, 애드센스 하루 2달러 이상 들어오던 것이 0.06달러로 추락. ㅠㅠ
기존에 쓰던 스킨은 Pure Black 몇 개월 간 정들었던 스킨이지만,
https로 바꾸면 애드센스 http와 주소 달라 광고 수입 줄어들게 뻔한, 바꾸는 김에 겸사 겸사 반응형 스킨으로 변경하기로 마음 먹었습니다. 스킨 변경 할 때 마다 발생하는 방문자 숫자 감소, 한번에 하는 것이 낫습니다.
혹시 잘못 만져서 보조 블로그 베베토 만들고 실험해보니 역시, 내가 원하는 걸 실험하려다 보니, 스킨 편집 html파일, CSS, 파일 등록 싹 지워보기까지, AMP가 구글 높은 평점 받는다 해서, 그거도 공부 중인데 머리 아픕니다.
베베토 블로그로 여러 스킨 실험해본 결과, 가장 내 맘에 드는 것은 Egg스킨 반응형,
노란색이 맘에 든 건 아닌, 그냥 메뉴가 단순해서 바꾸기 좋고, 블로그 홈을 내 맘대로 바꿀 수 있고, 어쩌다 욕설 하는 댓글 외엔 반응이 너무 적은데, 글 아래 댓글 공간 큰 것이 맘에 들었습니다. 글 다 읽은 후 다른 글 보려 카테고리 찾아 다시 스크롤 안 해도 되고, 블로그 홈 버튼만 아래쪽에도 배치 할 수 있었으면 좋겠네요.
기능이 다 맘에 들어 로마리우 블로그 스킨 변경 강행했고, https주소 변경도 함께 하느라, 기대했던 칠레 축구 애드센스 수익은 포기했습니다.
에그 스킨으로 변경했더니 문제가, 기존에 쓰던 챔피언스리그 역대 최고 팀들 엠블럼 블로그 홈 버튼, 축구 블로그와 어울리지 않는 노란색과 바꿨는데,
가로 850 x 세로 159픽셀인데 메뉴가 아래로 밀려서 본문과 겹쳐 사라졌습니다.
머리카락 빠져서 머리 쓰기 싫은데, ㅠㅠ 이미 스킨과 https주소 다 변경한 상황 돌아갈 수 없는, 어차피 공부해야 한다면 AMP도 같이 공부하자 생각 들었고, 3일 내내 봤는데도 무슨 말인지 모르겠네요. ㅎㅎ;
블로그 수십 개 찾아다니다 색상 바꾸는 블로그 보고 찾았습니다. AMP 공부는 한참 더해야 할 것 같아 걱정은 남았지만, 상단과 분리하는 방법은 찾았습니다.
html에서 아무리 눈 씻고 봐도 없던 것이 CSS메뉴에 있었고,
상단 메뉴하고 겹쳐있던 이유가, 5059번 끝에 margin여백 top위 -50 설정됐더군요. 25로 변경한 결과 엠블럼 블로그 홈 버튼과 완전 분리 됐습니다.
4994번에 블로그 레이아웃도 바꿔줘야 합니다.
/* 블로그 레이아웃 */
.header {
width: 100%;
margin:0 auto;
padding:0 0 0 0;
background-color:#ffdb43; color:#000;
height:100%;
}
/* ***** Header ***** */
width 100% 하고 height 100% 이게 픽셀로 돼있으면, PC화면에선 괜찮을지 몰라도 320픽셀 모바일 화면에선 높이가 대폭 길어집니다. 그러면서 밑에 메뉴하고 겹치는지 구글 웹 마스터에서 오류 양산합니다. padding 40px는 상단인 듯 한데, 그냥 0으로 맞췄습니다. 이거 수정하고 나니까, 방문자 이탈 비율 90%에서 0%대로 뚝 떨어졌습니다. ^^
메뉴 기능도 필요 없어 치우려 생각 중이고, 상단하고 분리가 중요했던 이유는, 블로그 홈 버튼에 애드블럭 제거 부탁 써 놨는데, 그게 겹쳐서 안보였으니 수정 못하면 스킨 변경 참사 수준 됩니다.
티에디션 쓰다 태터디스크로 바꿨는데, 티에디션이 나중에 나온 것이라 좋겠지만 제 스타일은 아닙니다.
이제 또 해결해야 되는 것은 블로그 홈 메뉴 버튼과 겹쳐있던 아래쪽 글, 뉴스 포스트 사진 보이는 것 선택했는데, 보다 시피 축소가 안되고 겹쳐 보이죠? 그거도 변경해야 합니다. ㅠㅠ
축소 안되면 반응형 선택한 이유가 모호해집니다. 도와주세요 ^^; 결국 테터디스크 포기하고, 티에디션으로 바꿨습니다.
하루가 아니라 엄청 많은 시간 허비하면서 깨우친 건 용어,
반응형= 블로거가 PC화면에 쓴 글을 자동으로 모바일 화면에 맞춰 주는 것. 동영상이나 사진이 웹 브라우저 크기 변화에 따라 줌 인, 줌 아웃 변화하면 반응형, 아니라면 모바일 방문자는 방문 불편하다. 티 스토리 제공 무료 반응형 스킨 11종 쓰면 된다.
글 하나를 보는 덴 아무 문제없는데, 글 수가 늘어나면, 글 목록 분류=카테고리가 필요해지고, 보통 방문자는 검색어 키워드를 통해 개별 글에 방문하기 때문에, 이런 분류가 필요 없지만, 방문자가 글 하나 읽고 다른 관련 글을 읽고 싶을 때, 블로거는 블로그에 써 논 글 목록 분류를 방문자에게 잘 보여 줄 필요 있습니다. 그것을 일목요연하게 보여주는 것이 블로그 홈페이지 첫 화면이고, 티 스토리 제공 반응형 스킨 선택 후에 하는 첫 번째가 블로그 홈 꾸미기, 방문자가 내 블로그에 있는 원하는 글에 빨리 도달 할 편집 필요합니다.
스킨 선택하면 기본 제공 돼 있지만, 자신이 쓴 글 분류 수에 맞게 홈페이지 형태 편집 변경 시, 블로그 홈 스킨 편집 도구가 테더디스크와 티에디션 2가지 제공된다.
테더와 티에디션 활용하면 멋진 블로그 홈 제작 가능합니다. 문제는 이것들로 제작한 블로그 홈 환경이 웹 표준을 충족하지 못하고 있고, 개인 블로거가 글 쓰는 목적 중요한 요소 중 하나, 구글 애드센스 광고 수익, 구글 글 등록 도구인 웹 마스터에서 수많은 오류 발생 시키고, 수정 요구 이메일 쌓여가는 것입니다.
PC 검색만 생각하면 전혀 문제되지 않는 것들이고, PC 화면에 3개 목록 분류에 따른 각각 글 3개씩 배치했는데, PC 이용자들은 정말 편리하지만, 모바일 폭 320 화면은 다양한 문제 발생, 그걸 해결 하려면, html,css 직접 만져야 하는 부담 발생합니다.
구글 크롬 쓰면, 웹페이지 검사 기능 있어서, 블로그 홈 화면 일정 부분 바로 변경 할 수 있습니다.
PC로 작성된 블로그 홈 화면은 스마트폰 모바일로 전환되면서, 두 번째 문제가 화면 전송 속도입니다.
가성비 있는 로딩 속도는 3초 이내인데 PC용 블로그 홈 화면은, 티스토리에서 제공되는 반응형 스킨만으론 어렵습니다. 그것을 빠르게 할 수 있는 것이 모바일 가속 기술인 AMP인데, 제공 스킨들은 엄청난 오류를 뿜어냅니다. 아직 확실한 지식 없어 확 언 할 순 없지만, 지금까지 느낌으론 AMP 요소 중 사본 저장인 캐싱 요소는 Daum 서버에 블로거가 글 쓰면 자동 저장되는 느낌입니다. /m 주소에 모바일 용 화면 자동으로 생성되고 있습니다.
AMP는 모바일 가속, 스마트폰 화면 속도를 말하는 것, 3 요소 중 캐싱은 https 블로그 주소/m 이,
PC용 원본을 모바일 용 자동 캐싱 합니다.
문제는 구글 웹이 이 모바일 용 캐싱된 m을 중복 문서로 인지한다는 것, 구글amp 개념에 따르면 m은 amp용 사본 페이지 아닙니까?
AMP 모바일 가속하기 위해선 amp페이지 작성 필요해 보입니다. 모바일 용 /m 이 티스토리에서 제공하는데 이중 작업이죠? 티 스토리가 AMP html 표준에 맞춰 시스템 개발하면 될 문제인데, 그게 안되니까, 블로거가 AMP용 html 신경 쓰게 되는데, 구글 크롬에 탑재 돼있는 DevTools로 AMP html 수정하다 보면, 웹 개발자에 도전하게 되고, 기존 스킨 CSS DevToolS에선 테터 여백 오류 수정됐지만, DOM 문서만 수정된 것이라, 티스토리 CSS 수정 반영해야 되는데, 왼쪽 여백 20을 5 수정 하려고 CSS 모두 살펴봤지만 없더군요.
블로거가 신경 안 써도 되도록, AMP 형식 맞춰 시스템 개발해주세요. AMP 형식 작성해야 구형 스마트폰 3G 환경에서도 3초 내 전송 가능합니다.
블로그 홈 화면 구성을 템플릿이라 표현하고, 모바일 용 반응형 홈 화면 템플릿 제공하는 것은 많지만,그것이 AMP html 형식 작성되지 않았다면 빛 좋은 개살구입니다. 또 그것을 티스토리에 반영했을 때 AMP 검사기 오류 뜨면 말짱 도루묵입니다. 그래서 워드프레스로 이동하는 블로거가 있지만, 또 공부해야 하고, Daum에서 제공되는 보이지 않는 캐싱이나, 포탈 검색 상위권 노출 없는 구글 검색 만으로 생존 가능할까요? 쓸쓸한 블로그가 될 가능성 높습니다.
구글을 신경 쓰는 이유는 딱 하나, 구글 애드센스 광고 수익 때문이고, 기본적으로 구글은 영어권 회사라 완벽한 한글 시스템 제공하지 못합니다. 내가 Daum에 불만 고객센터 얘기하면 빠른 응답 볼 수 있지만, 구글은 자동 로봇과 상대해야 합니다.
Daum 애드 핏이 빨리 정상 궤도에 올라야 애드센스 끊고 골치 안 썩을 텐 데, 구글이 한국어를 완벽하게 구사하던가, 티스토리가 모바일 가속 웹 표준 3초 이내 가능하도록 제공해야 문제 해결됩니다.
현재 블로그 홈 화면이 정말 허접하게 된 이유는, 태터디스크로 3가지 주제 별 3개 글 홈 화면에 넣고,
사이에 구글 광고 3개 넣었는데 발생한 문제들이,
1일 3800명 방문 했을 때 pc보단 모바일 이용자 급증했고, 모바일 접속 속도가 심각하게 느려졌고, 그에 따른 이탈률 급증한 겁니다.
그래서 블로그 홈 화면 아이템 9개에서 3개로 줄였다가, 태더 세로 배치로 2개씩 6개로 늘린 게 현재 PC화면 조잡하죠? 아이폰 모바일 화면에선 저렇게 보입니다. 그래도 해결 안된 문제가 태터 이미지 섬네일이 틀 밖으로 넘친 것, DevTool로 보면 20이란 여백이 잡혀있고, 저기서 5로 바꾸면 임시 화면은 수정되지만, 새로 고침 하면 원래대로 복원됩니다. CSS 파일을 수정해야 되는데, DevTool에 검색된 테터 리스트가 없습니다.
현재 내 블로그는 DevTool로 점검하면 저렇게 AMP 번개 표시 오류 없다 뜨지만, AMP검사기나 구글 웹 마스터에선 아이템이 너무 가까움 오류하고, 자바스크립트 오류 엄청 많이 뜹니다. 본문이 화면 밖으로 넘어가는 오류도 저거 수정못했기때문입니다. 그래서 테터디스크 포기, 티에디션으로 바꿨습니다.
등록한 블로그 홈 화면 이미지는 당연히 320 폭 화면에선 작아서 안보이겠죠? amp에선 저런 파일을 등록하지 말라고 하더군요. 320에 맞춰서 모든 걸 생각하는 이유가, 전세계 모바일 이용자 70%가 3G 쓴답니다.
저같이 취미로 블로그 하는 사람은 상관없는 문제지만, 상품 생산해서 광고하는 홈 화면이라면, 저렇게 큰 이미지 파일은 320 화면에선 안보이고, 따라서 상품 광고 효과 전혀 없는 겁니다. 당연히 바꿔야 잘 팔립니다.
반응형 스킨 바꾸면서 유투브 동영상과 Daum 동영상 iframe 공유 붙여 넣기 하면, 스마트폰 320픽셀 화면으로 축소될 때, 화면 세로 폭이 줄어들지 않았고, 그에 따라 글씨 줄 높이 차지하는 공간 늘어나면서 아래 광고와 충돌 됩니다.
구글 검색해보니, j쿼리로 수정하는 게 있던데, 그거 적용하니까, 유투브 동영상은 조절되는데, iframe 동영상이 조절 안되더군요, Daum 동영상 광고 붙은 거 가져다 쓰면 잘리지 않기에 많이 쓰는데, 그게 조절 안되면 피곤해서 스크립트 적용했던 거 다 지웠습니다.
스킨 편집 CSS에,
/* 창 크기에 따라 최적화되는 유튜브 CSS 코드 시작 */
.ysize {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.ysize iframe {
position: absolute;
width: 100%;
height: 100%;
}
/* 창 크기에 따라 최적화되는 유튜브 CSS 코드 끝 */
이 코드 붙여 넣고,
글 쓰면서 동영상 붙여 넣을 때 마다,
<div class="ysize"><iframe title="[HL] 바르셀로나 vs 지로나" width="640" height="360" src="https://play-tv.kakao.com/embed/player/cliplink/390765508?service=daum_sports" allowfullscreen="" frameborder="0" scrolling="no" allow="autoplay"></iframe></div>
이렇게 동영상을 감싸주면 화면 크기에 맞게 자동 조절 됩니다.
출처: http://money2015.tistory.com/900 [큰일 할 남자]
이미 쓴 글 동영상 다 감싸 주려면 작업 소요가 너무 많아 짜증스럽지만,
지금부터 쓰는 글은 저렇게 하면 해결됩니다, 잊어 버릴까 봐 적어 놓습니다. ^^
티스토리 본문 글자 크기 바꾸기,
CSS 편집 선택 한 후,
티스토리 블로그 컨텐츠 설정에서 바꾸면 편집기 글씨만 바뀌고, 글 등록하면 원래 크기로 등록 됩니다,
html 편집 CSS 선택하고 body에 font-size: 15px 돼있는 수치를 바꿔줘야 본문 글씨가 바뀝니다,
기본 글꼴만 바뀌기 때문에 기존에 다른 글꼴 등록한 것들은 안 바뀌더군요 ^^
블로그에 언어 번역 기능 추가하는 것 어렵지 않습니다.
여기 굵은 글씨 무료웹사이트번역기 설치 주소,
이 주소 클릭하면 구글 번역기 설치 자기 웹 사이트에 어떻게 설치하는지 한글로 설명 나오고, 설치 할 블로그 주소만 입력하면 되는, 3~4단계 거치면 간단하게 설치 할 수 있고, 저는 스킨 html 편집 </head> 끝나고 <body> 시작되는 첫 줄에 붙여 넣었습니다.
'삶 인생 생활 일상' 카테고리의 다른 글
| 연봉 월급 주급 일당에 대한 생각과 계산 - 주휴수당? (0) | 2018.11.02 |
|---|---|
| 소방 시설 자가 점검 자료 모음 (2) | 2018.09.22 |
| 메르스 증상 환자 사망 예방 수칙 - 백신 따윈 없다 (0) | 2018.09.09 |
| 스포츠토토 프로토 나는 팀을 사실대로 보고있는가? 반성글 (0) | 2018.08.20 |
| 냉면 1050원 라면보다 빠르고 쉬운 식사 준비 (0) | 2018.07.18 |
