얼마전 글에서도 보셨겠고 지금도 보고계시겠지만
블로그 배경을 까맣게 바꿨습니다. 글씨체도 제 마음대로 슉슉 바꿨고요.
열심히 하얀색의 잔재를 청산하던 중, 스킨 CSS에서 도저히 찾을 수 없는 색이 있었으니...
이거였어요 ㅋㅋㅋㅋㅋㅋㅋㅋ 링크 미리보기? 라고 해야하나.
링크 걸면 자동으로 나오는 표와 썸네일과 .. 여튼 그런 이미지입니다.
아니 서체야 그렇다치고 블로그 배경이 어두운 회색인데 이건 너무하지 않나 ... 싶을정도로 멀쩡하더라고요
차라리 이거 자체가 하얀색이었던거면 나을텐데 .. 그것도 아니고 그냥 투명색이었음
지금까진 스킨 배경색이 흰색이라 하얗게 보였던거야
하...
그래서 이걸 바꿀 수 있는 방법을 찾아냈어요 ....... 알못에겐 힘겨웠다.
아래 글에선 우선 이 이미지를 어두운 회색, 검은색에 가깝게 바꿀 수 있는 법을 소개합니다.
물론 세부적으로 수정하는 방법도 있으니 끝까지 읽어주세요 흑흑
크기는 좀 아래쪽에 있습니다 글을 따로 뺄까 싶기도 했지만.. 귀찮기도 하고
크기 .... 내용이 많아져서 다른 글에 쓰기로 했습니다.. 다음에 쓰면 제대로 링크 걸어두겠습니다 흑흑
1. CSS 편집으로 진입
CSS 편집으로 이동합니다.
티스토리에선 블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집 → CSS로 이동하면 됩니다.
2. 스크립트
적당히 확보한 공간 혹은, CSS 제일 마지막에 해당 스크립트를 붙여넣기 합니다.
저는 북클럽 스킨을 사용하는데, 이 스킨엔 ETC 나눠진 구역이 있어서 여기에 넣었습니다.
하지만 위치는 상관 없어요! (맨 위만 아니라면야 뭐 ...)
opengraph를 Ctrl + F로 검색했을 때, 아래와 비슷한 스크립트가 등장한다면 거길 직접 고쳐주셔도 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 링크 썸네일 오픈그래프 디자인 */
#tt-body-page figure[data-ke-type='opengraph'] a {
background-color: #333;
border: 1px solid #222;
}
/* 미리보기 이미지 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-image {
border-right: 1px solid #222;
}
/* 제목 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
font-family: 'S-CoreDream-4Regular';
color: #fff;
}
/* 내용 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
font-family: 'NanumSquare';
line-height: 1.5em;
font-size: 0.975em;
}
/* 주소 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
font-family: 'NanumSquare';
color: #ccc;
}
cs
통으로 붙여넣기 해주시면 우선 색깔은 제가 쓰고 있는 느낌이 됩니다.
요런 색이 됩니다. 어두운 회색의 배경에 맞춰서 깔끔한 색깔로 바뀌었습니다 (드디어!)
확실히 수정하기 전보다 배경색에 더 잘 어울리고 예쁜 느낌이죠?
하지만 사용하시는 서체나 배경색에 따라 다르게 조절하고 싶으신 분도 계실겁니다.
대충 아시는 분들은 어디에 뭘 넣고 어디에 서체 이름, 어디에 색상 코드를 넣으면 되는구나!
하실테지만 모르는 분들이 있을테니까요 (얼마전의 나처럼!) 그래서 준비한 해설 버전 (?)
3. 스크립트 세부 설정 - 색상 및 서체
색깔을 한번에 뿅 하고 바꿀 수 있는 게 아니라, 여러 단계를 거쳐 설명드립니다..
필요한 부분만 빼서 읽어주세요 (찡긋!)
3-1. 배경 (a)
1
2
3
4
5
/* 링크 썸네일 오픈그래프 디자인 */
#tt-body-page figure[data-ke-type='opengraph'] a {
background-color: #배경색;
border: 테두리두께px solid #테두리색;
}
cs
제가 쓴 코드에서 가장 윗부분의 이 부분은, 링크 썸네일의 전체 배경 색과 테두리 색을 정합니다.
각각 원하시는 HEX 코드 또는 RGB값을 넣어주시면 됩니다.
위 이미지는 배경색을 바꿨을때의 변화를 보여드리기 위한 이미지입니다.
왼쪽은 검은색에 가까운 색, 오른쪽은 흰색입니다. (이미지 부분은 제외!)
이렇게 배경색을 바꿀 수 있어요. 기본값은 아마도 .. 투명인것같아요 ... (눈물흘림.
이건 테두리색. 배경에 자연스럽게 녹아들게 할 지 아니면 눈에 띄게 할 지 정할 수 있겠죠?
3-2. 이미지 부분 (div.og-image)
1
2
3
4
/* 미리보기 이미지 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-image {
border-right: 두께px solid #테두리색;
}
cs
여기에서 border-right 값을 조절해주는 것으로 썸네일의 이 부분을 바꿀 수 있습니다.
바로 여기.. 이 가는 선..!! 이 부분을 조절합니다.
이게 기본값이 흰색인데 이미지가 흰색쪽이면 몰라도 이미지마저 어두운 색이면 은근히 신경쓰이더라고요.
그래서 바꿨습니다 (?)
모든 border 에서는 두께도 조절이 가능하니 두껍게 선을 빡!! 주고싶으시면 그렇게 하셔도 됩니다.
3-3. 텍스트 (div.og-text - p.og-title, p.og-desc, p.og-host)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 제목 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
font-family: '폰트 이름', 폰트 스타일;
color: #글자색;
}
/* 내용 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
font-family: '폰트 이름', 폰트 스타일;
line-height: 줄간격;
font-size: 글자 크기;
}
/* 주소 텍스트 */
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
font-family: '폰트 이름', 폰트 스타일;
color: #글자색;
}
cs
텍스트이니만큼 서체를 정하고 그 색을 바꿀 수 있습니다.
여기에 쓰는 서체 이름과 그 스타일은 CSS 내에서 선언된 임베딩 서체여야 합니다.
즉 필수적으로 바꿔주셔야 하는 부분이란 거죠. (저와 사용 서체가 같다면 안 바꾸셔도 되겠지만요)
대충 영어로 짐작할 수 있겠지만,
title은 제목 부분, desc은 미리보기 내용 부분, host는 해당 링크의 대략적 주소 부분을 나타냅니다.
각 부분을 취향껏 재단해주시면 됩니다.
title 부분.
여기서도 물론 font-size나 line-height를 사용해서 글자 크기, 줄간격 등을 조절할 수 있습니다.
다만 ... 그렇게 할 필요가 크게 없는거죠 뭐 한 줄이기도 하고...
desc 부분.
기본적으로 두 줄이 출력되도록 설정되어있습니다만,
줄 수를 늘리고 싶으신 분은 부가적인 코드를 쳐주시면 됩니다. (여기선 소개하지 않습니다.. 내용이 많아..!)
어떤 의미로는 이 텍스트 부분에서 줄간격이 가장 중요한 부분이죠
두 줄이니까요!
host 부분.
세부 주소가 모두 표시되는 게 아니라, 해당 주소의 최상위 링크(맞나)를 보여줍니다.
어지간히 긴 링크가 아니면 두 줄 이상 나오진 않을테니, 한 줄로 취급해주시면 편안-
다음에는 이거 크기 수정하는 법도 올라옵니다.....
한번에 다 하려고 했는데 생각보다 내용이 많아지네요 머쓱-
댓글