Blog 101/Tistory: 9개의 글



티스토리 상단,하단 메뉴바 색상 바꾸기! [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.04 02:05 Blog 101/Tistory


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


반응형 스킨 FastBoot(패스트붓)을 적용했다면, 메인에서 사이드바가 없는 것을 알게 될 것 입니다. 사이드바가 필요 없을 수도 있겠지만 아무래도 사이드바가 있는 것이 효율적이고 편리합니다. 물론 개인적인 제 의견입니다. 

티스토리에 최적화 되어 있는 스킨이라고 해서 패스트부트 스킨을 적용한 것이였는데 솔직히 살짝 번거롭긴 합니다. 이 것 저것 설정해야 되는게 은근히 있는 편이라 ^^ 하지만 처음에 이렇게 설정해놓고 나면 관리하는 입장에서도 편하고 보는 입장에서도 한 눈에 블로그가 눈에 들어와 효율적이기는 합니다.




그럼 편리함을 위해서 우측에 사이드바를 적용해 보도록 하겠습니다.


FastBoot 스킨으로 설정 후 우측 사이드바 설정하기



현재 HAPPYJINI>COM은 우측 사이드바 설정이 되어있기 때문에 사용자 정보, 카테고리,최근글 등의 정보가 일목요연하게 정리되어 있습니다.

한결 보기에도 편하시지요. ^^




일목요연한 티스토리 블로그 만들기! [패스트붓 스킨 사용자/Fastboot 스킨 사용자 사이드바 설정하기]


일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]2



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]3


[HAPPYJINI>COM은 이미 사이드바와 티스토리의 티에디션이 적용된 후의 블로그 상태이기 때문에 서로 다를 수도 있습니다. 이 점 참고하시길 바랍니다.]






저의 블로그처럼 사이드바 설정을 원하신다면 따라해 주시면 됩니다.


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



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]4


==>html편집 버튼을 누르시면, 아래와 같은 화면이 뜹니다.



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]5



==>Ctrl +F를 누르면 검색창이 뜹니다. 검색창에  document 라고 검색합니다.

그러면 위와 같이 doument.wirte 로 시작하는 html 소스들이 나옵니다.회색으로 칠해져 있는 부분의 소스들을 삭제하고 그 자리에 아래의 내용(파란상자 안의 내용)들을 복사해서 붙여 넣고 저장합니다.





document.write('<style>#leftContent{display:none;}#coverDiv{float:left;width:75%;margin-top:-15px;}@media screen and (max-width: 991px){#coverDiv{width:100%;margin-top:0}}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none;}#coverDiv h5{margin-bottom:5px;}#coverDiv .pubDate{float:right;font-weight:bold;}#coverDiv .loading{height:1080px;}#coverDiv img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}#coverDiv img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}#outer_btn_left,#outer_btn_right{display:none !important;}@media screen and (max-width: 767px) {#coverDiv .col-md-12 p.des, #coverDiv .col-md-6 p.des{display:none}#coverDiv .col-md-12 img, #coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none;}}.contentPadding{background-color:#ffffff;padding:10px;margin:5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}</style>')


FastBoot SideBar.txt


↑↑↑ [위의 파란 상자 안에 있는 내용의 텍스트 파일입니다. 다운로드 받으신 후 복사해서 => 붙여넣기 해주셔도 됩니다.]



저장까지 마치고, 새로고침을 하여 우측에 사이드바가 생성되었는지를 확인하시면 됩니다.




일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]7


2. 추후 사이드바의 순서 변경, 메뉴 추가를 원하시면 블로그 관리(manage)  => 꾸미기 => 사이드바를 클릭합니다.



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]8





==> 좌측에 기본 모듈이 있고 우측에 사이드바가 있습니다.

지금 이미지는 제 블로그의 이미지이니 참고만 하시고, 추가할 것 이 있으면 좌측 기본 모듈에서 플러스 버튼을 눌러 추가해주시면 우측 사이드바로 추가가 됩니다. 사이드 바의 메뉴, 순서 변경 등을 원하시는대로 설정해주신 후 변경사항 저장 버튼을 클릭하면 됩니다.

패스트 부트 스킨의 장점은 티스토리에 최적화되어 일목요연한 블로그를 만들어 주는 것입니다. 단순 블로그 느낌이 아니라, 잘 활용하면 웬만한 사이트 보다 나은 듯 합니다. ^^







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

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

감사합니다. ^_______^





이 포스트 공유하기

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

모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[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)을 클릭하면 홈으로 이동되는 것을 확인하실 수 있습니다.

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

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






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

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

감사합니다. ^_______^



이 포스트 공유하기

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

어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]

Posted by HAPPYJINI
2018.05.31 01:03 Blog 101/Tistory

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

어제의 구글 애드센스 승인 비법! 포스팅에 이어 오늘은 어떤 환경에도 적응하는 티스토리 블로그를 만들기 위해 반응형 스킨에 대한 이야기와 설정 방법에 대해서 포스팅하겠습니다.


 

개인 티스토리 블로그의 'manage'로 가면 꾸미기 => 스킨 변경 세팅이 있습니다.

티스토리에는 39개의 스킨이 있습니다. 


런데 왜 굳이 티스토리에 없는 반응형 스킨으로 바꿔야 할까요?





반응형 스킨의 장점을 이야기 하자면 ;


1.어떤 환경에서도 그 환경에 맞게 맞춰집니다. 컴퓨터, 모바일, 탭 등 어떤 환경이든 포스팅한 이미지를 맞춰줍니다.

비반응형 스킨의 경우, 이미지와 맞지 않는 환경에서는 사진이 잘리거나 보이지 않는 경우도 있습니다.

그런 점을 반응형 스킨에서는 어떤 환경이든 맞게 바뀌어 이미지 그대로 보여줍니다.


2.반응형일 경우는 PC 버전과 모바일 버전 어디에서든 동일한 URL을 표시합니다. 해피지니의 도메인은 happyjini.com 입니다.

반응형에서는 PC 버전과 모바일 버전에서 동일하게 happyjini.com으로 보입니다.

하지만 비반응형일 경우에는 PC 버전에서는 happyjini.com으로 보였다면 모바일 버전에서는 m.happyjini.com으로 앞에 모바일을 가르키는 'm'이 붙습니다.

URL이 PC 버전과 모바일 버전이 다른 것이 무엇이 중요해? 라고 생각하실 수도 있습니다. 


티스토리는 다음에서 운영하는 블로그입니다. 검색엔진은 다음만 있는 것이 아닙니다. 우리는 모든 검색엔진에 등록이 되어 어느 검색엔진에서든 검색이 잘되어 많은 이들에게 나의 정보를 제공하고자 하는 것이 목표입니다.  그 것이 모두의 목표가 맞습니까? 네. 맞습니다 


그렇다면 그 중 네이버 검색엔진에서도 검색이 잘 되어야 하겠지요? 하지만 네이버에서는 이 같은 경우 2개의 사이트로 인식한다고 합니다.

2개의 사이트가 같은 내용을 포스팅하고 있습니다. 그렇게 되면 포스팅의 질이 떨어져 네이버에서는 여러분들의 사이트를 저품질 사이트로 인식하게 됩니다.

어떻게 만든 블로그이고, 어떻게 승인받은 애드센스 입니까? 그럴 수 없기 때문에 반응형 스킨을 추천하는 이유입니다.



3.반응형 스킨은 예쁘지는 않지만 일목요연하게 만들 수 있습니다. 단순 블로그의 느낌이 아니라 하나의 사이트 처럼 꾸밀 수 있습니다.

상단 메뉴와 사이드 바를 만들 수 있으며 메뉴바를 다양하게 꾸밀 수 있습니다.


물론 비반응형 스킨으로도 블로그를 잘 운영하시는 분들도 있습니다.

구글 애드센스 승인에 계속 탈락 될 때 반응형 스킨으로 바꾸면 유리하다는 글을 보고 난 후, 반응형 스킨으로 바꾸게 되었습니다.

과연 반응형, 비반응형 스킨에 따라 애드센스의 승인과 비승인의 차이가 있을까? 하는 생각으로 확신은 없습니다.

하지만 반응형 스킨으로 확실하게 일목요연한 깔끔한 사이트가 된 것은 분명합니다.




반응형 스킨에는 여러가지가 있습니다. 하지만 그 중 대표적인 반응형 스킨은 단연 FastBoot이 아닐까 생각합니다.

현재 FastBoot은 1.6.2가 가장 최신 버전입니다. [FastBoot 스킨은 'Readiz'님이 만드 반응형 스킨입니다.]


이제부터 어떤 환경에서도 적응하는 티스토리 블로그를 만들기 위해 반응형 스킨 FastBoot의 설정 방법에 대해서 알려드리겠습니다.


먼저 아래의 FastBoot v 1.6.2 zip 파일을 다운 받으신 후 압축을 해제합니다. (파란색 글씨를 따라가 주세요.)


FastBoot v1.6.2.zip




어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]




==> 압축을 해제 한 후 꾸미기에서 스킨변경으로 갑니다 

스킨변경으로 가면 아래와 같이 사용중인 스킨이 보입니다.

저는 현재 사용중인 스킨으로 FastBoot을 사용하고 있어서, FastBoot이 뜨지만 여러분의 사용중인 스킨은 스킨 목록에 있는 것 중의 하나가 뜰 것입니다.

==>핑크 화살표가 가르키는 '스킨등록'을 클릭합니다.



어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]1



==> 스킨등록을 클릭해서 들어가면 추가 버튼이 뜹니다. '추가' 버튼을 클릭합니다.


어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]2





==> 추가 버튼을 클릭하여 들어가면, 아까  FastBoot v 1.6.2 압축 파일을 해제한 파일들이 뜹니다.

그 중에서 맨 위의 images 폴더를 제외한 나머지 6개의 파일을 (index~style파일까지) 클릭합니다.



어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]3


==> 아래와 같이 '파일목록'에 5개의 파일이 들어옵니다. 

==> 파일목록이 들어와 있다면 아래의 오렌지 컬러 '저장' 버튼을 눌러주세요.

(저의 경우 스킨 적용 후에 캡쳐한 이미지인 관계로, 경우에 따라서 여러분들의 파일 목록의 갯수가 다를 수도 있습니다. 다르다고 해서 당황하지 마세요.)



어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]4


어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]5



==> 파일목록 저장 후에 보게되면, 사용 중인 스킨이 'FastBoot' 으로 뜨게 됩니다.

스킨보관함으로 들어가면, 스킨 목록 안에 FastBoot 스킨이 있는 것이 보일 것입니다.



어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]7



패스트붓(FastBoot) 스킨 적용이 잘 되었는지 다시 한번 확인하기 위해 블로그 메인의 하단으로 가면 Skin By Readiz로 표시되어 있습니다.



어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]8






어떤 환경에서도 적응하는 티스토리 블로그 만들기 [반응형 스킨 설정 방법/FastBoot 1.6.2 파일 첨부]9




마지막으로 반응형 스킨을 문제없이 사용하기 위해서는 한가지를 더 바꿔줘야 합니다. 


티스토리 블로그 manage로 가면 꾸미기에 '모바일' 세팅이 있습니다.

핑크색 화살표가 가리키는 모바일 꾸미기 설정에서 ★★ 티스토리 모바일웹 자동 연결을 '사용하지 않습니다.'로 바꿔준 뒤 변경사항 저장 버튼을 클릭합니다. ★★★★


모든 반응형 스킨 설정이 끝났습니다.


이로써 오늘은 왜 반응형 스킨을 사용해야 하는지? 와 그리고 반응형 스킨 세팅 방법에 대한 포스팅이였습니다.

다음 포스팅에서는 상단, 메뉴바, 사이드 바 등 블로그를 보다 더 일목요연하게 바꿀 수 있는 것에 대한 방법을 포스팅하겠습니다.


혹시 제가 한 포스팅에서 잘못된 부분이 있거나, 보충해야 할 부분이 있다면 댓글 남겨주세요.




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

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

감사합니다. ^_______^


이 포스트 공유하기

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

티스토리 툴바