NIGHTLY NOTES

스킨 수정 정보 (250512)

DATE 2025/05/12

TAG

HTML

스킨에 페이징 넘버링 부재로 이하 소스 수정

<!-- 치환자 공백 제거필요 -->
<s_paging>
		<div class="clear"></div>
	<div class="paging">
		<a [## _prev_page_ ##] class="[## _no_more_prev_ ##]" style="float: left;">
			<i class="xi-angle-left-min"></i>
		</a>
		<s_paging_rep><a class="numbox" [## _paging_rep_link_ ##]>[## _paging_rep_link_num_ ##]</a></s_paging_rep>
		<a [## _next_page_ ##] class="[## _no_more_next_ ##]" style="float: right;">
			<i class="xi-angle-right-min"></i>
		</a>
	</div>
</s_paging>

현재 글의 상태를 표기하기 위해 이하 태그 추가

<!-- <s_ad_div> 안에 넣을 것, 치환자 공백 제거필요 -->
<a style="color: #999">[[## _s_ad_s1_label_ ##]]</a>

CSS

페이징 넘버링 스타일 변경 (기존 스타일 일부 삭제)

/*======================================*/
/*=============== paging ===============*/
/*======================================*/

.paging{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding:10px 0 0;
}

.paging .numbox > .selected{
  font-weight: bold;
}

전체 페이지에 폰트색상 적용되어 게시글 색상 변경 불가능한 부분 수정

/* 250503 전체 컬러 제외 (color > _color) */
* {
  padding: 0;
  margin: 0;
  font-family: 'NanumSquareNeo', "M PLUS 1", sans-serif;
  font-size: 13px;
  _color: #333;
  list-style: none;
  word-wrap: break-word;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 20px;
}

/* 250503 전체 컬러를 부분 지정으로 변경 (color 추가) */
#top{
  padding:0 20px 10px;
  color: #333;
}

/* 250503 전체 컬러를 부분 지정으로 변경 (color 추가) */
#side{
  float: left;
  width:25%;
  padding:0 20px;
  color: #333;
}

/* 250503 전체 컬러를 부분 지정으로 변경 (color) */
.cover_wrap {
  color: #333;
}

/* 250503 전체 컬러를 article default color로 지정 (color) */
.entry .article .ny {
  color: #333;
}

티스토리 기본 설정의 네임카드 숨김처리

/* 포스팅 하단 네임카드 숨김 처리 */
[data-tistory-react-app='Namecard'] {
  display: none;
}

검색방지

<!-- 250510 검색 방지용 태그 -->
<meta name="robots" content="noindex, nofollow">
<meta name="Googlebot" content="noindex, nofollow">
<meta name="Naverbot" content="noindex, nofollow">
<meta name="Daumoa" content="noindex, nofollow">

250708

BGM 추가 작업 완료

특정 글을 참고 및 가공 (https://sangminem.tistory.com/211)

1) <head> 태그에 <audio> 태그 추가

<head>
...

	<!-- 250708 BGM -->
	<audio id='bgm' loop autoplay onloadstart="this.volume=0.5;"></audio>
</head>

2) <body> 태그 내 필요한 곳에 디자인 가공하여 추가

(※ side > profile 의 sdesc를 복사하여 가공하였습니다.)

<div id="side">
    <div class="profile">
        <div class="sdesc"> ... </div>
        <div class="sdesc">
            <div class="">
                ♬
                <span id="current-bgm">The Night in the Day</span>
            </div>

            <div class="">
                <i class="xi-play" onclick="toggleBgm()" style="font-size:20px;vertical-align:middle;cursor:pointer;"></i>
                [ <span id="current-status">playing...</span> ]
            </div>
        </div>
 ...

3) 최하단 <script> 태그에 함수 추가

( 이것 없이 <audio> 태그만 사용시 ①모바일 실행안됨, ②데스크탑 특정이벤트 발생 전까지 실행안됨, 의 두가지 문제 발생 )

<script>
$(window).load(function(){
...
	bgmStartHandler();	// 추가
});

/* 250708 BGM */
var myBgm = $('#bgm')[0];
var bgmSource = [
    {title: 'The Night in the Day',
    src: 'https://blog.kakaocdn.net/dna/dcVtgz/btsO8bSyian/AAAAAAAAAAAAAAAAAAAAAJgUbC_tWoSlREq2ygmZjcOIFW2xWfC8WXMDkMBSRX-P/The%20Night%20in%20the%20Day.mp4?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=CSVMkrGylo3ZjHppNaV5u2y4mIE%3D&attach=1&knm=tfile.mp4'} 
,
];
var saveIndex = window.localStorage.getItem('current-bgm-index');
var currentIndex = saveIndex?Number(saveIndex):Math.floor(Math.random()*bgmSource.length);
var bgmStart = false;
var bgmPlaying = false;

// on/off
function toggleBgm() { 
    if(window.localStorage.getItem('current-bgm') == 'stop') {
            window.localStorage.setItem('current-bgm', 'play');
    } else {
            window.localStorage.setItem('current-bgm', 'stop');
    } 
    getCurrentBgm();
}

// 현재 상태 세팅 
function getCurrentBgm() {
    $('#current-bgm').html(bgmSource[currentIndex].title);
    if(window.localStorage.getItem('current-bgm') == 'stop') {
            myBgm.pause();
            $('#current-status').html('stop...');
            $('#bgm-status-icon').addClass("xi-play");
            $('#bgm-status-icon').removeClass("xi-pause");
            bgmStart = false;
            bgmPlaying = false;
    } else {
            if(!bgmPlaying){
                myBgm.src = bgmSource[currentIndex].src;
                //myBgm.muted = true;
                var promise = myBgm.play();
                if (promise !== undefined) {
                    promise.then(function(){
                            bgmStart = true;
                            bgmPlaying = true;
                        }).catch(function(error){
                            bgmStart = false;
                            bgmPlaying = false;
                            console.log(error);
                        });
                    }
            }

            $('#current-status').html('playing...');
            $('#bgm-status-icon').addClass("xi-pause");
            $('#bgm-status-icon').removeClass("xi-play");
    }
}
function bgmStartHandler(e) {
    if(!bgmStart) {
            bgmStart = true;
            getCurrentBgm();
    }
}
$(window).on('click', bgmStartHandler);
$(window).on('touchstart', bgmStartHandler);
$(window).on('touchend', bgmStartHandler);
</script>

위를 진행해도... 브라우저의 권한에서 벗어나네요..

권한차단 console log 내용

>> NotAllowedError: play() failed because the user didn't interact with the document first.

'Notes > Diary' 카테고리의 다른 글

소소하게 티스토리 보호글 확인 방법 기록 (0)	2025.06.18
피크민을 다 모아보자 (2)	2025.05.16

HTML

CSS

'Notes > Diary' 카테고리의 다른 글

티스토리툴바