てがろぐ
- Fumy Otegaru Memo Logger -
No.2039, No.2038, No.2037, No.2036, No.2035, No.2034, No.2033［7件］
そろそろ＃🌱豆知識も単独ページにまとめたい。……とは過去何度も思っているのですけども。（今の時点で46件あります。）
もっと何か良い方法がありそうな気もしないでもない。
カテゴリをアイコンで表示したい場合 #🌱豆知識
所属カテゴリの名称を表示する代わりに、カテゴリを表すアイコンを表示したい場合は、例えば以下のような方法があります。
▼方法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="日記">……みたいな感じで、カテゴリの数だけ列挙されるような。
何かご要望あればお気軽にお知らせ下さい。(╹◡╹)ﾉ
畳む
どーぞー
テストさせていただきます
最新版へのアップグレード報告をどうもありがとうございます。(╹◡╹)ﾉ
🍰Re:2029◆早速のバージョンアップをどうもありがとうございます！
🍰Re:2030◆なるほど、そこを揃える発想はありませんでした。たしかに合わせた方が良いですね。そして、同種の設定項目が2つあることに気付きました。「カテゴリ管理」画面のカテゴリ階層プレビュー枠の最下部にも「カテゴリなし」に相当する文字列の設定項目がありますね。(^_^;;; どちらかというと、こちらの設定項目に合わせる方が良いかな、という気はしました。いずれにせよ、次のバージョンで実装します。ご要望をありがとうございます。
🍰Re:2031◆ご報告をどうもありがとうございます！
🍰Re:2032◆たしかに、絞り込んだ先から一括してカテゴリを設定できると便利ですね。そこそこ複雑な処理になりますので、すぐにというわけにはいかなさそうですが、何らかの「カテゴリ一括登録機能」は必要だろうと思ってはいたところですので、方法を検討して実装計画に入れておきます。ご要望をありがとうございます。
🍰Re:2033◆ご使用ありがとうございます。ギャラリーモードをTOP扱いになさっている方々もちらほらいらっしゃるようですね。過去に頂いたご要望などから、そんな気がしています。(^_^;) いろいろ気に入って下さったようで嬉しいです。迷惑などとんでもなく、ご活用報告メールは開発モチベーションの維持に大きく影響しますので、大歓迎です。ぜひお知らせ下さい。(╹◡╹)ﾉ
🍰Re:2029◆早速のバージョンアップをどうもありがとうございます！
🍰Re:2030◆なるほど、そこを揃える発想はありませんでした。たしかに合わせた方が良いですね。そして、同種の設定項目が2つあることに気付きました。「カテゴリ管理」画面のカテゴリ階層プレビュー枠の最下部にも「カテゴリなし」に相当する文字列の設定項目がありますね。(^_^;;; どちらかというと、こちらの設定項目に合わせる方が良いかな、という気はしました。いずれにせよ、次のバージョンで実装します。ご要望をありがとうございます。
🍰Re:2031◆ご報告をどうもありがとうございます！
🍰Re:2032◆たしかに、絞り込んだ先から一括してカテゴリを設定できると便利ですね。そこそこ複雑な処理になりますので、すぐにというわけにはいかなさそうですが、何らかの「カテゴリ一括登録機能」は必要だろうと思ってはいたところですので、方法を検討して実装計画に入れておきます。ご要望をありがとうございます。
🍰Re:2033◆ご使用ありがとうございます。ギャラリーモードをTOP扱いになさっている方々もちらほらいらっしゃるようですね。過去に頂いたご要望などから、そんな気がしています。(^_^;) いろいろ気に入って下さったようで嬉しいです。迷惑などとんでもなく、ご活用報告メールは開発モチベーションの維持に大きく影響しますので、大歓迎です。ぜひお知らせ下さい。(╹◡╹)ﾉ
