오늘은 간단하게 블로그 꾸미기 완성 관련 글을 작성해 보겠습니다. 간편한 말투!! 시작!!!
시간으로 보니 블로그 스킨을 새로 바꾸고 약 보름이라는 시간이 넘게 걸린 것 같다.
이제 웬만한 블로그 스킨은 다 꾸몄고, 세세한 부분의 마감처리(?), 포인트 처리를 하고 있는 중이다.
HTTP Requests도 60 이하로 줄였고,
페이지 로드 속도를 매우 크게 향상 시켰다.
다만..... 지금 현재 내블로그의 서버 응답시간이 평균 3초 라는 것을 감안하면
처음 접속한 방문객들도 초스피드 페이지 로드가 가능하다는 점!!
왜 HTML의 네트워크 서버 응답 시간이 3초가 걸리는지 모르겠다.
2차 도메인의 사용이 원인인지.. 근데 다른 2차도메인을 사용하는 블로그를 보면 문제가 아닌 것 같고
도메인 비용 몇천원 아껴보려고 도메인 등록기관을 가비아에서 안하고 호스팅케이알에서 해서 그런가?..
조금더 지켜보다가 도메인 기관 이전 까지 생각해봐야겠다.
(현재 각 기관들마다 문의는 넣어두었는데 이쪽 관련해서는 구글링을 해도 관련내용이 없어서 ㅠ 좀더 알아보고 결정을..)
바뀐내용을 하나씩 살펴보자
가장먼저 사이트헤더 부분
site-header
우선 아이콘폰트를 사용해서 SNS공유 위젯들을 추가해 주었다.
http://cocosoft.kr/372 - 티스토리 블로그 SNS 공유버튼 직접 달기
그리고 투명도를 조절해주고 높이가 너무 작은 것 같아 40px→45px로 늘려주었다.
생각 보다 높이를 조절 수정할 곳이 많아서.. 위젯 다는 것 보다 쉽지 않았던 작업
각 부분들 마다 전부 늘려줘야 해서 며칠이 지나고서 깔끔하게 높이 조절이 되었다.
지금도 어느 부분을 바꿔주었는지 기억도 잘안난다는...
마지막엔 IE까지 맞춰주는 섬세함
확장메뉴는 PC버전에서도 모바일용 확장메뉴를 사용 할 수 있게 수정을 하였다
http://cocosoft.kr/362 - 스킨 확장 메뉴 PC에서 사용하기
업데이트 예정사항
아직은 없고 추후에 위젯이나 로고를 변경작업을 할까 고민중
저 로고 때문에 Alex Brush 웹폰트 작업을 굳이 했는데 이미지로 대체할까 고민중
main content
본문 영역은 디자인은 딱히 수정을 한 것이 없다
기존 스킨에 있는 box-shadow 정도를 조절해줬고
<h2> 태그의 속성을 따로 설정을 해줘서 제목을 더 다양하게 사용 할 수 있게 했다.
현재 이본문의 가운데 정렬 제목들이 전부 <h2>태그로 작성을 하였다
본문 하단 부분에는 다양한 위젯을 설치를 했다.
하단 부분 최신글 썸네일은 티스토리 공식 반응형웹스킨#2에서 빨대를 꼽아서 가져온다음 조금 속성을 바꿔주었다
현재 좀 더 테스트중
무단불펌 이미지 금지관련해서는 아래 포스팅을
http://cocosoft.kr/354 - [CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리
카카오톡 및 네이버 버튼 추가는 아래 포스팅을 참고 하시면 도움이 될 것 같습니다.
http://cocosoft.kr/358 - 네이버 공유 버튼 만들기
http://cocosoft.kr/350 - 카카오톡 공유 버튼 만들기
그리고 댓글과 방명록은 문구를 수정해주고
댓글남기기 버튼을 클릭시 지연으로 인해 중복입력이 되지 않게 disabled 처리를 해주었습니다.
http://zzznara2.tistory.com/625 - 댓글 입력한 후 버튼 중복체크 막기
꿈꾸는 우림님께서 빠르게 만들어주셔서 빠르게 가능했던 방법!! 감사합니다.
그리고 ㅠ 저는 아무도 차단 문구나 차단등록 차단IP설정을 하지 않았습니다.
코드나 URL입력시 귀하 차단메세지는 티스토리 자체적으로 막는 것입니다.
업데이트 예정사항
소셜 댓글을 추가 해볼까 한데 언제 작업을 시작하지는 모르겠다 ㅠ 최대한 빨리 바꿔봐야지
main sidebar
블로그 로고 꾸미는 법은 기존에 포스팅을 했었는데 ease-in-out 속성을 사용해 애니메이션 효과를 주었다
http://cocosoft.kr/356 - 블로그 로고 만들기
채널 구독 버튼은 기존의 채널 구독 버튼을 버리고 드랍다운으로 새롭게 만들었다
기존꺼보다 훨씬 마음에 드는 부분 이부분은 조만간 포스팅을 하겠습니다.
아무튼 드랍다운 부분 소스만 잘사용해도 나중에도 유용하게 사용 할 수 있을 것 같다.
그리고 카테고리의 분류 전체 보기를 없애버렸다 이것 말고 디자인은 배경색만 변경해주고 손댄 것은 없다
업데이트 예정사항
새로운 모듈이나 가끔 신기한 코드같은게 있으면 모듈형식으로 달예정이지만
앞으로는 더이상 수정할 계획없음 거의 최종 완성본.
site-footer
간단하게 배경이미지를 넣어준다음
몇가지 세부정보들을 추가해 주었습니다.
사이드바에 있는 카운터 모듈을 하단 부분으로 옮겨 적었습니다.
자세한 내용은 http://cocosoft.kr/363 - footer 부분 꾸미기
업데이트 예정사항
없음. 끝. 최종 완성!!
추가!! 공지사항
공지사항의 내용을 업그레이드를 해주었다.
http://cocosoft.kr/notice/10 - COCOSOFT소개 & 리뷰문의
오래된 게시글 중 유입이 발생한 게시글에 대해서는 하나씩 코드를 수정하는 작업을 하고 있는데
공지사항이 너무 오래되고 가독성이 좋지않아서
전체를 수정을 해주었다.
Timeline.JS 를 사용해서 블로그 개편 이미지를 쉽게 볼 수 있도록 하였고
http://webdir.tistory.com/441 - TimelineJS - 시간의 흐름을 네비게이션화
새롭게 블로그 히스토리를 추가 하였다
블로그 히스토리를 작성할 때는 네이버 블로그 히스토리를 사용해서 작성을 한다음
<tbody>...</tbody> 이부분을 복사해서 붙여넣기를 하면 손쉽게 입력이 가능하다
간단하게 하려고 했던 포스팅이 길어져서 ㅠ 1편, 2편으로 나누어서 적겠습니다.
2편에서는 블로그 꾸미기를 할 때 유용한 사이트들은 총 정리해서
소개를 하겠습니다. 끝!
