てがろぐ - Fumy Otegaru Memo Logger -

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




or 管理画面へ

■フリースペース: 編集

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

No.2881, No.2880, No.2879, No.2878, No.2877, No.2875, No.28747件]

おなかがへってきました。_(┐「ε:)_

🍵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-breakoverflow-wrap(@MDN)

▼解決策②
なお、本文中に含まれるあらゆる英単語が途中でぶった切られると困るわい、という場合は、リンクにしたくないURLをとりあえず自由装飾記法を使って [F:longword:~] とかで装飾しておいて、 .deco-longword { word-break: break-all; } というCSSを追加すると良いと思います。

解決策①B > 解決策② > 解決策① の順でお勧めです。(解決策①Bが使えないスキンをお使いなら、解決策②がお勧めということになります。)

🍵Re:2879◆この場合は、Firefoxの動作が望ましいですね。URLに含まれる「/」記号で改行するなら自然だと思います。なぜ、他のレンダリングエンジンではそうならないのか……。^^;
(1500文字) No.2881 回答/返信 at by NO IMAGE にしし
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=
(293文字) No.2880 at by Icon of admin あどみ
>>2878
確かにAndroid版のChromeやEdgeだと折り返さないですね。Firefoxだと普通に折り返してますが。私のスキンではChromeでも折り返してるので、CSSを弄れば折り返すと思います。
どこが?というのはわからないのでにししさんか他の方のアドバイスを待ってください。
(145文字) No.2879 at by Icon of admin あどみ
新バージョンの配布ありがとうございます。早速、導入しました。

ところで【自動でリンクにはならないURLを一時的に書きたい場合の書き方】を試したらスマホだとテンプレートが横に長くなります。何でですかね。スキンいじりすぎたかな。。。

https://www.wwwww.com/wwwwwwww/wwww/wwwwww/wwwww/

ああ・・・横に長くなりますね。
「円マーク:」を使うと改行されない?
(202文字) No.2878 at by Icon of admin あどみ
Ver3.7.0にバージョンアップしました!
下げる機能便利ですね!!
(35文字) No.2877 at by Icon of admin あどみ
ver3.7.0の配布ありがとうございます!
問題なく使えております。
下げる機能が便利だなと感じています。あまり表に出したくない投稿がちょこちょこあるので。
(79文字) No.2875 at by Icon of admin あどみ
テスト
(3文字) No.2874 at by Icon of admin あどみ

■複合検索:

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

■日付一覧:

■カレンダー:

2022年6月
1234
567891011
12131415161718
19202122232425
2627282930

■最近の投稿:

■新着画像リスト:

Perlのバージョンを上げる設定(さくらインターネット)

全319個 (総容量 36.27MB)

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