치환자 설정(본문 수정,Css 수정) [티스토리 스킨 수정]

안녕하세요...명월입니다....
주말이 끝나고 내일부터는 또 한 주의 시작 월요일이 시작되네요... 월요일이라고 해서 엄청 바쁘건 아닌데.. 항상 월요일이 되면 정신없이 하루를 보내는 느낌이네요...시간도 엄청 느린 것 같기도 하고...
저는 월요일이라고 해서 주말이라고 해서.. 블로그 디자인 개편을 늦출 생각이 없기 때문에... 오늘도 열심히 진행해 보도록 하겠습니다..

오늘 낮에 틈날 때 마다 제 테스트 블로그로 들어가서 반응형을 확인했는데.. 확실히 이전보다 보기가 좋아진 느낌이 많네요... 빨리 완성을 해서 본 블로그에도 적용이 되었으면 하는 바램이 있습니다..아자아자 화이팅 해야겠습니다.

어제까지 기본 골격에 대해 구성하고 만들었으면 오늘은 송고글에 대한 스타일을 적용해 보도록하겠습니다.

tistory bootstrap


작업 전의 상태는 위 이미지 같이 전체적인 폰트 크기도 엉망이고 바탕 색이랑 글씨 색이랑 비슷해서 잘 보이지도 않습니다... 다시 정리해서 말하면 엉망이네요...
이대로 테마 적용하면 블로그 망하는 건 순식간이겠습니다.....하하하하하..;;;;
먼저 오늘은 카테고리의 다른 글까지의 순서 및 폰트를 설정하겠습니다.
타이틀과 카테고리 배치에 대해서 살펴 보겠습니다.
글 타이틀의 경우 배치는 나쁘지는 않네요... 단지 글씨크기가 일단 글이랑 차이점이 없어서 이게 타이틀인가 싶기는 하지만 문서 순서 위치는 나쁘지는 않습니다.
그 다음은 카테고리 인데..각각 치환자 별로 DIV가 잡혀있어서 인지 많은 줄 수를 차지 하네요.... 가독성도 많이 떨어지니 이 카테고리를 한 줄로 바꾸겠습니다.
그리고 타이틀 카테고리 본문글 사이의 글자 간격이 없어서 글의 구분이 명확하지가 않네요....

tistory bootstrap


그리고 태그를 정리하면서 확인 한 부분인데「카테고리의 다른 글」은 치환자가 없네요... 그냥 본문 글에서 같이 나오는 형태인 듯 싶은데....
이렇게 큰 오브젝트가 별도로 치환자가 없는게 조금 이상하지만 우리는 Jquery가 있으니깐 Jquery로 태그를 footer로 옮겨야 겠습니다.
그리고 폰트와 글씨 크기의 설정부분에서 폰트는 제가 직접 작성하는 것은 어려우니깐 구글링을 해서 무료로 배포하는 폰트를 다운 받아서 적용시키겠습니다.

출처 : 링크
이 모든 걸 적용시키고 나니 아래와 같은 화면이 나오네요..

tistory bootstrap



폰트랑 글자 크기, 색깔만 조금 수정한 것 뿐인데... 사이트 분위기가 확 바뀌었습니다... ㅎㅎ 무언가 진짜 하나하나 만들어져 가는 느낌이 확 드네요...
다음 포스팅에서는 tag 이하 트랙백, 댓글을 수정해야 겠네요.... 여기까지 완료 되면 그 이후에 방명록, 애드센스등의 기타 애드앱들을 커스텀 마이징 하고 테스트를 거쳐 본 블로그에 적용하면 티스토리 디자인 개편은 끝나겠네요...
후덜덜... 꽤 힘드네요.... 이 작업도...ㅎㅎ 목표는 다음 주 까지 완성입니다... 아자아자....
위 수정한 소스는 github를 통해서 공유하도록 하겠습니다.

소스 보기



댓글 0개가 달렸습니다.
댓글쓰기