動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「付箋型スキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)シンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る

てがろぐ - Fumy Otegaru Memo Logger -

or 管理画面へ

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

2023年7月 この範囲を時系列順で読む この範囲をファイルに出力する

Icon of sakura 付箋No.3863 (146文字) 編集 削除
わたしもどこかで見た気がする。。。確かいろいろなサイトの記法に対応していたはず。

これは検索したらみつけたやつ
各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita
https://qiita.com/8amjp/items/d7c46d9dee0da4d530ef
Icon of admin 付箋No.3862 (147文字) 編集 削除
>>3859
そういえば、それ系の処理を以前にどなたかがJavaScriptで実現なさっていませんでしたっけね……?
↓pixivのルビ記法しか見つけられませんでしたが、これですかね

pixiv記法のままルビタグへ変換するJavaScript
https://ofuse.me/e/26443
NO IMAGE 付箋No.3861 (332文字) 編集 削除
🍧Re:3860◆ああ、確かに現状では li要素に対しては何のclass名も付加されていないですね。カテゴリツリーを構成するli要素も、例えば <li class="catbranch cat-info"> みたいな感じでclass名を割り振るようにした方が良いですかね?(※catbranch は共通のclass名、cat-info は「infoカテゴリ」固有のclass名)

(※CSSの :has()擬似クラス があらゆるブラウザで使用可能なら、これを使って li:has(.cat-info) みたいに書けば、「cat-infoクラスが含まれているli要素」だけを対象に装飾はできるのですけどもね。残念ながらFirefoxがまだです。)
Icon of admin 付箋No.3860 (104文字) 編集 削除
てがろぐ、とっても便利で本当に感謝です!
[[CATEGORY:TREE]] についてお伺いしたいのですが、各 li にカテゴリIDをクラスとして付与することはできるでしょうか?
NO IMAGE 付箋No.3859 (413文字) 編集 削除
🍧Re:3858◆そういえば、それ系の処理を以前にどなたかがJavaScriptで実現なさっていませんでしたっけね……? 各種小説投稿サイトフォーマットで書いたルビ記法を解釈して動的にルビとして表示するようにするスクリプトを((当初は)てがろぐスキンに加える用途として)お作りになっていたのをどこかで目撃したような気がするのですが。気のせいだったかな……? てがろぐを小説公開用途にお使いの方々も多いようですから、既に稼働しているスクリプトもありそうな気もしますけども。

稼働しているCGIのソースを修正すると、おっしゃるとおりバージョンアップの度に書き換える必要が出てきて面倒ですね。ユーザ指定の文字列を正規表現として解釈して装飾記法に変換できるような設定と動作を加えるのは、(セキュリティ面の配慮も含めると特に)なかなか大変そうなので、JavaScriptで済むならJavaScriptでご対応頂けるとありがたいです。
Icon of admin 付箋No.3858 (282文字) 編集 削除
この度、てがろぐを導入させていただきました。
さっそく要望なのですが、独自の装飾記法を追加できる設定があると嬉しいです。
たとえばルビを「[R:漢字:ひらがな]」ではなく「|漢字《ひらがな》」で書けるようにしたりできるように……

まあcomdecorate関数内に(自己責任で勝手に)
$ts =~ s/[||]([^||\n]+?)《(.+?)》/<ruby>$1<rp>(<\/rp><rt>$2<\/rt><rp>)<\/rp><\/ruby>/g;
などと足してしまってもいいのですが……アップデートのたびに本体を弄りなおすのもどうかというのもあるので。
Icon of admin 付箋No.3857 (95文字) 編集 削除
🍭Re:3854
ご回答ありがとうございます!
対処法について、確認させていただきました。
JavaScript変数で記述する方法を試してみます。
お早いご返信、誠にありがとうございました!
NO IMAGE 付箋No.3856 (749文字) 編集 削除
かき氷を買ってきました。🍧🍧🍧

🍧Re:3854◆下記のⒶではなくⒷの順序で書くと、少なくとも引用符内が『半角スペースで終わる』ことは避けられます。
  • <div class="onelogbox [[CATEGORYIDS:IFEMPTY:hogehoge]] [[POSTSTATUS]]">
  • <div class="onelogbox [[POSTSTATUS]] [[CATEGORYIDS:IFEMPTY:hogehoge]]">
もちろん、POSTSTATUSに何も挿入されない場合は、区切りの半角スペースが2つ連続で入ってしまいますが。
この半角スペースは、てがろぐが生成しているわけではなく、スキンHTMLソースに直接書かれているものですから、てがろぐ側ではどうにもできないのです。HTMLの文法的には半角スペースがいくつ入っていても問題はないので、そのままお使い頂けば良いと思うのですが、どうしても気になる場合は、以下の対処法もあります。
  1. let pstatus = "[[POSTSTATUS]]"; のようにJavaScriptで変数に入れてから、値がある場合だけclass属性値に合成するようスクリプトを書く。
  2. <div class="onelogbox"><div class="[[CATEGORYIDS:IFEMPTY:hogehoge]]"><div class="[[POSTSTATUS]]"> のように、div要素を分割する。
後者(2)の場合なら、POSTSTATUSに何も挿入されない場合でも class="" となるだけなので半角スペースは入りません。

🍧Re:3855◆有用なTipsをどうもありがとうございます!
Icon of admin 付箋No.3855 (1927文字) 編集 削除
いつもてがろぐに大変お世話になってます。
投稿記事の単独表示時にページタイトル(title要素、htmlのtitleタグの中身)へ記事タイトルや投稿本文の一部を入れる方法は以前>>3293さんがjQueryで実現されてましたが、自サイト用にjQueryを使わないJavaScriptで同じようなものを作ったのでお裾分けします。

外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記ソースを貼り付けるか、<script>~</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から呼び出せば動くはずです。
私のサイトおよびローカル環境の公式スキンで動作確認済みですが、書き方が間違ってる等のツッコミがありましたらお教え下さると幸いです。

ブログタイプスキン向け(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
<script>
window.addEventListener('load', function() {
   let nowurl = location.href;   //現在のURL
   let singleurl = nowurl.indexOf('postid=');   //記事単独表示かをURL内からpostid=の有無で判別

   //postid=がURLに含まれる場合のみ実行
   if( singleurl != -1){
      let Basetitle = document.title;   //元のページタイトルを変数に入れておく
      let ArticleTitleget = document.querySelector('.logtitle');   //logtitleクラスのhtml要素を取得
      let ArticleTitle = ArticleTitleget.innerText;   //logtitleクラスのテキストだけ取得
      document.title = Basetitle + ' - ' + ArticleTitle;   //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
   }
});
</script>
畳む


標準スキンや昔のツイッターっぽいスキンなど、ブログタイプ以外のスキン向け(Twitterのように、投稿本文の冒頭部分から指定文字数をtitle要素に入れる)
<script>
window.addEventListener('load', function() {
   let nowurl = location.href;   //現在のURL
   let singleurl = nowurl.indexOf('postid=');   //記事単独表示かをURL内からpostid=の有無で判別

   //postid=がURLに含まれる場合のみ実行
   if( singleurl != -1){
         let Basetitle = document.title;   //元のページタイトルを変数に入れておく
         let ArticleTitleget = document.querySelector('.comment');   //commentクラスのhtml要素を取得
         let ArticleTitle1 = ArticleTitleget.innerText;   //commentクラスのテキストだけ取得
         let textcount = 30;   //ここで本文から切り出す文字数を指定
         let ArticleTitle = ArticleTitle1.substring(0, textcount);   //0の部分を変えると切り出し開始位置を変更可能
      document.title = Basetitle + ' - ' + ArticleTitle;   //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
   }
});
</script>
畳む


 document.querySelector('.●●●')の部分はhtml内のクラス名であれば何でも指定できます。
たとえば私のサイトの場合、投稿記事本文の1行目じゃない部分に強調装飾記法をつけて記事タイトル代わりの表示をしているのですが、decorationEクラスを指定すれば本文内の位置に関係なく強調装飾している部分だけがページタイトルに入ります。(1記事内に1回以上強調装飾を使っていないという条件はつきますが…。)
Icon of admin 付箋No.3854 (416文字) 編集 削除
🍨Re:3853
早速のご回答、ありがとうございます!
塩分補給は大事ですが、塩分過多も心配ですね。ご自愛ください。

記述を変更しましたところ、無事にclassに反映されました!
スキンカスタムの自由度が上がって嬉しく思います。

ただ、残念ながら空白スペースは残ってしまいました。。
<div class="onelogbox [[CATEGORYIDS:IFEMPTY:hogehoge]] [[POSTSTATUS]]" id="pos[[LOOPCOUNT]]">
先程の投稿の記述例とclassの順序は、半角スペース位置がわかりやすいかと思い変更しております。

<div class="onelogbox hogehoge " id="pos1">
となります。
これは「機能」のclassが生成されないから、という理由はわかるのですが、方法はございますでしょうか?
NO IMAGE 付箋No.3853 (406文字) 編集 削除
塩分補給に梅塩飴をなめています。美味いんですけども、問題は塩分不足を防ぎつつ塩分過多も防ぐバランスをどこで判断すれば良いのか……。^^;🍬🍬🍬

🍬Re:3852◆てがろぐをご活用下さってありがとうございます。(╹◡╹)ノ その場合は、
  • [[CATEGORYIDS]] の代わりに
  • [[CATEGORYIDS:IFEMPTY:hogehoge]] を使って頂くと
お望みの動作になると思います。この場合、もしカテゴリが1つもない場合には「hogehoge」が挿入されます。(それによって、2番目の問題も解決しますね。「何も出力されない」というケースがなくなりますから、半角スペースだけが入るケースがなくなりますので。)

hogehoge の部分には、何でもお好きな文字列を入れてお使い頂けます。例えば no-cats など分かりやすい文字列を出力なさると良いのではないかと思います。
Icon of admin 付箋No.3852 (669文字) 編集 削除
こんばんは、てがろぐには大変お世話になっております。
カテゴリのclass読み込みについて質問失礼いたします。
1投稿ごとのボックスのdivにカテゴリclassを追加したいと考えております。

通常のスキンですと以下の通りとなっている部分ですが、
<div class="onelogbox [[POSTSTATUS]]" id="pos[[LOOPCOUNT]]">
このように変更することで、カテゴリIDをclassとして表示することができました。
<div class="onelogbox [[POSTSTATUS]] [[CATEGORYIDS]]" id="pos[[LOOPCOUNT]]">

ですが、未分類カテゴリはclassが生成されず、空白のままとなります。
未分類カテゴリのIDを設定できる箇所はございますか?
見落としがあったなら申し訳ございません。

また、生成後のclass表示の際、なにか機能を含めた場合、こうなると思いますが、
<div class="onelogbox logstatus-fixed categoryID" id="pos1">
カテゴリID・機能がない場合、半角スペースが残ったままになります。
<div class="onelogbox " id="pos1">

表示としては問題ないかと思いますが、記述スタイルとしては少々気になる部分でして、
なにか対処法はございますでしょうか?
大変お手数ですが、お手すきの際にご確認いただけますと幸いです。
何卒よろしくお願いいたします。
Icon of admin 付箋No.3851 (3文字) 編集 削除
Icon of admin 付箋No.3850 (4文字) 編集 削除
Icon of tomoyo 付箋No.3849 (1文字) 編集 削除
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
Icon of admin 付箋No.3848 (31文字) 編集 削除
>>3847
完売早すぎ😅
今日発売なのに…どんだけ人気なの🤣
NO IMAGE 付箋No.3847 (137文字) 編集 削除
🍧Re:3846◆おお、そんなコラボが。これ https://www.uniqlo.com/jp/ja/special-feature/ut/clamp ですね。さくらたんTシャツ、ほぼ完売しとる……。ピンクの方は全サイズ完売で、白の方は辛うじてSとMだけ残っているような。
Icon of admin 付箋No.3846 (56文字) 編集 削除
ユニクロ×CLAMP。
ユニクロ、コラボしすぎ問題
個人的にはGUが小島秀夫氏とコラボしたのが一番衝撃でした。うちにTシャツあるですよ…。
Icon of admin 付箋No.3845 (3文字) 編集 削除
NO IMAGE 付箋No.3844 (775文字) 編集 削除
今日も、かき氷(宇治金時)を食べました。🍧🍧🍧

🍧Re:3843◆ちょいとご要望の内容が見えてこないので、もう少し詳しく教えて欲しいのですが、
そのモードが「載せているすべての画像を表示する」のであれば
➡ 検討中のイメージリストモードは、新着画像リストと同様に「アップロードされている全部の画像」を「画像だけ」見せる形態です。投稿に掲載されているかどうかに関係なく、投稿に使われていない画像も含めてすべての画像が表示されるモードを想定しています。
「載せている」という表現だと少々曖昧なのでご認識内容が明確には分かりませんが、もし「画像保存用ディレクトリにアップロードされている」という意味でおっしゃっているならその通りですが、「投稿に掲載されている」という意味でおっしゃっているなら若干異なります。
投稿のn枚目を表示
➡ 投稿に含まれるn番目の画像を表示するには [[ONEPICT:n]] 記法が使えますが、この方法では何か不都合がありますか?
クリックすると(個別記事に飛ばず)そのままlightbox等でその投稿に含まれる画像が見れる
➡ これは残念ながら、てがろぐの仕様では無理です。てがろぐでは画像と投稿は紐付いておらず別管理なので、記事を表示しない状態では「どの画像がどこで使われているのか」が何も分からないので、「この画像とこの画像が同じ記事で使われている」といった情報を得る方法がありませんので。(しかも、同じ画像を複数の投稿に使うこともできますから。)
イメージとして<a href="[[GETURL:PICT:1]]" data-lightbox="[[postid]]">みたいな事ができればな〜と
➡ これはまさしくそうスキンに書くことで実現できると思うのですが、そうできない問題が何かありますでしょうか?
Icon of admin 付箋No.3843 (283文字) 編集 削除
こんにちは。めちゃくちゃ暑いですね…💦
イメージリストモードのお話が出ていましたが、そのモードが「載せているすべての画像を表示する」のであれば、差別化として、
  1. 投稿のn枚目を表示
  2. クリックすると(個別記事に飛ばず)そのままlightbox等でその投稿に含まれる画像が見れる

というモードもあると嬉しいです。
私も投稿に複数画像を載せる事が多いのですが、イメージとして<a href="[[GETURL:PICT:1]]" data-lightbox="[[postid]]">みたいな事ができればな〜と思いまして。ご検討いただけましたら幸いです。#要望
Icon of admin 付箋No.3842 (68文字) 編集 削除
>>3841
ありがとうございます。変更した箇所が自分でわからなくなってしまったので(苦笑)、カテゴリ以降をコピペし直して戻しました。
NO IMAGE 付箋No.3841 (498文字) 編集 削除
🍧Re:3840◆「他の部分を変にした」のが原因なら、直すのはその「他の部分」でないと元に戻らないと思います。
その「他の部分」をそのままにしてどうにかしたい場合には、確かに「日付別リスト」の部分( .datelistarea )に望みの装飾を書くと良いです。

ただ、その場合は「他の部分を変にした結果」を打ち消すような装飾も一緒に書かないと望みの装飾にならない可能性がありますので、無駄なソースが増えることになりますし、何より「他の装飾を打ち消す方法」を編み出さないと望みの装飾ができません。なので、原因になっている「他の部分」を元に戻す方が楽な可能性もあります。

CSSは「ある部分の変更が別の部分にも及ぶ」という可能性がありますので、『変になった箇所をそのまま放置してさらに変更を加えていく』方法で書き進めると、やがてCSSソースが理解しにくいスパゲッティになっていきます。(^_^;)「ああ、何か変になったな」という場合は、ひたすらUndoして、変にならない状態にまで戻してやり直す方が、結果的には分かりやすいソース(=将来的にもカスタマイズしやすいソース)を維持できると思います。
Icon of admin 付箋No.3840 (138文字) 編集 削除
>>3839
3838です。枠線についてありがとうございました!破線に変更できました。
また他の部分を変にしてしまい、日付一覧とRSSフィールド〜の背景色が消えてしまいました。
位置も左側に寄ってしまったのですが、直す箇所としてはCSSのサブ領域(日付別リスト)でしょうか?
55DD5272-0F6F-4B94-B91C-62479143CE18.jpeg
NO IMAGE 付箋No.3839 (346文字) 編集 削除
🍧Re:3838◆投稿1つ1つの下部に表示される線は、投稿1つを作っているボックス .onelogbox の「下側の枠線」(=border-bottom) として指定してあります。
  • 標準スキンの場合は border-bottom: 1px #ccc dashed; になっていますので、太さ1pxの灰色の破線で表示されます。
  • 昔のTwitterっぽいスキンの場合は border-bottom: 1px #e6ecf0 solid; になっていますので、太さ1pxの薄い灰色の実線で表示されます。
したがって、この箇所を修正すれば自由に線を変更できます。
CSSをカスタマイズする際は、CSSソースの中で .onelogbox を検索してみて下さい。
Icon of admin 付箋No.3838 (141文字) 編集 削除
>>3835
3834です。お返事ありがとうございました。
質問した件はなんとか調べて調整できました。
また此処では本文投稿の下が破線になっていますが、これはcssにあるdecoration?で破線にできるでしょうか?
変更、追加する箇所を教えていただきたいです。度々ですみません
NO IMAGE 付箋No.3837 (339文字) 編集 削除
かき氷(宇治金時)を食べました。🍧🍧🍧

🍧Re:3833◆ご返答ありがとうございます。たこ焼きの絵文字はぜひともUnicodeに加えて欲しいのですけどもね~。あれほどたくさん並べて遊べる絵文字もそうそうないんじゃないかと思うんですが。(笑)
🍧Re:3834◆てがろぐのご活用をありがとうございます。どの部分をどんな感じになさりたいか、もう少し具体的に図示などして頂けましたら何らかの回答ができるのではないかと思います。
🍧Re:3835◆ご返答ありがとうございます。ⓐで良いなら実装も簡単なので楽で良いです。(╹◡╹)
🍧Re:3836◆ご返答ありがとうございます。とりあえずⓐで良さそうな感じですね。その方向で計画します。
Icon of sakura 付箋No.3836 (40文字) 編集 削除
>>3822
独自絵文字に投票した者です
A案を想定していたのでA案が良いです🍗
Icon of admin 付箋No.3835 (96文字) 編集 削除
>>3832

ⓐ を想定していました。「元のファイル名をできるだけ維持する」を愛用しているので
単純に使えるだけで嬉しいとしか考えてなかったので、Bのような細やかさの発想はありませんでした
Icon of admin 付箋No.3834 (88文字) 編集 削除
質問失礼します。
スキンをツイッターにして作成しているのですが、
投稿文章と画像が左端に寄る、下の空白が狭いので調整したいのですが、どの部分でどう編集すれば良いのでしょうか…?

■フリースペース:

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

編集

■全文検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

■カテゴリ:

■ハッシュタグ:

■日付一覧:

■カレンダー:

2023年7月
1
2345678
9101112131415
16171819202122
23242526272829
3031

■日付検索:

■最近の投稿:

■新着画像リスト:

全297個 (総容量 35.03MB)

■情報:

▼現在の表示条件での投稿総数:
4222件

▼最終更新日時:
2024年3月28日(木) 23:42:00〔4時間前〕

■リンク:

てがろぐTOPへ戻る

RSS / 新規投稿 / 管理画面

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「付箋型スキン」です。他に、 標準スキン昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)シンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る