이 스킨은 글 보기 하면 이렇게, 글 제목만 뜨고 카테고리가 뜨지 않는데 개인적으로 보기 불편해서 변경해보았다.

스킨 편집에서 html 탭을 들어간 후

s_article_rep 을 검색하면

<div id="head">
              <h2><a href=""></a></h2>
              <div class="post-meta">
                <span class="author"></span>
                <span class="meta-date"></span>
                
              </div>
              <div class="date"></div>
            </div>

이런 코드가 뜬다.
포스팅 헤더이다.

여기서 <h2><a href=""></a></h2> 이 글 제목이다.

<div><h3><a href=""></h3></div>를 위에 추가해준다.
그냥 h3 태그를 사용하면 줄바꿈이 되지 않아서 큰 수정 없이 줄바꿈하기 위해 div로 나눴다.

 <s_article_rep>
            <div id="head">
            <div><h3><a href=""></h3></div>
              <h2><a href=""></a></h2>
              <div class="post-meta">
                <span class="author"></span>
                <span class="meta-date"></span>
                
              </div>
              <div class="date"></div>
            </div>

이렇게 된다.

h3이 정의되어있지 않으므로 안예쁘게 나올것이다.

css 탭을 켠다.

#head 를 검색한다.

h2 태그 서식을 참고해 h3 서식을 꾸며주었다.

/* h3서식추가*/

#head h3 {
  display: inline-block;
  margin: 0 0 0px;
  padding: 0 5px 3px;
  font-size: 16px;
  font-weight: 400;
  color: #888;
  line-height: 200%;
  text-shadow: 1px 1px #dedede;
  word-break: break-word;
}

#head h3 a {
  color: #444;
}

#head h3 a:hover {
  color: #d0d0d0;
}

이렇게 하면 아래처럼 글 제목 위에 해당 카테고리가 뜨게 된다.

바꿀만한 설정👇

margin: 상하좌우 바깥 여백

padding: 상하좌우 안쪽 여백

font-size: 폰트사이즈

font-weight: 굵기

color: 글자색

text-shadow: 그림자 위치, 색 설정

[ ##_article_rep_link_## ] 같은 단어(치환자)의 의미는 아래 링크에서 찾아볼 수 있다.

https://tistory.github.io/document-tistory-skin/

끝

서브 카테고리 기호를 바꿔보았다.

스킨 편집 하기 들어간 후 css에서

ctrl+f로 해당 코드를 찾아 content를 변경하면 오른쪽과 같이 적용된다.

티스토리는 기본제공 스킨의 수가 제한적인데, 커스텀을 더 하기는 귀찮고 내 마음에 드는 사진으로 바꾸기만 해도 마음에 들 것 같아서 간단히 커스텀을 해보았다.

기본 테마 Odyssey테마 배너 수정하는 법

1. 스킨 편집 → html 편집 누르기

2. HTML 문서를 보자

대충 웹페이지 구조도라고 생각하면 된다.

3. 코드를 찾기

Ctrl+F를 누르면 페이지 내용을 검색할 수 있다.

area-promotion을 찾는다.

4. 코드 수정하기

가장 중요한 부분이다.

검색을 하면 아래와 같은 코드가 보일 것이다.

            <s_if_var_headerbannerimage>
              <!-- area-banner -->
              <div class="area-promotion height400 <s_if_var_bannermobile>bannermobile-on</s_if_var_bannermobile>" style="background-image:url('');">
                <div class="inner-promotion">
                  <div class="box-promotion">
                    <s_if_var_headerbannertitle>
                      <strong style="color: "></strong>
                    </s_if_var_headerbannertitle>

                    <s_if_var_headerbannerlink>
                      <style>
                        .link-promotion {background:;}
                        .link-promotion:hover {background:;}
                      </style>
                      <a href="//" class="link-promotion">자세히보기</a>
                    </s_if_var_headerbannerlink>


                  </div>
                </div>
              </div>
              <!-- // area-banner -->
            </s_if_var_headerbannerimage>

3번째 줄만 보면 된다.

 <div class="area-promotion height400 <s_if_var_bannermobile>bannermobile-on</s_if_var_bannermobile>" style="background-image:url('');">

이렇게 되어있다.

4-1. 크기 수정하기

area-promotion height400 에서 height 뒤 숫자를 수정하면원하는 크기로 설정 가능하다.

더보기

css도 뜯어본 결과

height200, height300, height400, height500 중에 고르면 된다.

height와 숫자 사이 띄어쓰기 하지 않는다.

4-2. 사진 바꾸기

는 html 바꿀 필요 없다.

그냥 여기 올리면 된다!

html 하는김에 괜히 태그 건드려본 결과는 아래에

더보기

파일 업로드 탭에서 원하는 사진 파일을 업로드한다. 고화질을 추천한다.

 

 

그리고 style태그의

 이 부분을 파일 이름으로 바꿔준다.

따옴표나 괄호가 지워지지 않게 조심한다.

style="background-image:url('./images/이미지.확장자명');">

 

 

모두 적용한 예) <div class="area-promotion height200 <s_if_var_bannermobile>bannermobile-on</s_if_var_bannermobile>" style="background-image:url('./images/benjamin-voros-U-Kty6HxcQc-unsplash.jpg');">

 

완성~

먼저 svg 파일을 다운받아 파일 업로드 탭에 업로드한다.

나는 귀찮아서 그냥 png

출처표기: <a href="https://www.flaticon.com/kr/free-icons/github" title="github 아이콘">Github 아이콘  제작자: Dave Gandy - Flaticon</a>

HTML 탭

box-sns 클래스에 아래 코드를 추가하엿음

<a href="https://github.com/nrkcode" class="link-sns link-github">
	<img src="./images/githubicon.png" width="60%" height="60%"/>
</a>

CSS 탭

.area-aside .box-profile .link-github {
  line-height: 46px;
  align-items: center;
  padding: 2px;
}

적용되었다.

참고한 블로그

https://0828lucy.tistory.com/6

사담

html 적용이 안돼서 보니 와이파이가 끊겨있었음

아오~~

+)

.area-aside .box-profile .img-profile {
  width: 140px;
  height: 140px;
  margin: 49px 0 14px 0;
  border-radius: 140px;
}

border-radius는 네모 모서리를 둥글게 깎는 코드이다.

css탭에서 .area-aside .box-profile .img-profile 를 검색해서 조절하면 프로필 사진 모양을 바꿀 수 있다.

프로필 이미지 배경이 없어서 모서리 둥글기를 조금 조절했다.