티스토리 스킨을 바꿔보았ㄷ다...

webruden.tistory.com/630

티스토리 블로그 반응형 무료 스킨 배포 :: 베이스캠프 (나눔, 추천)

이 분의 무료 스킨으로 바꿨다!!

너무 깔끔하고 이쁜 디자인이다!

 

추가적으로 나에게 편하게 바꾸고 싶어서 이것저것 더 찾아보았다.

관리/글쓰기 추가

e2xist.tistory.com/647

[티스토리][#1 스킨] Admin, Write 링크 달기 (수정 2019-03-11)

이 분의 블로그를 따라서

          <div class="inner">
						
            <address class="copyright">Copyright <time></time>. <b></b> all rights reserved.</address>
						<address class="manage"><a href="[manage창주소]">관리</a> / (╹ڡ╹ ) /<a href="[manage창주소]/entry/post">글쓰기</a></address>
            <address class="designed-by"><a href="https://webruden.tistory.com" target="_blank">Designed by <b data-copyright="bc">베이스캠프</b></a></address>
          </div>

관리자, 글쓰기 아이콘이 없는 것 같아 불편해서 추가했다! 

 

방문 수 제거

전체 방문수, 오늘 방문수, 어제 방문수가 얼마나 되는지 보여주는 칸?이 사이드 메뉴에 있어서 그 부분을 지우고 싶었다!

                 <!-- <div class="counter">
                    <p class="total"><span>전체 방문자</span><span></span></p>
                    <p class="today"><span>오늘</span><span></span></p>
                    <p class="yesterday"><span>어제</span><span></span></p>
                  </div> -->

그래서 메뉴 수정창에서 HTML로 들어가 위 부분을 주석처리했다! (언제 마음이 바뀔지 몰라서 지우지는 않았다! ฅʕ•̫͡•ʔฅ

 

어쩌다보니 아주 오랜만에 HTML을 만져보게 되었다

공부..해야지.. :-3

 

검색 기능 추가

글을 검색하는 기능이 없는 것 같아서 구글링을 해보았더니 친절하게 HTML 코드를 짜주신 분이 있었다..

chp747.tistory.com/88

티스토리 사이드 바에 검색 창 추가하기

 

이미지 margin (간격/마진) 변경

* {
  padding: 0;
  margin: 1.5;
  font-family: Noto Sans KR,sans-serif;
  box-sizing: border-box
}

margin값이 0으로 바뀌어있길래 1.5로 설정해줬다.

요정도 간격이 생겼다!

하지만 이렇게 하면 상단 메뉴바도 최상단층과 간격이 생겨버리길래 그냥 상단메뉴바를 없애기로 했다!

 

상단 메뉴바 없애기

     <!--     <nav class="container bc-lnb">
            <div class="inner">
              <div class="bc-menu clx">
</div>
            </div>
          </nav>    -->

위 코드 영역을 없애기에는 언젠가 쓸 일이 있을 수 있으니까... 위 HTML 코드 영역이 상단 메뉴바 영역이다.

 

TIP!

만약 페이지의 특정 영역을 가리키는 HTML 코드가 어디인지 모를 경우에는 F12로 여기저기 눌러보면 HTML 코드를 찾아낼 수 있다

--> 다시 추가했다!

 

폰트 추가하기

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.......
* {
  padding: 0.0;
  margin: 1.5;
  font-family: 'Ubuntu', Noto Sans KR,sans-serif;
  box-sizing: border-box
}

상단 메뉴를 추가했더니 폰트가 마음에 들지 않아서.. Ubuntu 폰트를 추가했다!

https://fonts.google.com/

Google Fonts

이 사이트에서 원하는 폰트를 Select Family에 추가하면 @import 또는 link 코드를 자동으로 만들어준다. 그 코드를 css 코드 제일 윗줄에 추가해주고, font-family를 찾아서 'Ubuntu'를 추가해줬다!.

 

줄간격 변경

.bc-markdown {
  position: relative;
  line-height: 2.0;
  font-size: var(--markdown-default-font-size);
  padding: 50px 16px;
  border: 1px solid var(--markdown-border-color);
  border-radius: 12px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.03);
  background-color: var(--markdown-bg-color)
}

일반적으로 구글링했을 때 나오는 변수들과 이름으로는 찾기 어려워서 F12로 해당되는 HTML영역과 연결되는 스타일(CSS) 코드 부분을 찾아서 변경했다.