2024年6月 この範囲を時系列順で読む この範囲をファイルに出力する
すみません、リンクのところで書き方をミスしてしまい、変な表示になってしまいました。申し訳ないです。
てがろぐには本当にお世話になっています。ありがとうございます。
一部分でCSSが効かなくなることについてご相談したいです。
私のサイトでは、フリースペースを使ってHTMLで書いている部分があるのですが、
<p><span class="deco-hoge">言葉</span><ruby><rb>言葉</rb><rt>ことば</rt></ruby></p>
上記のようにspanタグで囲まれた部分とrubyタグで囲まれた部分が隣り合うと、spanタグで指定したclass="deco-hoge"のCSSが効かなくなります。
※実際には下記のようにaタグでも囲っているのですが、CSSが効かないのは同じです。
<p><span class="deco-hoge">言葉</span><a href="https://"><ruby><rb>言葉</rb><rt>ことば</rt></ruby></a></p>
<p><span class="deco-hoge">言葉</span></p>
上記のように、rubyタグを取り除くと、CSSは問題なく効きます。
rubyタグを使ってもCSSが効くようにしたいのですが、どうすればいいでしょうか。何かご教授いただけますと幸いです。
お手数おかけして申し訳ないのですが、よろしくお願いいたします。
畳む
🍵Re:4508◆カテゴリに属する投稿の総数に応じて、リンクの表示/非表示を切り替える、という意味ですかね?
そうだとすると、JavaScriptを使えば実現できます。以下の①~④のソースを書いてみて下さい。
①まず、外側スキンに <span class="counter">[[INFO:TARGETPOSTS]]</span> と書いておきます。この [[INFO:TARGETPOSTS]] の記述は、もしかしたら既に書いてあるかもしれません。標準添付の各スキンだと書いてあります。書いてある場合はそれを流用しても良いです(※余計な単位を含めないようご注意下さい)し、新たに追記しても良いです。何にしても、該当件数の数値だけが「counter」というclassの要素に含まれるようにします。
②次に、今の表示を逆順で表示するリンクを、例えば
<span class="revlink"><a href="[[REVERSE:URL]]">今の表示を[[REVERSE:NAME]]で見る</a></span> のように書いておきます。リンクの書き方はどうでも良いので好きなようにして下さい。要は、表示/非表示を切り替えたい内容を「revlink」というclass名の付いた要素で囲めば良いだけです。
③さらに、JavaScriptを書きます。
<script>
document.addEventListener('DOMContentLoaded', function() {
// counterクラスの要素を取得して表示件数を得る
var counterElmnt = document.querySelector('.counter');
var counterValue = parseInt(counterElmnt.textContent);
// revlinkクラスの要素を取得
var revlinkElmnt = document.querySelector('.revlink');
// counterの値に応じてrevlinkの表示・非表示を切り替え
if (counterValue >= 30) {
revlinkElmnt.style.display = 'inline';
} else {
revlinkElmnt.style.display = 'none';
}
});
</script>
④最後に、これら全部を [[IF(selected-cat): ~ :IF]] で囲みます。(①はこの範囲外にあっても構いませんが。)
上記のようにすると、
- カテゴリ限定表示時にだけ、(=④)
- いま見えている総投稿数が30件以上のときに限って、(=③)
- 逆順に表示するリンクが見える。(=②)
なお、①の数値は、そのまま何らかの表示に使っても良いですし、使い道がない場合はCSSで非表示にしておけば良いです。 .counter { display:none; } みたいな感じで。もし既に counter というclass名を別の用途で使っている場合は、上記のソースでは別の適当なclass名に置き換えて使って下さい。(※お使いのスキン内で、既に counter というclass名を使っている場合に、上記のソースのままを書くと、総表示件数を正しく取得できない可能性があります。)
もう一つ質問なのですがURL末尾にreverseを付ける(逆順に見る)をカテゴリ限定かつそのカテゴリの投稿が30件以上あれば表示、なければ非表示にってできますかね……?
カテゴリ「あ」に属する投稿を、カテゴリツリーから「あ」を選択したときにのみ表示、アクセスできるようにさせるにはIF文では難しいですか?やろうとしているのですが[[IF(selected-cat cat-a):中身:IF]]中身の部分になんとかいたらよいのか……(そもそもこの書き方が違うのかもですが……;;)
🧀Re:4504◆現状のバージョンでどうにかするとしたら、もし時系列順で表示するのが小説だけなのであれば、時系列順 の表記登録を 小説 にすれば、「人間失格(小説)」となって、さほど違和感はないのではないでしょうか? 連載小説 とすれば、「人間失格(連載小説)」となって、複数投稿に分割されていることがむしろ分かりやすいかも知れませんし。もしくは 連載順 とか 話数順 とか。「連載順」なら掲載するのが小説だけではない場合でも、あまり違和感なく済むかもしれませんね。
ちなみに、『見出しの表示をもう少しだけ柔軟に変更できると利便性が増してありがたい』という点は、「見出し」関連でどんな機能があれば便利でしょうか? 参考までに例を挙げて頂ければ、今後の開発の参考にさせて頂きます。
やはり(時系列順)という表示を省略することはできないのですね。
(^_^)と出力させるのは面白いのですが、タイトルの末尾に(^_^)が付くと煽ってる感がありますね(笑)「人間失格(^_^)」とか「推し、燃ゆ(^_^)」とか。ホラー作品だと、まったく怖くなくなりそうです😅
時系列順に表示させることは諦めて、完結済の作品については最終話から投稿することにします。連載中の作品は面倒ですが、投稿日を細工して一括編集でソートしてどうにかします。小説の公開に利用している方もそれなりにいらっしゃるようなので、表示順を設定から選択できるとか、見出しの表示をもう少しだけ柔軟に変更できると利便性が増してありがたいです。
とはいえ、もう「てがろぐ」なしではサイトの運営ができないほどに利用させていただいていますので、にししさんには感謝の言葉もありません。
本当にありがとうございます🙇♀️
以前、下書きの場合にもリンクが表示される件と、[[NAVI:PREVNEXT]]でPREVとNEXTが個別にレイアウトできると嬉しいと投稿した >>4062 です。
その後のバージョンアップで全て解決してくださっていて、感激しました。本当にありがとうございました。
今回は【状況に応じた見出し】について質問させてください。
てがろぐを利用して小説を公開しているのですが、order=reverseを利用して時系列順に表示させています。
表示形態は「列挙」に設定してカテゴリ名(=作品タイトル)のみが表示されるようにしているのですが、ブラウザタブに「カテゴリ名(時系列順)」と表示されてしまうのです。この「(時系列順)」という文言を表示させないような方法はないでしょうか。
にししさんありがとうございます!!!
何となく見逃していました...ありがとうございました!!
カテゴリ別URLの末尾に &mode=rss を加えるだけです。
例:
- カテゴリ「メモ」のRSS ➡ https://~/tegalog.cgi?cat=memo&mode=rss
- カテゴリ「情報」のRSS ➡ https://~/tegalog.cgi?cat=info&mode=rss
- カテゴリ「日記」のRSS ➡ https://~/tegalog.cgi?cat=diary&mode=rss
※使い方・設定方法ページの「条件を限定したRSSフィードの出力」項目もご覧下さい。
質問があります。カテゴリーごとにRSSフィードを分けることは可能だと思いますか?例えば、「メモ」カテゴリーだけのRSSがある。
検討いただければうれしいです。
🥟Re:4490◆具体策をどうもありがとうございます。管理画面は元々カラーテーマのようにカスタマイズすることを一切考えずに作ってたこともあって、なかなか装飾の調整は面倒だろうな、という気はしています。(^_^;) 最初から配色カスタマイズを前提にして製作していたら、もうちょっと違ったとは思うんですけどもね。当初はそこまで思い至っていなかったのでした。
🥟Re:4491◆画像を長押ししたときにメニューが開くのはブラウザ側の機能なので、てがろぐ側(Web側)でどうにかするのは難しそうな気がします。画像はリンクにしない状態で掲載しておいて(ポインターイベントを無効化しておいて)、「リンク先の画像をLighboxで開くテキストリンク」を設ける方法を使うくらいでしょうかね……? ➡『画像を直接埋め込まずに、画像へのテキストリンクとして掲載しつつ、リンク先の画像はLightboxで見せたい場合の書き方』
◆なお、Lighboxでは、拡大された画像を <img class="lb-image" ~> のようなHTMLで表示していますので、このclassだけをターゲットにしてポインターイベントを無効化すればお望みの動作(Lighboxによって拡大された画像を長押ししてもブラウザ側のメニューが出なくなる動作)になるかもしれません。
つまり、.lb-image { pointer-events: none; } ということですが。
◆もしくは、Lighbox以外の画像拡大スクリプトをお使いになる手もあるかもしれません。(設定で任意のスクリプトに切り替えられます。➡『Lightbox以外の画像拡大スクリプトを読み込んで使う方法』)
🥟Re:4493◆何でもダークモードにしてくれるアドオンもあるんですねえ。任意のWebの明暗を反転させるのは、言葉では簡単そうですけどもなかなか(見やすさを確保した上でそうするのは)大変そうな気がしますので、その辺も自動でうまくしてくれるのなら、かなり手間が省けますね。
🥟Re:4495◆そうですね。そのスキンに付随する設定項目がすべて本番確定されてしまうバグでしたので、(ギャラリーモードとサイトマップページモードに関しては)管理画面の補助出力で「1ページあたりに表示される投稿数」・「日付境界バーを挿入するかどうか」・「該当件数とページ番号を表示するかどうか」の設定も可能でしたから、これらも上書きされてしまう動作になっていました。今回のバージョンで、それらも一括解消されています。(要は、設定が上書き保存されてしまわないように修正しましたので。) てがろぐのご活用をどうもありがとうございます!(╹◡╹)ノ
スキンが勝手に外れてしまう&記事の1ページ辺りの表示数を管理画面で指定すると、元に戻ってしまうという状況になっていました。
サイトマップとページの所の2つでした。
直接指定スキンに記述して回避していたのですが、今回の修正で後者もよくなってる気がします。
ずっとおま環かと思ってましたが、今度おかしなことがあれば原因がわからなくても報告を上げようかと思います。
てがろぐは創作の公開用や自分趣味部屋などで重宝しています。
作ってくれてありがとうございます🙏✨
にししさん、>4490さん、4493さん
ユーザーCSSの拡張機能やコードを教えていただきありがとうございます。
そういう機能があることを知りました。便利ですね。
おかげで眩しくなくて使いやすいです。
ありがとうございました。
ユーザーCSSならStylusが良いと思いますが、個別にCSSを書かなくてもほぼどこでもダークモードにできる拡張機能もありますよ。
私はDark Reader を使っています。
簡単に済ませたい場合はこういうのでもいいかなと
現在、画像を投稿をすると画像は自動的にURLが発行され、長押し(スワイプ)すると画像のURLをコピーして画像のみを別窓で画像のみを開けるようになってると思います。
それをオフにしたいのですがCSSに『 img{pointer-events: none; }』を記入してしまうと、lightboxの画像サムネイル画像タップ→大きく表示ができなくなってしまいます。これ以外の方法で画像長押しオフにする方法はありますか?
また、要望になってしまいますがもし可能でしたらlight boxの詳細機能の中で画像の長押し(スワイプ)のみを有効/無効の切り替え機能が欲しいです…
ユーザーCSSの拡張機能は私も「Stylus」がおすすめです。
自分用に作った管理画面をダークモードにするCSSがあるので、こちらに貼っておきます。
※ただしカラーテーマが適用されなくなります(カラーテーマごとに書き換えはしていないので)。ところどころ未対応のまま放置しています……(笑)。
body {
background-color: #121212 !important;
color: #e9eef4 !important;
}
a,
#copyright a:link,
.shortcutlinklist li a {
color: #99ccff;
}
a:visited,
#copyright a:visited {
color: #3399ff;
}
.shortcutlinklist li a {
color: #99ccff !important;
}
#contents {
background-color: #181818 !important;
border-color: #444 !important;
}
#header {
background-color: #353535 !important;
color: #fff !important;
border-bottom-color: #444 !important;
}
textarea.tegalogpost {
background-color: #202124 !important;
color: #e9eef4 !important;
}
.decoBtns input {
background-color: #424242 !important;
color: #fff !important;
}
.decoBtns input:hover,
.btnlink:hover,
.adminhome a:hover {
background-color: #777 !important;
border-color: #0078d7 !important;
}
.adminhome a {
background-color: #424242 !important;
color: #fff !important;
}
.appname a {
color: #5cbd5c !important;
}
.deleteButton:hover {
background-color: #caaf87 !important;
color: crimson !important;
border-color: crimson !important;
}
fieldset,
.helpbox .help {
background-color: #202124 !important;
border-color: #666 !important;
}
.systemhelpbox,
.noticebox,
.categoryTreeBox {
background-color: #35352b !important;
border-color: #777 !important;
}
.shortcuslinkbox {
background-color: #282828 !important;
}
.helpbox .help {
fill: #9cf !important;
}
.helpbox .help:hover {
background-color: #515141 !important;
}
.situationPreviewBox {
background-color: #222220 !important;
color: #0c9f0c !important;
border-color: #880 !important;
}
table.standard th {
background-color: #4f5b4f !important;
}
.btnlink {
background-color: #484848 !important;
color: #fff !important;
}
.important {
color: #ff4141 !important;
}
.tab {
border-color: black !important;
background-color: #424242 !important;
color: #e1e1e1 !important;
}
.tab:hover {
background-color: #4e624e !important;
color: lime !important;
cursor: pointer !important;
}
#tabcontent1,
input:checked+#tab1,
#tabcheck1:checked~#tabbtm1 {
background-color: #4d3333 !important;
}
input:checked+#tab1,
#tabcheck1:checked~#tabbtm1 {
color: #ff7c7c !important;
}
#tabcontent2,
input:checked+#tab2,
#tabcheck2:checked~#tabbtm2 {
background-color: #424231 !important;
}
input:checked+#tab2,
#tabcheck2:checked~#tabbtm2 {
color: #acac13 !important;
}
#tabcontent3,
input:checked+#tab3,
#tabcheck3:checked~#tabbtm3 {
background-color: #494f3a !important;
}
input:checked+#tab3,
#tabcheck3:checked~#tabbtm3 {
color: #9ed200 !important;
}
#tabcontent5,
input:checked+#tab5,
#tabcheck5:checked~#tabbtm5 {
background-color: #576260 !important;
}
input:checked+#tab5,
#tabcheck5:checked~#tabbtm5 {
color: #00ffc6 !important;
}
#tabcontent4,
input:checked+#tab4,
#tabcheck4:checked~#tabbtm4 {
background-color: #565664 !important;
}
input:checked+#tab4,
#tabcheck4:checked~#tabbtm4 {
color: #01016f !important;
}
.imageuploadarea {
background-color: #626255 !important;
}
.embcode {
background-color: #464a46 !important;
}
.nowHover {
background-color: #66665e !important;
}
.nowHover .embcode {
background-color: #7d7d65 !important;
}
form.export {
margin: 1em 0 !important;
padding: 1em !important;
background-color: #3a3c3a !important;
}
.scrollBtns a:link {
color: #fff !important;
line-height: 1 !important;
text-align: center !important;
}
.inputguide {
color: #9b9b9b !important;
}
legend a {
color: #fff !important;
}
.sessionguide {
color: #aaa !important;
}
.systemmenucategory {
color: #0bb !important;
}
.categoryTree {
background-color: #484840 !important;
border-color: #666 !important;
}
.categoryOptions {
background-color: #484840 !important;
}
/* TegUp */
.localver {
background-color: #272827 !important;
color: #00b000 !important;
}
.latestver {
background-color: #262628 !important;
color: #88f !important;
}
.subGuide {
color: #999 !important;
}
.taskLog {
background-color: #212121 !important;
border-color: #444 !important;
}
.taskLog li:nth-child(2n) {
background-color: #2b2b2b !important;
}
.taskLog time {
color: #8484ff !important;
}
.taskLog i {
color: #00a5bd !important;
}
.themeKRM .systemmenu li a {
background-image: linear-gradient(0deg, #1e1e1e, #353535);
}畳む
🍕Re:4488◆特定のWebに自分の好きなCSSを追加できる「ユーザースタイルシート」という機能をブラウザに加えるアドオンがいくつか出ています。そういうのをお使いになれば、何でも好きなCSSを管理画面に加えられますのでご活用下さい。あくまでも「自分の使っているブラウザだけ」でしか適用されませんが(=他の閲覧者には一切影響しませんが)、自分だけが使う管理画面の装飾を調整したいだけならそれで事足りるのではないかと思います。ユーザースタイルシート機能を加えてくれるアドオンについては、Geminiに尋ねてみた結果もご参照頂くと良いかもしれません。
要望なのですが、管理画面のテーマにダークカラーを実装してほしいです。
新規投稿/編集画面にCSSを適用できるのですが、それ以外の所がまぶしくて長時間画面が見られません。
それか管理画面の色だけでもこちらで好きに設定できるようにしてほしいです。
よろしくお願いいたします。
2024年5月 この範囲を時系列順で読む この範囲をファイルに出力する
🆕 Ver 4.3.1βの更新点(概要):
《▼新機能》
🌺鍵付き投稿で、本文の1行目だけでなくさらに2行目も常時見せるようにできる設定機能。
🌺ログイン者限定動作時にTOPに表示されるメッセージを自由に書き換える機能。
《▼仕様改善》
🌸任意のディレクトリにあるスキンを手動指定できる設定項目を、条件によっては非表示にするよう改善。
《▼不具合修正》
❎ある条件を満たすと『簡易適用スキンの設定が勝手に切り替わってしまう』バグ(表示上の問題)を修正。(※Ver 3.9.3β以降すべてに存在したバグ)
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
🍘SNSでのアナウンス:
Mastodon(Pawoo)
Bluesky
Twitter:
(ツイート埋め込み処理中...)Twitterで見る
現在非公開てがろぐを、「iOSからでもWindowsからでも機種問わずアクセスできて同期できるオンラインメモ帳」として使っております。
iPAD+Windowsで同期できるメモアプリはあれもこれも試しましたが、今のところつぶやき感覚で気軽に投稿できるのが気に入っています。同期できるタイプのオンラインメモ帳、会社によっては画像が貼れなかったり気楽に書けなかったり台数制限があったり、と欠点があるので、てがろぐは大変気に入っております~