오랜만에 사용중인 블로그 스킨을 손좀 봤다.

사용 중인사용 중인 스킨 수정작업 기록 

 

사용 중인 스킨의 사이드바 부분의 폰트 중 최신글 답글 출력 부분의 가독성이 떨어져 보여 

폰트와 최신글/답글 머릿글의 컬러를 바꿔보았다... 원래 폰트가 궁서체? 비슷한 폰트였어서 

안 그래도 사이드바 부분에서 카테고리 폰트와도 매치가 안 되고 가독성이 떨어지기에 

tiriumFont.css의 기존폰트인 "font-family:'Nanum Myeongjo', sans-serif"를 스킨에 링크내장 돼있는

"'Nanum Gothic','Malgun Gothic',sans-serif" 폰트체로 바꾼 후 bootstrap.min.css의 폰트칼라를 

#c70 c0 c로 변경했다.( ;font-weight:300;line-height:1.1;color:#c70 c0 c} h1 ) 아직까지는 뭔가 어수선 하지만

 

시간이 될때마다 코드를 쪼금식 분석해서 스킨을 수정해 나가도록 해보자.

 

수정된 부분 이미지 

 

빨간팬 부분이 수정한 부분들이다

 

타이틀 메뉴 부분의 폰트도 수정 됬다

 

그리고 스킨의 최신글 목록이 너무 레이아웃에 붙어 출력되어 패딩값을 줘봤다.

따로 css파일을 손보려니 귀찮기도 하고 그냥 HTML문서에서 바로 패딩값을 적용했다...

 

추가로 사이드바 하단에 "방문자통계" 카운터블럭을 DIV 태그로 감싸 달았다.(이 부분도 html 문서 안에 직접 태그를 만들어 넣었다 추후에 css 파일에 작업을 다시 보자)

 

* 추가로 사이드바폭 (slidebars.min.css) 의.sb-slidebar, (*width ) 부분을 전체적으로 5%씩 확장을 했다 해상도에 따라 자동으로 적용되는 부분이라 그냥 전체적으로 5%의 폭을 증감시켰다. 5%만 증감시켜도 사이드바 오픈 메뉴 부분이 확실히 증가됨을 시각적으로 느낀다.

 

*확장하고 나니 댓글들의 출력 목록에 여유가 많아졌다.... 

해상도에 따라 5%씩 확장한 사이드바

수정한 부분 기록

 

그리고 이스킨의 한 가지 문제점이 *안드로이드 크롬에서 사이드바 부분이 스크롤 시 원하지 않게 닫히는 문제가 있어서 혹시 브라우저 간의 호환성 때문인가 하고 *{-webkit-transition:- webkit-transform 400ms 태그 부분을 살펴봤지만 내비게이션에서 많이 쓰는 "transition"태그 문제는 아무래도 아닌 것 같아 일단 덥어둔다. 

*참고로 webkit-transition 태그는( 크롬과 사파리 ,webkit-transition  /오페라 -o-transition /파이어폭스  moz-transition )의 부라우저간의 호환성 문제를 해결한다고 나온다...

아무래도 이 부분은  JAVA script 문제인듯하다.... 나중에 script파일을 살펴보자 우선 구문 문법공부좀 한 다음에.... 지금은 능력 밖이다;;;;...

아무튼 이후 사이드바 상단에 프로필과 개인 블로그나 페이스북 등등의  링크는 제거한후 ..

이 부분에 링크 됐던 "블로그, 카카오스토리 "등은  하단 footer. css에 새로 작업해서 추가한 후 hover태그로 마우스롤업시  백그라운드의 차이를 두었다.

시간을 두고 쪼금씩 스킨을 수정해 나가다 보니 문득 내가 무엇을 수정했는지 잊어버리게 되더라;;;;  조기 치매증상인지 ㅋ

주석을 달아 놓지만 때론 주석도 이해를 못 하니 이렇게 블로그에 수정 시마다 기록을 남겨 놓는 것이 보다 더 안정적 일 듯하다....

 

 

간단하게 폰트 부분만 찾아 수정한다는 것이 손을 대다 보니 여기까지 작업을 했다;;;;;;;

이만 마무리와 기록을 하고 다음엔 코팅공부 좀 더해보고 진행을 해보려 한다....

미미하지만 짬이 날 때마다 스킨을 수정해보는 것도 블로그를 운영하는 또 다른 재미 중에 하나 인듯하다...

네이버등의 블로그에서는 스킨의 코팅을 바꿀 수 없는 부분들이 이곳 티스토리에서는 자유로우니

티스토리 블로그 운영의 또 다른 재미가 아닐까 싶다..

 

*2016년 10월 29일  추가로 방명록을 달았다.

 

사이드 바 입력폼에 이미지는 원래 있던 글쓰기 아이콘 이미지를 사이즈만 줄여서 폴더에 업로드했고 

 

사이드 바와 콘텐드 바디에 방명록의 치환자를 생성했다.

 

글쓰기 입력창의 textarea box 가 좌측 상단의 "x"측으로 몰려서 클래스를 class="form-control"로 변경하니 width 값이 100% 가되어 문제는 일단 해결된다.

 

*다른 문제가 있다 지금은 해결한 이미지이지만 우측의 리플 수정/삭제 폼이 텍스트로 되어있어 우측의 사용자 정보와 아래댓글과 모바일 해상도에서 겹쳐 버리는 오류가 생긴다..

아래와 같이 해결했다...

 

모바일 해상도에서 가변시 우측의 "리플 /삭제 " 텍스트가  좌측의 사용자 데이터 의 정보와 겹쳐지는 문제가 있어 

위와 같이 클래스 속성을 텍스트에서 이미지와 버턴으로 방명록 리플 치환자를 감싸니  하니 해결이 됐다...

몇 가지 조금씩 스타일 시트를 손보니 일반 방명록으로 사용하기엔 큰 무리가 없어 보인다.

일단 이상 없나 며칠 사용해 봐야겠다....