[티스토리 스킨 만들기] 블로그 화면에 이미지 고정시키기, 구석에 고양이 만들기

그냥 다른 사람들 블로그를 구경하면서 나도 뭐 꾸밀거 없나 했는데

갑자기 떠올랐습니다.

고양이를 넣자!

예전에도 화면에 이미지 고정시키는건 했었으니 고양이 이미지만 구하면 되겠네요.

https://picrew.me/image_maker/48399

으ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

복실복실한게 귀여워 미치겠네요ㅋㅋㅋㅋㅋ

여튼 위 사이트는 자캐만들기로 유명한 사이트입니다.

대충 원하는 모양으로 만들고 저장합시다.

위 사진처럼 만들어줄겁니다.

Html 편집에 파일 업로드로가서

해당 파일의 이름을 BackGroundv2.png로 하고 파일을 업로드 해줍니다.

<!--배경화면 이미지-->
	<img src="./images/BackGroundv2.png" style="width:360px;display:scroll;position:fixed;bottom:25px;right:5.5px;z-index:-500;background-color: rgba(0, 0, 0, 0.0001);" />
	

저는 위 코드를 넣었습니다.

코드를 수정하셔서 원하는 입맛대로 만드시면 됩니다!

body안에 대충 아무곳이나 넣으시면 됩니다.

[티스토리 스킨 만들기] 반응형 2 스킨 사이드 바 꾸미기, 3단에서 2단으로, 글꼴, 색깔, 빠르게, 애니메이션 삭제

이번에는 반응형 2 스킨 사이드 바를 꾸며보겠습니다.

사이드바가 너무 넓어서 내용이 가려지니까 줄일 필요가 있습니다.

그리고 애니메이션 때문에 느려지기도 하고 여러므로 수정할곳이 있습니다.

그래서 수정하면서 글을 써보겠습니다.

3단에서 2단으로 줄일려면 HTML의 2곳을 수정해야합니다.

약 183줄의 <div class="col_aside left_side">를

<div class="col_aside right_side">로 바꿔줍시다.

위 사진에 강조된 부분을 바꿔주시면 됩니다.

그리고 이제 약 238줄 근처에

</div> ~ <div class="col_aside right_side">를 아래사진처럼 삭제해줍니다.

이제 CSS로 가서 두곳을 수정해야합니다.

.wrap_skin.navi_on {padding-left:960px}를

.wrap_skin.navi_on {padding-left:640px}로 수정해줍니다.

Ctrl + F를 눌러 960px를 검색하면 빠르게 찾을 수 있습니다.

또한 .navi_on. wrap_sub{width:960px}부분도

.navi_on. wrap_sub{width:640px}로 수정해줍니다.

그럼 이제 3단 사이드 바가 2단으로 수정된걸 확인할 수 있습니다.

이제 사이드를 열고 닫을 때 생기는 애니메이션을 제거해주겠습니다.

또 두곳을 수정해야하는데 찾기를 통해 0.2를 검색해주시면 바로 나옵니다.

약 47줄과 70줄 근처의 trasition:padding-left ease-in-out 0.2s, transition:width ease-in-out 0.2s를 제거하시거나

저처럼 주석처리 해도 됩니다.

그럼 이제 애니메이션이 제거된걸 볼 수 있습니다.

사이드바 안의 글꼴을 수정해보겠습니다.

CSS의 약 110줄의 .tt_category .sub_category_lis~ 안의 속성을 수정하면

카테고리의 서식을 수정할 수있습니다.

color:를 수정하면 카테고리 목록의 색깔이 수정되고 height를 수정하면 높이가 수정되죠

색상과 높이를 살짝 수정해봤습니다.

많이 벌어져있던 간격을 줄였고 색상을 좀 밝은 색으로 바꿨습니다.

또 115줄 근처의 .link_sub_item:hover { ~}를 수정하면

카테고리의 텍스트위에 마우스를 가져다대면 색상이 바뀌는걸 수정할 수 있습니다.

무지개 플러그인이랑 같이 사용한다면 별로 소용없지만요.

그리고 text-decoration:none;하면 밑줄이 없어집니다.

이제 사이드바 배너부분의 서식을 바꿔보겠습니다.

125번줄 근처의 속성은 아래 사진처럼 수정할 수 있습니다.

123줄의 컬러를 수정하면 Notice같은 서식을 수정할 수있더군요.

그래서 파란색에서 더 밝은 색으로 바꿔줬습니다.

또한 .link_board:hover {color:~}을 추가하면 위와같이 마우스를 위에 가져다대면

색깔을 수정할 수 있습니다.

수정하면서 알았는데

120줄 이부분의 width를 높게 설정하니 사이드바가 1단이 되었습니다.

앞에 3단에서 2단으로 바꾼것처럼 div를 삭제하면 1단으로 만들 수도 있겠네요.

이건 나중에 다시 만들어보는걸로 하고

이번에는 태그 부분을 수정해봤습니다.

margin부분을 수정하고 radius를 없앴습니다.

반듯한 사각형이됐네요.

그리고 max-width를 줄이면 어느정도 전체적으로 반듯하게 만들어집니다.

Today, Total 박스와 숫자 서식을 바꿔주려면 158줄근처의 속성을 수정하면 됩니다.

그리고 background-color~의 .2를 수정하면 박스의 투명도가 수정되더군요

[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 버튼 삭제 CSS 편집

오늘 또 여러 가지 편집하면서 올리게 되네요!

이번에는 스크롤 바

이런 걸 바꿀 겁니다.

이걸 왜 바꾸냐면 반응형 2 스킨에서 메뉴를 열면 정말 안 이쁘거든요;;

그래서 메뉴에서는 안 보이게 하려고 했으나

코드를 못 찾겠어서

모양을 좀 이쁘게? 만들려고 합니다.

언젠가 찾게 되겠죠 프로필 이미지 크기도 찾은 것처럼ㅎㅎ

이번에는 수정이 아닌 그냥 CSS에 넣으시면 됩니다.

스킨마다 다르겠지만

반응형 2에서는 직접 넣어줘야 합니다.

/* 스크롤 바 */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background-color: #F3F3F3; }
::-webkit-scrollbar-thumb { background-color: #BDBDBD; }
::-webkit-scrollbar-button { display: none; }

width를 수정해서 넓이도 수정해줍시다.

기존 스크롤바는 꽉 찬 느낌이 아니라서 약간 불편한 느낌이 있었지만 이렇게 해주면 꽉 차 보입니다.

track에는 스크롤 바 밑에 색깔을 넣어주고

thumb에는 바 색깔을 넣어줍니다.

네이버에 html 색상표라고 검색하시면 색상 코드를 얻을 수 있으니 참고하세요!

그리고 중요한 게

스크롤 바 버튼을 없애줄 겁니다.

이게 있으니까 메뉴에서 별로 안 이쁘더라고요.

그래서

::-webkit-scrollbar-button { display: none; }

을 넣어줍니다.

이게 보이지 않을 뿐이지 해당 위치를 누르니까 기능은 남아있었습니다.

여러분 나름대로 예쁘게 꾸미시길 바랍니다!

그리고 반응형 메뉴의 스크롤 바 없애는 방법 아시는 분 댓글 좀 부탁드립니다!

전에 프로필 이미지 크기와 모양을 바꿔봤었죠

굉장히 맘에 듭니다.

이제 블로그 이름과 제 닉네임의 CSS를 바꿔보려고 합니다.

먼저 블로그 이름과 위에 바를 살짝 손봤습니다.

HTML 편집 -> CSS로 이동하여 이 부분을 손봐주시면 됩니다.

먼저 이름 위의 바는 

.area_head .area_profile:before{display:block;width:55px;height:2px;margin:0 auto 23px;background-color:#fff;content:''}

이 부분을 수정하시면 됩니다.

저는 width를 약간 넓혔습니다.

그리고 블로그 이름은

.area_head .area_profile .link_post{font-weight:400;font-size:38px;line-height:50px;color:#fff; text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box}

이 부분에서 먼저 font-weight를 수정하여 굵기를 수정했고 font-size를 조금 수정하여 조금 줄였습니다.

이제 이 부분이 아래 닉네임 CSS인데 opacity를 약간 높여서 색상을 약간 수정했습니다.

또한 margin:44px auto;를 추가해서 프로필 이미지에서 조금 떨어트려놨습니다.

그러니 보기 좋더라고요.

font-family 같은 거 추가하면 글꼴도 바꿀 수 있으니 하실 분들은 하시길 바랍니다!

[티스토리 스킨 만들기] 반응형 2 블로그 프로필 이미지 크기 변경하기

안녕하십니까 티스토리 하고 나서 바꾸고 싶었던 게 있었는데

요 반응형 2 스킨의 블로그 프로필 사진입니다.

반응형 2 스킨 자체는 정말 맘에들긴 하지만

프로필 이미지 크기가 너무작아서 보이질 않네요.

그래서 한동안 찾아보긴 했지만

원하는 답을 찾지 못했고

그러다 오늘 갑자기 이미지를 보고있는데

이게 원형태를 가지고 있으니까 반지름 값이 있지 않을까

그래서 radius 값을 찾아서 바꿔봤더니

됐습니다.. ㅋㅋㅋㅋㅋ

바로 글을 적으면서 수정해보도록 하겠습니다!

ㄲ

먼저 이미지 크기를 바꾸기 전의 제 블로그 프로필 이미지 크기입니다.

제 자취 룸의 이상향이 있지만 작아서 보이질 않네요.

스킨 편집의 HTML 편집 -> CSS로 이동

HTML5에서는 이미지 같은 건 CSS에서 관리하도록 권장하고 있습니다.

그래서 웹 전문가들은 CSS를 잘 활용하고 있겠지 해서 CSS에서 찾게 되었습니다.

저는 전문가가 아니라서 잘 활용 안 합니다 ㅎㅎ

여하튼 CSS에서 Ctrl + F -> radius를 검색하시고 내리시다 보면

위와 같은 코드를 찾으실 수 있습니다.

먼저 .img_profile의 radius를 지워봤습니다.

원형태의 프로필도 좋지만 일단 해보겠습니다.

역시 사각형으로 바뀝니다.

이걸 못 찾아서...

이제 크기를 바꿔보도록 하겠습니다.

.img_profile를 바꿔도 되지만 .thumb_profile를 바꿔보도록 하겠습니다.

이제 사진이 어떤 사진인지 명확해질 정도로 커졌네요.

정말 맘에 듭니다.

border-radius:51px를 넣으니 이렇게 되네요.

width:220px;height:220px;하고 radius를 110으로 하니 원형태가 되었습니다.

음... 근데 좀 맘에 썩 들지는 않네요.

포토샵으로 배경 이미지와 겹쳐지도록 만들었습니다.

어느 정도 색깔이 다르지만? 거의 같네요!

맘에 듭니다.

.area_head .area_profile .thumb_profile{display:block;width:205px;height:205px;margin:44px auto 6px;border-radius:15px;}
.area_head .area_profile .img_profile{display:block;border-radius:15px;width:100%;height:100%}

이걸 마지막으로 프로필 사진은 수정이 완료되었습니다!

다음 글에서 블로그 제목의 CSS를 수정해보겠습니다!

[티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법

한때 제가 고등학생일 때 야자시간과 현재 저의 불면증을 해소시켜주시는 세레노님의 진짜 진짜 좋은 음악을

제 블로그 배경음악에 두면 좋겠다고 생각해서 오늘 글 쓰면서 해보겠습니다!!

https://www.youtube.com/channel/UC0kp1x32b-Y4cvP5r3vW_hw

유튜브 태그 생성기를 쓰면 간편하긴 한데 재생목록은 가져오지 못하더군요.

게다가 언제 생겼는지 몰랐는데 퍼가기 기능에 HTML 태그로 퍼가기 기능이 있더군요.

아마 제가 신경 쓰지 않아서 몰랐던 것 같습니다.

영상 하나만 블로그에 배경음악으로 두고자 한다면

또는 글에 영상을 두고자 한다면

영상의 공유 버튼을 누르시면 됩니다.

네이버 블로그에는 HTML 위젯 기능이 있고

티스토리에는 HTML 배너 기능이 있더라고요.

복사한 태그를 HTML 배너 소스에 넣으면 될듯합니다.

여하튼 동영상의 공유 버튼을 누르시면 복사하는 버튼이 나올 겁니다.

영상 하나만 올리고자 하면 공유 버튼을 누르고 퍼가기 버튼을 누르면 자동으로 태그를 만들어주지만

저는 유튜브 재생목록을 배경음악으로 두고 싶기에 저와 같은 생각이신 분은 아래에서 계속하겠습니다.

그냥 동영상 태그 하나에 여러 리스트를 만들어서 할 수 있다고 하던데

3개 이상의 영상은 안된다고 하더군요. 그래서 그냥 재생목록 영상으로 만들겠습니다.

재생목록 링크를 가져와서 태그를 수정하려면 하려면 먼저 재생목록이 있어야겠죠

https://www.youtube.com/watch?v=xNoJb2iqUWc&list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI

유튜브로 재생목록을 만들어줍시다.

그리고 재생목록 주소의 아이디를 복사시고 아래 코드를 수정하시면 됩니다.

위 재생목록 주소와 자동재생, 반복 재생을 설정하고 HTML 코드를 만들면 아래와 같이 됩니다.

아래 코드를 복사하여 HTML 편집에 넣으면 제 블로그 오른쪽처럼 유튜브가 떠다닐 겁니다.

<iframe width="170" height="150" src="https://www.youtube.com/embed/videoseries?list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI&autoplay=1&rel=0" frameborder="0" style="display:scroll;position:fixed;bottom:425px;right:10px;z-index:99999999" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

list=PLfOyXtmFprMPe6ybXpoOxewJLLkyhhJSI

이런 식으로 되어있는 게 재생목록 ID입니다. 각각 재생목록의 아이디를 수정하면 되겠죠.

&autoplay=1&rel=0은 주소 뒤에 있는데 자동재생과 반복 재생하겠다는 의미가 되겠습니다.

자동재생을 하지 않으려면 &autoplay=1을 제거하시면 되겠고

반복 재생을 하지 않으려면 &rel=0을 제거하시면 되겠습니다.

style="display:scroll;position:fixed;bottom:425px;right:10px;z-index:99999999"

위 태그는 이제 오른쪽 화면에 고정시키는 건데 제거하셔도 되고 수정하셔도 됩니다.

유튜브 고객센터에 더욱 자세한 설명이 나와있습니다.

https://support.google.com/youtube/answer/171780?hl=ko

https://helpx.adobe.com/kr/creative-cloud/kb/cc-cleaner-tool-installation-problems.html

자세한 설명과 맥버전은 위 링크로 이동하면 정확한 정보를 얻으실 수 있습니다.

윈도우 버젼은 아래 크리에이티브 클라우드 클리너 툴을 다운받아 실행하시면 됩니다.

Windows용 Adobe Creative Cloud Cleaner Tool 실행

• 사용자 지정 플러그인이나 사용자가 설치한 프로필을 포함하여 Adobe 제품 디렉토리에 저장된 모든 파일을 백업합니다.

• 다음 중 하나를 수행하여 Creative Cloud 또는 Creative Suite 응용 프로그램을 제거합니다.

  • Windows 10, 8, 7 또는 Vista: 시작 > 제어판 > 프로그램 > 프로그램 및 기능을 선택합니다.
  • Windows XP: [시작] > [제어판]을 선택하고, [프로그램 추가/제거]를 두 번 클릭합니다.

• 제거하려는 응용 프로그램을 선택한 다음 제거 또는 설치 제거를 클릭합니다.

• 화면의 지시에 따라 제거를 완료합니다.

• 컴퓨터를 다시 시작합니다.

• 다음 링크를 클릭하여 Windows용 Adobe Creative Cloud Cleaner Tool, AdobeCreativeCloudCleanerTool.exe를 다운로드합니다. 

  파일을 다운로드할지 또는 저장할지를 물으면 파일 저장을 클릭하여 컴퓨터에 파일을 다운로드합니다.

• 다운로드된 AdobeCreativeCloudCleanerTool.exe 파일을 오른쪽 마우스로 클릭하고 관리자 권한으로 실행을 선택합니다.

  다운로드한 파일을 찾을 수 없으면 다운로드한 Adobe 앱 또는 파일 찾기를 참조하십시오.

[티스토리 스킨 만들기] 반응형2 스킨 사이드 배너 광고 만들기

다른 사람들 블로그 보면 구글 광고만 4개 이상 달고 있는 걸 보신 적 있으실 겁니다.

구글 정책에 3개만 달도록 하고 있다던데 글 몇 천 개 쓰신 고수 블로거 께서 구글 광고 4개 이상 다셨으니

믿고 저도 4개 정도만 달아보겠습니다.

그래서!

사이드 에 광고를 달아볼 텐데 제 오른쪽 상단에 보시면 광고가 있습니다.

반응형2 스킨은 화면에 배너가 항상 보이는 게 아니라서 사이드바의 Html 배너를 사용하지 않고 만들 겁니다.

제 블로그 오른쪽에 보시면 sns 공유 버튼이나 상단 이동 등등 버튼이 보일 건데 똑같이 만들어줄 겁니다.

화면에 고정된 광고 만들기

보여줄 광고를 만들건대 우리는 디스플레이 광고를 만들어줄 겁니다.

자신이 원하는 모양의 광고를 선택하시면 됩니다.

저처럼 sns 공유 버튼이 없다면 수직형을 만드는 게 크고 눈에 띄겠죠?

저는 사각형으로 만들 겁니다.

또한 반응형이 아닌 고정으로 만들어 주시고 너비와 높이를 설정하시면 됩니다.

저는 사각형이니 적당하게 250으로 너비와 높이를 맞춰주겠습니다.

만들어주시고 소스 코드를 복사하여 HTML 편집의 <head> ~ </head> 사이에 넣어주시면 됩니다.

그리고 style을 수정할 건데 별거 없어요.

position:fixed;bottom:610px;right:10px;z-index:99999999;

위 코드를 ins style 안에 넣어주시면 됩니다. 그리고 위치를 변경하고 싶으시면 bottom과 right를 수정하시면 됩니다.

저는 이렇게 수정을 했습니다.

그리고 코드를 수정하면 안 된다고도 했던 거 같지만 수정하는 사람이 많아서 음...

그럼 여기서 마치겠습니다!