블꾸(16)
-
[Portfolio 스킨] 18. 이미지 & 썸네일 그림자 효과 및 확대 모션
블꾸 포스팅을 하다보니까 배경이 하얀데 사용하는 사진까지 하애서 이게 그림인지 글인지 헷갈리는 경우가 많다.그래서 구분할 수 있게 그림자를 넣고 모서리도 둥글게 바꿔보고 싶어서 알아봤다.코코섬님 블로그에서 그림 확대 모션이 부드럽고 좋길래 따라하기로 결정!이 분은 본문 이미지만 알려주셨지만 홈화면의 섬네일에도 적용해보고 싶어서 도전해봤다.일단 갤러리 형식 빼고는 다 성공했는데 앞으로 오류가 있는지 없는지 주시해봐야겠다. 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 본문 이미지아래 코드를 추가한다.#article-view figure.imageblock img,#article-view figure.imagegridbloc..
2024.12.14 -
[Portfolio 스킨] 17. CSS를 사용해 소제목 꾸미기
글을 쓸때마다 소제목을 설정해왔는데 기본 문단 모양은 크기 말고는 딱히 눈에 띄게 달라지는 건 없다.앞에 네모박스를 표시하던데 좀 더 다른 식으로 하고 싶어서 엄청 검색해봤지만 못찾았다ㅠㅠ그래도 이런저런 방법을 알아냈으니 변형해보면서 적용하면 될 것 같다. 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 소제목 h2#article-view h2[data-ke-size] 부분에 아래 코드를 추가한다. #article-view h2[data-ke-size] { /* -- 기존 코드 */ font-size: 1.62em; line-height: 1.46;}#article-view h2[data-ke-size] { /* -- ..
2024.12.13 -
[Portfolio 스킨] 16. 모바일 화면에서 본문 너비 넓히기
컴퓨터로만 봐서 몰랐는데 모바일 화면에서 본문 넓이가 굉장히 좁다ㅜㅜ레터 스킨은 이렇게 좁은 느낌이 없었는데 이 스킨이 좁게 설정이 된 것 같다. 이걸 수정하면 무슨 문제가 생기는건지는 아직 모르겠다ㅠㅠ근데 다른 스킨들 보면 너비가 넓은것도 있고 아닌것도 있으니 괜찮겠지..... 적용 모습 본문 너비가 넓어졌다! 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 @media screen and (max-width: 768px) {의 .article_view {에 패딩값을 입력한다. /* media query - only mobile */@media screen and (max-width: 768px) { .article_view { ..
2024.12.12 -
[Portfolio 스킨] 14. 카테고리 다른 글 꾸미기
포스팅 밑에 보면 카테고리의 다른 글이라는 박스가 보인다.이 기능은 플러그인에서 적용하면 사용할 수 있다.플러그인 - 카테고리 글 더 보기 - 적용하지만 막상 적용해보니 미리보기처럼 깔끔해보이지 않는다.글씨 크기도 제각각이고 글씨가 너무 따닥따닥 붙어있고 밑줄도 보기 싫게 쭉쭉 그어져있다ㅜㅜ이번엔 여기를 집중적으로 수정해서 미리보기처럼 깔끔하게 만들어보려고 한다. 적용 모습글씨 크기만 통일되도 훨씬 깔끔한 느낌이라 마음에 든다. 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 카테고리 다른글 테이블 헤드적당한 위치에 아래 코드를 추가한다..article_view .another_category h4 a { text-decorati..
2024.12.10 -
[Portfolio 스킨] 13. 검색창에서 보여지는 최근글, 아카이브 꾸미기
검색창 태그 목록을 수정하다보니까 그 밑에 보이는 최근글이랑 아카이브도 눈에 띈다.이 부분은 태그 목록과 달리 호버링시 마우스 모양만 바뀌기 때문에 선택했다는 느낌이 잘 안든다.태그 목록처럼 색을 넣어보기로 했다. 적용 모습 포트폴리오 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집적당한 위치에 아래 코드를 삽입한다..list_sidebar .item_sidebar a:hover { color: #FF90BC;} 2. 코드 수정이 끝났다면 적용을 누른다.
2024.12.09 -
[Portfolio 스킨] 09. 스크롤바 꾸미기
인파님 블로그에서 스크롤도 얼마든지 커스텀할 수 있다는 걸 알았다.스크롤바 배경을 투명하게 만드는 법은 터특하지 못했지만ㅜㅜ꽤 많은 사이트에서 스크롤바를 막대바로만 표시하던데 확실히 그게 깔끔해보이긴 하다. 적용 모습 스킨 수정 과정1. 편집화면으로 들어간다.꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집 적당한 위치에 아래 코드를 입력한다./* 스크롤바의 너비 */body::-webkit-scrollbar { width: 12px; }/* 스크롤바 헤더 부분 디자인 변경 */body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #9bbcf2; /* 스크롤바의 색상 */ border: 2px..
2024.12.05