No.21
div.comment { visibility: hidden; } div.comment.loaded { visibility: visible; }
//API取得 コードが動かない場合はまずここを //const baseUrl ='http(s)://サイトURL/?mode=api&item=ISLOGGEDIN'; //に変更してください。 const baseUrl = window.location.origin + '/?mode=api&item=ISLOGGEDIN'; //エラー表示用 ↑を変更しても動かない場合はコンソールログで内容をご確認ください。 function handleError(error) { console.error('エラー詳細:', { 名前: error.name, メッセージ: error.message, スタックトレース: error.stack }); } async function checkAndHideArticle() { const articles = document.querySelectorAll('div.comment'); articles.forEach(article => { article.style.opacity = '0'; }); try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); const response = await fetch(baseUrl, { signal: controller.signal, method: 'GET', credentials: 'include', headers: { 'Accept': 'text/plain', } }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTPエラー: ${response.status}`); } const trimmedTextData = (await response.text()).trim(); articles.forEach(article => { const tagLink = article.querySelector('a.taglink'); //適用タグや文言はお好みのものに変更してください if (trimmedTextData === 'NO') { if (tagLink && tagLink.textContent.includes('#ログイン限定')) { const loginNoticeSpan = document.createElement('span'); loginNoticeSpan.innerHTML = 'ログイン限定記事 <br>ログインして記事を読む'; article.style.display = 'none'; article.innerHTML = ''; article.parentNode.insertBefore(loginNoticeSpan, article); } else { article.style.opacity = '1'; } } else if (trimmedTextData === 'YES') { if (tagLink && tagLink.textContent.includes('#ログイン限定')) { const loginSpan = document.createElement('span'); loginSpan.innerHTML = 'ログイン限定表示中'; article.appendChild(loginSpan); } article.style.opacity = '1'; } }); } catch (error) { handleError(error); articles.forEach(article => { article.style.opacity = '1'; }); } } document.addEventListener('DOMContentLoaded', checkAndHideArticle);
2025/3/28 金 12:46 配布 No.21 編集 単記事
« No.20 1 No.22 »
初期表示に戻る
てがろぐログイン限定表示記事スクリプト
てがろぐβ版の4.5.x系で追加されたログインAPIを使用したテストコードを作りました。
#ログイン限定 とタグ付けした記事を限定表示にできます。
javascript+CSSでの制御なので、javascriptが動かない環境ではソースを見れば読めてしまいます。あくまで簡易的に隠すだけのものです。
以下説明
1.
使用するスキン内のcssに
を追加。
2.
以下のコードを使用スキンのskin-coverに直接記述するか
コピペして「hidearticle.js」を作成し、
skin-cover内:<script src="hidearticle.js"><script>
を</body>タグの直前に追加。
畳む