블꾸 도전기(32)
-
[Portfolio 스킨] 15. 복사 버튼까지! 맥 스타일 코드 블록 만들기 (1탄 : HTML/JavaScript 편)
🚀 코드 블럭을 예쁘고 눈에 띄게 바꾸자!블꾸 과정을 올리다 보니까 코드 블록이 굉장히 밋밋하다.기본 코드 블록은 회색에 초록 글시라 가독성이 떨어지고 인용이랑 헷갈리기 쉽다.그래서 좀 더 예쁘고 눈에 띄는 디자인을 적용하기로 했다. 가장 간단하게 코드블록을 바꾸는 방법은 플로그인 설정이다.코드 문법 강조 플러그인만 써도 눈에 띄게 이뻐진다. 하지만 다른 블로그들을 보다보니까 특이한 스타일의 코드 블록을 적용하고 있는 게 보였다.애플 유저가 아니라서 몰랐는데 맥 형식이라더라.아무튼 이쁘니까 적용해보고 싶었는데 둉이님이 블로그에 자세한 설명과 코드를 알려주셔서 따라 해봤다. 🌟 맥 스타일 코드 블록의 장점1. 깔끔한 UI로 가독성이 좋아진다.2. 복사 버튼이 있어서 코드 복사가 쉬워진다.3. 간접적으로..
2024.12.11 -
[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 스킨] 12. 티스토리 검색창 태그 디자인 변경 방법: 호버 시 테두리 제거, 태그 영역 조절
😡 검색창에 나타난 태그, 이게 머임? 여기저기 둘러보다가 헤더의 검색버튼을 검색창이 크게 뜨는 걸 발견했다.근데 여기 태그를 호버링하니까 박스테두리가 삐뚤게 씌여지면서 보인다.이게 뭐야!!!! 충격, 대충격ㅠㅠ마우스를 올릴 때 박스 테두리만 나오지 않아도 깔끔해보일 것 같다. 🔧 포트폴리오 스킨 수정하기✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다. ✔ 포트폴리오 스킨 검색 화면에서 나오는 태그는 큰창일때와 작은창일 때 모양을 각각 다르게 설정할 수 있다.아마도 포트폴리오 스킨이 반응형이라 나뉘는 모양이다.이 영역의 태그 이름은 area_popup .tag_zone로 지정돼 있는 것 같다. 📌 호버 시 박스..
2024.12.08 -
[Portfolio 스킨] 11. 티스토리 본문 태그 꾸미기: 콤마(,) 지우기, # 추가, 밑줄 제거, 호버 효과 설정
😢 본문 태그 깔끔하게 만들기글꼴을 변경하면서 본문 밑에 보이는 태그 위치가 조금 어그러졌다.신경쓰여서 동일하게 바꾸고 싶어서 이것저것 건들여봤다.콤마가 지저분해보여서 콤마를 지우고 테두리를 씌우고 호버했을 때 밑줄을 없앴다.앞에 #을 붙여서 더 태그처럼 보이게 할까도 고민해봤는데 이것 역시 마음에 안든다. 2월 14일 추가 내용분명히 이 글을 작성할 때만 해도 본문 태그에 콤마가 기본으로 있었는데..콤마를 지우는 자바스크립트를 지워도 콤마가 나타나지 않는다. 가능성은 3가지.스킨 자체가 업데이트되어서 수정이 됐거나,내가 html이랑 css를 수정하는 과정에서 콤마를 지우는 무언가를 만졌거나,일시적인 오류로 내 블로그에서만 안보이거나.😂 혹시 제 블로그 본문 태그에 콤마가 보인다면 댓글로 알려주세요...
2024.12.07 -
[Portfolio 스킨] 10. 태그 클라우드 디자인 수정 방법: 테두리 변경, 호버 효과 설정, 태그 색상 지정
😢 못생긴 티스토리 태크 클라우드포트폴리오 스킨은 레터 스킨과는 다르게 태그 클라우드의 태그가 이미 박스로 쌓여있다.그래서 내가 안건들여도 되는 줄 알았는데 왠걸?호버했을 때 색이 왜 뜬금없이 파란색인걸까?핑크 테마인데...그래서 색을 바꾸고 박스 테두리도 조금 둥글게 바꿨다. ✨ 태그 클라우드 스타일 개선하기: 해결해야 할 2가지 문제첫번째, 태그 테두리를 둥글게 수정하기두번째, 태그 호버 시 색상 수정하기 🔧 포트폴리오 스킨 수정하기 ✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.✔ 포트폴리오 스킨의 태그 클라우드는 css의 .tag_zone 부분이다. 📌 태그 테두리 & 호버 효과📝 코드 설명border..
2024.12.06