2023年8月 この範囲を時系列順で読む この範囲をファイルに出力する
本文中に表示されているカスタム絵文字をダブルクリックすると、その絵文字を表示させるためのコードをクリップボードにコピーする機能を加えました。次のβ版(4.0.5)からお使い頂けます。(設定でOFFにもできますが、デフォルトではONです。)
例えば、これらのカスタム絵文字をダブルクリックしてみて下さい。すると、[:takoyaki:]のようなコードがクリップボードに入ります。









頻繁に使っているカスタム絵文字なら、いちいちカスタム絵文字の一覧画面からコードをコピーしなくても、直近の投稿に表示されている絵文字をダブルクリックすることでコードをコピーできると楽で良いかな……と思いまして。
この機能をOFFにする場合は下図の場所で。

ここがONだと、カスタム絵文字が表示される場合に限って、「ダブルクリックでコードをクリップボードに格納する」処理をするJavaScriptが出力されます。(ここがONでも、そのページ内にカスタム絵文字が1つも存在しなければスクリプトは出力されません。)
ご丁寧にありがとうございます~~!
絵文字一覧も見やすいです!実装楽しみにしてます~!
▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(1)
➡ SVG画像をテキストエディタで開き、1行目にあるwidthとheightの値を書き換える。
例えば、<svg width="100%" height="100%" viewBox="0 0 32 32" ... のように書かれているなら、このようにすると、CSSに関係なくSVG画像は(iOSでも)横並びになってくれます。
ここを、<svg width="32" height="32" viewBox="0 0 32 32" ... のように書き換えます。
ここが、<svg width="100%" height="100%" viewBox="0 0 50 65" ... のように書かれているなら、
ここを、<svg width="50" height="65" viewBox="0 0 50 65" ... のように書き換えます。
▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(2)
➡ 横幅の最大値も制限するCSSを追記する。
デフォルト設定では、(カスタム絵文字に対して)てがろぐは style="width:auto; height:auto; max-height:2em; vertical-align:middle;" というCSSを挿入します。ここでは高さの最大値は指定されていますが、横幅の最大値は指定されていません。どうやらiOS版のSafariは、(SVG画像にwidth="100%"があるとき)描画空間として横幅100%を確保してしまうっぽいですね。なので、以下のCSSをスキン等に追記すれば解決します。
.cemoji img { max-width:2em; }
これで横幅も最大2文字分に制限されますので、下図の右側の通り、横に並んでくれました。
ただ、これだと、あらゆる絵文字の横幅が 2em になりますので、もし takoyaki だけに限定して適用したいなら、
.ce-takoyaki img { max-width:2em; }
のようにすると良いかもしれません。
個人的には、SVG画像のソースを書き換えた方が良いのではないかと思いますけども。大きく表示させたいケースがある場合には、SVGソースはそのままで、CSSで対処する方が良いかもしれませんが。
(たぶん、Safariの問題なんでしょうね……?)
🍘動作テスト:
➡ここでは、SVG画像のソースを直接書き換えたバージョンを置いています。
➡開発放言では、SVG画像はそのままで、CSSソースを追記して対処しています。
どちらもiOSで確認しても同じように横並びになっていました。
🍘注意:
上記の対策を施しても、iOS側でブラウザのキャッシュをクリアしないと表示に反映されないのでご注意下さい。
iOS版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。
解決しました!ありがとうございます!
見落としてました。ありがとうございます。
3898
たこ焼きのSVG画像を作った者です
たこ焼きの画像以外でも起こる現象だと解決しないかもしれませんが
原因はSVG画像内にwidthとheightが100%で設定されている為だと思います。
なので、
cssでwidthとheightをpxやemなどでサイズを設定すると横並びに表示できるはずです。
又、
SVG画像をテキストエディタで開き、widthとheightを書き換えることでも大丈夫かと思いますが
試していない為、どうなるか不明です。(申し訳ないです)
早速自分のサイトにも導入してみたのですが、導入後デフォルト状態では絵文字画像が縦並べになってしまいます。
→これはCSSでカスタマイズしてdisplay: inline-flex;で横に並ぶようになりました。
ですが、スマホ(iPhone)で確認したところこちらは縦並べのままになっています。
(キャッシュクリア・複数ブラウザでも試しましたが同じく)
PCのディベロッパーツールではちゃんと横並べになっているので、メディアクエリの問題でもなさそうです。
また、他の方に表示確認をしたところ、Androidでは横並べ表示されるという報告をいただいています。
こちらの掲示板内の絵文字も同じように、PCで確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問

▼半角文字・全角文字・空白の混在するハッシュタグを書きたい場合
▼ハッシュタグの角括弧を表示上では消す方法
に書いてあるように、角括弧で囲むと全角半角の混在やスペースが含まれる単語もハッシュタグになりますよ。
入力する時には角括弧が必要ですが、表示上では消すこともできます。
#[Français] #[Español] #[ポケモンLOVE]
XAMPPに含まれているApacheを使っててがろぐを表示させることができました!
ありがとうございます
てがろぐをWindowsローカル環境で動作させるには、➊Perlをインストールして、➋ウェブサーバを動作させて、➌ブラウザでhttp://localhost/(設置先)/tegalog.cgiにアクセスする……という3ステップが必要です。
- まず、Perlをローカルで使うには、XAMPPをダウンロードしてインストールして下さい。これを入れると、PerlだけでなくPHPとか諸々も入りますが、とりあえずPerlも入ります。Perlは単独のパッケージをダウンロードしてきてインストールする手もあるのですが、XAMPPのパッケージからインストールすると、てがろぐが必要としているモジュールも同時に入るメリットがあります(たぶん)。
- で、XAMPPをインストールできたらPerlの実行環境は手に入りますので、あとはローカルでWebサーバを動作させれば良いだけです。
- Windows環境ならAN HTTPDというウェブサーバが手軽でお勧めです。説明はリンク先に書いてあります。AN HTTPDを使う場合はtegalog.cgiの中身を書き換える必要なくそのまま動きます。
- そのほか、ウェブサーバとしては他にも(少々設定に手間が掛かりますが)XAMPPに含まれているApacheを使う手もあります。その辺の説明は、『てがろぐをXAMPPで確認したいっ!』が分かりやすく解説されていて良さそうに思いますのでご参照下さい。
- あとは、ブラウザで http://localhost/(設置先)/tegalog.cgi 等にアクセスすると良いです。頑張って下さい。
こんなに早く実装していただけるとは思いませんでした!
早速スキン作ってますが思ったとおりに出来そうです。ありがとうございます!
Perl 5をローカル環境で使う方法が調べてもわからず行き詰っています。
レンタルサーバーを借りることも考えたのですが、私はまだ小6で未成年なので両親に相談したところ断られてしまい、
(理由としては金銭面的なところと、そもそもサーバーを借りて公開するということに好意的ではなく、両親曰く
「ネットに公開するってことは個人情報を全国の人に知られるってことでしょ?そんなの許すわけないじゃん。我慢しなさい」)ということらしく、
プライベートなことを書こうとしているので公開してしまうと私自身が心配だということでローカル環境で使おうとしています。
ダウンロードもあまりするな、と言われておりどうしたらいいかわかりません。
なのでどうしたらローカルで使うことができるかどうかを教えていただけるとありがたいです。
何か必要な情報がありましたら言ってくださると見つけ次第書き足していきます
よろしくお願いします
長文失礼しました。
環境
Windows11
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
🆕 Ver 4.0.4βの更新点(概要):
《▼新機能》
●カスタム絵文字機能。
●日付境界バーの出力状況を選択できる設定オプション。
《▼仕様改善》
●既存画像の挿入記法で、多バイト文字が使われたファイル名も許容する設定を追加。
●カテゴリツリーを構成するli要素にも、カテゴリIDをベースにしたclass名を付加。
●本文中に含まれるコロン記号が数値文字参照「:」として出力される問題(仕様)を修正。
《▼不具合修正》
❎適用スキンを維持するためのリンク自動調整仕様でlink要素に対して不要な調整を加えてしまう不具合を修正。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
(ツイート埋め込み処理中...)Twitterで見る
Mastodonでのアナウンス:Pawoo