티스토리에서 변경한 항목들

티스토리 하면서 적용한 것들 기입해주자. 스킨을 바꾸면 사라진다.

스킨편집 > html편집 > CSS (or HTML) 선택 > 변경 후 적용

 

★ 목 차

1. 티스토리 이미지에 외곽선 추가하기

2. 티스토리 매거진 스킨 최 상단 타이틀 폰트 수정

3. 티스토리 매거진 스킨 본문 1 글자크기수정

4. 티스토리 박스 만들기

 

---

1. 티스토리 이미지에 외곽선 추가하기

• imageblok으로 찾아서 있다면 border 추가하기
• imageblock이 없다면 아래 내용대로 추가해주기 (입맞에 맞게 수정하기)

★http://www.copysense.co.uk/border.php 에서 css border를 테스트 적용해볼 수 있네요. 적용후 소스 복!붙!

/*custom*/
/* 이미지 외곽선 설정 */
.imageblock img{
	border:0.1em solid #999999;
	padding:5px; 
    background-color:#f5cb42; 
}

< 사용 예 >

B &amp;amp;amp;amp;amp; A&amp;amp;amp;amp;nbsp;

 

---

 

2. 티스토리 매거진 스킨 최 상단 타이틀 폰트 수정

• h1 으로 검색해서 원하는 값으로 수정
• 옆에 주석처리 되어 있는 값이 Original 값

.header h1 a, .ly_area .ly_logo a {
  font-size: 22px; /*26*/
  color: #3d4d94;/*#f25555;*/
  line-height: 26px; /*32*/
  font-weight: 800;/*600*/
}

 

< 사용 예 >

 

 

---

 

3.티스토리 매거진 스킨 본문 1 글자크기 수정

제이빈님의 블로그 참고

• CSS 코드 10번째 정도 라인에서 아래의 내용으로 검색 (Spoqa)
• font-size:12px를 주석처리 (시작과 끝에 /* */ 추가해주기)

body, button, input, select, table, textarea {
/*  font-size: 12px;*/
	font-family: 'Spoqa Han Sans', Dotum, '돋움', Helvetica, "Apple SD Gothic Neo", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: none
}

<사용예>

 

---

4. 티스토리 박스 만들기

• 스킨편집 > html편집 > CSS (or HTML) 선택 한후 아래 코드 입력
• 다시 기본모드로 돌아와서 만들어진 박스 위에 원하는 내용 작성
• 아래 코드를 베이스로 원하는 boarder style 변경  (다른 스타일과 설정은 여기를 참조)

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: 4px double; border-width: 3px; border-color: #79a5e4;">
<p><span style="font-size: 11pt;"><span style="color: #000000;"> 이중 테두리 박스 </span></span></p></div>