てがろぐ - Fumy Otegaru Memo Logger -

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

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

or 管理画面へ

検索語「PICT: 〔除外:1.png〕」の検索結果296件]3ページ目)

>>4367
こんにちは。
開発お疲れ様です!
Ver 4.2.3ありがとうございました、さっそくアプデしました。
神アプデです!!!

「その状況で表示対象になっている投稿」だけに限定した隣接投稿に移動できる機能についてなのですが、仕様を読んだ限りでは自由度のある《パターンB》を希望します。
デメリットを見た限りでは、隣接移動したい場合はURLを張り替えるだけで済むという認識をしました。個人サイトを運用してるならHTMLがいじれると思うので、初心者でも頑張ればできるなという印象です。
逆に《パターンA》だとアップデートしたら二度と元に戻せず運用自体を危ぶまれる人が出そうです。

それから個人的なことですが、スキンを作っているとgallery、sitemap、ブログ、イラストや小説などのコンテンツで仕様を変えたい場合が多いです。なので自由度が高い方が色々なデザインを作りやすいです。

別件なのですが、skin-cover.htmlはそのままで、IF文を使ってskin-onelog.htmlの内容を切り替えようと思ったのですが、この形式は使えないのでしょうか?
[[IF(-mode-picts|-mode-sitemap):[[COMMENT]]:IF]]

長々と書きましたがアップデートを楽しみにしています!

【追記】
さっきの今で申し訳ないのですが、サイトマップから以下のように入ったときURLに,でなく半角スペースがでました。
管理画面の設定は添付の通りです。
<a href="[[PERMAURL:PURE]]&skin=スキン名&cat=[[CATEGORYIDS]]">[[COMMENT:TITLE]]</a>
https://URL/tegalog.cgi?postid=1&skin=スキン名s&cat=ID1(半角)ID2(半角)ID3

[[CATEGORYIDS]]以外でIDを出す方法はありますか?

144340.jpg

by sakura. <824文字> 編集

>>4360
Galaxyで管理画面のボタンの高さが揃わないと報告した者です。
ここのVer 4.2.3βの管理画面に入ってみた所、バッチリ揃ってます。ありがとうございました!
「その状況で表示対象になっている投稿」だけに限定した隣接投稿への移動は私も欲しかったのでVer 4.2.3βの配布を楽しみにしてます。
Screenshot_20240317_144239_Chrome.jpg
Screenshot_20240317_144305_Chrome.jpg

by sakura. <159文字> 編集

>>4295
4275,4287です。
単体のhtmlファイルとして保存したVer 4.2.2βの管理画面で、cssの「.systemmenu li a」要素の中にline-height: 1.5;を入れて上書きしてからGalaxyのChromeで見てみたところ、半角文字を含むボタンも高さが揃いました。子要素の「.systemmenu li a span.jp」だけにline-height: 1.5;を追加した場合でも高さが揃いました。私ではcssをどのように書き換えれば良いのか見当がつかなかったので、ダメもとでご相談して良かったです。ありがとうございました!
admin_galaxy_2.jpg

by admin. <297文字> 編集

4275です。Ver 4.2.2β公開お疲れ様です!その時限定されているカテゴリの概要文を表示する記法は欲しいと思っていたので実装されて嬉しいです。

管理画面のアイコンの高さの件、私の環境固有の問題なのにご対応下さりありがとうございます。4.2.2βの管理画面をキャッシュクリアなどをした上で見てみましたが、4.2.1βまでと変化なしでした。でもにししさんが「半角文字を含むボタンだけ高さが増す」と仰っているのを見て、調べたり検証したりしてわかった事はあります。

端末購入後からシステムフォントを変えていないのですが、どうやらGalaxyの初期システムフォントは和文部分だけ「イワタUDゴシック」で英文はSamsungが独自に作ったフォント?という合成フォントっぽい…ので、そのSamsungが独自に作ったっぽいフォントのグリフが行間を広めに設定されているのだと思われます。
参考URL①
参考URL②
イワタフォントのサンプル と同じ文字をメモ帳アプリで表示してみましたが、言われてみれば確かに英数などは違う…
galaxy_font.png

試しにてがろぐVer 4.2.2βの管理画面を単体のhtmlファイルとして保存して、cssのフォント指定を変えてみたり「/」や「ID」の文字を消してみたりして検証したところ、やはりGalaxyのシステムフォント且つ半角文字が入った時だけボタンの高さが増しました。

…というわけで半角文字を含むボタンだけ高さが増してしまう原因は端末側の合成システムフォントのようです。せっかく早々とご対応下さったのに、フォント側をどうにかするしかなさそうな結果になってしまい申し訳ございません。なんとなく「源ノ角ゴシック」をWordやIllustratorなどで使うと行間が異様に広くなってしまう→それを改善した「源真ゴシック」が登場…という流れを思い出しました(^^;) #報告

by admin. <1073文字> 編集

>>4274
4273です。すみません、Gainmap HDR image renderingの初期値がEnabled表示になっているのはBraveブラウザでした…しかも「Default(Enabled)」という表示でした。Braveではない通常のChromeなどや他の端末では、にししさんと同様「Default」表示でした。(それでもやはりEnabledにしている時と同じ挙動をしましたが)そして他のAndroid端末でEnabledにしても輝度は変化しなかったので、OLED(有機EL)ディスプレイの機種且つEnabledの時だけでHDR画像を明るくする機能が働くのかもしれませんね。

Pixel6のカメラで撮影した画像だけiOSのLive Photosみたいな特殊な情報を含んでいたり、特殊なExif情報などがあるのか?と思って画像を端末に保存して、AvesギャラリーでHDRマークが表示されたのが解明の決め手でした。世のSNSやレンタルブログ、自分のサーバーに設置する日記系ツールでもリッチなCMSなどではアップロードした画像に縮小や圧縮などの加工が行われるものがほとんどですし、てがろぐのように画像への加工処理を行わないのは現代においては珍しい部類なんだなとあらためて思いました。(でも私にとってはそこがてがろぐの好きなところです😃)カメラアプリ側でウルトラHDRが最初からONになっていても、無加工のHDR画像をブラウザ上で表示する機会がレアだから検索しても話題にしている人を見かけないんでしょうね…。


話は変わりまして…Galaxy Tab S8 Ultraの環境について話題に上げたついでと言っては何ですが、いわゆる「おま環」なのは明らかだし支障は全く無いしな…と思っていたことをご報告します。Galaxy Tab S8 UltraのChromeおよびChromium派生ブラウザだけ、なぜかてがろぐの管理画面のボタンの大きさが不揃いになります。下のスクリーンショットはここの動作サンプル用てがろぐの管理画面です。
admin_tate.png  admin_yoko.png
  • 自分のサイトに設置しているてがろぐや、セットアップ直後のてがろぐも同様
  • ブラウザの「PC版サイト」のチェックを切り替えても変化なし
  • 昨年10月に端末を購入して以来、ブラウザのバージョン更新もしていますが変化なし
  • Firefoxで見ると大きさが揃っている。Chromium系ブラウザはどれでも不揃いになる
  • OS問わず、PC・スマホ・タブレットなどGalaxy Tab S8 Ultra以外の環境では不揃いにならない

…という点から、Galaxy Tab S8 Ultraのディスプレイ解像度や端末のファームウェア特有の設定か何かが特殊なのかもしれません。参考になるかわかりませんが「IPアドレスや画面解像度など確認くん」で表示される情報を貼ります。→スクリーンショット 見た目の問題だけで使う分には全く影響がないので、こんな環境もありますというお話でした。

by admin. つぶやきつぶやき <1421文字> 編集

>>4269
手持ちのAndroidスマホとタブレットの合計3台で見てみた所、唯一Galaxy Tab S8 Ultraだけで似たような現象が起きました。当方の環境だと輝度が大幅に上がるわけではなかったのですが、Chromium系ブラウザで僅かに明るさが変化しました。(AndroidでもFirefoxだと発生しません)原因と解決策もわかりましたので先に書きます。

原因はChromeおよびChromium派生ブラウザにいつからか搭載された機能と、画像に含まれるHDR情報の両方です。

解決策は
①URL欄にchrome://flagsと入力してEnter
②最上部にある「Search flags」の検索窓にhdrと入れる
③「Gainmap HDR image rendering」の項目がEnabledになっていると思うので、これをDisabledにする
④右下にブラウザの再起動を促すボタンが出るので「Relaunch」を押す
⑤再起動後は>>4269のような画像をブラウザ内で表示しても明るくならなくなる
※参考になったURL
https://qiita.com/htnk/items/a2fd639344bd10717872

どうしてHDR画像が原因だとわかったのかと言うと>>4269の画像をAndroid端末に一旦保存して、ギャラリーアプリとして使っているAves を開いたら該当画像にだけ「HDR」マークが表示されたからです。Pixelのカメラアプリに搭載されているHDR機能が勝手に働いている可能性が高いです。私はPixelは持ってないので設定方法などはわかりませんが…

また、4107と2274の投稿に添付されている画像だけを単独で表示させても輝度は変化しませんでした。おそらく新着画像リスト欄のように同じページ内に(スクロールしないと見えなくても)存在している4269の画像に反応したのではないかなと思われます。

Screenshot_20240125_222316_Aves.jpg

あと画面の輝度を最低にしていると4269の画像を表示しても勝手に明るくならなくて、少し輝度を上げた状態で画像を表示すると明るくなったのも不思議でした。
てがろぐとは関係ないことでしたが、こんなことがあるんだ!?と私も驚きました。

by admin. <940文字> 編集

4257です。
わざわざご対応いただきありがとうございます。
事象が起きた画像を上げます。
1000005420.jpg

追記
私は明るく見えています。
下部(4263辺り)までスクロールすると明るさが戻ります。

by admin. <93文字> 編集

日々てがろぐをご活用下さっているみなさま、どうもありがとうございます。2024年もご愛用頂ければ幸いです!

さて、長らくここのドメイン(nishishi.org)は、さくらインターネットのサーバで運営してきましたが、先月の半ばからリトルサーバーに移転して動作を試していました。特に動作に問題はなさそうですので(というかむしろ速いので)、正式に契約しました。ここは、リトルサーバーのワードプランのサーバで運営しています。(※本家サイトnishishi.comの方は、さくらインターネットのままです。)
リトルサーバー契約しました
リトルサーバー契約しました


by nishishi. <253文字> 編集

初めての投稿失礼致します。
ホームページのセットアップ方法に従って設置してみたのですが、添付画像のように文字だけ表示され、全てのスキンが一切反映されない状態です。
パーミッションも変更したり、キャッシュを消してみても改善が見られず困っています…
初心者で申し訳ありませんが、どのように対処したら良いか御教授いただけないでしょうか。よろしくお願いします。


22-33-44.jpeg

by admin. <179文字> 編集

ランダム表示モードでも、選ばれる対象を絞り込めるようになった Ver 4.1.4β(未配布)の動作テスト。>>4134,4131,4129
元々は ?mode=random のパラメータだけを使って全投稿からランダムに1件が表示される仕様ですが、その他の(表示対象を限定する用途の)あらゆるパラメータを併用して表示対象を限定できるようになったハズです。

▼従来から可能なランダム表示:
▼今回から可能な対象限定ランダム表示の例:
まず表示対象を絞り込んでから、そのURLの末尾に &mode=random を加えると良いと思います。だいたい何にでも加えられると思います。検索語は複数使えますし、AND・OR・NOT検索も使えます。

配布用のスキンに直接記述したい場合は [[RANDOM:URL]]&表示限定用パラメータ のように、[[RANDOM:URL]] の記法の直後に「&」記号を使って表示限定用パラメータを連結すると良いかもしれません。その場合、設置場所がどこなのか知らなくても正しいURLが出力されます。(もっとも、デフォルト設定では相対パスで出力されますから、自力で相対パスで書いた場合と結果は同じですが。)

なお、「下書き」投稿は表示対象になりません。「下げる」投稿は、表示対象が限定されていない場合には表示対象になりません。表示対象が限定されている場合に表示対象になるかどうかは設定次第です。

by nishishi. テストテスト <1159文字> 編集

画像投稿テスト。sakura
高速道路
高速道路

by admin. <19文字> 編集

画像一覧モード用のサンプル画面を作るためのダミー画像群
海と空と島1 海と空と島2 海と空と島3 海と空と島4

by admin. <32文字> 編集

画像一覧モード用のサンプル画面を作るためのダミー画像群
river0324.jpg river0920.jpg water0174.jpg water0463.jpg

by sakura. <32文字> 編集

画像一覧モード用のサンプル画面を作るためのダミー画像群
park0549.jpg river0925.jpg riverside0922.jpg riverside0923.jpg

by tomoyo. <32文字> 編集

さすがにハイスピードプランの利用者は居ないかな……。(だから、今までの解説でも特に問題にならなかったのでしょうね。^^;) >>4094

🧀Re:4097【背景】 新着画像リストで画像をクリックすると、「その画像が使われている投稿を全文検索する」という動作になります。その画像が1つの投稿でしか使われていなければ、結果としては1投稿だけが表示されますが、もし2つ以上の投稿で使われていれば、それらすべての投稿が繋がって表示されます。というわけで、新着画像リストで画像をクリックした後の画面は「検索結果」なのです。(もし外側スキンで、そのときの状況を示す [[SITUATION:HTML]] 等の記述が省略されているスキンをお使いだと気付きにくいかもしれません。)

【原因】 で、No.4098さんが解説して下さった通り、てがろぐの初期設定では「隠されている範囲でも、全文検索時には最初から全部見せる」という設定になっています。これが、「新着画像のリンクより記事を表示させると隠した文字がオープンになってしまう」理由です。

【解決策】 ……というわけで、解決策は簡単で、No.4098さんの解説の通り、「全文検索時でも隠す機能を有効にする」の項目にチェックを入れて頂くだけで済みます。(デフォルトではOFFなので、自ら設定を変更しない限り、OFFになっています。)
「全文検索時でも隠す機能を有効にする」

🧀Re:4098◆的確なサポートをどうもありがとうございます。画像まで探して下さったのに表示できなくてすみません。^^; 解説ページとここが同じドメインだったら良かったんですが。他所様のサイトの画像をそのまま参照されるのを防ぐためにそう設定していますが、デモモードとしてうちのサイトの画像くらいは参照できるような仕様にしていたら良かったですね。(そのうち考えます。)

by nishishi. <781文字> 編集

>>4097 さん
こんにちは。ご質問の件ですが
管理画面の[設定]→[ページの表示]→【投稿本文の表示/テキスト】→[続きを読む・指定範囲を隠す 共通設定]欄
の「全文検索時でも隠す機能を有効にする」にチェックがついているか確認して、もしついていなければつけてみてください。
現在の設定では、画像をURLで指定する記法の使用は許可されていません。

by admin. <139文字> 編集

>>4086
>>4073 です。PHPバージョンは、にししさんが挙げていただいている、
>テキストエディタに <?php phpinfo(); ?> という1行だけを書いて〜
の方法で確認しました。
TegUpのアップロード先は、cgi-binにあるてがろぐディレクトリ内です。
パーミッションですが、そういえば弄り忘れで644のまま動作確認していました。先ほど700に変更して再度自サイトのTegUpにアクセスしてみたのですが、そちらでも問題なく表示されました。スクショのほう貼らせて頂きます。
>>4086さんの環境ではなぜエラーになるんでしょうか…。問題解決の糸口が見つかるよう願っております。
usateg.jpg

by admin. <302文字> 編集

>>4083
素早くご回答ありがとうございます。
usamimiの件、パーミッションをcgiともに700にしてみましたが、やっぱり500エラーは変わらず。

で、ちょっと出来心でcgi-bin以外のところに新規フォルダを作ってそこにtegup.phpだけ上げて(tegalog.cgiの場所はちゃんと書き換え)みたら、当然エラーは出たのですが、ファイル自体はちゃんと動いててエラー画面が表示されたと言う・・・。
20231030035641-tomoyo.png

他のusamimiユーザーの方の方はきちんと動いてるそうですし、自分が何かものすごく下らないミスをしてるんだと思うので、もうちょっと様子見してみます。

サポートありがとうございました。お供えしておきまーす。🍮 🍩 🍰 🍫
きちんとできたらまた報告に参ります。#感謝

by tomoyo. <342文字> 編集

こんにちは。TegUp使用報告です。
【サーバ】さくらインターネット
【Perl】5.32.1
【PHP】8.1.24 (モジュールモード)

てがろぐVer4.0.1からVer4.1.0へ無事アップロード完了し、その後問題なく動作しております。
念のためスクショも置いていきます。
普段β版を使用しているのでβ版対応も楽しみです!

10.02.57.jpg10.03.23.jpg

by admin. <168文字> 編集

「TegUp Ver 0.9.0」を試してみました
Raspberry Pi 上に構築した Raspberry Pi OS + Apache2 での動作チェックです

OS のバージョンなど…
$ lsb_release -a
No LSB modules are available.
Distributor ID:   Raspbian
Description:   Raspbian GNU/Linux 10 (buster)
Release:   10
Codename:   buster

Apache2 のバージョンなど…
$ apachectl -v
Server version:   Apache/2.4.38 (Raspbian)
Server built:   2023-04-21T22:01:00

配布されていた「TegUp Ver 0.9.0」を解凍して「tegalog.cgi」と同じ場所に配置してブラウザから「tegup.php」を表示してみると…
「tegup.php」の内容がそのまま表示されました どうやら php が入ってないみたいな感じだったんで…

$ sudo apt install php
にて php をインストールしてみました

$ php -v
PHP 7.3.31-1~deb10u5 (cli) (built: Sep  4 2023 21:49:25) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.31, Copyright (c) 1998-2018 Zend Technologies
   with Zend OPcache v7.3.31-1~deb10u5, Copyright (c) 1999-2018, by Zend Technologies

この状態から再びブラウザから「tegup.php」を表示してみたら…無事に動作したっていうか「てがろぐ本体お手軽アップデータ TegUp 0.9.0」が動作しました
なおもともと最新版だったようで「●このディレクトリで稼働中のバージョン: Ver. 4.1.0」との表示が出るだけでこれ以降の動作チェックすることはできませんでした まぁここまで来れば大丈夫っぽそうですかね
また「tegalog.cgi」がアップデートされた際に試してみようと思うので…引き続きの開発を楽しみに待ってますw

いつもありがとうございます ざっくりとですが「tegup.php」の動作報告でした
17-18-39.png

by misaki. <1080文字> 編集

こんにちは。TegUpの方動作しております。
さくらインターネット
perl5.8.9
php8.1.24
です。

だこつです

4f36daac3e312de94c8e975f748845b9.png

by misaki. <66文字> 編集

>>4041さんとは別人ですが、私も通常スキンの[[SEARCHBOX]]からも「ギャラリー内に限定して検索」のチェックを入れられる記法が欲しいなと思ってます。

CGI本体を弄ることになってしまうのでここに書くのはあまりよろしくないかもしれませんが、>>4041さんが望んでいると思われるものを自分のサイトで実現しているので、現時点ですぐに実現出来る方法を参考までに書きます。Ver 4.1.0での説明です。

tegalog.cgiをテキストエディタで開いて「my $galleryname = &fcts::forsafety($setdat{'galleryname'});」で検索します。すると1828行目付近に飛ぶと思います。
検索してヒットした文字列の1つ上の行にある
if( $cp{'mode'} eq 'gallery' ) {

if( $cp{'mode'} eq 'gallery' || $searchoptions eq '' ) {
にして上書き保存。通常スキンでも「ギャラリー内に限定して検索」のチェックボックスが表示されるようになり、通常スキンの[[SEARCHBOX]]で生成される検索窓から検索しても検索結果がギャラリーモードになります。

「ギャラリー内に限定して検索」の文字およびチェックボックス自体を表示させずに検索結果をギャラリーモードに固定するなら、書き換えた所の3行ほど下にある
$searchoptions .= qq|<label class="searchoption"><input type="checkbox" value="gallery" name="mode" checked>$galleryname内に限定して検索</label><br>

$searchoptions .= qq|<input type="hidden" value="gallery" name="mode">|;
にします。ただしこれをやると通常スキンで検索結果を表示することができなくなります。

どのようなスキンを使われているのか不明なので公式のギャラリーモード用スキンを前提に補足すると、
ギャラリーモードをメイン・検索結果として運用するならギャラリー内側スキンの
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
[[ONEPICT:1]]

の所を
<!-- ▽投稿本文内の1つ目の画像だけを表示 -->
<a href="[[PARMAURL:PURE]]"><img src="[[GETURL:PICT:1]]" alt="No.[[POSTID]]" class="embeddedimage" loading="lazy"></a>

に変えておくと、ギャラリーモードの小さい画像をクリックすると記事の個別ページに飛ぶようになって直感的です。

by admin. <1216文字> 編集

たけのこの里を食べようかな……。🍫🍫🍫

🍫Re:4026◆情報をどうもありがとうございます。おかげさまで、カラフルボックスでのセットアップ手順を修正できました。mixhostもそうですが、標準モジュールもデフォルトでは入っていない仕様になっているというのは、もはや「CGIを使う」ということを積極的には考慮しない方針なんでしょうかね……。
🍫Re:4027◆Spotifyの埋め込みサイズは、管理画面の設定から自由に変更できますのでお試し下さい。660×175(px)にすると、だいたいApple Musicの埋め込みサイズと同じになると思います。てがろぐの設定では(従来からお使いの方々の表示が突然変わってしまわないように)Spotifyは「旧標準サイズ」がデフォルトになっていますが、今のSpotifyだとApple Musicのように「横長」が基本なようです。
Spotifyの埋め込みサイズ選択肢

by nishishi. 回答/返信 <394文字> 編集

こしあんのあずきバー食べたい。(明日から発売らしい)🍨

🍨Re:3957◆この動作試験場ではUPできる画像のファイルサイズを最大500KBに制限しています。ご自身で設置してお使いになる場合は任意に設定できます(デフォルトでは無制限です)。
🍨Re:3958◆ご活用頂ければ幸いです。(╹◡╹)ノ
🍨Re:3960◆はい。個別鍵は投稿本文中のどこに書いても同じです。複数書くと鍵を複数個用意することもできます。なお、「鍵付きでも1行目だけは見せたい」という場合には『鍵が掛かっていても一部を見えるようにする設定方法』がありますのでご活用下さい。鍵の記載位置に関係なく、本文の1行目だけは常時見えるように設定できます。
20230827131540-nishishi.png
なお、個別鍵の仕様については、「個別鍵を指定する操作方法」もご参照頂くと良いと思います。

by nishishi. 回答/返信 <443文字> 編集

外に出るだけで滝のような汗が……。_(┐「ε:)_

本文中に表示されているカスタム絵文字をダブルクリックすると、その絵文字を表示させるためのコードをクリップボードにコピーする機能を加えました。次のβ版(4.0.5)からお使い頂けます。(設定でOFFにもできますが、デフォルトではONです。)
takoyaki2 takoyaki3 takoyaki4 takoyaki6
例えば、これらのカスタム絵文字をダブルクリックしてみて下さい。すると、[:takoyaki:]のようなコードがクリップボードに入ります。
blueberry muscat pineapple ringo melon mikan strawberry suika kiwi
頻繁に使っているカスタム絵文字なら、いちいちカスタム絵文字の一覧画面からコードをコピーしなくても、直近の投稿に表示されている絵文字をダブルクリックすることでコードをコピーできると楽で良いかな……と思いまして。
takoyaki takoyaki5
この機能をOFFにする場合は下図の場所で。
設定『絵文字ダブルクリックでそのコードをコピーする』
ここがONだと、カスタム絵文字が表示される場合に限って、「ダブルクリックでコードをクリップボードに格納する」処理をするJavaScriptが出力されます。(ここがONでも、そのページ内にカスタム絵文字が1つも存在しなければスクリプトは出力されません。)

by nishishi. <656文字> 編集

ご報告ありがとうございます。

takoyakiRe:3898◆ご報告ありがとうございます。iOS版Safariで確認してみたところ、たしかにご指摘の表示になりますね。もしかしてMac版Safariでもそうなるのでしょうか? 解決策が2通りありますので、後述します。
takoyakiRe:3899◆たこ焼きアイコンありがとうございます! たこ焼きが並べられて嬉しいです。(笑) また、解決策もありがとうございます。おっしゃる方法どちらもうまくいきました。以下に記します。

▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(1)
➡ SVG画像をテキストエディタで開き、1行目にあるwidthとheightの値を書き換える。
例えば、<svg width="100%" height="100%" viewBox="0 0 32 32"  ... のように書かれているなら、
ここを、<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画像のソース書き換え
このようにすると、CSSに関係なくSVG画像は(iOSでも)横並びになってくれます。


▼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; }
のようにすると良いかもしれません。

20230806182203-nishishi.png

個人的には、SVG画像のソースを書き換えた方が良いのではないかと思いますけども。大きく表示させたいケースがある場合には、SVGソースはそのままで、CSSで対処する方が良いかもしれませんが。
(たぶん、Safariの問題なんでしょうね……?)

🍘動作テスト:
ここでは、SVG画像のソースを直接書き換えたバージョンを置いています。
開発放言では、SVG画像はそのままで、CSSソースを追記して対処しています。
どちらもiOSで確認しても同じように横並びになっていました。

🍘注意:
上記の対策を施しても、iOS側でブラウザのキャッシュをクリアしないと表示に反映されないのでご注意下さい。
iOS版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。

by nishishi. 回答/返信 <1599文字> 編集

絵文字機能実装ありがとうございます!takoyaki

早速自分のサイトにも導入してみたのですが、導入後デフォルト状態では絵文字画像が縦並べになってしまいます。
→これはCSSでカスタマイズしてdisplay: inline-flex;で横に並ぶようになりました。

ですが、スマホ(iPhone)で確認したところこちらは縦並べのままになっています。
(キャッシュクリア・複数ブラウザでも試しましたが同じく)

PCのディベロッパーツールではちゃんと横並べになっているので、メディアクエリの問題でもなさそうです。
また、他の方に表示確認をしたところ、Androidでは横並べ表示されるという報告をいただいています。

こちらの掲示板内の絵文字も同じように、PCで確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問
20230806133632-admin.jpg

by admin. <475文字> 編集

ユニクロ×CLAMP。
ユニクロ、コラボしすぎ問題
個人的にはGUが小島秀夫氏とコラボしたのが一番衝撃でした。うちにTシャツあるですよ…。

by admin. つぶやきつぶやき <56文字> 編集

今日も、かき氷(宇治金時)を食べました。🍧🍧🍧

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

by nishishi. 回答/返信 <775文字> 編集

こんにちは。めちゃくちゃ暑いですね…💦
イメージリストモードのお話が出ていましたが、そのモードが「載せているすべての画像を表示する」のであれば、差別化として、
  1. 投稿のn枚目を表示
  2. クリックすると(個別記事に飛ばず)そのままlightbox等でその投稿に含まれる画像が見れる

というモードもあると嬉しいです。
私も投稿に複数画像を載せる事が多いのですが、イメージとして<a href="[[GETURL:PICT:1]]" data-lightbox="[[postid]]">みたいな事ができればな〜と思いまして。ご検討いただけましたら幸いです。#要望

by admin. <283文字> 編集

DASHBOARD

■複合検索:

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

■新着画像リスト:

全324個 (総容量 36.59MB)

■日付一覧:

■日付検索:

■カレンダー:

2024年3月
12
3456789
10111213141516
17181920212223
24252627282930
31

■最近の投稿:

■フリースペース:

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

編集

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

296件

▼最後に投稿または編集した日時:

2025年12月4日(木) 07:56:00〔6時間前〕

RSSフィード

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