티스토리 블로그 꾸미기(주소창 색상, 블로그 아이콘, 상단네비바)
오늘 간단하게 아이콘만 제작하려다가 생각 보다 ㅡㅡ;;; 많은 것을 바꾸어 버렸습니다..
처음시작은.. 블로그 로고를 교체하려고 했습니다.
See the Pen 코코소프트 로고2 by JCM (@cocosoft) on CodePen.
하지만 저 것으로 바꾸기에는 외부스크립트도 너무 많이 필요하고
귀찮아서 로고 변경을 포기하는데...
갑자기 ㅡㅡ!!!!!!!! 아이콘이 맘에 들지 않아서 교체를 마음 먹습니다.
첫 번째 블로그 아이콘 변경
아이콘은 설정 기본정보에서 교체가 가능합니다. 주로 댓글 작성에서 아이콘 표시가 됩니다.
사실 맨처음에는 아무런 색이나, 배경 없이 타이포그래피 만 사용해서 아이콘을 만들었습니다.
그러던중 댕댕콘이라는 것을 보게 되었고 강아지로 변경을 하였죠.
근데 뭔가 지저분해서 다시 돌아오려고 하는데..
흰바탕에 검은 글씨가 뭔가 밋밋하기도 하고 그러던중 아까 설치하려다 포기한 로고를 사용하면 어떨까 하고?
작업을 시작 하였습니다.
작업은 총 3단계로 이루어졌습니다.
우선 위 로고는 코드이기 때문에 GIF 로 변환이 어려워서.. 동영상을 이용하는 방법을 사용했습니다.
로고 화면 녹화 → 동영상을 GIF로 → http://ezgif.com/split 사용
(유튜브 동영상을 손쉽게 gif로 변경을 해줍니다. 거의 모든 gif 기능이 다있습니다.)
하지만 위 방법으로 뭔가 세세하게 프레임 조절이 힘들도 최종 파일의 크기가 커서 다시 작업을 하였습니다.
ㅠ_ㅠ 하.. 뻘짓..
로고 화면 녹화 → 베가스로 프레임 전부 캡쳐 → 포토스케이프로 gif 생성
아이콘 꾸미기는 솔찍히 별 특별한 기술이 없습니다.. 그냥 노가다.. ㅠ_ㅠ
이양 아이콘을 바꾼김에 파비콘 교체 까지 진행을 합니다.
두 번째 블로그 파비콘(웹아이콘) 변경
파비콘은 웹페이지 상단 주소탭 옆의 아이콘을 말하며, 웹페이지 로고의 개념입니다.
이건 위에 보이는 티스토리 설정 기본 정보화면에서 손쉽게 업로드 가능합니다.
최근에는 모바일 디바이스의 웹아이콘으로도 사용되고 있습니다.
예를들어서 제 블로그의 경우 모바일 화면에서 즐겨찾기를 하면 아래와 같이 나오게됩니다.
홈화면에 추가를 해도 마찬가지구요.
오른쪽이 기존 아이콘 왼쪽이 오늘 새롭게 작업한 아이콘입니다.
안드로이드는 고해상도 아이콘 하나만 등록하면 자동으로 사이즈가 조절 되어 보이지만
아이폰은 세분화해서 등록도 가능합니다. (굳이 나눌 필요는 없지만.. 뭐 기기마다 부담은 줄겠죠?)
<link rel="apple-touch-icon-precomposed" href="./images/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="./images/apple-touch-icon-180x180-precomposed.png">
저는 이런식으로 구분을 해서 입력 했습니다. 해당태그는 <head>안에 집어 넣으면 됩니다.
더 자세한 관련 내용은 아래 내용을 참고하세요!!
참고문헌 및 관련링크.
세 번째 상단 헤더 네비바 변경
아이콘을 그라데이션으로 바꾸고 나니 왠지 상단 네비바도 변경을 해주고 싶어서 변경을 진행했습니다.
.brand 영역의 배경을 투명으로 없애버리고 사이트 헤더부분에 그라데이션을 주었습니다.
#site-header{} 이부분의 배경을 수정하면 전체 반응형 웹페이지에서 변경되며
미디어 쿼리 안을 수정하면 특정 해상도에서 변경이 가능합니다.
(미디어 쿼리에 대한 자세한 내용은 부트스트랩 그리드시스템 미디어쿼리를 참고하세요.)
네 번째 안드로이드 크롬 및 웹페이지 주소창 색상 변경
이거 찾는데 정말 오래 걸렸습니다. ㅡㅡ
상단 헤더 네비바를 바꾸니 주소창을 바꾸자는 생각이 갑자기 들었고
예전에 어떤 특정 사이트를 들어가니 주소창이 핑크색 색상이 변경되는 것을 기억했습니다.
그래서 한참을 찾았네요.. 예전에 추천스킨으로 소개한 뭐하라님의 Material T Mark5 - http://nubiz.tistory.com/628
스킨에도 적용이 되어있습니다.!!
차이가 보이시나요??
주소 상대표시창의 색상이 변경되었습니다!!! 제 블로그에 접속할때만 변경이 되는 것이죠.
 적용전 |  적용후 |
처음에는 이게 jQuey 모바일인줄 알고 한참을 찾았는데..
간단하게 메타태그로 설정이 가능합니다.
<meta name="theme-color" content="#db5945">
이런식으로 말이죠!!!
더 자세한 사항은!! 구글 디벨로퍼스에서 확인이 가능합니다!!
https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
마무리 결론
다시는 당분간 꾸미기 하지않는다고 말한지.. 하루도 되지않아서 ㅡㅡ;; 또 엄청나게 꾸몄네요.
꾸미고나니깐 좀먼가 그라데이션을 너무많이 준 것같아서 지저분하지만
당분간은.. 더이상 수정금지
올해 여름이되면 시원한 느낌으로 바꿀때 다시 생각을 해봐야겠네요.!!
그럼 끝!
