てがろぐ
- Fumy Otegaru Memo Logger -
カテゴリ「カテゴリなし」の投稿［3935件］（35ページ目）
>>3858
自分も>>3863を参考にしたんですけど、ルビ置換スクリプトを使ってるのでシェアします。
以下をskin-cover.html内に書き込んでください。
<script src="jqueryのURL"></script>
<script>
$(function(){
$('.onelogbox').each(function() {
$(this).html(
$(this).html()
/* 青空文庫、なろうほか（なろうの半角括弧・全角括弧は非対応） */
.replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
.replace(/[\|｜]《(.+?)》/g, '《$1》')
/* pixiv */
.replace(/\[\[rb:(.*?) > (.*?)\]\]/gs, '<ruby>$1<rt>$2</rt></ruby>')
/* アルファポリス */
.replace(/#(.+?)__(.+?)__#/g, '<ruby>$1<rt>$2</rt></ruby>')
);
});
});
</script>
これで、
「｜ルビ対象《るびるび》」全角縦棒＋二重山括弧
「|ルビ対象《るびるび》」半角縦棒＋二重山括弧
にルビがつきます。
二重山括弧の直前に縦棒で二重山括弧がそのまま表示されます。「｜《これはそのまま》」
開始の全角縦棒・半角縦棒の省略は対応していません。
自分で使っててトラブルはないんですけど何か間違ってたらごめんなさい～～
追記
URL以降が省略されてしまうのでjqueryのURLを抜きました。以下のURLを「jqueryのURL」の部分に書き込んでください。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jq...
自分も>>3863を参考にしたんですけど、ルビ置換スクリプトを使ってるのでシェアします。
以下をskin-cover.html内に書き込んでください。
<script src="jqueryのURL"></script>
<script>
$(function(){
$('.onelogbox').each(function() {
$(this).html(
$(this).html()
/* 青空文庫、なろうほか（なろうの半角括弧・全角括弧は非対応） */
.replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
.replace(/[\|｜]《(.+?)》/g, '《$1》')
/* pixiv */
.replace(/\[\[rb:(.*?) > (.*?)\]\]/gs, '<ruby>$1<rt>$2</rt></ruby>')
/* アルファポリス */
.replace(/#(.+?)__(.+?)__#/g, '<ruby>$1<rt>$2</rt></ruby>')
);
});
});
</script>
これで、
「｜ルビ対象《るびるび》」全角縦棒＋二重山括弧
「|ルビ対象《るびるび》」半角縦棒＋二重山括弧
にルビがつきます。
二重山括弧の直前に縦棒で二重山括弧がそのまま表示されます。「｜《これはそのまま》」
開始の全角縦棒・半角縦棒の省略は対応していません。
自分で使っててトラブルはないんですけど何か間違ってたらごめんなさい～～
追記
URL以降が省略されてしまうのでjqueryのURLを抜きました。以下のURLを「jqueryのURL」の部分に書き込んでください。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jq...
てがろぐのYouTube埋め込み機能だと、ショート動画は埋め込められないということに気付きました。そのうち対応させますが、今の時点でも以下のように共有用URLを書き換えるとショート動画でも埋め込めます。#🌱豆知識
- 埋め込みたいショート動画の共有用URLが https://www.youtube.com/shorts/7ME7Dv1RFUk?feature=share のとき、このURLから 7ME7Dv1RFUk の部分だけを抜き出します。
- その抜き出した文字列を https://www.youtube.com/watch?v= の後に続けて記載します。つまり、https://www.youtube.com/watch?v=7ME7Dv1RFUk のようなURLを作ります。
- そのURLを使って埋め込みます。
abcdefg
TwitterがXになるとのことですけど、それに伴ってURLが変わるという予想をしている方もいるみたいです。てがろぐのTwitter埋め込みも使えなくなったらと思うとちょっと心配です。まあ今の段階ではまだ何もわからないですけど……
🍉Re:3861
css調整の際に、liにもclassがあるととっても助かります……！
ご提案の内容で問題ありません！
実装されると嬉しく思います。
css調整の際に、liにもclassがあるととっても助かります……！
ご提案の内容で問題ありません！
実装されると嬉しく思います。
わたしもどこかで見た気がする。。。確かいろいろなサイトの記法に対応していたはず。
これは検索したらみつけたやつ
各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita
https://qiita.com/8amjp/items/d7c46d9dee0da4d530ef
これは検索したらみつけたやつ
各種小説投稿サイトのルビ記法をJavaScriptで実現する - Qiita
https://qiita.com/8amjp/items/d7c46d9dee0da4d530ef
>>3859
↓pixivのルビ記法しか見つけられませんでしたが、これですかね
pixiv記法のままルビタグへ変換するJavaScript
https://ofuse.me/e/26443
そういえば、それ系の処理を以前にどなたかがJavaScriptで実現なさっていませんでしたっけね……？
↓pixivのルビ記法しか見つけられませんでしたが、これですかね
pixiv記法のままルビタグへ変換するJavaScript
https://ofuse.me/e/26443
🍧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がまだです。）
（※CSSの :has()擬似クラス があらゆるブラウザで使用可能なら、これを使って li:has(.cat-info) みたいに書けば、「cat-infoクラスが含まれているli要素」だけを対象に装飾はできるのですけどもね。残念ながらFirefoxがまだです。）
この度、てがろぐを導入させていただきました。
さっそく要望なのですが、独自の装飾記法を追加できる設定があると嬉しいです。
たとえばルビを「[R:漢字:ひらがな]」ではなく「｜漢字《ひらがな》」で書けるようにしたりできるように……
まあcomdecorate関数内に（自己責任で勝手に）
$ts =~ s/[|｜]([^|｜\n]+?)《(.+?)》/<ruby>$1<rp>(<\/rp><rt>$2<\/rt><rp>)<\/rp><\/ruby>/g;
などと足してしまってもいいのですが……アップデートのたびに本体を弄りなおすのもどうかというのもあるので。
さっそく要望なのですが、独自の装飾記法を追加できる設定があると嬉しいです。
たとえばルビを「[R:漢字:ひらがな]」ではなく「｜漢字《ひらがな》」で書けるようにしたりできるように……
まあcomdecorate関数内に（自己責任で勝手に）
$ts =~ s/[|｜]([^|｜\n]+?)《(.+?)》/<ruby>$1<rp>(<\/rp><rt>$2<\/rt><rp>)<\/rp><\/ruby>/g;
などと足してしまってもいいのですが……アップデートのたびに本体を弄りなおすのもどうかというのもあるので。
🍭Re:3854
ご回答ありがとうございます！
対処法について、確認させていただきました。
JavaScript変数で記述する方法を試してみます。
お早いご返信、誠にありがとうございました！
ご回答ありがとうございます！
対処法について、確認させていただきました。
JavaScript変数で記述する方法を試してみます。
お早いご返信、誠にありがとうございました！
いつもてがろぐに大変お世話になってます。
投稿記事の単独表示時にページタイトル(title要素、htmlのtitleタグの中身)へ記事タイトルや投稿本文の一部を入れる方法は以前>>3293さんがjQueryで実現されてましたが、自サイト用にjQueryを使わないJavaScriptで同じようなものを作ったのでお裾分けします。
外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記ソースを貼り付けるか、<script>～</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から呼び出せば動くはずです。
私のサイトおよびローカル環境の公式スキンで動作確認済みですが、書き方が間違ってる等のツッコミがありましたらお教え下さると幸いです。
ブログタイプスキン向け(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
標準スキンや昔のツイッターっぽいスキンなど、ブログタイプ以外のスキン向け(Twitterのように、投稿本文の冒頭部分から指定文字数をtitle要素に入れる)
document.querySelector('.●●●')の部分はhtml内のクラス名であれば何でも指定できます。
たとえば私のサイトの場合、投稿記事本文の1行目じゃない部分に強調装飾記法をつけて記事タイトル代わりの表示をしているのですが、decorationEクラスを指定すれば本文内の位置に関係なく強調装飾している部分だけがページタイトルに入ります。(1記事内に1回以上強調装飾を使っていないという条件はつきますが…。)
投稿記事の単独表示時にページタイトル(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回以上強調装飾を使っていないという条件はつきますが…。)
🍨Re:3853
早速のご回答、ありがとうございます！
塩分補給は大事ですが、塩分過多も心配ですね。ご自愛ください。
記述を変更しましたところ、無事にclassに反映されました！
スキンカスタムの自由度が上がって嬉しく思います。
ただ、残念ながら空白スペースは残ってしまいました。。
<div class="onelogbox [[CATEGORYIDS:IFEMPTY:hogehoge]] [[POSTSTATUS]]" id="pos[[LOOPCOUNT]]">
先程の投稿の記述例とclassの順序は、半角スペース位置がわかりやすいかと思い変更しております。
<div class="onelogbox hogehoge " id="pos1">
となります。
これは「機能」のclassが生成されないから、という理由はわかるのですが、方法はございますでしょうか？
早速のご回答、ありがとうございます！
塩分補給は大事ですが、塩分過多も心配ですね。ご自愛ください。
記述を変更しましたところ、無事にclassに反映されました！
スキンカスタムの自由度が上がって嬉しく思います。
ただ、残念ながら空白スペースは残ってしまいました。。
<div class="onelogbox [[CATEGORYIDS:IFEMPTY:hogehoge]] [[POSTSTATUS]]" id="pos[[LOOPCOUNT]]">
先程の投稿の記述例とclassの順序は、半角スペース位置がわかりやすいかと思い変更しております。
<div class="onelogbox hogehoge " id="pos1">
となります。
これは「機能」のclassが生成されないから、という理由はわかるのですが、方法はございますでしょうか？
塩分補給に梅塩飴をなめています。美味いんですけども、問題は塩分不足を防ぎつつ塩分過多も防ぐバランスをどこで判断すれば良いのか……。^^;🍬🍬🍬
🍬Re:3852◆てがろぐをご活用下さってありがとうございます。(╹◡╹)ﾉ その場合は、
※hogehoge の部分には、何でもお好きな文字列を入れてお使い頂けます。例えば no-cats など分かりやすい文字列を出力なさると良いのではないかと思います。
🍬Re:3852◆てがろぐをご活用下さってありがとうございます。(╹◡╹)ﾉ その場合は、
- [[CATEGORYIDS]] の代わりに
- [[CATEGORYIDS:IFEMPTY:hogehoge]] を使って頂くと
※hogehoge の部分には、何でもお好きな文字列を入れてお使い頂けます。例えば no-cats など分かりやすい文字列を出力なさると良いのではないかと思います。
こんばんは、てがろぐには大変お世話になっております。
カテゴリの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">
表示としては問題ないかと思いますが、記述スタイルとしては少々気になる部分でして、
なにか対処法はございますでしょうか？
大変お手数ですが、お手すきの際にご確認いただけますと幸いです。
何卒よろしくお願いいたします。
カテゴリの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">
表示としては問題ないかと思いますが、記述スタイルとしては少々気になる部分でして、
なにか対処法はございますでしょうか？
大変お手数ですが、お手すきの際にご確認いただけますと幸いです。
何卒よろしくお願いいたします。
テスト
test
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
>>3847
完売早すぎ😅
今日発売なのに…どんだけ人気なの🤣
完売早すぎ😅
今日発売なのに…どんだけ人気なの🤣
🍧Re:3846◆おお、そんなコラボが。これ https://www.uniqlo.com/jp/ja/special-feature/ut/clamp ですね。さくらたんＴシャツ、ほぼ完売しとる……。ピンクの方は全サイズ完売で、白の方は辛うじてSとMだけ残っているような。
暑い！
こんにちは。めちゃくちゃ暑いですね…💦
イメージリストモードのお話が出ていましたが、そのモードが「載せているすべての画像を表示する」のであれば、差別化として、
というモードもあると嬉しいです。
私も投稿に複数画像を載せる事が多いのですが、イメージとして<a href="[[GETURL:PICT:1]]" data-lightbox="[[postid]]">みたいな事ができればな〜と思いまして。ご検討いただけましたら幸いです。#要望
イメージリストモードのお話が出ていましたが、そのモードが「載せているすべての画像を表示する」のであれば、差別化として、
- 投稿のn枚目を表示
- クリックすると（個別記事に飛ばず）そのままlightbox等でその投稿に含まれる画像が見れる
というモードもあると嬉しいです。
私も投稿に複数画像を載せる事が多いのですが、イメージとして<a href="[[GETURL:PICT:1]]" data-lightbox="[[postid]]">みたいな事ができればな〜と思いまして。ご検討いただけましたら幸いです。#要望
>>3841
ありがとうございます。変更した箇所が自分でわからなくなってしまったので（苦笑）、カテゴリ以降をコピペし直して戻しました。
ありがとうございます。変更した箇所が自分でわからなくなってしまったので（苦笑）、カテゴリ以降をコピペし直して戻しました。
>>3839
3838です。枠線についてありがとうございました！破線に変更できました。
また他の部分を変にしてしまい、日付一覧とRSSフィールド〜の背景色が消えてしまいました。
位置も左側に寄ってしまったのですが、直す箇所としてはCSSのサブ領域(日付別リスト)でしょうか？
3838です。枠線についてありがとうございました！破線に変更できました。
また他の部分を変にしてしまい、日付一覧とRSSフィールド〜の背景色が消えてしまいました。
位置も左側に寄ってしまったのですが、直す箇所としてはCSSのサブ領域(日付別リスト)でしょうか？
>>3835
3834です。お返事ありがとうございました。
質問した件はなんとか調べて調整できました。
また此処では本文投稿の下が破線になっていますが、これはcssにあるdecoration？で破線にできるでしょうか？
変更、追加する箇所を教えていただきたいです。度々ですみません
3834です。お返事ありがとうございました。
質問した件はなんとか調べて調整できました。
また此処では本文投稿の下が破線になっていますが、これはcssにあるdecoration？で破線にできるでしょうか？
変更、追加する箇所を教えていただきたいです。度々ですみません
>>3822
独自絵文字に投票した者です
A案を想定していたのでA案が良いです🍗
独自絵文字に投票した者です
A案を想定していたのでA案が良いです🍗
>>3832
ⓐ を想定していました。「元のファイル名をできるだけ維持する」を愛用しているので
単純に使えるだけで嬉しいとしか考えてなかったので、Bのような細やかさの発想はありませんでした
ⓐ を想定していました。「元のファイル名をできるだけ維持する」を愛用しているので
単純に使えるだけで嬉しいとしか考えてなかったので、Bのような細やかさの発想はありませんでした
質問失礼します。
スキンをツイッターにして作成しているのですが、
投稿文章と画像が左端に寄る、下の空白が狭いので調整したいのですが、どの部分でどう編集すれば良いのでしょうか…？
スキンをツイッターにして作成しているのですが、
投稿文章と画像が左端に寄る、下の空白が狭いので調整したいのですが、どの部分でどう編集すれば良いのでしょうか…？
>>3832
投票した者です。個人的にはⓐで十分だと思っています。にししさんのたこ焼きへの愛を感じました🐙
投票した者です。個人的にはⓐで十分だと思っています。にししさんのたこ焼きへの愛を感じました🐙
てがろぐ機能追加検討リストでは、『Ⓑ➑Misskeyみたいな独自絵文字表示機能』にも得票数が多かったのですけども、この機能を実装するとしたとき、下記のⓐ・ⓑの選択肢ではどちらの仕様の方が望ましいでしょうか？
自由度が高くて便利なのは ⓑ ですけども、実装に手間が掛かりそうなので。ⓐ で良いならシンプルな実装で済みそうですけどもね。
ご要望があればお知らせ下さい。
ⓐ カスタム絵文字専用のディレクトリを1つ管理画面で指定しておく。そのディレクトリ内に例えば takoyaki.png があれば、それを [:takoyaki:] の記述で表示できる。画像のUPには別途FTPソフト等を使う。
ⓑ てがろぐ管理画面上で画像をアップロードし、その画像が「どんな名称でカスタム絵文字として表示されるのか」・「どんな代替文字で出力されるのか」も自由に設定できる。（例えば 20230712175430-admin.png を [:takoyaki:] の記述で表示できるようにし、代替文字には「たこやき」と出力するよう設定できるとか。）
自由度が高くて便利なのは ⓑ ですけども、実装に手間が掛かりそうなので。ⓐ で良いならシンプルな実装で済みそうですけどもね。
ご要望があればお知らせ下さい。
≫3829 3828です。
ご回答ありがとうございます。
個人的にはAがいいと思います。Bは再編集時に、新規に投稿にチェックすることで先頭に並べることができますので…
[[DATE]] のように最終更新日時用のタグがあれば管理がしやすいかな、という感じです。
ご回答ありがとうございます。
個人的にはAがいいと思います。Bは再編集時に、新規に投稿にチェックすることで先頭に並べることができますので…
[[DATE]] のように最終更新日時用のタグがあれば管理がしやすいかな、という感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
