본문 바로가기

애드센스,블로그

블로그 스킨 교체하였습니다. Poster 스킨 후기 및 사진 간격 조정(HTML/CSS)

'블로그 스킨 교체하였습니다. Poster 스킨 후기 및 사진 간격 조정(HTML/CSS)'



지금까지 'Flatinum'이라고 하는 반응형 스킨을 HTML을 고쳐가면서 계속 사용하고 있었는데 계속 고쳐도 제가 생각했던 깔끔한 느낌과는 많이 멀다고 느껴져 몇일 전부터 계속 스킨을 알아보다가 그 중에 제일 맘에 드는 스킨 'Poster'을 골라 적용시키게 되었습니다. 하지만 이미지 간격이 맘에 들지 않아 HTML/CSS 수정내용도 포함되어 있으니 참고하세요.





'Poster' 스킨 적용하다.



기존에 사용하던 스킨은 위와 같이 'Flatinum'이라는 블로그 스킨인데요, 깔끔한 디자인이 마음에 들어 적용하여 사용하고 있었는데 계속 사용하다보니 스킨 교체의 욕심도 났었고, 무엇보다 제가 한눈에 봤을 때 글에 집중에 잘 되지 않더라고요. 그래서 결국 과감히 스킨을 바꾸기로 결정하였습니다.




우선 블로그 스킨을 바꾸기 위해서 블로그 관리 창으로 들어온 다음, '스킨 변경'을 클릭해주도록 합니다.




여기서 이제 본인이 원하는 블로그 스킨을 고르시면 되는데요, 저는 이미 'Poster'스킨을 골라놓았기 때문에 바로 선택하여 적용해주도록 하겠습니다. 이때 적용 시, 기존 스킨을 보관할 지를 선택할 수 있는데요, 저는 보관해두었습니다. 블로그 기록들을 남기고자 말이죠.




이렇게 블로그스킨 적용과 기본적인 설정들은 끝냈습니다. 그런데 계속 보다보니 굉장히 거슬리는 것이 글의 사진 사이의 간격이 상당히 넓어 거슬리더라고요. 그래서 해결방법을 인터넷에 검색해보았는데 마땅한 해결방법이 소개되어있지 않더라고요. 그래서 결국 직접 계속된 시도 끝에 찾아내어 소개해드리도록 하겠습니다.




'블로그 관리'에서 '스킨 편집'으로 들어간 후, 'HTML 편집'을 클릭하면 HTML/CSS 코드 창이 뜨게 되는데요, CSS로 들어가 1257번째(Poster 스킨 기준)의 margin-top 값을 36px에서 값을 줄여주시면 간격이 줄어들게 됩니다. 저 같은 경우, 5px로 설정하였습니다.




어때요? 확실히 달라진 것이 보이죠? 저는 개인적으로 사진 간격이 좁은게 훨씬 보기 좋다고 생각하여 이렇게 설정하였습니다. 혹시나 필요하신 분들은 유용하게 사용하셨으면 좋겠네요.






이번에 스킨 변경으로 블로그에 대대적인 변화를 주게 되어 이렇게 남겨보았습니다. 개인적으로 전에 사용하던 스킨도 괜찮다고 생각했었는데 더욱 깔끔하고 모던한 느낌을 주고 싶어 'Poster' 스킨을 선택하게 되었네요. 그리고 사용하면서 계속 HTML코드를 만져보면서 새롭게 바꿔나가보려고 합니다.












추천하는 글

 

애플의 첫 AI 인공지능스피커, 홈팟(homepot)에 대해서 알아보기


마이크로소프트, MS 서피스 랩톱에 대해 알아보자


배틀그라운드 부정프로그램 신고방법 알아보기