No.5221, No.5220, No.5219, No.5218, No.5217, No.5216, No.5215[7件]
➡ 2025年6月4日(水) 09時42分 〔4日前〕 No.5220 ✎ !
➡ 2025年6月3日(火) 22時22分 〔5日前〕 情報 No.5219 ✎ !
➡てがろぐ解説 notebook (使うには、Googleアカウントが必要だと思いますが、無料で使えます。)#🌱豆知識
(ツイート埋め込み処理中...)Twitterで見るBluesky
ただ、これはヘルプの書き方や構造の問題もありそうですが、実際には解説は存在するのに「ない」と回答されることもありますので、(返ってきた解説自体は参考にできそうですが)「ない」と言われた場合には信用しないで、質問を変えるか、もしくは自力でWebをご覧下さい。(笑)
「こう質問したのに、適切な回答はなかった」みたいな情報があれば教えて下さい。もしかしたら、ヘルプドキュメントの改善の参考になるかもしれませんので。
※これは、リアルタイムにWebから情報を取ってくれるわけではなくて、ソース(資料)としてURLを指定した瞬間のHTMLソースからテキストデータを抽出して取り込む仕様っぽいので、(私が今後もメンテナンスをすれば別ですが)2025年6月3日時点のヘルプドキュメントを元にして回答されます。
➡ 2025年6月2日(月) 22時34分 〔6日前〕 No.5217 ✎ !
『リンク先のWebページにTwitter Cardの指定があって、そこで大画像が指定されている』と言うことが可能性として高いんですね。モヤモヤと「何故?」という疑問を携えていたのでスッキリいたしました。
今も「CARD-S」や「CARD-L」の記述を使わせて頂いておりますので、そちらを利用させて頂きます。
細やかな疑問にお答え頂き、本当にありがとうございました。
➡ 2025年6月2日(月) 19時33分 〔6日前〕 No.5215 ✎ !
🥔Re:5214◆なるほど、Bluesky側の個別ページにはOGPが含まれているんですね……! 有用な情報をありがとうございます! なお、私の投稿で試してみたところ、単純にブラウザのアドレス欄に表示される(個別投稿の)URLを使っても埋め込めました。(もしかしたら、そのアカウントの設定によって異なるのかもしれませんが。)
▼Bluesky上の個別投稿のURLを使用:
(Loading...)...
▼Bluesky側の「投稿を埋め込む」機能から抜き出したURLを使用:
(Loading...)...
OGPがあるだけでなく、Twitter Cardの指定もあるんですねえ。(「大画像」が指定されていました。)
1)外側スキンの[[SITUATION:HTML]]の部分をパンくずリスト風に
<div class="breadcrumb">
<span class="homelink">[[FREE:HOMELINK]]</span><!-- フリースペースで設定した「ページのフッタ部分に表示するリンク」・不要なら削除 -->
<a href="[[HOME:URL]]">[[FREE:TITLE:MAIN]]</a><!-- てがろぐのトップへのリンク -->
[[SITUATION:HTML]]
</div>
css(簡易)
.breadcrumb .situation {
display: inline;
}
.breadcrumb > *:not(:last-child)::after {
content: '>';
}
でいかがでしょうか
2)“全件”の数を取得したい
トップ(何も選択しない場合)に表示される記事総数をJavascriptで取得して表示する方法です。
フリースペースに(スキンに直接書いてもいいです)
<span class="soukensu">総記事数:[[INFO:TARGETPOSTS]]</span>
<div id="result"></div>
javascript
<script>
fetch('./') // 同一ドメイン内の別ページ
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const targetElement = doc.querySelector('.soukensu');
if (targetElement) {
document.getElementById('result').innerHTML = targetElement.outerHTML;
} else {
console.warn('指定のクラスが見つかりませんでした');
}
})
.catch(error => {
console.error('取得エラー:', error);
});
</script>
css
.soukensu { display: none; }
#result .soukensu { display: block; }
上記2件を試したものを https://10prs.com/tegalog-cms/ で見ることができます(2.の件だけわかりやすいようCSSを適用していません、カテゴリ「sampleA」などを選んで該当箇所を見てみてください)
ご参考になれば幸いです。