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>タグの直前に追加。
畳む