기타/Blog

[블로그 키우기] Odyssey 스킨 타이틀 헤더에 로고 넣기 (feat. 캔바)

some1014 2023. 4. 21. 17:27
728x90

오디세이(Odyssey) 스킨의 타이틀 헤더에 로고 넣는 방법  

 

처음엔 코딩을 전혀 몰라서 html나 CSS로 스킨 편집하는거 너무 어려웠는데, 하다 보니 점점 빠지는 중이다. 오랜만에 배우는 재미를 느끼고 있달까. 그러다가 지칠 때면 스킨을 어떻게 꾸밀까 찾아보곤 하는데, 이 때 찾은게 바로 "타이틀 헤더(Title header)"이다. 

 

타이틀 헤더 (Title Header)

타이틀 헤더는 블로그 왼쪽 상단에 "블로그 이름"이 있는 부분이다. (아래 왼쪽 사진에서 "찐프피의 소소한 기록")

기본 세팅의 경우 블로그 이름이 그냥 글자로만 나오는데, 다른 블로그들을 둘러보니 이미지가 있었다. 

예쁘고 말고를 떠나서 블로그의 이미지를 인식시키기 위해서는, 로고를 만들 필요가 있다는 생각이 들었다.

 

타이틀-헤더

 

디자인 툴 (캔바/미리캔버스)

예전에야 번거로워서 시도조차 하지 않았지만, 지금은 간편하게 이미지나 영상을 디자인할 수 있는 서비스가 많다.

바로 캔바(canva)와 미리캔버스(miricanvas)이다. 

 

유료 서비스도 있지만, 무료 버전으로도 어지간한건 다 할 수 있어서 애용하는 중이다.

  • 무료 (일부 기능 유료)
  • 사용방법이 간단함 (ppt 만드는 것과 유사)
  • 다양한 맞춤형 템플릿 (동영상, ppt, 보고서, 로고 외에 유튜브/인스타그램/페이스북용 썸네일도 보유)
  • 다양한 디자인과 요소 

 

나만의 로고 만들기 (w. 캔바)

  • 회원가입 및 로그인
  • 오른쪽 상단 "디자인 만들기"
  • 만들고자 하는 스타일 or 파일 크기 선택
  • 왼쪽 메뉴에서 디자인/요소/텍스트/업로드 등을 선택해서 디자인 
  • 오른쪽 상단 "공유" 들어가서 다운로드 (png, jpg 등)

 

캔바-홈화면
캔바-디자인만들기
[출처: canva]

 

여러가지 시도했지만 미적 감각이 없어서 다 망하고, 결국 깔끔한 글씨체를 선택하고 포인트가 될 만한 이미지를 넣었다.

그 결과, 타이틀 헤더 이미지 생성 완료!!!

 

 

타이틀-헤더
[최종 타이틀 헤더 디자인]

 

타이틀 헤더에 이미지 업로드

  • 스킨 편집에 가서 "타이틀 헤더"에 이미지 업로드
  • 이미지의 height가 18px라서 글씨가 잘 보이지 않음
  • 타이틀 헤더 사이즈 변경 필요

스킨-편집

 

타이틀 헤더 사이즈 변경 

  • 스킨 편집의 "CSS"에 들어가서 ".header .link_logo image"(735행)를 검색
  • max-height을 50px로 변경했더니, 좌우로 잘리는 현상 발생
  • ".header .link_logo"(722행)에서 max-width를 500px로 수정 

    >>> 최종 타이틀 헤더 변경 결과, 잘리는 부분 없이 적용 완료!!

 

타이틀헤더-사이즈-변경-html타이틀헤더-적용화면

 

 

[관련 글]

2023.04.21 - [others] - [블로그 키우기] 사이트를 등록해도 유입되지 않을 때, 유입량 늘리기 (메타태그 수정, 내부링크, 블서치 등)

2023.04.15 - [IT] - 챗GPT 활용법, SEO 최적화 글쓰기

2023.04.18 - [Issue] - 'TruthGPT'란 무엇인가: 검열되지 않은 정보 제공.. 암호화폐 거래 가능

2023.04.18 - [Issue] - 머스크의 폭탄발언, 트위터 DM의 보안 문제 이대로 괜찮은가?

반응형