Fastboot 스킨: 3개의 글



정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]

Posted by HAPPYJINI
2018.06.06 02:41 Blog 101/Tistory

안녕하세요. HAPPY JINI 입니다.


FastBoot(패스트붓) 스킨의 최대 장점은 블로그의 최적화입니다. 어떤 환경에서도 최적화 된 블로그를 보여 줍니다.

하지만  메인 화면에 더 많은 글과 정보를 노출시키기 위해서는 제약이 있습니다. 그래서 Fastboot 스킨에 티에디션을 합쳐서 사용할 경우

보다 단순 블로그 형태가 아닌, 사이트 못지 않게 많은 글과 일목요연하게 정보를 전달 할 수 있는 블로그가 완성됩니다.

티에디션 사용으로 자신만의 블로그를 만들어 보세요.



정보 전달과 디자인! 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기!


FastBoot 사용자의 티에디션 사용법에 대해서 알아보겠습니다.






1.블로그관리[manage] => 꾸미기 => 스킨편집을 클릭합니다.






정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]2






2. 스킨편집에서 티에디션을 클릭합니다. 그 아래 홈 화면에 편집 버튼 표시도 클릭해주면 메인 화면에 티에디션 버튼이 생겨서

편집시에 매번 스킨편집 안의 설정 페이지로 오지 않아도 되어서 편리합니다.

아래의 이미지 처럼 홈 화면 우측 상단에 티에디션 버튼이 항상 노출되어 있습니다. 










정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]3


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]4


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]5






3. 블로그관리[manage] => 꾸미기 => 스킨편집 => html 편집을 클릭합니다.


4. HTML에서 Ctrl + F를 눌러 검색창에 enableTedition 을 검색합니다. 그러면 아래쪽에 var f_enableTedition 값이 flase로 나와 있습니다.

위의 이미지처럼  flase => true 로 변경해 준 후 저장합니다.


5. 홈 화면으로 가면 우측 상단에 티에디션 설정탭이 노출되어 있습니다. 티에디션을 클릭합니다. (아래 이미지 참고하세요.)






정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]7


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]8






6. 티에디션에 들어오면  빨간 네모가 있는 부분의 플러스는 위로 새로운 탭을 만들어 줍니다.  노랑 네모의  +,- 를 클릭하면 같은 탭의 포스팅 수를 늘리거나 줄일 수 있습니다.

파란 네모 부분의 플러스를 클릭할 경우 아래로 새로운 탭이 만들어집니다.

핑크 네모 부분은 포스팅이 보이는 방식,글 선택, 글자수 등을 설정할 수 있습니다. 그 부분은 천천히 다시 알려드리겠습니다.



7. 포스팅을 어떤 디자인으로 나열할 것인지 아이템에서 설정해주시면 됩니다. 헤드라인형, 목록형, 갤러리형, 조합형 등이 있고, 그 안에 여러 종류의 설정들이 있습니다. 개인의 취향대로 변경해주시면 됩니다. (저의 경우 목록형으로 포스팅 내용과 썸네일이 노출되는 디자인으로 설정했습니다.)









정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]9


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]10


정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]11






8. 글 선택 탭으로 들어갑니다. 원하는 카테고리를 체크해준 후 설정해주면 됩니다. 

전체보기에 체크를 해준 경우, 최신글이 계속해서 노출됩니다.


9. 디자인 탭에서는 타이틀, 글제목, 글요약을 설정합니다. 

글씨체, 글씨 크기, 색깔, 노출될 글자 수,색깔 등을 설정할 수 있습니다.






정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 메인 홈 만들기★[FastBoot 사용자/ 티에디션 사용법]12






10. 모든 설정을 마친 후에는 꼭! 우측 상단에 저장하기 버튼을 눌러준 후 나옵니다.


저장을 한 후 홈 화면을 보시면 티에디션으로 만들어진 일목요연한 블로그를 보실 수 있으실 겁니다.


확인해 가면서 취향에 맞게 정보 전달과 디자인 두 마리의 토끼를 잡을 수 있는 사이트 못지않는 블로그를 만들어 보아요!







눌러주시는 공감 () 은 큰 힘이 됩니다.

로그인하지 않으셔도 공감은 가능합니다.

감사합니다. ^_______^




이 포스트 공유하기

페이스북
트위터
구글+
네이버
밴드
카스

티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]

Posted by HAPPYJINI
2018.06.05 07:30 Blog 101/Tistory

안녕하세요. HAPPY JINI 입니다.

패스트붓(FastBoot)스킨으로 설정 후에는 메뉴바가 기본적으로 회색으로 설정이 되어 있습니다.

저는 그 상태 그대로 그레이로 사용하고 있습니다. 하지만 다양한 컬러를 사용하고자 하시는 분들이 계시겠죠.



FastBoot 스킨 사용자의 경우 티스토리 상단 메뉴바와 하단의 색상을 바꿔보겠습니다.


어렵지 않습니다.



상단 메뉴바 색상 바꾸는 방법[Fastboot 스킨 사용자의 경우]



티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]





저는 원래 패스트부트 스킨의 메뉴바 색상인 회색으로 사용하고 있습니다.



티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]1


티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]2




1.상단 메뉴바의 색상을 변경하기 위해서는 블로그 관리(manage) => 꾸미기 => 스킨편집 => html편집을 클릭합니다.


→상단에 CSS 로 들어가 Ctrl + F를 눌러 검색 창에 secondNav 을 입력합니다. 그러면 아래와 같이 #secondNav 라 씌여져 있는 소스들이 주르륵 나옵니다. 그 중 #434A54 라고 씌여져 있는 곳이 2 곳 있습니다.

#434A54 두 곳을 원하는 색상 코드를 입력하여 수정하고 저장 버튼 클릭하고 됩니다.(#434A54 가 기본 컬러 회색의 색상 코드입니다.)



티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]3


티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]4

[위의 이미지를 클릭하시면 네이버 색상 팔레트로 이동합니다.]


위의 네이버 생상 팔레트에서 원하시는 색상 코드를 참고하세요.


티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]5



2. 두 곳의 #434A54를 #000000으로 변경하였습니다. (#000000은 블랙 컬러입니다. 


변경 후에는 저장 버튼을 꼭 눌러주세요.




티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]7



메인 화면에서 새로고침하여 확인합니다. 상단 메뉴바의 색상이 블랙으로 바뀐 것을 확인 할 수 있습니다.



상단의 메뉴바의 색상을 바꿨다면 하단 또한 바꿔서 발란스를 맞춰줘야겠지요! ^^


티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]8




하단 색상 바꾸는 방법[Fastboot 스킨 사용자의 경우]


3.블로그 하단 색상을 변경하기 위해서는 블로그 관리(manage) => 꾸미기 => 스킨편집 => html편집을 클릭합니다.

아까와 같이 CSS 로 들어가 Ctrl + F를 눌러 검색창에 footer 를 입력합니다. 아까처럼 #434a54 가 보일겁니다. 






티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]9


티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]10




그 부분을 상단 메뉴바에서 바꿨듯이 동일하게 #000000 으로 수정하신 후 저장하면 됩니다.


메인 화면에서 새로고침하여 확인합니다.하단색상 또한 블랙으로 바뀐 것을 확인 할 수 있습니다.



티스토리 상단,하단 메뉴바 색상 바꾸기! [Fastboot 스킨 사용자]11




이로써 상단 메뉴와 하단까지 발란스 맞게 블랙으로 변경된 것을 확인하실 수 있습니다.

어렵지 않게 쉽게 바꾸었습니다. ^^






눌러주시는 공감 () 은 큰 힘이 됩니다.

로그인하지 않으셔도 공감은 가능합니다.

감사합니다. ^_______^





이 포스트 공유하기

페이스북
트위터
구글+
네이버
밴드
카스

모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]

Posted by HAPPYJINI
2018.06.03 05:24 Blog 101/Tistory

안녕하세요. HAPPY JINI 입니다.

반응형 스킨인 FastBoot 스킨을 사용하시는 분들이라면 모바일에서 자신의 티스토리 블로그로 접속해서 포스팅 글들을 보다가, 블로그의 타이틀을 클릭하여 홈화면으로 이동하려 해도 이동이 되지 않는 것을 알게 되실거에요. 그 것은 반응형 스킨인 패스트붓(FastBoot)을 사용하시기 때문입니다. 그래서  FastBoot 사용자라면 설정을 따로 해주셔야 하는데, 어렵지 않습니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[패스트붓 스킨 사용자/ FastBoot 스킨 사용자/ 티스토리]


[글을 보다가 모바일 상단의 타이틀(HAPPYJINI.COM)을 클릭하여도 메인으로 돌아가지 않습니다.이 부분을 설정하는 포스팅입니다. 위의 이미지는 변경 한후의 캡쳐 사진이여서 타이틀이 파란색으로 보이지만 설정하기 전에는 타이틀은 흰색입니다.]




티스토리 모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기 [Fast Boot 스킨 사용자]



1.블로그 관리(manage)==> 꾸미기 ==> 스킨편집을 클릭합니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]1


2. 핑크색 화살표가 가리키고 있는 'html편집'을 클릭합니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]2



3.HTML에서 Ctrl + F키를 누르면 검색 창이 뜹니다. 그 곳에 fixedNav 를 검색합니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]3


모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]4



==> 상단의 검색창에 fixedNav를 검색되어지면 아래 부분을 보시면 (핑크색 화살표) [##_title_##] 부분을 찾을 수 있습니다.


4.[##_title_##]을 →  <h4><a href="/">블로그이름</a></h4>로 변경합니다.




모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]5


(제 블로그 이름인 HAPPYJINI.COM을 넣어 변경했습니다.)


5. 변경 사항을 저장한 후 모바일에서 확인합니다.




모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]7



모바일로 가서 타이틀(HAPPYJINI.COM)을 클릭하면 홈으로 이동되는 것을 확인하실 수 있습니다.

설정이 제대로 됐을 경우 타이틀이 파란색으로 바뀌게 됩니다.

하지만 이 부분도 설정으로 원하는 컬러로 바꿀 수는 있습니다. 나중에 다른 포스팅에서 함께 올리도록 하겠습니다.






눌러주시는 공감 () 은 큰 힘이 됩니다.

로그인하지 않으셔도 공감은 가능합니다.

감사합니다. ^_______^



이 포스트 공유하기

페이스북
트위터
구글+
네이버
밴드
카스

티스토리 툴바