${p.title}
${p.desc} 続きを読む `).join(”); }) .catch(err=>{ console.error(‘note feed error:’, err); document.getElementById(‘note-feed’).textContent = ‘記事を取得できませんでした。時間を置いて再読み込みしてください。’; }); })();
最新記事
/* ▼ グリッド：3 列固定・ギャップ 32px */
#note-feed{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
place-items:start;
}
/* ▼ カード全体を flex 縦並びにして高さをそろえる */
.note-card{
display:flex;
flex-direction:column;
border:1px solid #ddd;
border-radius:8px;
overflow:hidden;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.06);
height:100%;
}
.note-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* カード本文を独立させて flex→残り高さを均等に */
.card-body{
flex:1;
display:flex;
flex-direction:column;
padding:12px;
}
.card-body h3{
margin:0 0 8px;
font-size:1.05rem;
line-height:1.35; /* 1行の高さ */
font-weight:700;
color:#000;
text-align:left;
/* ▼ 3行固定トリミング */
display:-webkit-box;
-webkit-line-clamp:3; /* 3行で切る */
-webkit-box-orient:vertical;
overflow:hidden;
/* ▼ 3行分の高さを確保（1.05rem × 1.35 × 3 ≒ 4.3em） */
min-height:4.3em;
}
.card-body p{
margin:0 0 16px;
font-size:.9rem;
color:#444;
text-align:left;
display:-webkit-box; /* 3 行で切り捨て */
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.more{
margin-top:auto; /* 下端に寄せる */
display:block;
text-align:center;
background:#008080; /* 指定色 */
color:#fff;
padding:10px 0;
border-radius:4px;
font-size:.85rem;
}
/* ▼ 画面幅 767px 以下＝スマホ想定 */
@media (max-width: 767px){
/* 1 列レイアウトに変更 */
#note-feed{
grid-template-columns: 1fr;
}
/* 7 件目以降を非表示にして 6 件に絞る */
#note-feed .note-card:nth-child(n+7){
display:none;
}
}
読み込み中…
(function(){
const USER = ‘kn_jaguar9292’;
const LIMIT = 12; // 3×4 = 12 件
const FALLBK = ‘https://placehold.co/640×360?text=note’;
const proxy = u => ‘https://note-proxy.orea-staff.workers.dev/?u=’ + encodeURIComponent(u);
/* ── RSS ── */
fetch(proxy(`https://note.com/${USER}/rss`))
.then(r => r.text())
.then(xml => {
const dom = new DOMParser().parseFromString(xml,’text/xml’);
const items = […dom.querySelectorAll(‘item’)].slice(0, LIMIT);
/* ── 各記事ページ → og:image ── */
return Promise.all(items.map(async it => {
const link = it.querySelector(‘link’).textContent.trim();
const html = await fetch(proxy(link)).then(r=>r.text()).catch(()=>”);
const m = html.match(/]+property=[“‘]og:image[“‘][^>]+content=[“‘]([^”‘]+)[“‘]/i);
const img = m ? m[1] : FALLBK;
return {
title: it.querySelector(‘title’).textContent.trim(),
link,
desc: (it.querySelector(‘description’)?.textContent || ”)
.replace(/]+>/g,”).slice(0,80)+’…’,
img
};
}));
})
.then(posts => {
document.getElementById(‘note-feed’).innerHTML = posts.map(p => `