てがろぐ - Fumy Otegaru Memo Logger -
2025年10月13日(月) 04:03:11〔7時間前〕 更新
■No.2883, No.2882, No.2881, No.2880, No.2879, No.2878, No.2877［7件］ （ 7 件 ）
■フリースペース： 編集
ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン 《てがろぐCGIの配布ページに戻る》
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン 《てがろぐCGIの配布ページに戻る》
■日付検索：
■全文検索：
〔79文字〕 編集
2022/06/13 (Mon)
22:02:56
No.2883
by
あどみ
〔3年以上前〕
いいねボタンのdoさんがてがろぐのスキンを配布しはじめたんですね！私はHTMLいじりが好きなのでスキンは自分で作成派てすが、HTMLが苦手な方には朗報ですね！
〔102文字〕 編集
2022/06/12 (Sun)
20:13:31
No.2882
by
あどみ
〔3年以上前〕
>>2881
2879です。W3Cがword-wrap:break-word;が効かない場合を書いてくれてました。そうだった、私のスキンでは幅指定してるからはみ出さないんですね。CSS本当にややこしい…。
2879です。W3Cがword-wrap:break-word;が効かない場合を書いてくれてました。そうだった、私のスキンでは幅指定してるからはみ出さないんですね。CSS本当にややこしい…。
2022/06/12 (Sun)
00:29:33
No.2881
by
にしし
〔3年以上前〕
おなかがへってきました。_(┐｢ε:)_
🍵Re:2873◆早速のバージョンアップをどうもありがとうございます。(╹◡╹)ﾉ
🍵Re:2875◆下げる機能の動作を果たして把握して頂けるかどうかが不安だったのですけども、把握どころか意外とご活用頂けていそうな感じで驚いています。^^;
🍵Re:2877◆ご活用ありがとうございます！
🍵Re:2878◆ブラウザには「英単語の途中では改行しない」という禁則処理があります。そのせいで、半角英字を長く連続させるとウインドウからはみ出て横スクロールが発生します。URLも「英字の連続」なので同様の禁則処理が働いてしまうのですよね。Firefoxだけは「/」記号を「単語の区切り」だと認識してくれるので、「/」が出てきたところで自動改行されるため、横には伸びずに済むのですが。
てがろぐでは、URLの自動リンクではa要素に class="url" という属性を付加してありまして、標準添付の各スキンのCSSではここに word-break: break-all; というスタイルを適用して、英単語だろうが何だろうが「描画領域の端」で強制的に改行するように指定してあります。なので、リンクになってさえいれば「URL」でも「長い英単語」でも何でも強制改行されます。
今回ご質問頂いたケースである「自動でリンクにはならないURLの書き方」は、「URLだとは認識されないから自動リンクにならない」わけですから、要するに普通の本文なので何のスタイルも適用されません。なのでブラウザ標準の禁則処理が働いてしまって、横に伸びるわけです。ブラウザ側の標準動作がそうなので、これを防ぐには何らかのスタイルを自ら適用しないとどうにもなりません。（てがろぐの問題ではなく、どんなWebでも同様です。）
▼解決策①
で、本文中に含まれるあらゆる英単語が途中で改行されても構わないなら .comment { word-break: break-all; } というCSSを追加すると解決します。
▼解決策①B
※サイドバーの存在しないレイアウトをお使いなら、.comment { overflow-wrap: break-word; } の方を使うと、短い英単語が途中でぶった切られるのを防げるので望ましいです。（サイドバーがあるレイアウトでこのCSSを使うと、段組の作り方によってはうまくいきません。例えば「標準スキン」や「Twitterっぽいスキン」ではこの方法では対処できません。しかし「ブログタイプスキン」は（サイドバーがあるものの）この方法で対処可能です。）※参考：word-break、overflow-wrap（＠MDN）
▼解決策②
なお、本文中に含まれるあらゆる英単語が途中でぶった切られると困るわい、という場合は、リンクにしたくないURLをとりあえず自由装飾記法を使って [F:longword:～] とかで装飾しておいて、 .deco-longword { word-break: break-all; } というCSSを追加すると良いと思います。
解決策①B ＞ 解決策② ＞ 解決策① の順でお勧めです。（解決策①Bが使えないスキンをお使いなら、解決策②がお勧めということになります。）
🍵Re:2879◆この場合は、Firefoxの動作が望ましいですね。URLに含まれる「/」記号で改行するなら自然だと思います。なぜ、他のレンダリングエンジンではそうならないのか……。^^;
🍵Re:2873◆早速のバージョンアップをどうもありがとうございます。(╹◡╹)ﾉ
🍵Re:2875◆下げる機能の動作を果たして把握して頂けるかどうかが不安だったのですけども、把握どころか意外とご活用頂けていそうな感じで驚いています。^^;
🍵Re:2877◆ご活用ありがとうございます！
🍵Re:2878◆ブラウザには「英単語の途中では改行しない」という禁則処理があります。そのせいで、半角英字を長く連続させるとウインドウからはみ出て横スクロールが発生します。URLも「英字の連続」なので同様の禁則処理が働いてしまうのですよね。Firefoxだけは「/」記号を「単語の区切り」だと認識してくれるので、「/」が出てきたところで自動改行されるため、横には伸びずに済むのですが。
てがろぐでは、URLの自動リンクではa要素に class="url" という属性を付加してありまして、標準添付の各スキンのCSSではここに word-break: break-all; というスタイルを適用して、英単語だろうが何だろうが「描画領域の端」で強制的に改行するように指定してあります。なので、リンクになってさえいれば「URL」でも「長い英単語」でも何でも強制改行されます。
今回ご質問頂いたケースである「自動でリンクにはならないURLの書き方」は、「URLだとは認識されないから自動リンクにならない」わけですから、要するに普通の本文なので何のスタイルも適用されません。なのでブラウザ標準の禁則処理が働いてしまって、横に伸びるわけです。ブラウザ側の標準動作がそうなので、これを防ぐには何らかのスタイルを自ら適用しないとどうにもなりません。（てがろぐの問題ではなく、どんなWebでも同様です。）
▼解決策①
で、本文中に含まれるあらゆる英単語が途中で改行されても構わないなら .comment { word-break: break-all; } というCSSを追加すると解決します。
▼解決策①B
※サイドバーの存在しないレイアウトをお使いなら、.comment { overflow-wrap: break-word; } の方を使うと、短い英単語が途中でぶった切られるのを防げるので望ましいです。（サイドバーがあるレイアウトでこのCSSを使うと、段組の作り方によってはうまくいきません。例えば「標準スキン」や「Twitterっぽいスキン」ではこの方法では対処できません。しかし「ブログタイプスキン」は（サイドバーがあるものの）この方法で対処可能です。）※参考：word-break、overflow-wrap（＠MDN）
▼解決策②
なお、本文中に含まれるあらゆる英単語が途中でぶった切られると困るわい、という場合は、リンクにしたくないURLをとりあえず自由装飾記法を使って [F:longword:～] とかで装飾しておいて、 .deco-longword { word-break: break-all; } というCSSを追加すると良いと思います。
解決策①B ＞ 解決策② ＞ 解決策① の順でお勧めです。（解決策①Bが使えないスキンをお使いなら、解決策②がお勧めということになります。）
🍵Re:2879◆この場合は、Firefoxの動作が望ましいですね。URLに含まれる「/」記号で改行するなら自然だと思います。なぜ、他のレンダリングエンジンではそうならないのか……。^^;
〔293文字〕 編集
2022/06/12 (Sun)
00:16:29
No.2880
by
あどみ
〔3年以上前〕
https://www.nishishi.org/testground/tegalog/tegalog.cg...
https://www.nishishi.org/testground/tegalog/tegalog.cgi?q=%E3%83%86%E3%82%B9%E3%83%88&userid=admin&date=2022%2F06&tag=UpdateLog&cat=updates&order=
https://www.nishishi.org/testground/tegalog/tegalog.cgi?q=%E3%83%86%E3%82%B9%E3%83%88&userid=admin&date=2022%2F06&tag=UpdateLog&cat=updates&order=
〔145文字〕 編集
2022/06/11 (Sat)
21:21:37
No.2879
by
あどみ
〔3年以上前〕
>>2878
確かにAndroid版のChromeやEdgeだと折り返さないですね。Firefoxだと普通に折り返してますが。私のスキンではChromeでも折り返してるので、CSSを弄れば折り返すと思います。
どこが？というのはわからないのでにししさんか他の方のアドバイスを待ってください。
確かにAndroid版のChromeやEdgeだと折り返さないですね。Firefoxだと普通に折り返してますが。私のスキンではChromeでも折り返してるので、CSSを弄れば折り返すと思います。
どこが？というのはわからないのでにししさんか他の方のアドバイスを待ってください。
