てがろぐ - Fumy Otegaru Memo Logger -

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




or 管理画面へ

■フリースペース: 編集

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

No.3690, No.3689, No.3688, No.3687, No.3686, No.3685, No.36847件]

てがろぐを、ロリポップのサーバでお使いの方々はぜひお読み下さい。
ロリポップのサーバで投稿後に「403 Forbidden」になる場合の対策(@FAQ・豆知識ページ)

ほぼ意味のない制限だと思うので、ロリポップ側がこの制限をやめてくれるのが一番だと思うのですけども。これはサーバ側の制限なので、CGI側からはどうしようもありません。投稿本文内に /etc/abcd のような文字列を単独で含めた場合はもちろん、 example.com/folder/etc/abcd みたいな「URLの途中」にあるのもダメですし、CSSソースを掲載しようとして、 background-image: url('../folder/etc/abcd.img'); のような感じで書く場合もダメなようです。
一応、回避方法として上記リンク先に2案挙げてはいますが、もっと良さげな回避方法(または解決するための設定方法等)を発見された方は、ぜひお知らせ下さい。

🍰Re:3689◆直ってましたね。良かった。
(447文字) No.3690 at by NO IMAGE にしし
> ハンバーガーのダウンロードリンク
今行ったら直ってて、DLできるようになってました。
(44文字) No.3689 at by Icon of tomoyo ともよ
3685です。なるほど、ご回答ありがとうございました。
ただコメントは日本語で入れているし、ファイル冒頭に@charset "utf-8";も入れてはいるんですよね……。
とにかく今回はcontentの内容をUnicodeに変換しておくことにしました。

>>3686 さんもありがとうございました。
(150文字) No.3688 at by Icon of sakura さくら
ショートケーキ食べたい! ないけど。(´・ω・`)

🍰Re:3683◆スキンが増えてくれるのはたいへん嬉しいです。(╹◡╹) ハンバーガーのダウンロードリンクが切れているっぽいですね
🍰Re:3684◆今のところ、「内側スキン管轄の文字列」を「外側スキン管轄の位置」に持ってくる方法がないので、公式の記法では無理なのですが、もしOGPを出力される設定にしているなら、以下のJavaScriptを書くことで、og:titleの中身をtitleに変えることはできます。
<script>
let ogtitle = document.querySelector('meta[property="og:title"]').getAttribute("content");
document.title = ogtitle;
</script>

上記のスクリプトを、body要素内のどこか(どこでも)か、head要素内で「title要素や[[OGP]]の記述よりも」の位置に書けば、og:titleとして出力されている文字列が、そのままページタイトルとしても使われます。
og:titleとして何を取得するかは、管理画面の[設定]→[補助出力]→【OGP+Twitter Cardの出力】→[▼OGPの設定]→「og:title」で選択できます。
なお、OGPを出力しない設定にしたい場合や、og:titleで設定できる選択肢よりももっと細かく出力内容を決めたい場合には、以前にNo.3293さんが解説して下さった方法( https://10prs.com/view/57 )を使うのが良いと思います。(そちらの方が出力内容が柔軟で、処理される状況が限定されていて無駄がないので望ましそうです。単純に記述量を短くしたければ先のソースだと2行で済むので楽ではありますが。^^;)

🍰Re:3685◆てがろぐ側では文字コードの変換をしていない上に、CSSファイルの中身には一切触れていないので、文字化けするなら概ねブラウザ側の問題だと思います。で、No.3686さんご指摘のように contentプロパティの値に多言語文字を使う場合には、Unicodeのコードポイントを16進数で指定する必要があるようですね。私もいま初めて知ったんですが。before疑似要素で「カテゴリ」と書きたい場合は、
content: '\30AB\30C6\30B4\30EA';
のように書くとうまくいきます。No.3686さんがご紹介下さっているサイトの変換ツールを使うと良いです。
なお、MDNの解説には、ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。と書いてあるんですが、Unicodeエスケープシーケンスというのは \u +16進数 で表記する方法なので、微妙に違いますね。^^; その方法だとうまくいきませんでした。(^_^;;; せっかく(世界中の文字をそのまま表せる)UTF-8を使っているにもかかわらず「エスケープせよ」と言う仕様にするのは思想的におかしい気がしますので、そのうち改善されるのではないかとは思いますが。
この文字化けが発生している際はcssファイル内の他の日本語文字列(たとえばフォント指定など)も同様に文字化けしています。ということは、ブラウザがCSSファイルの文字コードの認識に失敗している、ということですから、CSSファイルの文字コードを明示できれば良いのかもしれませんけども。
  • CSSファイルの1行目に @charset "utf-8"; と書いておいたり、
  • CSSファイルの先頭付近に /* これは○○のスタイルシートで云々 */ みたいな日本語のかな漢字交じり文を書いておくなどして、
できるだけブラウザ側が「これはUTF-8で書かれた日本語ファイルだ」と認識できるような要素を含ませておくと、文字化けを回避しやすいかもしれません。

🍰Re:3686◆解説ありがとうございます!(╹◡╹)ノ
(1736文字) No.3687 回答/返信 at by NO IMAGE にしし
>>3685
日本語をそのまま記述すると文字化けすることがありますがブラウザの仕様です。てがろぐは関係ないです。
回避するにはUnicodeで記述すればOKです。
参考記事:beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法
(132文字) No.3686 at by Icon of admin あどみ
お世話になっております。てがろぐ、とても楽しく使わせていただいています。
が、少し気になることがあったので報告させていただきます。

cssで、before疑似要素のcontentプロパティで文字列を表示させています。
この文字列がときどき文字化けします。
ただ、発生頻度は高くなく、一度文字化けしても何度かブラウザリロードを繰り返すと正常な表示に戻るので、そこまで困ってはいません。
具体的には「カテゴリ:」が「カテゴリ:」になります。他、「タグ  :」も化けますがこちらは取得し損ねました(30分ほど粘りましたが再現しませんでした)
「カテゴリ:」の方の実際の表示(と、Chromeのデベロッパーツール上で文字化けしている様子)を添付します。

尚、この文字化けが発生している際はcssファイル内の他の日本語文字列(たとえばフォント指定など)も同様に文字化けしています。

文字化けの発生契機が特定できず再現性も低いので申し訳ないのですが、お手隙の際にご確認いただければ幸いです。
解析に情報が必要であればできる限り取得しますのでお申し付けください。
2023y04m23d_025324664.png 2023y04m23d_025513954.png 2023y04m23d_025547867.png
(490文字) No.3685 質問/要望 at by Icon of sakura さくら
いつも楽しく使わせていただいております。いろんな機能があってとてもおもしろいです!
質問なのですが、通常だと投稿番号がページタイトルになりますよね。そんな感じでTitleタグに本文の1行目を入れる方法はありますでしょうか。内側スキンにはそういう記法がありましたが、外側だとどうすればいいのかなと思いまして……。
#質問
(159文字) No.3684 at by Icon of admin あどみ

■複合検索:

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

■日付一覧:

■カレンダー:

2023年4月
1
2345678
9101112131415
16171819202122
23242526272829
30

■最近の投稿:

■新着画像リスト:

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

全317個 (総容量 36.08MB)

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