[Blog] 페이지 스타일링(4) - 프로필 & 스크롤바 수정

아래 그림처럼 “프로필” 과 “스크롤바” 스타일링을 따라 해보자!

image



스크롤바 커스텀

왼쪽 사이드바와 중앙 본문과 경계면에 있는 스크롤바를 의미한다.

  • _layouts/default.html 에서 <head> 부분에 코드 추가한다.
  • 원하는 색이나, 원하는 크기, radius 등등 입맛대로 수정할 수 있다.
  • 아래는 내 블로그에 적용된 예시이다.
<style> 
    /* 스크롤바 커스텀 */
      ::-webkit-scrollbar{width: 16px;}
      ::-webkit-scrollbar-track {background-color:#4b4f52; border-radius: 16px;}
      ::-webkit-scrollbar-thumb {background-color:#5e6265; border-radius: 16px;}
      ::-webkit-scrollbar-thumb:hover {background: #a9adaa;}
      ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment 
      {
          width:12px;height:12px;background:transparent;
      } 
</style>



프로필 커스텀

사진 추가

_includes/author-profile.html 에서 수정하면 되고, 아래 코드 부분이다.

  • 참고로 나는 a태그로 링크 타게하고 싶지는 않아서 없애주었다.

  • 또한 크기 등 속성을 조절하였다.

    • 이는 _sdiebar.scss 에서 author__avatar 를 수정하는 걸 추천

    • 여기서 너비도 수정해주었다.

    • max-width: 190px;

  • 사진 추가는 아래 _config.yml를 참고

  • % 와 { 를 함께 사용하는 ruby 문법이 있는데, 이 문법이 자꾸 실행이되기 때문에 사진으로 코드 대체

image-20230315021822610



_config.yml

사진 추가를 여기서 링크를 달아줘야 한다.

  • avatar 속성에 링크를 적용해주면 된다.
  • name, title 등등 많은 정보를 바꿀 수 있으므로 중요한 파일이다.


참고로 이 _config.yml에서 수정하면 만약 서버 구동 시 재시작해야 적용이 된다.



제일 상단에 프로필 그림 커스텀

그림이 네모나서 가장자리를 조금 둥근 모양으로 바꾸기 위해 커스텀

  • _masthead.scss 에서 .site_logo img 를 찾아가서

  • border-radius: 20%; 를 추가해준다.

댓글남기기

참고