てがろぐ
- Fumy Otegaru Memo Logger -
カテゴリ「情報」に属する投稿［41件］（2ページ目）
てがろぐ Ver 3.7.0 を公開しました。下書きプレビュー機能、下げる投稿機能、状況に応じた見出しのバリエーション選択機能や装飾仕様の追加、CGIの1行目を書き換えずに済む仕様改善などが主な更新点です。その他、細かな機能追加と(セキュリティ面を含む)不具合修正を含んでいます。
➡ https://www.nishishi.com/cgi/tegalog/
アップデートするには、tegalog.cgi と fumycts.pl の2ファイルだけを上書きアップロードして下さい。
データファイルや設定ファイルは、すべてそのまま引き継げます。(Ver.2以下も含む過去のどのバージョンからでも)
※セキュリティ面に影響する不具合を修正しました（詳細は最下部）ので、できるだけ早めのバージョンアップをお勧め致します。（特に、不特定多数からのゲスト投稿を認める形態で運営している場合は早急なバージョンアップを強くお勧め致します。）
🆕 Ver 3.7.0の更新点(概要)：
●下書き投稿を（非公開状態のままで）プレビューできる機能を追加。
●下げる(一覧外)投稿機能を追加。（通常では表示されないが、指定条件下や単独表示時のみ表示されるようにする機能）
●状況に応じた見出しの表示バリエーション選択機能と装飾仕様を追加。
●tegalog.cgi の1行目を、書き換えなくても済む可能性の高い「 #! /usr/bin/env perl 」に変更。
●管理画面に表示される各種「削除ボタン」を（左寄せではなく）右寄せで表示できる設定機能を追加。
●管理画面のページタイトル先頭に任意の識別名称を付与できる設定機能を追加。
●ログインされていない状況で非表示にするためのCSSを、スキン側のCSSに影響されないよう修正。
●各スキンのRSS Auto-Discoveryの記述には、状況に依存しない [[RSS:URL:PURE:FULL]] を使うよう修正。
●ルビを振られる側の文字列が半角英数だけの場合にルビが振られない不具合を解消。
●リンクURLの後に半角空白が2つ続くと、リンク先が正しくなくなる不具合を解消。
●不正な画像ファイルが投稿された際に、動作が極端に遅くなる問題に対処。(セキュリティ面での更新)
更新点について詳しい解説は、リリースノート(No.37)をご参照下さい。
なお、解説ドキュメントも増強してあります。主な増量ポイントはリリースノートからもリンクしてありますのでご参照頂ければ幸いです。
➡ https://www.nishishi.com/cgi/tegalog/
アップデートするには、tegalog.cgi と fumycts.pl の2ファイルだけを上書きアップロードして下さい。
データファイルや設定ファイルは、すべてそのまま引き継げます。(Ver.2以下も含む過去のどのバージョンからでも)
※セキュリティ面に影響する不具合を修正しました（詳細は最下部）ので、できるだけ早めのバージョンアップをお勧め致します。（特に、不特定多数からのゲスト投稿を認める形態で運営している場合は早急なバージョンアップを強くお勧め致します。）
🆕 Ver 3.7.0の更新点(概要)：
●下書き投稿を（非公開状態のままで）プレビューできる機能を追加。
●下げる(一覧外)投稿機能を追加。（通常では表示されないが、指定条件下や単独表示時のみ表示されるようにする機能）
●状況に応じた見出しの表示バリエーション選択機能と装飾仕様を追加。
●tegalog.cgi の1行目を、書き換えなくても済む可能性の高い「 #! /usr/bin/env perl 」に変更。
●管理画面に表示される各種「削除ボタン」を（左寄せではなく）右寄せで表示できる設定機能を追加。
●管理画面のページタイトル先頭に任意の識別名称を付与できる設定機能を追加。
●ログインされていない状況で非表示にするためのCSSを、スキン側のCSSに影響されないよう修正。
●各スキンのRSS Auto-Discoveryの記述には、状況に依存しない [[RSS:URL:PURE:FULL]] を使うよう修正。
●ルビを振られる側の文字列が半角英数だけの場合にルビが振られない不具合を解消。
●リンクURLの後に半角空白が2つ続くと、リンク先が正しくなくなる不具合を解消。
●不正な画像ファイルが投稿された際に、動作が極端に遅くなる問題に対処。(セキュリティ面での更新)
更新点について詳しい解説は、リリースノート(No.37)をご参照下さい。
なお、解説ドキュメントも増強してあります。主な増量ポイントはリリースノートからもリンクしてありますのでご参照頂ければ幸いです。
≪ ご意見募集 ≫
ちょっと何やら開発当初の想定とは異なる動作をしているような箇所に気付いたのですが……。(^_^;;;
投稿単独ページへのURLを出力する [[PARMAURL]] という記法に対して、
一時適用中のスキンを維持しないURLを出力する [[PARMAURL:PURE]] という記法があります。
(リファレンス) https://www.nishishi.com/cgi/tegalog/custom/#customize...
これらの出力内容は、管理画面の［設定］→［ページの表示］→【投稿本文の表示／テキスト】→［▼テキストリンクの出力調整］→『一時適用中のスキンを維持できるリンクを出力する』チェックボックスで、動作を選択できます。
この [[PARMAURL:PURE]] という記法は Ver 2.5.0 （2020年2月リリース）で追加されました。
過去バージョンのソースを確認したところ、
Ver 2.7.0 （2020年6月リリース）以降のすべてのバージョン（最新版まで含めて全て）では、下記のような動作になっているように見えます。
この『一時適用中のスキンを維持できるリンクを出力する』項目が……
▼ONのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] でも、スキンが維持されるリンク
▼OFFのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] では、スキンが維持されないリンク
上記の赤色で表示した部分は、私の想定とは異なる動作です。
私の当初の想定では、以下のような動作になることを考えていたのですが……。
▼ONのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] では、スキンが維持されないリンク
▼OFFのとき、
[[PARMAURL]] では、スキンが維持されないリンク
[[PARMAURL:PURE]] でも、スキンが維持されないリンク
これ、いまさら後者のように動作仕様を変更すると困る方って、いらっしゃいますかね……？
複数のスキンを併用してアクロバットに構築なさっている場合には影響ありそうなんですが。
Ver 2.7.0 （2020年6月リリース）から発生している問題なので、さすがに1年半も経っていますから、上記の動作を前提にして独自スキンを作っていらっしゃる方々も居るだろうな……と思いまして、今更修正するかどうか迷っています。
もしご意見がありましたら、ここにご投稿頂くなり、メールでお知らせ頂くなり、開発進捗状況報告サイトの当該記事にコメント頂くなりして頂けると助かります。
ちょっと何やら開発当初の想定とは異なる動作をしているような箇所に気付いたのですが……。(^_^;;;
投稿単独ページへのURLを出力する [[PARMAURL]] という記法に対して、
一時適用中のスキンを維持しないURLを出力する [[PARMAURL:PURE]] という記法があります。
(リファレンス) https://www.nishishi.com/cgi/tegalog/custom/#customize...
これらの出力内容は、管理画面の［設定］→［ページの表示］→【投稿本文の表示／テキスト】→［▼テキストリンクの出力調整］→『一時適用中のスキンを維持できるリンクを出力する』チェックボックスで、動作を選択できます。
この [[PARMAURL:PURE]] という記法は Ver 2.5.0 （2020年2月リリース）で追加されました。
過去バージョンのソースを確認したところ、
Ver 2.7.0 （2020年6月リリース）以降のすべてのバージョン（最新版まで含めて全て）では、下記のような動作になっているように見えます。
この『一時適用中のスキンを維持できるリンクを出力する』項目が……
▼ONのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] でも、スキンが維持されるリンク
▼OFFのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] では、スキンが維持されないリンク
上記の赤色で表示した部分は、私の想定とは異なる動作です。
私の当初の想定では、以下のような動作になることを考えていたのですが……。
▼ONのとき、
[[PARMAURL]] では、スキンが維持されるリンク
[[PARMAURL:PURE]] では、スキンが維持されないリンク
▼OFFのとき、
[[PARMAURL]] では、スキンが維持されないリンク
[[PARMAURL:PURE]] でも、スキンが維持されないリンク
これ、いまさら後者のように動作仕様を変更すると困る方って、いらっしゃいますかね……？
複数のスキンを併用してアクロバットに構築なさっている場合には影響ありそうなんですが。
Ver 2.7.0 （2020年6月リリース）から発生している問題なので、さすがに1年半も経っていますから、上記の動作を前提にして独自スキンを作っていらっしゃる方々も居るだろうな……と思いまして、今更修正するかどうか迷っています。
もしご意見がありましたら、ここにご投稿頂くなり、メールでお知らせ頂くなり、開発進捗状況報告サイトの当該記事にコメント頂くなりして頂けると助かります。
メールで頂いたご質問ですが、他の方々にも役立つ可能性がありそうなのでここでOPENにしておきます。
てがろぐCGIには「続きを読む」ボタンのラベルを変更する設定機能がありますが、すべての「続きを読む」ボタンのラベルが一括で変わります。そのため、そのままでは『普段は「続きを読む」という設定にしておいて、ある記事だけ「ネタバレ」などに個別に変更する』といったことはできません。しかし、「続きを読む」ボタンそのものを文字装飾の範囲内に含められる仕様がありますから、これとJavaScriptを併用すれば、「続きを読む」ボタンのラベルのバリエーションを複数用意することもできそうです。
長いので折りたたんでおきます。➡
▼投稿時の工夫
まず、「続きを読む」ボタンを、何らかの文字装飾の内側に書きます。
例えば、 [B:太字の[H:内側を隠す]感じです。]
このようにすると、<b class="decorationB">太字の<a class="readmorebutton readmoreopen" ……>続きを読む</a>～ のような感じでHTMLが出力されます。
▼ラベルを変えるJavaScript
なので、JavaScriptを以下のように書けば、『太字装飾の内側にある「続きを読む」ボタン』に限定して、ラベルを変更できます。
const readMoreBtn1 = document.querySelectorAll(".decorationB .readmoreopen");
readMoreBtn1.forEach(function(oneItem) {
oneItem.innerHTML = 'ネタバレ';
});
上記のJavaScriptソースを、外側スキンの末尾（</body>タグの直前あたり）に書いておけば、『太字装飾の内側にある「続きを読む」ボタン』はすべて「ネタバレ」というラベルに変わると思います。
※上記のJavaScriptソースの記述位置は、必ず「ページの末尾」でないとうまくいかない点にご注意下さい。（対象のHTMLをすべて読んだ後に実行しないと意味がないからです。）
▼ラベルのバリエーションを追加する場合は
デフォルトの「続きを読む」、バリエーション1「ネタバレ」以外にもいくつかのバリエーションを用意したい場合は、『斜体装飾の内側』とか『下線装飾の内側』などの装飾を使うと良いでしょう。
『斜体装飾の内側』を使う場合は、
const readMoreBtn2 = document.querySelectorAll(".decorationI .readmoreopen");
readMoreBtn2.forEach(function(oneItem) {
oneItem.innerHTML = 'つぼやき';
});
などのように書くと良いでしょう。
▼たぶんこれが一番良い？
ボタンのラベルや隠された範囲全体が太字や斜体などに装飾されてしまうのを避けたい場合は（たいてい避けたいでしょうね^^;）、既定の文字装飾ではなく自由装飾機能 [F:hogehoge:～] を使うと良いと思います。
例えば、[F:netabare:[H:ここにネタバレ]～] のように投稿するなら、ここの「続きを読む」ボタンのラベルだけを「ネタバレ」に変更するには、以下のJavaScriptソースを書いておけば良いでしょう。
const readMoreBtn3 = document.querySelectorAll(".deco-netabare .readmoreopen");
readMoreBtn3.forEach(function(oneItem) {
oneItem.innerHTML = 'ねたばれ';
});
※自由装飾でclass名を「netabare」と指定した場合、実際のHTMLに出力されるclass名は「deco-netabare」になる点にご注意下さい。
#🌱豆知識 畳む
てがろぐCGIには「続きを読む」ボタンのラベルを変更する設定機能がありますが、すべての「続きを読む」ボタンのラベルが一括で変わります。そのため、そのままでは『普段は「続きを読む」という設定にしておいて、ある記事だけ「ネタバレ」などに個別に変更する』といったことはできません。しかし、「続きを読む」ボタンそのものを文字装飾の範囲内に含められる仕様がありますから、これとJavaScriptを併用すれば、「続きを読む」ボタンのラベルのバリエーションを複数用意することもできそうです。
長いので折りたたんでおきます。➡
▼投稿時の工夫
まず、「続きを読む」ボタンを、何らかの文字装飾の内側に書きます。
例えば、 [B:太字の[H:内側を隠す]感じです。]
このようにすると、<b class="decorationB">太字の<a class="readmorebutton readmoreopen" ……>続きを読む</a>～ のような感じでHTMLが出力されます。
▼ラベルを変えるJavaScript
なので、JavaScriptを以下のように書けば、『太字装飾の内側にある「続きを読む」ボタン』に限定して、ラベルを変更できます。
const readMoreBtn1 = document.querySelectorAll(".decorationB .readmoreopen");
readMoreBtn1.forEach(function(oneItem) {
oneItem.innerHTML = 'ネタバレ';
});
上記のJavaScriptソースを、外側スキンの末尾（</body>タグの直前あたり）に書いておけば、『太字装飾の内側にある「続きを読む」ボタン』はすべて「ネタバレ」というラベルに変わると思います。
※上記のJavaScriptソースの記述位置は、必ず「ページの末尾」でないとうまくいかない点にご注意下さい。（対象のHTMLをすべて読んだ後に実行しないと意味がないからです。）
▼ラベルのバリエーションを追加する場合は
デフォルトの「続きを読む」、バリエーション1「ネタバレ」以外にもいくつかのバリエーションを用意したい場合は、『斜体装飾の内側』とか『下線装飾の内側』などの装飾を使うと良いでしょう。
『斜体装飾の内側』を使う場合は、
const readMoreBtn2 = document.querySelectorAll(".decorationI .readmoreopen");
readMoreBtn2.forEach(function(oneItem) {
oneItem.innerHTML = 'つぼやき';
});
などのように書くと良いでしょう。
▼たぶんこれが一番良い？
ボタンのラベルや隠された範囲全体が太字や斜体などに装飾されてしまうのを避けたい場合は（たいてい避けたいでしょうね^^;）、既定の文字装飾ではなく自由装飾機能 [F:hogehoge:～] を使うと良いと思います。
例えば、[F:netabare:[H:ここにネタバレ]～] のように投稿するなら、ここの「続きを読む」ボタンのラベルだけを「ネタバレ」に変更するには、以下のJavaScriptソースを書いておけば良いでしょう。
const readMoreBtn3 = document.querySelectorAll(".deco-netabare .readmoreopen");
readMoreBtn3.forEach(function(oneItem) {
oneItem.innerHTML = 'ねたばれ';
});
※自由装飾でclass名を「netabare」と指定した場合、実際のHTMLに出力されるclass名は「deco-netabare」になる点にご注意下さい。
#🌱豆知識 畳む
CGIを設置する際に、最初に何らかの編集（例えば1行目の /usr/bin/perl のパスを変更するとか）が必要になる場合で、適当なテキストエディタがない場合は、もしかするとブラウザ版のVisual Studio Codeが便利かもしれません。ブラウザ上で動作するのでローカルには何もインストールしておく必要がありませんし、プログラミング目的のエディタなので改行コードや文字コードの維持が確実な点も安心ですし。メニューがすべて英語ですが、上書き保存は「≡」→「File」→「Save」でできます（[Ctrl]+[S]でもできますが）。ただ、ブラウザによってはローカルファイルへのアクセスができない場合がありますから、普段お使いのブラウザが非対応の場合には別のブラウザを使う必要があります。Windows版ブラウザでは、ChromeではいけましたがFirefoxではダメでした。 ➡https://vscode.dev/
「誰が投稿したのかが微妙に分からない」状況も面白いかと思って運営してきましたが、事実上のサポートフォーラムとしても活用していることを考えると、やはり「私の発言であるかどうか」だけは明確に分かる仕様でないと誤解を招きかねないので、私専用のIDを作りました。
この試験場では管理者権限が付与されたIDもテスト用に開放していますが、どなたかが私の投稿を編集なさると、てがろぐの仕様では『書き換えたIDの名義』に変わるため、その後は「私のID以外の発言」であるように表示されますからすぐ分かります。（※私のIDはログイン画面のリストやユーザIDの一覧には出てきません。）もっとも、アイコンやIDが表示されないスキンもあるわけですが。なお、過去の発言分については、2,000件超の投稿すべてを1つ1つ確認するのはしんどいので(^_^;)、データファイルをざっくり斜め見て「自分の発言だよな」と思える投稿でだけIDを書き換えました。もしかしたら間違いもあるかも知れませんけども。(^_^;)
この試験場では管理者権限が付与されたIDもテスト用に開放していますが、どなたかが私の投稿を編集なさると、てがろぐの仕様では『書き換えたIDの名義』に変わるため、その後は「私のID以外の発言」であるように表示されますからすぐ分かります。（※私のIDはログイン画面のリストやユーザIDの一覧には出てきません。）もっとも、アイコンやIDが表示されないスキンもあるわけですが。なお、過去の発言分については、2,000件超の投稿すべてを1つ1つ確認するのはしんどいので(^_^;)、データファイルをざっくり斜め見て「自分の発言だよな」と思える投稿でだけIDを書き換えました。もしかしたら間違いもあるかも知れませんけども。(^_^;)
カテゴリ限定表示やハッシュタグ限定表示の場合、従来は1種類ずつしか表示できなかったわけですけども、OR検索ができるようになったので、以下のような表示も可能になりました。
●「雑記(memo)」・「つぶやき(diary)」・「つぼやき(tsubo)」の3カテゴリをまとめて見る。
■#要望 と #質問 の2つのハッシュタグを合わせて見る。
OR検索は、検索語を半角縦棒「|」で区切れば良いので、以下のように検索語を指定すれば済みます。
●検索語「memo|diary|tsubo」
■検索語「#要望|#質問」
AND検索との違いは下記の通り。
●AND検索「memo diary tsubo」＝3つのカテゴリ全部に同時に属している投稿を表示。(※)
●OR検索 「memo|diary|tsubo」＝3つのカテゴリのどれかに属している投稿を表示。(※)
■AND検索「 #要望 #質問 」＝両方のハッシュタグが同時に使われている投稿を表示。
■OR検索 「 #要望|#質問 」＝どちらかのハッシュタグが使われている投稿を表示。
※カテゴリIDが検索対象になっているのでこのような検索ができるわけですが、「カテゴリIDと同じ文字列が本文内に使われている投稿」も同時にヒットします。
畳む
●「雑記(memo)」・「つぶやき(diary)」・「つぼやき(tsubo)」の3カテゴリをまとめて見る。
■#要望 と #質問 の2つのハッシュタグを合わせて見る。
OR検索は、検索語を半角縦棒「|」で区切れば良いので、以下のように検索語を指定すれば済みます。
●検索語「memo|diary|tsubo」
■検索語「#要望|#質問」
AND検索との違いは下記の通り。
●AND検索「memo diary tsubo」＝3つのカテゴリ全部に同時に属している投稿を表示。(※)
●OR検索 「memo|diary|tsubo」＝3つのカテゴリのどれかに属している投稿を表示。(※)
■AND検索「 #要望 #質問 」＝両方のハッシュタグが同時に使われている投稿を表示。
■OR検索 「 #要望|#質問 」＝どちらかのハッシュタグが使われている投稿を表示。
※カテゴリIDが検索対象になっているのでこのような検索ができるわけですが、「カテゴリIDと同じ文字列が本文内に使われている投稿」も同時にヒットします。
畳む
カテゴリをアイコンで表示したい場合 #🌱豆知識
所属カテゴリの名称を表示する代わりに、カテゴリを表すアイコンを表示したい場合は、例えば以下のような方法があります。
▼方法1：（今のところ一番お勧めな方法）
以前に No.1881 で紹介しましたので、そちらをご参照下さい。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法2：簡単な(分かりやすい)方法（ただし、1投稿に1カテゴリしか設定しない前提）
内側スキンに、以下のようなimg要素を書きます。
すると、実際には以下のような出力になります。
●カテゴリ info (情報)に属する場合： <img src="/imagepath/info.png" alt="情報">
●カテゴリ diary (日記)に属する場合： <img src="/imagepath/diary.png" alt="日記">
●どのカテゴリにも属さない場合： <img src="/imagepath/nocat.png" alt="(※)">
なので、 info.png とか diary.png とか nocat.png とかのファイル名で適当な場所(上記の場合は/imagepath/)に画像ファイルを用意しておけば、それが表示されます。
ただ、この場合は、1つの投稿に複数のカテゴリが設定されている場合にはうまくいきません。（例えば、infoカテゴリと diaryカテゴリの両方に属している場合用に「info diary.png」を用意するなど、あらゆるパターンを用意していれば話は別ですが。^^; ※[[CATEGORYIDS:IFEMPTY:xxx]]を使う場合、カテゴリIDの区切りは常に半角スペースになります。なので、半角スペースを含むファイル名の画像が必要になります。詳しくは、解説ページの「カテゴリ関連要素」項目をご参照下さい。）
(※)の部分にどう表示されるかは、管理画面の[設定]→[ページの表示]→【カテゴリの表示】→「カテゴリ名として表示する内容」項目の設定次第です。デフォルト設定では、何も表示されません。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法3：（何らかの事情で方法1が使えない場合。複数カテゴリでも(一応は)動作に問題はない）
内側スキンに、以下のようなspan要素を書いておきます。
すると、実際には以下のような出力になります。
●カテゴリ info (情報)に属する場合： <span class="caticon"><span class="info">情報</span></span>
●カテゴリ diary (日記)に属する場合： <span class="caticon"><span class="diary">日記</span></span>
●カテゴリ info と diary に属する場合： <span class="caticon"><span class="info diary">情報,日記</span></span>
●どのカテゴリにも属さない場合： <span class="caticon"><span class="empty">(※)</span></span>
上記の場合は、1つの投稿に複数のカテゴリが設定されていてもおかしくはなりません。
その上で、例えば以下のようにCSSを書いておきます。
要するに、背景画像としてアイコン画像を指定しています。
この場合、1投稿に複数のカテゴリが設定されている場合は、どれか1つ（たぶん後に記述されているアイコン）だけが表示されるので、所属カテゴリ全部のアイコンを並べられるわけではありません。しかし、少なくともおかしな出力にはならないので、表示は可能でしょう。
なので、アイコン表示とは別に [[CATEGORYLINKS]] も記述しておいて、カテゴリの名称がテキストで列挙される空間も併せて用意しておく方が良いでしょうね。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
以上、カテゴリをアイコンで表示する方法3つでした。
もしかしたら、もっと良い方法が他にあるかもしれませんけども。
とはいえ、何か公式に「カテゴリをアイコンで表示する」仕組みを用意した方が良いかもしれませんね。一応、方法1で問題ないのではないかとは思うのですが、CSSを自力で書く必要があるのがちょっと大変かもしれませんし……。
[[CATEGORYICONLINKS]]みたいな感じで、アイコン出力前提のHTMLを挿入できると良いですかね。
出力は、<img src="info.png" alt="情報"><img src="diary.png" alt="日記">……みたいな感じで、カテゴリの数だけ列挙されるような。
何かご要望あればお気軽にお知らせ下さい。(╹◡╹)ﾉ
畳む
所属カテゴリの名称を表示する代わりに、カテゴリを表すアイコンを表示したい場合は、例えば以下のような方法があります。
▼方法1：（今のところ一番お勧めな方法）
以前に No.1881 で紹介しましたので、そちらをご参照下さい。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法2：簡単な(分かりやすい)方法（ただし、1投稿に1カテゴリしか設定しない前提）
内側スキンに、以下のようなimg要素を書きます。
<img src="/imagepath/[[CATEGORYIDS:IFEMPTY:nocat]].png" alt="[[CATEGORYNAMES]]">
すると、実際には以下のような出力になります。
●カテゴリ info (情報)に属する場合： <img src="/imagepath/info.png" alt="情報">
●カテゴリ diary (日記)に属する場合： <img src="/imagepath/diary.png" alt="日記">
●どのカテゴリにも属さない場合： <img src="/imagepath/nocat.png" alt="(※)">
なので、 info.png とか diary.png とか nocat.png とかのファイル名で適当な場所(上記の場合は/imagepath/)に画像ファイルを用意しておけば、それが表示されます。
ただ、この場合は、1つの投稿に複数のカテゴリが設定されている場合にはうまくいきません。（例えば、infoカテゴリと diaryカテゴリの両方に属している場合用に「info diary.png」を用意するなど、あらゆるパターンを用意していれば話は別ですが。^^; ※[[CATEGORYIDS:IFEMPTY:xxx]]を使う場合、カテゴリIDの区切りは常に半角スペースになります。なので、半角スペースを含むファイル名の画像が必要になります。詳しくは、解説ページの「カテゴリ関連要素」項目をご参照下さい。）
(※)の部分にどう表示されるかは、管理画面の[設定]→[ページの表示]→【カテゴリの表示】→「カテゴリ名として表示する内容」項目の設定次第です。デフォルト設定では、何も表示されません。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法3：（何らかの事情で方法1が使えない場合。複数カテゴリでも(一応は)動作に問題はない）
内側スキンに、以下のようなspan要素を書いておきます。
<span class="caticon"><span class="[[CATEGORYIDS:IFEMPTY:empty]]">[[CATEGORYNAMES]]</span></span>
すると、実際には以下のような出力になります。
●カテゴリ info (情報)に属する場合： <span class="caticon"><span class="info">情報</span></span>
●カテゴリ diary (日記)に属する場合： <span class="caticon"><span class="diary">日記</span></span>
●カテゴリ info と diary に属する場合： <span class="caticon"><span class="info diary">情報,日記</span></span>
●どのカテゴリにも属さない場合： <span class="caticon"><span class="empty">(※)</span></span>
上記の場合は、1つの投稿に複数のカテゴリが設定されていてもおかしくはなりません。
その上で、例えば以下のようにCSSを書いておきます。
/* アイコンサイズ等の共通装飾 */
.caticon span {
display: inline-block; /* インラインブロック化 */
width: 32px; /* アイコンの横幅 */
height: 32px; /* アイコンの高さ */
background-size: contain; /* 背景画像を描画面積に合わせる */
text-indent: -9999px; /* テキストを非表示にする */
}
.caticon .info { background-image: url("info.png"); } /* info用画像 */
.caticon .diary { background-image: url("diary.png"); } /* diary用画像 */
.caticon .empty { background-image: url("empty.png"); } /* なし用画像 */
要するに、背景画像としてアイコン画像を指定しています。
この場合、1投稿に複数のカテゴリが設定されている場合は、どれか1つ（たぶん後に記述されているアイコン）だけが表示されるので、所属カテゴリ全部のアイコンを並べられるわけではありません。しかし、少なくともおかしな出力にはならないので、表示は可能でしょう。
なので、アイコン表示とは別に [[CATEGORYLINKS]] も記述しておいて、カテゴリの名称がテキストで列挙される空間も併せて用意しておく方が良いでしょうね。
🍘🍘🍘🍫🍫🍫🍪🍪🍪
以上、カテゴリをアイコンで表示する方法3つでした。
もしかしたら、もっと良い方法が他にあるかもしれませんけども。
とはいえ、何か公式に「カテゴリをアイコンで表示する」仕組みを用意した方が良いかもしれませんね。一応、方法1で問題ないのではないかとは思うのですが、CSSを自力で書く必要があるのがちょっと大変かもしれませんし……。
[[CATEGORYICONLINKS]]みたいな感じで、アイコン出力前提のHTMLを挿入できると良いですかね。
出力は、<img src="info.png" alt="情報"><img src="diary.png" alt="日記">……みたいな感じで、カテゴリの数だけ列挙されるような。
何かご要望あればお気軽にお知らせ下さい。(╹◡╹)ﾉ
畳む
てがろぐVer 3.0.0のリリースに合わせて、てがろぐCGIを設置する解説、使用する解説、カスタマイズする解説の3種類の専門ページも開設しています。こちらもぜひご活用下さい。
特に、スキンをカスタマイズしたり自作したりするための解説は、カスタマイズ方法ページで詳しく解説しています。
また、てがろぐHOMEページ自体もリニューアルしています。
特に、スキンをカスタマイズしたり自作したりするための解説は、カスタマイズ方法ページで詳しく解説しています。
また、てがろぐHOMEページ自体もリニューアルしています。
