• 카테고리
    • 전체 글

    • 카테고리1
    • 카테고리2
    • 카테고리3
    • 카테고리4
  • 태그
  • 방명록
반응형

'전체 글'에 해당되는 글 15건

  • 2025.01.29 Flatinum 2.0 공개 2
  • 2025.01.29 Flatinum 1 다운로드
  • 2025.01.23 Flatinum Ver.2 준비 중 1
  • 2015.07.21 Flatinum 티스토리 반응형 테마 공개 261
  • 2015.07.21 Flatinum 스킨은... 1
반응형

Flatinum 2.0 공개

카테고리1 2025. 1. 29. 20:42
반응형

 

안녕하세요. 10년 만에 2.0으로 판올림한 'Flatinum(플래티넘)' 스킨을 공개합니다.

 

갑작스레 마음을 먹고 업데이트를 진행했는데요. 오랜시간 업데이트가 안되다보니 부트스트랩과 Google Adsense 등의 지원이 비흡했습니다. 또한 상단의 Carousel이 테터툴즈의 기능을 그대로 가져오는 것이 아니기 때문에 아무래도 코드를 모르는 분들의 경우 수정이 원활하지 못했습니다. 이 부분들을 최대한 보완했습니다.

 

Flatinum_21.zip
0.14MB

 

 

해당 파일은 공개 버전이긴하나 반응형이나 버그 수정 등이 제대로 안되었을 수 있습니다. 수시로 업데이트하여 보완하도록 하겠습니다.

반드시 기존 스킨 파일을 백업 후 본 스킨을 사용해주시기 바랍니다.

스킨 구성

부트스트랩 5.3 적용

그동안 기반으로 했던 부트스트랩의 버전이 3.x에서 5.x까지 업그레이그이드 되었습니다.

 

부트스트랩의 버전이 올라가면 즉각적은 아니더라도 수시로 대응하여 적용하도록 하겠습니다.

 

구글 웹폰트 적용

2015년 당시, 국영문 폰트를 KoPub와 Raleway 두 가지 버전으로 적용하였으나, 이번 버전에는 Noto Sans KR을 적용했습니다.

 

폰트는 자유롭게 교체하여 사용하시면 됩니다. 하단에 교체 방법을 확인하세요.

 

사용 시 유의사항

사이드바

기본 모듈

기본 모듈 중 사이드바 1과 2에 적용되는 모듈의 코드 구성이 다릅니다.

 

사이드바 1 전용 또는 2 전용 등이 적혀있는 기본 모듈은 반드시 해당 위치에 사용해주세요.

 

사용자 모듈

사용자 모듈은 반드시 사이드바 2에 적용해주세요. 사이드바 1에 적용할 경우 레이아웃이 깨질 수 있습니다.

 

커스터마이징

라이트모드/다크모드 설정

제 개인적으로 다크모드를 선호하나, 라이트모드를 선호하는 분들도 계시리라 생각했습니다. skin.html의 두 번째 줄의 dark를 light로 변경할 경우 라이트모드로도 사용이 가능합니다.

<html lang="ko" data-bs-theme="dark">

 

카테고리 변경 방법

skin.html 파일 내에서 Ctrl+F를 눌러 메뉴수정을 찾거나, 47번 째 줄로 가셔서 아래 부분을 변경하시면 됩니다.

href의 카테고리 주소 및 </a> 앞쪽의 텍스트를 본인의 블로그에 맞춰 수정하시면 됩니다.

<li><a href="/category/카테고리1" class="dropdown-item">카테고리1</a></li>
<li><a href="/category/카테고리2" class="dropdown-item">카테고리2</a></li>
<li><a href="/category/카테고리3" class="dropdown-item">카테고리3</a></li>
<li><a href="/category/카테고리4" class="dropdown-item">카테고리4</a></li>

 

상단 로고 변경 방법

압축 파일 내 images 폴더에 있는 logo_shrink.png를 수정하시면 됩니다. 로고는 가로 340 픽셀, 세로 100 픽셀(투명 배경 가능)로 제작해주세요.

 

업로드는 관리자 > 스킨편집 > html 편집 > 파일 업로드 클릭 후 제작한 이미지를 올려주시되, 코드를 수정하지 않으셨다면 파일 이름은 logo_shrink.png를 유지해주시기 바랍니다.

 

폰트 변경 방법

skin.html 파일의 11번째 줄과 style.css에서 'font-family'를 수정하시면 됩니다. 수정이 필요한 영역은 아래와 같습니다.

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
html,body,h1,h2,h3,h4,h5,h6,p,input,button,textarea,.btn {
  font-family: "Noto Sans KR" !important, serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

 

구글 폰트로 이동하여 원하시는 폰트를 선택 후 'Get Embed Code' > Web에서 <link> 클릭 후 원하시는 코드 선택 > skin.html의 </head> 부분에 붙여넣기 (가장 마지막 줄만 붙여 넣어도 됩니다)

 

 

문의사항

본 게시물에 댓글을 남겨주시거나 이메일로 문의 부탁드립니다.

jihoon.song@hotmail.com

 

자주 묻는 질문

2.1

- 폰트 오류 수정

- 상단에서 다운로드

 

2.0

- 버전 공개

Flatinum_20.zip
0.14MB



반응형

'카테고리1' 카테고리의 다른 글

Flatinum 1 다운로드  (0) 2025.01.29
Flatinum Ver.2 준비 중  (1) 2025.01.23
Flatinum 티스토리 반응형 테마 공개  (261) 2015.07.21
Flatinum 스킨은...  (1) 2015.07.21
블로그 이미지

소셜데브

소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.

Flatinum 1 다운로드

카테고리1 2025. 1. 29. 19:27
반응형

안녕하세요.

Flatinum 스킨이 2.0으로 업데이트 되면서 기존 파일은 본 포스팅에 업데이트 예정입니다.

 

기존 포스팅도 참고차 확인 바랍니다.

 

flatinum_20250123.zip
4.93MB

 

반응형

'카테고리1' 카테고리의 다른 글

Flatinum 2.0 공개  (2) 2025.01.29
Flatinum Ver.2 준비 중  (1) 2025.01.23
Flatinum 티스토리 반응형 테마 공개  (261) 2015.07.21
Flatinum 스킨은...  (1) 2015.07.21
블로그 이미지

소셜데브

소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.

Flatinum Ver.2 준비 중

카테고리1 2025. 1. 23. 07:57
반응형

안녕하세요.
 
티스토리 스킨 Flatinum의 Ver.2를 준비중에 있습니다.
 
최신 부트스트랩과, 상단의 carousel은 제거하고 다크모드를 대응하고자 합니다.
 
링크에서 기존 버전 다운로드 가능합니다.

Flatinum 티스토리 반응형 테마 공개

안녕하세요, 티스토리 반응형 스킨 Flatinum을 제작한 송지훈입니다. 본 스킨은 트위터 부트스트랩을 기반으로 제작됐으며, 부트스트랩 자체 스타일시트나 자바스크립트를 전혀 수정하지 않았기

flatinum.tistory.com

 
2월 중 출시하도록 하겠습니다.

반응형

'카테고리1' 카테고리의 다른 글

Flatinum 2.0 공개  (2) 2025.01.29
Flatinum 1 다운로드  (0) 2025.01.29
Flatinum 티스토리 반응형 테마 공개  (261) 2015.07.21
Flatinum 스킨은...  (1) 2015.07.21
블로그 이미지

소셜데브

소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.

Flatinum 티스토리 반응형 테마 공개

카테고리1 2015. 7. 21. 11:02
반응형

안녕하세요, 티스토리 반응형 스킨 Flatinum을 제작한 송지훈입니다. 본 스킨은 트위터 부트스트랩을 기반으로 제작됐으며, 부트스트랩 자체 스타일시트나 자바스크립트를 전혀 수정하지 않았기 때문에 부트스트랩 버전 업 시 큰 무리 없이 사용이 가능합니다.

 

* 다음 업데이트 시 최신 부트스트랩 적용 예정입니다.

 

1. 제작에 활용된 소스

 

본 스킨을 제작하기 위해 활용된 소스는 아래와 같습니다.

 

  • 프레임워크: 트위터 부트스트랩(Bootstrap)
  • 폰트: Noto Sans체, Raleway체

 

Raleway체는 구글 웹폰트 소스를 활용했습니다. 해당 자료는 아래 링크에서 확인 가능합니다.

https://www.google.com/fonts/specimen/Raleway

 

2. 적용 방법

1. 아래 압축 파일을 다운로드 받으세요. (파일명에 Fullwidth라고 표기된 스킨은 사이드바가 없는 스킨입니다)

 

2025.01.23 버전 다운로드: 

flatinum_20250123.zip
4.93MB

 

2025.01.23 이모지 크기 수정

 

flatinum_20150730.zip
다운로드

 

 

flatinum_20150820_fullwidth.zip
다운로드

 

 

 

 

 

 

 

 

 

2. 압축을 해제하고 skin.html 및 style.css를 제외한 모든 파일을 업로드해주세요.

 

 

3. Skin.html 파일은 티스토리 HTML/CSS 부분의 skin.html 부분에, Style.css 파일은 style.css 부분에 그대로 복사해서 붙여 넣어 주세요.

 

 

3. 메뉴 수정

 

카테고리의 경우 부트스트랩 특성상 현재 운영하시는 티스토리 블로그의 카테고리가 자동으로 노출되지 않습니다. 따라서 아래 소스 코드를 수정해야 합니다.

'href'의 카테고리 주소 및 카테고리 명을 현재 사용하시는 카테고리로 변경해주세요.

 

 

상단 우측 내비게이션 메뉴의 경우 고정적으로 노출하는 링크와 티스토리 기본 메뉴로 되어 있습니다. 이 역시 원하시는 메뉴로 변경하시기 바랍니다.

 

4. 슬라이더 이미지 수정

 

슬라이더 이미지를 수정하기 위해서는 아래 'img src' 부분을 수정하시면 됩니다. 해당 파일을 티스토리 HTML/CSS 편집을 통해 업로드 하시고 파일명만 변경해주세요.

 

5. 로고 수정

위 압축 파일 내 'logo_shrink.png' 파일을 교체하신 후 업로드하시면 됩니다. 참고로 기본 로고 사이즈는 340 x 100 픽셀이며, PNG 투명 이미지로 되어 있습니다.

 

수정이력

2015.07.21 Flatinum 1.0 배포

2015.07.28 Font Awesome 노출 문제 수정, 로고 경로를 상대 경로로 수정(슬라이더 이미지 및 로고 이미지 포함)

2015.07.30 슬라이더 반응형 적용

2016.08.08 마이너 수정 반영 - 카피라이트 수정, 폰트 수정(Noto Sans KR로 교체), 오탈자 수정 등

 

 

개인 별 스킨 커스터마이징은 해드리지 않습니다!!

 

반응형
저작자표시 비영리 변경금지

'카테고리1' 카테고리의 다른 글

Flatinum 2.0 공개  (2) 2025.01.29
Flatinum 1 다운로드  (0) 2025.01.29
Flatinum Ver.2 준비 중  (1) 2025.01.23
Flatinum 스킨은...  (1) 2015.07.21
블로그 이미지

소셜데브

소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.

Flatinum 스킨은...

카테고리1 2015. 7. 21. 09:20
반응형

Flatinum 스킨은 Bootstrap을 기반으로 제작 됐습니다.


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


Donec sodales sagittis magna. Vivamus consectetuer hendrerit lacus. Curabitur nisi. Integer tincidunt. Nullam accumsan lorem in dui.


기본 설정




스킨에 관한 문의는 현재 글에 추가적인 댓글을 남겨주시거나, Socialdev 블로그를 방문해주시기 바랍니다.

반응형
저작자표시 비영리 변경금지

'카테고리1' 카테고리의 다른 글

Flatinum 2.0 공개  (2) 2025.01.29
Flatinum 1 다운로드  (0) 2025.01.29
Flatinum Ver.2 준비 중  (1) 2025.01.23
Flatinum 티스토리 반응형 테마 공개  (261) 2015.07.21
블로그 이미지

소셜데브

소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.

  • «
  • 1
  • 2
  • 3
  • »
반응형

Flatinum Ver. 2 관련 공⋯

«   2025/05   »
일 월 화 수 목 금 토
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 26 27 28 29 30 31

Socialdev Daum Bootstrap

반응형 tistory 태그8 테마 티스토리스킨 태그1 Responsive responsive theme 태그6 태그2 태그4 태그7 Flatinum 부트스트랩 태그3 태그5 Theme Skin 티스토리 bootstrap 스킨

  • Total :
  • Today :
  • Yesterday :

Copyright © 2015-2025 Socialdev. All Rights Reserved.

Copyright © 2015-2025 Socialdev. All Rights Reserved.

티스토리툴바