「てがろぐ」では、表示用のスキンファイル（＝テンプレートHTMLファイル）をカスタマイズすることで、見た目を自由に変更できます。 スキンの実体は単純なHTMLファイルですから、自由に編集したり自作したりしてお使い頂けます。 なお、法人向けのカスタマイズサービスも提供していますので、ぜひご利用下さい。

スキンの置き方

デフォルトで使うスキン(標準適用スキン)は、CGIと同じディレクトリに置いて下さい。(※下図の緑色部分)
切り替えて使いたいスキンや、一時的に試したいスキンは、適当な名称のサブディレクトリを作成して「1スキン＝1ディレクトリ」で置いて下さい。(※下図のピンク色部分)

基本は1スキン3ファイルで構成されますが、 RSSフィード用のスキンのように「CSSが不要なスキン」の場合は、1スキンが2ファイルで構成されています。CSSファイルは存在しなくてもスキンとして認識されます。

▼スキンの設置サブディレクトリ名が事実上のスキン名

てがろぐCGIには、スキンに名称を付ける機能はありません。
スキンを格納しているディレクトリ名が、事実上の「スキン名」として機能しています。

スキンをカスタマイズする際に書き換えるファイル

1つのスキンは、主に次の3つのファイルで構成されています。 これらを書き換えることで、自由にカスタマイズできます。

• ページそのもののカスタマイズ
  • skin-cover.html : ページ全体用の「外側スキン」ファイルです。(編集方法は後述)
  • skin-onelog.html : 個別投稿表示用の「内側スキン」ファイルです。(編集方法は後述)
• デザインのカスタマイズ
  • tegalog.css : ページの表示に使われるスタイルシートです。装飾やレイアウト等を変更したい場合に書き換えます。(※)

▼スキンファイルの位置関係

スキンを構成する2つのHTMLファイルのうち、skin-cover.htmlは下図橙色部分のように「ページ全体」を作っています。
このskin-cover.html内に記述した [[TEGALOG]] の部分は、skin-onelog.htmlを使って生成されます。 下図では水色の部分です。
投稿1つにつきskin-onelog.htmlが1回使われますから、1ページに投稿が30個表示されるなら、skin-onelog.htmlは30回ループして使用されます。

標準添付のスキンには、カスタマイズしやすいようにHTMLのコメントの形で説明が含まれています。
特にskin-onelog.htmlは表示される投稿の数だけループして使われますから、カスタマイズする際にはコメント部分は削除しておくと、無駄な通信を削減しやすいと思います。(^_^;)

▼HTML5前提

ページ表示用のスキンファイルは、HTML5で記述することを前提にしています。（HTML Living Standardと言っても良いですが。）

HTML4以下の文法で書いても大丈夫ですが、XHTMLで書いてしまうとブラウザがエラーを出すケースがあります。
特に、外側スキンファイルをXML宣言で書き始めてしまうと、text/htmlではなくapplication/xmlのヘッダで出力してしまうため、ウェブページとして表示されない可能性がありますのでご注意下さい。 どうしてもXHTMLで書きたい場合は、ファイル先頭のXML宣言は書かないで省略して下さい。

複数のスキンを同時に使用する方法

てがろぐCGIでは、 tegalog.cgi?skin=skin-twitter のように「skin=(スキン格納ディレクトリ名)」の書式でパラメータを加えることで、別のスキンを適用した状態でページを表示できます。 この方法を使えば、複数のスキンを同時に使うこともできます。

また、そのような方法を使わずに、CGI標準の仕様として（標準適用スキンとは別に）同時に使用される特別なスキンもあります。 以下に概要を説明します。

▼標準で同時に使用される(可能性がある)特別スキン

標準適用されるスキン（＝ページの表示に使われるスキン）の他に、以下の3つのスキンが同時に使用される可能性があります。

• ギャラリーモードを生成するためのスキン（※ギャラリーモードを使う場合に限ります。）
• サイトマップページを生成するためのスキン（※サイトマップページを使う場合に限ります。）
• RSSフィードを生成するためのスキン（※RSS出力機能を使う場合で、内蔵のRSS生成スキンを使わない場合に限ります。）

これらのスキン名(＝スキンを格納するディレクトリ名)は、標準では skin-gallery と rss ですが、下図の黄色矢印部分のように管理画面の「設定」→「補助設定」からディレクトリ名を手動で指定することもできます。 これらの用途に指定されたスキンは、スキンの切り替え画面から「切り替え用スキン候補」としては除外されます。(下図の緑色矢印部分)

上記のスキンは、（各機能を使う設定にしている限りは）標準適用スキンに加えて常に同時に併用されます。

▼任意のスキンを併用する方法

完全版パッケージに添付されている「昔のTwitterっぽいスキン」や「ジャーナル用スキン」などのように、ページを生成する用途に作られたスキンでも、複数のスキンを併用できます。 メインで使うスキンを1つ選び、それ以外のスキンはサブとして、以下のようなURLでアクセスするだけです。

• メインで使うスキン（＝標準適用スキン）で表示する場合： tegalog.cgi
• サブで使うスキン1（例：Twitterっぽい）で表示する場合： tegalog.cgi?skin=skin-twitter
• サブで使うスキン2（例：付箋型スキン）で表示する場合： tegalog.cgi?skin=skin-fusen

本文中の内部リンクのリンク先として、どのスキンを適用したURLにリンクさせたいか（適用中のスキンを維持させたいのか、標準適用スキンを使った表示の方にリンクにしたいのか）など、いくつかの設定に選択肢があります。 詳しくは、後述の複数スキンの共存カスタマイズ方法をご覧下さい。

▼スキンは、直下のサブディレクトリ以外の別階層にあっても使える

別スキンは、tegalog.cgiの存在する場所直下のサブディレクトリにあれば、管理画面から一覧表示ができて、簡単にプレビューしたり簡易本番適用したりできます。 しかし、直下のサブディレクトリに存在しなければならないわけではなく、上位ディレクトリや全く異なる別階層に存在するスキンでも使えます。(※Ver 3.9.0以降)
※ただし、事前設定が必要です。(※Ver 3.9.2以降)

てがろぐを複数個設置して併用しているとき、同じスキンを使って運営したいなら、1カ所にあるスキンを共用する方がカスタマイズが楽でしょう。

他の階層（上位のディレクトリとか）に存在するスキンで表示する場合は、例えば以下のようなURLでアクセスします。

• 相対パスで指定する場合： tegalog.cgi?skin=../upperdir/some/skin-hogehoge
• 絶対パスで指定する場合： tegalog.cgi?skin=/firstdir/some/skin-ogehoge

前者のように「 ../ 」を使って上位ディレクトリを参照することもできますし、後者のように「 / 」から書き始める絶対パスで参照することもできます。ただし、URLで指定することはできません。

なお、上記のようにskinパラメータを直接弄らなくても、管理画面のスキン切り替え画面で、任意のディレクトリ名を指定してスキンをプレビューしたり簡易適用したりできる機能もあります。 スキン一覧の下に、下図のように専用枠が表示されていますので、ここに「スキンの格納されているディレクトリ名」を入力すると、プレビューしたり簡易適用したりできます。

※ただし、事前設定が必要

ただし、CGI本体の存在するディレクトリよりも浅い階層を参照する指定方法は、デフォルト設定では無効になっており、使いたい場合には設定を有効に変更する必要があります。(※Ver 3.9.2以降)

※実際の位置が浅い階層ではなく深い階層になる場合でも、「/」記号で始まる絶対パスで指定する場合や、パスの内部に「../」の記述が含まれている場合には、この制限に該当します。

適用するスキンの所在を、『CGI本体の位置より浅いディレクトリを参照する相対パス』や、『絶対パス』で指定したい場合は、下図の黄色矢印の先に見えるチェックボックスをONにして下さい。 場所は、［設定］→［システム設定］→【スキンの適用制限】→［適用可能なスキン］項目です。

スキンには少なくとも2つのHTMLファイルがあります。そこでは、既定のキーワードを [[KEYWORD]] のような書き方で記載することで、対応する情報を挿入できます。

• skin-cover.html : ページ全体用の「外側スキン」ファイルです。
• skin-onelog.html : 個別投稿表示用の「内側スキン」ファイルです。

これらのカスタマイズ方法を以下にご紹介しておきます。

外側(ページ全体の生成用)のスキン「skin-cover.html」の編集方法（キーワードの一覧と書き方）

外側スキンファイル「skin-cover.html」は、CGIが出力するページ全体を作るスキン(テンプレートHTML)ファイルです。テキストエディタやホームページ作成ソフトなどで編集できます。以下のキーワードを含めておくことで、CGI側が各情報を挿入して表示します。《リファレンス全体の目次に戻る》

【基本要素】

• HTML内に、[[TEGALOG]] と記述すると、その位置に投稿が(内側スキンの内容が適用された形で)設定個数だけ挿入されます。なお、 [[TEGALOG:30]] のように数値を含めると、1ページあたりの表示投稿数をスキン側で強制的に指定できます。(1スキン内で1回のみ記述できます。)
• HTML内に、[[SITUATION]] と記述すると、表示する投稿が限定されている場合(年月日別表示や検索結果など)に、限定内容を案内する文言がプレーンテキストで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SITUATION:HTML]] と記述すると、表示する投稿が限定されている場合(年月日別表示や検索結果など)に、限定内容を案内する文言がHTMLで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SITUATION:TITLE]] と記述すると、表示する投稿が限定されている場合(年月日別表示や検索結果など)に、限定内容を案内する文言がプレーンテキストで挿入され、(何かが挿入される場合に限っては)末尾に「-」記号が付きます。主にtitle要素内で使うことを想定していますが、他の場所でも使えます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SITUATION:CLASS]] と記述すると、そのとき表示されている状況を示すキーワードが半角空白区切りで挿入されます。主にbody要素のclass属性値で使うことを想定しています。詳しくは「そのときの表示状況に応じてページデザインを切り替える方法」をご参照下さい。(1スキン内で何回でも記述できます。)
• HTML内に、[[QUICKPOST]] と記述すると、投稿欄や投稿ボタンなどを含む「クイック投稿フォーム」が挿入されます。標準設定では、ログイン状況に関係なく表示されますが、(管理画面から設定を変更すれば)ログインされている状況でしか表示されないようにもできます。(1スキン内で何回でも記述できます。)
  ※この [[QUICKPOST]] の記述がある場合は、ページが表示されるたびにログイン状態の有無をチェックする処理が実行されます。もし、クイック投稿フォームが不要であれば、この [[QUICKPOST]] の記述自体を削除しておくことで、無駄な処理を省略でき、負荷を軽減できます。

【細かな情報要素】

• HTML内に、[[INFO:TARGETPOSTS]] と記述すると、表示対象になっている投稿の数が数値(プレーンテキスト)で挿入されます。表示内容が限定されていない状況では、全投稿数が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[INFO:PAGENUM]] と記述すると、現在のページ番号が数値(プレーンテキスト)で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[INFO:LASTUPDATE]] と記述すると、最終更新日時が「YYYY/MM/DD hh:mm:ss」形式で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[INFO:LASTUPDATE:表記方法]] と記述すると、最終更新日時が任意の表記形式で挿入されます。書き方は内側スキンの[[DATE]]と同じです。(1スキン内で何回でも記述できます。)

【ページ移動ナビゲーション要素】

• HTML内に、[[NAVI:PAGELIST]] と記述すると、その位置にページ番号リストリンクが挿入されます。ただし、2ページ目以降が存在しない場面では何も挿入されません。(1スキン内で何回でも記述できます。)
• HTML内に、[[NAVI:PREVNEXT]] と記述すると、その位置に前後のページへ移動するリンクが必要に応じて挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[NAVI:TOPPAGE]] と記述すると、その位置にてがろぐHOMEへ戻るリンクが、表示対象を限定している場合に限って挿入されます。表示対象が限定されていない場合は何も挿入されません。(1スキン内で何回でも記述できます。)
• HTML内に、[[NAVI]] と記述すると、 [[NAVI:PAGELIST]] → [[NAVI:PREVNEXT]] → [[NAVI:TOPPAGE]] の順で3つを指定したのと同じ内容が挿入されます。

• HTML内に、[[HOME:URL]] と記述すると、その位置にてがろぐHOMEのURLが相対パスで挿入されます。デフォルトスキン以外のスキンが適用されている場合には、そのスキンの適用を維持するリンク先が出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[HOME:URL:FULL]] と記述すると、その位置にてがろぐHOMEのURLが絶対URLで挿入されます。デフォルトスキン以外のスキンが適用されている場合でも、スキン指定は無視して（＝デフォルトスキンの適用状態に戻るリンクとして）出力されます。(1スキン内で何回でも記述できます。)

【システムナビゲーション要素】

• HTML内に、[[NEWPOST:URL]] と記述すると、その位置に新規投稿画面のURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[NEWPOST:URL:FULL]] と記述すると、その位置に新規投稿画面のURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[ADMIN:URL]] と記述すると、その位置に管理画面(コントロールパネル)のURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[ADMIN:URL:FULL]] と記述すると、その位置に管理画面(コントロールパネル)のURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)

【表示モード要素】

• HTML内に、[[GALLERY:URL]] と記述すると、その位置にギャラリーページのURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[GALLERY:URL:FULL]] と記述すると、その位置にギャラリーページのURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SITEMAP:URL]] と記述すると、その位置にサイトマップページのURL(※)が相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SITEMAP:URL:FULL]] と記述すると、その位置にサイトマップページのURL(※)が絶対URLで挿入されます。(1スキン内で何回でも記述できます。)

• HTML内に、[[REVERSE:URL]] と記述すると、その位置に今の表示を逆順にするURLが挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[REVERSE:NAME]] と記述すると、その位置に今の表示を逆順にした場合の並び順(昇順/降順)の名称(設定画面で自由に設定可能)が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[RANDOM:URL]] と記述すると、その位置に投稿1つをランダムに選んで表示するためのURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[RANDOM:URL:FULL]] と記述すると、その位置に投稿1つをランダムに選んで表示するためのURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)

【特殊機能要素】

• HTML内に、[[OGP]] と記述すると、その位置にOGP＋Twitter Cardを構成するmeta要素群が挿入されます。(1スキン内で何回でも記述できますが2回以上含める意味はありません。) ※この記述がなくても、自動補完機能によってOGP＋Twitter Card用meta要素は自動挿入される場合があります。
• HTML内に、[[RSS:URL]] と記述すると、その位置に(状況に合致した)RSSフィードを出力するためのURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[RSS:URL:FULL]] と記述すると、その位置に(状況に合致した)RSSフィードを出力するためのURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[RSS:URL:PURE]] と記述すると、その位置に(投稿全体が対象の)RSSフィードを出力するためのURLが相対パスで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[RSS:URL:PURE:FULL]] と記述すると、その位置に(投稿全体が対象の)RSSフィードを出力するためのURLが絶対URLで挿入されます。(1スキン内で何回でも記述できます。)

• HTML内に、[[RSS:AUTODISCOVERY]] と記述すると、RSSが出力される設定の場合に限って、その位置にRSS Auto-Discoveryを示すlink要素が挿入されます。このとき、RSSフィードの所在が相対パスで出力されます。(1スキン内で何回でも記述できますが2回以上含める意味はありません。)(※Ver 3.9.0以降)
• HTML内に、[[RSS:AUTODISCOVERY:FULL]] と記述すると、RSSが出力される設定の場合に限って、その位置にRSS Auto-Discoveryを示すlink要素が挿入されます。このとき、RSSフィードの所在は絶対URL（または管理画面の［設定］→［システム設定］→【フルパス設定】で固定されたパスをベースにした絶対パス）で出力されます。(1スキン内で何回でも記述できますが2回以上含める意味はありません。)(※Ver 3.9.0以降)

【特定の投稿や多目的フリースペース要素】

• HTML内に、[[ONEPOST:123]] と記述すると、その位置にNo.123の投稿本文が挿入されます。挿入されるのは本文だけです(日付などは含まれません)。存在しない番号を指定すると「存在しない」旨のエラー文字が挿入されます。(1スキン内で何回でも記述できます。)

• HTML内に、[[FREESPACE]] と記述すると、その位置に多目的フリースペースとして登録された文章が挿入されます。(1スキン内で何回でも記述できます。)
  ※フリースペースの本文内に区切り文字を入力することで、複数個のフリースペースを使い分けられます。方法は「フリースペースの書き方」をご参照下さい。
• HTML内に、[[FREESPACEEDIT]] と記述すると、その位置に多目的フリースペースを編集できる管理画面へのURLが挿入されます。編集用リンクを作りたい場合に使えます。(1スキン内で何回でも記述できます。)
• HTML内に、[[FREESPTITLE]] と記述すると、その位置に多目的フリースペースのタイトル(設定画面のフリースペース内で設定できます)が挿入されます。(1スキン内で何回でも記述できます。)

【ヘッダ・フッタ向けフリースペース要素】

• HTML内に、[[FREE:TITLE:MAIN]] と記述すると、その位置に主タイトルとして設定された文字列(設定画面のフリースペース内で設定できます)が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[FREE:TITLE:SUB]] と記述すると、その位置に副タイトルとして設定された文字列(設定画面のフリースペース内で設定できます)が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[FREE:DESCRIPTION]] と記述すると、その位置に一行概要文として設定された文字列(設定画面のフリースペース内で設定できます)が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[FREE:HOMELINK]] と記述すると、その位置にウェブサイトHOMEへ戻るリンクが挿入されます。てがろぐHOMEへ戻るリンクではないので注意して下さい。リンク先は、設定画面のフリースペース内で設定できます。(1スキン内で何回でも記述できます。)

• HTML内に、[[FREE:EXTRACSS]] と記述すると、その位置に（設定画面の「フリースペース」ページにある『上書きスタイルシート』欄に入力された）上書きスタイルシートが挿入されます。(1スキン内で何回でも記述できますが2回以上含める意味はあまりありません。)(※Ver 3.9.2以降)

【検索窓要素】

• HTML内に、[[SEARCHBOX]] と記述すると、その位置に検索窓が挿入されます。標準では全投稿を対象に全文検索しますが、ユーザ別表示時やハッシュタグ別表示時など表示条件が制限されている状況では、その条件に限定した範囲内で全文検索ができるチェックボックスが追加表示されます（この機能は管理画面の「設定」で無効にも設定できます）。Ver 2.5.0以降なら、検索語には空白文字で区切ることで複数の単語を指定できます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SEARCHBOX:COMPLEX]] と記述すると、その位置に複合検索窓が挿入されます。検索語を入力できる検索窓に加えて、投稿者名・投稿年月・ハッシュタグ・カテゴリ名・出力順序を指定するオプションプルダウンメニューが併せて表示されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[SEARCHBOX:COMPLEX:識別子]] と記述すると、その位置に検索オプションがカスタマイズされた複合検索窓が挿入されます。識別子は、 U=投稿者、D=投稿年月、H=ハッシュタグ、C=カテゴリ、O=出力順序 の5種類があります。(1スキン内で何回でも記述できます。)

【日付リスト要素】

• HTML内に、[[DATEBOX:LIST]] と記述すると、その位置に日付別リンクリストが挿入されます。標準設定では年と月を別々に出力しますが、(管理画面から設定を変更すれば)年月をまとめて出力するようにもできます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX:LIST:GALLERY]] と記述すると、その位置に日付別リンクリストがギャラリーモードへリンクされるリンクとして挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX:LIST:SITEMAP]] と記述すると、その位置に日付別リンクリストがサイトマップページへリンクされるリンクとして挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX:PULL]] と記述すると、その位置に日付限定窓がプルダウンメニューの形で挿入されます。また、降順(新しい順)で表示するか昇順(時系列順)で表示するかを指定するラジオボタンも表示(※)されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX:PULL:GALLERY]] と記述すると、その位置に日付限定窓がギャラリーモードへリンクされるプルダウンメニューの形で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX:PULL:SITEMAP]] と記述すると、その位置に日付限定窓がサイトマップページへリンクされるプルダウンメニューの形で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[DATEBOX]] と記述すると、 [[DATEBOX:LIST]] → [[DATEBOX:PULL]] の順で2つを指定したのと同じ内容が挿入されます。

【ハッシュタグ要素】

• HTML内に、[[HASHTAG:LIST]] と記述すると、その位置にハッシュタグ一覧がリンクリストの形で挿入されます。(1スキン内で何回でも記述できます。) なお、古い記法 [[HASHTAGLIST]] も使えます。
• HTML内に、[[HASHTAG:LIST:GALLERY]] と記述すると、その位置にハッシュタグ一覧が、ギャラリーモードへリンクされるリンクリストの形で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[HASHTAG:LIST:SITEMAP]] と記述すると、その位置にハッシュタグ一覧が、サイトマップページへリンクされるリンクリストの形で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[HASHTAG:PULL]] と記述すると、その位置にハッシュタグ一覧がプルダウンメニューの形で挿入され、「表示」ボタンを押すと移動できるようになります。(1スキン内で何回でも記述できます。)
• HTML内に、[[HASHTAG:PULL:JS]] と記述すると、その位置にハッシュタグ一覧がプルダウンメニューの形で挿入され、項目を切り替えた瞬間に(JavaScriptで)移動できるようになります。(1スキン内で何回でも記述できます。)

【カテゴリ一覧要素】

• HTML内に、[[CATEGORY:TREE]] と記述すると、その位置にカテゴリのリンクリストがツリー形式(※)で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CATEGORY:TREE:GALLERY]] と記述すると、その位置にカテゴリのリンクリストがギャラリーモードへリンクされるツリー形式(※)で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CATEGORY:TREE:SITEMAP]] と記述すると、その位置にカテゴリのリンクリストがサイトマップページへリンクされるツリー形式(※)で挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CATEGORY:TREE:識別子]] と記述すると、その位置にカテゴリのリンクリストが指定の掲載内容・順序でのツリー形式(※)で挿入されます。(1スキン内で何回でも記述できます。)
  • 識別子には、以下の7種類の文字と記号が使えます。
    

    「 T 」：カテゴリ名テキスト（Text）
    「 I 」：カテゴリアイコン（Icon）
    「 C 」：カテゴリ該当数（Count／丸括弧あり）
    「 c 」：カテゴリ該当数（count／丸括弧なし）
    「 D 」：カテゴリ概要文（Description）
    「 B 」：改行（<br>タグ）
    「 <> 」：当該カテゴリ限定ページへのリンクにする範囲
    

    ➡詳しくは、「カテゴリツリー内の掲載内容を指定できる [[CATEGORY:TREE:識別子]] の書き方」項目をご覧下さい。

• HTML内に、[[CATEGORY:PULL]] と記述すると、その位置にカテゴリ一覧がプルダウンメニューの形で挿入され、「表示」ボタンを押すと移動できるようになります。(1スキン内で何回でも記述できます。)
• HTML内に、[[CATEGORY:PULL:JS]] と記述すると、その位置にカテゴリ一覧がプルダウンメニューの形で挿入され、項目を切り替えた瞬間に(JavaScriptで)移動できるようになります。(1スキン内で何回でも記述できます。)

【カレンダー要素】

• HTML内に、[[CALENDAR]] と記述すると、その位置に1ヶ月分のカレンダーが挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CALENDAR:GALLERY]] と記述すると、その位置に1ヶ月分のカレンダーがギャラリーモードへのリンクで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CALENDAR:SITEMAP]] と記述すると、その位置に1ヶ月分のカレンダーがサイトマップページへのリンクで挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[CALENDAR:数値]] と記述すると、その位置に本来の表示月から指定月数ほどずらした1ヶ月分のカレンダーが挿入されます。(1スキン内で何回でも記述できます。)
  • [[CALENDAR:2]] なら、2ヶ月後のカレンダーを表示します。
  • [[CALENDAR:-3]] なら、3ヶ月前のカレンダーを表示します。

• HTML内に、[[MOVEMONTH:-1:URL]] と記述すると、その位置に前月の投稿ページのURLが挿入されます。「-1」の数値を変えれば任意の月数前のURLを挿入できます。(1スキン内で何回でも記述できます。)
• HTML内に、[[MOVEMONTH:1:URL]] と記述すると、その位置に次月の投稿ページのURLが挿入されます。「1」の数値を変えれば任意の月数後のURLを挿入できます。(1スキン内で何回でも記述できます。)

【新着画像リスト要素】

• HTML内に、[[IMAGELIST]] と記述すると、その位置に（管理画面で設定された個数の画像が並ぶ）新着画像リストが挿入されます。各画像は、クリックすると「その画像を掲載しているすべての投稿」を見るページ(検索結果)に移動するリンクとして出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:個数]] と記述すると、その位置に（指定個数の画像が並ぶ）新着画像リストが挿入されます。各画像は、クリックすると「その画像を掲載しているすべての投稿」を見るページ(検索結果)に移動するリンクとして出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:PURE]] と記述すると、その位置に（管理画面で設定された個数の画像が並ぶ）新着画像リストが挿入されます。各画像はリンクにならず、ただ画像だけ(img要素だけ)が出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:PURE:個数]] と記述すると、その位置に（指定個数の画像が並ぶ）新着画像リストが挿入されます。各画像はリンクにならず、ただ画像だけ(img要素だけ)が出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:LB]] と記述すると、その位置に（管理画面で設定された個数の画像が並ぶ）新着画像リストが挿入されます。各画像は、Lightbox（または管理画面で設定された画像拡大スクリプト）を使ってその場で画像を拡大表示するリンクとして出力されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:LB:個数]] と記述すると、その位置に（指定個数の画像が並ぶ）新着画像リストが挿入されます。各画像は、Lightbox（または管理画面で設定された画像拡大スクリプト）を使ってその場で画像を拡大表示するリンクとして出力されます。(1スキン内で何回でも記述できます。)

• 新着画像リストでの『オプション』には、 フルパスで出力する「FULL」、 表示モードを指定する「GALLERY」・「SITEMAP」 の3種類があり、例えば下記のように複数指定が可能です。（全バリエーションを列挙すると多くなりすぎるので、記述例を4つだけ示します。）

  • [[IMAGELIST:FULL]] と記述すると、[[IMAGELIST]] と同じように出力されますが、リンク先や画像URLはフルパスで出力されます。
  • [[IMAGELIST:PURE:FULL:18]] と記述すると、[[IMAGELIST:PURE:FULL:18]] と同じように出力されますが、リンク先や画像URLはフルパスで出力されます。
  • [[IMAGELIST:GALLERY]] と記述すると、[[IMAGELIST]] と同じように出力されますが、リンク先はギャラリーモード(での検索)になります。
  • [[IMAGELIST:21:SITEMAP]] と記述すると、[[IMAGELIST:21]] と同じように出力されますが、リンク先はサイトマップページ(での検索)になります。

  ※複数のオプションを併用する場合、それらは順不同です。
  ※例えば、[[IMAGELIST:21:SITEMAP]] の「21」と「SITEMAP」の順序は逆でも問題ありません。

• HTML内に、[[IMAGELIST:TOTALFILES]] と記述すると、その位置にそのとき画像保存用ディレクトリに存在する画像ファイルの総数が挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[IMAGELIST:TOTALSIZES]] と記述すると、その位置にのとき画像保存用ディレクトリに存在する画像ファイルの総データサイズ（ファイルサイズの合計）が「KB」や「MB」等の単位付きで挿入されます。(1スキン内で何回でも記述できます。)

【新着投稿リスト要素】

• HTML内に、[[LATESTLIST]] と記述すると、その位置に新着投稿リストが挿入されます。(1スキン内で何回でも記述できます。)
  ※表示件数や表示情報は管理画面で設定できます。
• HTML内に、[[LATESTLIST:CAT(カテゴリID群)]] と記述すると、その位置に指定のカテゴリに属する投稿だけの新着投稿リストが挿入されます。(1スキン内で何回でも記述できます。)
  カテゴリIDはカンマ区切りで複数同時に指定できます。詳しくは「新着投稿リストの掲載対象をスキン側で限定する方法（掲載する対象を選択）」をご覧下さい。※表示件数や表示情報は管理画面で設定できます。(※Ver 3.9.4以降)
• HTML内に、[[LATESTLIST:GALLERY]] と記述すると、その位置に新着投稿リストがギャラリーモードへのリンクとして挿入されます。(1スキン内で何回でも記述できます。)
• HTML内に、[[LATESTLIST:SITEMAP]] と記述すると、その位置に新着投稿リストがサイトマップページへのリンクとして挿入されます。(1スキン内で何回でも記述できます。)

【汎用要素・その他】

• HTML内に、[[CHARCODE]] と記述すると、CGI本体で採用されている文字コード名が挿入されます。(1スキン内で何回でも記述できます。) ※標準では「UTF-8」です。
• HTML内に、[[VERSION]] と記述すると、CGIの名称とバージョン番号が挿入されます。(1スキン内で何回でも記述できますが、1回以上必要です。※注意)
• HTML内に、[[VERSION:NEWTAB]] と記述すると、CGIの名称とバージョン番号が挿入されます。その際、リンク先は新規タブで開かれるように target="_blank" の属性が付加され、さらに rel="noreferrer noopener" の属性も付加されます。(1スキン内で何回でも記述できますが、1回以上必要です。※注意) (※Ver 3.9.2以降)

【ライブラリ読み込み】

• HTML内に、[[JS:LIGHTBOX]] と記述すると、その位置にLightboxが必要な場合(※)に限って、Lightboxを読み込むために必要なJavaScriptが挿入されます。具体的には、CDN経由でLightbox用CSSとJavaScriptが読み込まれます。(1スキン内で1回のみ記述できます。)
• HTML内に、[[JS:LIGHTBOX:JQ]] と記述すると、その位置にLightboxが必要な場合(※)に限って、jQueryとLightboxを読み込むために必要なJavaScriptが挿入されます。具体的には、CDN経由でjQuery本体と、Lightbox用CSSとJavaScriptが読み込まれます。(1スキン内で1回のみ記述できます。)

【ファイル合成・各種パス挿入・その他の共通要素群】

外側スキンには、上記の他に、任意のファイルを合成したり、各種ディレクトリへのパスを挿入したりできる要素も使用可能です。
➡ それらは、内側スキンでも使用可能なので、「外側スキンと内側スキンの両方で使用可能な共通キーワード」区画にまとめて掲載しています。

内側(個別投稿の表示用)のスキン「skin-onelog.html」の編集方法（キーワードの一覧と書き方）

内側スキンファイル「skin-onelog.html」は、個別投稿を表示する部分を作るためのスキン(テンプレートHTML)ファイルです。下記のキーワードはどれも、1スキン内に何度でも挿入できます。（1度も使わない項目があっても構いません。）《リファレンス全体の目次に戻る》

【投稿ID関連要素】

• HTML内に、[[POSTID]] と記述すると、その位置に投稿No.(投稿1つ1つに付加される固有番号)が挿入されます。
• HTML内に、[[POSTSTATUS]] と記述すると、その位置に投稿の状態を示す英字が挿入されます。詳しくは、投稿の状態（先頭固定/鍵付き/下げる/下書き）に応じてデザインを切り替える方法をご覧下さい。
• HTML内に、[[EDITURL]] と記述すると、その位置にその投稿を編集するための編集ページの固有URLが挿入されます。（ログインしていない状態でこのURLにアクセスした場合は、ログイン画面が先に表示されます。）
• HTML内に、[[DELETEURL]] と記述すると、その位置にその投稿を削除するための削除画面の固有URLが挿入されます。（このURLにアクセスしても、いきなり問答無用で削除されるわけではなく、削除の確認画面が出ます。ログインされていなければログイン画面が出ます。）
• HTML内に、[[PERMAURL]] と記述すると、その位置に投稿単体を表示するための固有URLが相対パスで挿入されます。
• HTML内に、[[PERMAURL:FULL]] と記述すると、その位置に投稿単体を表示するための固有URLが絶対URLで挿入されます。
• HTML内に、[[PERMAURL:PURE]] と記述すると、その位置にデフォルトスキンを使って投稿単体を表示するための固有URLが相対パスで挿入されます。
• HTML内に、[[PERMAURL:PURE:FULL]] と記述すると、その位置にデフォルトスキンを使って投稿単体を表示するための固有URLが絶対URLで挿入されます。

【投稿ユーザ関連要素】

• HTML内に、[[USERURL]] と記述すると、その位置にその投稿者に限定した投稿を見るページのURLが相対パスで挿入されます。
• HTML内に、[[USERURL:FULL]] と記述すると、その位置にその投稿者に限定した投稿を見るページのURLが絶対URLで挿入されます。
• HTML内に、[[USERURL:PURE]] と記述すると、その位置にデフォルトスキンを使ってその投稿者に限定した投稿を見るページのURLが相対パスで挿入されます。
• HTML内に、[[USERURL:PURE:FULL]] と記述すると、その位置にデフォルトスキンを使ってその投稿者に限定した投稿を見るページのURLが絶対URLで挿入されます。
• HTML内に、[[USERID]] と記述すると、その位置に投稿者のID名が挿入されます。
• HTML内に、[[USERNAME]] と記述すると、その位置に投稿者の表示名が挿入されます。表示名が設定されていないユーザや、既に削除されたユーザの場合はデフォルト設定の名称(標準では「？」)が代わりに挿入されます。
• HTML内に、[[USERICON]] と記述すると、その位置に投稿者のアイコン画像がimg要素を使って挿入されます。アイコン画像が設定されていないユーザや、既に削除されたユーザの場合は、デフォルト設定のアイコンが表示されます。

【カテゴリ関連要素】

• HTML内に、[[CATEGORYLINKS]] と記述すると、その位置にその投稿が属しているカテゴリが相対パスのリンク形式で挿入されます。(※1)
• HTML内に、[[CATEGORYLINKS:識別子:オプション]] と記述すると、その位置にその投稿が属しているカテゴリが下記に示す指定の形式で挿入されます。(※1)

  『識別子』と『オプション』は共に省略可能で、順不同で、半角コロン記号「:」で区切ることで複数個の同時指定が可能です。 識別子が省略された場合は、識別子として「<IT>」が指定されたものとして解釈されます。

  ▼『識別子』には、以下の4種類の文字と記号が使え、例えば [[CATEGORYLINKS:<IT>D]] のように記述します。

  「 T 」：カテゴリ名テキスト（Text）
  「 I 」：カテゴリアイコン（Icon）
  「 D 」：カテゴリ概要文（Description）
  「 <> 」：当該カテゴリ限定ページへのリンクにする範囲
  

  ➡詳しくは、「各投稿に表示されるカテゴリ情報の取捨選択カスタマイズ方法（アイコンや概要の表示）」項目をご覧下さい。

  ▼『オプション』は、FULL、PURE、GALLERY、SITEMAP の4種類あり、下記のバリエーションで複数指定が可能です。

  • [[CATEGORYLINKS:FULL]] と記述すると、その位置にその投稿が属しているカテゴリが絶対URLのリンク形式でが挿入されます。(※1)
  • [[CATEGORYLINKS:PURE]] と記述すると、その位置にその投稿が属しているカテゴリがデフォルトスキンを使って表示されるリンクが相対パスで挿入されます。(※1)
  • [[CATEGORYLINKS:PURE:FULL]] と記述すると、その位置にその投稿が属しているカテゴリがデフォルトスキンを使って表示されるリンクが絶対URLで挿入されます。(※1)
  • [[CATEGORYLINKS:GALLERY]] と記述すると、その位置にその投稿が属しているカテゴリがギャラリーモードで表示されるリンクが相対パスで挿入されます。(※1)
  • [[CATEGORYLINKS:GALLERY:FULL]] と記述すると、その位置にその投稿が属しているカテゴリがギャラリーモードで表示されるリンクが絶対URLで挿入されます。(※1)
  • [[CATEGORYLINKS:SITEMAP]] と記述すると、その位置にその投稿が属しているカテゴリがサイトマップページモードで表示されるリンクが相対パスで挿入されます。(※1)
  • [[CATEGORYLINKS:SITEMAP:FULL]] と記述すると、その位置にその投稿が属しているカテゴリがサイトマップページモードで表示されるリンクが絶対URLで挿入されます。(※1)

  ➡詳しい書き方は、「各投稿に表示されるカテゴリリンクのリンク先での表示のされ方を指定する方法」項目もご覧下さい。

  『識別子』と『オプション』を両方指定する場合は、例えば [[CATEGORYLINKS:<IT>D:GALLERY:FULL]] のように記述できます。

• HTML内に、[[CATEGORYNAMES]] と記述すると、その位置にその投稿が属しているカテゴリの表示名だけが挿入されます。リンクにはなりません。アイコンも表示されません。(※1)
• HTML内に、[[CATEGORYIDS]] と記述すると、その位置にその投稿が属しているカテゴリのIDだけが挿入されます。カテゴリ別に装飾を変化させるために、class属性の中にカテゴリIDを入れたい場合などに活用できます。(※2)
• HTML内に、[[CATEGORYIDS:IFEMPTY:代替文字列]] と記述すると、その位置にその投稿が属しているカテゴリのIDだけが挿入され、もしカテゴリが1つもない場合には代わりに代替文字列に指定された文字列が挿入されます。(※3)

【投稿日時関連要素】

• HTML内に、[[NEW]] と記述すると、その位置に新規投稿から間もないことを示す文字列(標準では「New!」)が挿入されます。表示期間(標準では72時間)や文字列は管理画面から設定できます。なお、先頭固定に設定されている投稿では、この位置には「先頭固定を示す文言」が挿入されます。
• HTML内に、[[DATE]] と記述すると、その位置に投稿の日付が「2023/09/25 15:22:00」形式で挿入されます。
• HTML内に、[[DATE:●●●]] と記述すると、その位置に投稿の日付が指定の形式で挿入されます。
  • 「●●●」の部分には任意の文字列を指定でき、下表のように解釈されます。取捨選択も掲載順序も自由です。同じ文字を何度も使えます。大文字・小文字は区別するので注意して下さい。下記以外の文字はそのまま出力されます。

    記号	挿入内容	挿入例または範囲	備考
    Y	年 (西暦)	2022
    y	年 (西暦下2桁)	22
    R	年 (和暦:元号+年)	令和4	数字の桁数は不定
    r	年 (和暦:年のみ)	4
    M	月 (2桁固定)	01 ～ 12	1桁なら先頭に0を付加
    G	月 (1～2桁)	1 ～ 12	1桁は1桁のまま
    J	月名(和暦)	睦月 ～ 師走
    E	月名(英語)	January ～ December
    e	月名(英略)	Jan ～ Dec	英字3文字
    D	日 (2桁固定)	01 ～ 31	1桁なら先頭に0を付加
    N	日 (1～2桁)	1 ～ 31	1桁は1桁のまま
    W	曜日(英語)	Monday ～ Sunday
    w	曜日(英略)	Mon ～ Sun	英字3文字
    B	曜日(和名)	月曜日 ～ 日曜日	漢字3文字
    b	曜日(和略)	月 ～ 日	漢字1文字
    A	相対時間(前後付)	3秒前、5分前、12日前	投稿後の経過時間(※)
    a	相対時間(前後無)	3秒、5分、12日
    h	時	00 ～ 23	2桁固定
    m	分	00 ～ 59
    s	秒	00 ～ 59

  • 例えば、[[DATE:Y年M月D日(w) h:m:s]] と記述すると、「2023年09月25日(Mon) 15:22:00」の形式で挿入されます。
  • 例えば、[[DATE:Y/M/D W h:m]] と記述すると、「2023/09/25 Monday 15:22」の形式で挿入されます。
  • 例えば、[[DATE:w, D e Y h:m:s]] と記述すると、「Mon, 25 Sep 2023 15:22:00」の形式で挿入されます。
  • 例えば、[[DATE:R年(Y年)G月N日]] と記述すると、「令和3年(2021年)8月1日」の形式で挿入されます。
  • 例えば、[[DATE:M月(J)のD日]] と記述すると、「6月(水無月)の08日」の形式で挿入されます。
  • 例えば、[[DATE:B h時m分]] と記述すると、「火曜日 17時55分」の形式で挿入されます。
  • 例えば、[[DATE:《A》]] と記述すると、「《3時間前》」「《52日前》」のような相対時間形式で挿入されます。（※下記の補足もご覧下さい。）

  上表以外の文字はそのまま出力される仕様ですが、半角英字に関しては今後の機能追加によって新たな挿入記号として使われる可能性がありますので、半角英字は「そのまま表示される」という前提では使わない方が無難です。

  ※経過時間(相対時間)表記機能の補足

  投稿日時の経過時間表記(「xx日前」のような相対時間)では、標準では下記のように表示されます。

  🌰60秒未満なら秒を表示： 0秒前～59秒前
  🌰60分未満なら分を表示： 1分前～59分前
  🌰37時間未満(※1)なら時間を表示： 1時間前～37時間前(※1)
  🌰365.25日未満なら日を表示： 2日前～365日前
  🌰それ以上なら年を表示： 1年前～
  

  ※1：表示単位を自ら選択することはできませんが、使用単位を「時間→日」に切り替えるタイミングだけは下図のように自由に設定できます。（デフォルト設定値は「37」なので、1日半までは「36時間前」のように時間で表示します。）

  
  ▲経過時間の表記に使われる単位の選択

  ※挿入記号の「A」は After の意味です。 「前」の文字（投稿日時が未来の場合は「後」の文字）を含めるかどうかは、記法で選択できます。 例えば、「3時間前」や「4日前」の「前」を出力したくない場合は、挿入記号に「 a 」を使って下さい。

  ※投稿日時として存在しない日時も使えるように設定されているとき、存在しない日時が使われている投稿では、「？」の1文字だけが出力されます。

【投稿本文関連要素（基本）】

• HTML内に、[[COMMENT]] と記述すると、その位置に投稿本文の全文が挿入されます。

  投稿本文全体や外側を装飾する目的等で、 [[COMMENT]] を何かの要素で囲みたい場合は、必ずdiv要素を使って下さい。
  投稿本文内にはブロックレベル系の要素が出力されることがありますから、もしp要素で囲んで <p>[[COMMENT]]</p> のようなHTMLを書いてしまうと、HTMLの文法的に誤った出力になってしまうケースが発生します（※HTMLの文法的に、p要素の内側に他のブロック系要素を含めることはできないため）。すると、CSSが意図通りに適用されなくなる問題が出ます。 したがって、[[COMMENT]] を何かで囲みたい場合は、div要素を使って下さい。

• HTML内に、[[LENGTH]] と記述すると、その位置に投稿本文の文字数が挿入されます。改行も1文字にカウントされます。文字コードによっては正しくカウントできない場合があります。(※文字実体参照などで絵文字や特殊記号を使った場合は、若干多めにカウントされてしまいます。) 任意の文字列でリンクを作った場合、URL自体はカウントされません(見えている文字だけがカウントされます)。
• HTML内に、[[TOTALLINES]] と記述すると、その位置に投稿本文の行数が挿入されます。ここでの行数は、見た目の行数ではなく、HTML上の論理行数（正確には改行の数）です。（行数を表示したい場合のほか、行数の多さに応じてスクリプト等で何らかの処理を加えたい場合等に活用できるかもしれません。）(※Ver 3.9.0以降)
• HTML内に、[[VOICEREADING]] と記述すると、その位置に投稿本文を合成音声で読み上げるためのリンクが表示され、読み上げ機能を使うためのJavaScriptが挿入されます。この機能について詳しくは、投稿本文も合成音声で読み上げ可能にする方法をご覧下さい。

【投稿本文関連要素（オプション）】

投稿本文は、行単位で分解して表示することもでき、以下の記述方法が使えます。

• 行単位で別々に挿入：
  • HTML内に、[[COMMENT:LINE:1]] と記述すると、その位置に投稿本文の1行目だけが挿入されます。（※1行目を「記事タイトル」として使いたい場合は、この記法よりも後述の [[COMMENT:TITLE]] 記法を使う方が便利です。）
  • HTML内に、[[COMMENT:LINE:2]] と記述すると、その位置に投稿本文の2行目だけが挿入されます。
  • HTML内に、[[COMMENT:LINE:3]] と記述すると、その位置に投稿本文の3行目だけが挿入されます。
  　 ： ： ： (以降、上限なく特定の行番号を指定可能。)
• 指定行以降を挿入：
  • HTML内に、[[COMMENT:LINE:2*]] と記述すると、その位置に投稿本文の2行目以降(最後まで)が挿入されます。（※投稿本文を「記事タイトル」と「本文」とに分離して使いたい場合は、この記法よりも後述の [[COMMENT:BODY]] 記法を使う方が便利です。）
  • HTML内に、[[COMMENT:LINE:3*]] と記述すると、その位置に投稿本文の3行目以降(最後まで)が挿入されます。
  　 ： ： ： (以降、上限なく特定の行番号を指定可能。)

  文法上は、[[COMMENT:LINE:1*]] という書き方も可能です。これは、投稿の1行目以降(最後まで)が挿入されますから、事実上は [[COMMENT]] と同じ結果になります。ただし、[[COMMENT:LINE:1*]] の記述は [[COMMENT]] よりも動作が重たくなりますのでご注意下さい。 [[COMMENT:……]] の記述方法を使うと、投稿本文を行単位で分割する処理が入るためです。全行を挿入したい場合は、[[COMMENT]] の記述を使って下さい。

• 指定文字数だけを挿入：
  • HTML内に、[[COMMENT:TEXT:120]] と記述すると、その位置に投稿本文の先頭から120文字だけがプレーンテキストで挿入されます。(文字数は数値で自由に指定できます。超過分は三点リーダ「…」で省略されます。)
  • HTML内に、[[COMMENT:TEXT:120:省略記号]] と記述すると、その位置に投稿本文の先頭から120文字だけがプレーンテキストで挿入されます。(文字数は数値で自由に指定できます。) その際、超過分は任意の省略記号で省略されます。例えば、[[COMMENT:TEXT:120:～]] や [[COMMENT:TEXT:120:***]] などのように書けます。省略記号を何も出力したくない場合は [[COMMENT:TEXT:120:]] と書けます。ただし、省略記号そのものに [ や ] 記号は使えません。省略記号の文字数は制限文字数に含みません。また、省略記号自体に文字数の制限はありません。(※Ver 3.9.2以降)
• 役割別に挿入：
  • HTML内に、[[COMMENT:TITLE]] と記述すると、その位置に原則として投稿本文の1行目がプレーンテキストで挿入されます。ただし、1行目が空行の場合や、画像等のオブジェクトしかない場合は、それらは挿入されずに「No.123」の形式で投稿番号が挿入されます。
  • HTML内に、[[COMMENT:TITLE:30]] と記述すると、その位置に原則として投稿本文の1行目がプレーンテキストで最大30文字だけ挿入されます。(超過分は三点リーダ「…」で省略されます。) ただし、1行目が空行の場合や、画像しかない場合は、それらは挿入されずに「No.123」の形式で投稿番号が挿入されます。
  • HTML内に、[[COMMENT:TITLE:30:省略記号]] と記述すると、その位置に原則として投稿本文の1行目がプレーンテキストで最大30文字だけ挿入されます。その際、超過分は任意の省略記号で省略されます。例えば、[[COMMENT:TITLE:30:(略)]] や [[COMMENT:TITLE:30:～]] などのように書けます。省略記号を何も出力したくない場合は [[COMMENT:TITLE:30:]] と書けます。ただし、省略記号そのものに [ や ] 記号は使えません。省略記号の文字数は制限文字数に含みません。また、省略記号自体に文字数の制限はありません。なお、1行目が空行の場合や、画像しかない場合は、それらは挿入されずに「No.123」の形式で投稿番号が挿入されます。(※Ver 3.9.2以降)
  • HTML内に、[[COMMENT:BODY]] と記述すると、その位置に原則として投稿本文の2行目以降(最後まで)が挿入されます。ただし、投稿が全1行しかない場合には1行目の全文が挿入されます。(※プレーンテキスト化はされません。)
  • HTML内に、[[COMMENT:BODY:100]] と記述すると、その位置に原則として投稿本文の2行目以降の先頭100文字がプレーンテキストで挿入されます。(※改行も無視されます。) ただし、投稿が全1行しかない場合には1行目の先頭100文字が挿入されます。
  • HTML内に、[[COMMENT:BODY:100:省略記号]] と記述すると、その位置に原則として投稿本文の2行目以降の先頭100文字がプレーンテキストで挿入されます。(※改行も無視されます。) ただし、投稿が全1行しかない場合には1行目の先頭100文字が挿入されます。その際、超過分は任意の省略記号で省略されます。例えば、[[COMMENT:BODY:100:(以下略)]] や [[COMMENT:BODY:100:～～]] などのように書けます。省略記号を何も出力したくない場合は [[COMMENT:BODY:100:]] と書けます。ただし、省略記号そのものに [ や ] 記号は使えません。省略記号の文字数は制限文字数に含みません。また、省略記号自体に文字数の制限はありません。(※Ver 3.9.2以降)

  文字数を指定しない記述は「タイトル付きブログ」のように使うことを想定した機能です。文字数を指定する記述は「RSSフィード」などに含めることを想定した機能です。

• 抽出結果を挿入（ハッシュタグ）：
  • HTML内に、[[COMMENT:TAGS]] と記述すると、その位置に投稿本文に含まれるハッシュタグ(リンク)だけが抽出されて挿入されます。ハッシュタグの文字列だけではなく、リンクになった形で挿入されます。本文内のどこにハッシュタグが書かれているかは関係なく、先頭から順に抽出されます。もし本文内に同じハッシュタグが複数回登場していれば、抽出結果にも同じハッシュタグが複数回出てきます。
  • HTML内に、[[COMMENT:TAGS:GALLERY]] と記述すると、その位置に投稿本文に含まれるハッシュタグ(リンク)だけが抽出されて挿入されます。その際、「ギャラリーモードで表示されるリンク」の形で出力されます。それ以外の仕様は、[[COMMENT:TAGS]] と同じです。
  • HTML内に、[[COMMENT:TAGS:SITEMAP]] と記述すると、その位置に投稿本文に含まれるハッシュタグ(リンク)だけが抽出されて挿入されます。その際、「サイトマップページモードで表示されるリンク」の形で出力されます。それ以外の仕様は、[[COMMENT:TAGS]] と同じです。
• 抽出結果を挿入（画像）：
  • HTML内に、[[COMMENT:PICTS]] と記述すると、その位置に投稿本文内に含まれる画像だけが抽出されて挿入されます。本文内のどこに画像があるかは関係なく、先頭から順に抽出されます。もし本文内に同じ画像が複数回出ていれば、抽出結果にも同じ画像が複数回出てきます。投稿本文内に画像が含まれない場合には、何も出力されません。

  本文内の画像抽出には、以下の仕様があります。
  ✅画像保存用ディレクトリ以外の場所に存在する画像も [PICT:ファイルパス] 記法で掲載されているなら表示(抽出)対象です。
  ❎[IMG:代替文字]URL 記法で掲載されている画像は表示(抽出)対象外です。
  ✅画像保存用ディレクトリに存在する画像の場合、画像ファイルの位置(＝src属性値)が相対パスで出力されるか絶対URLで出力されるかは、投稿本文内にどのように出力されているか次第です。デフォルトでは相対パスで出力されますが、管理画面の［設定］→［ページの表示］→【投稿本文の表示／画像】→『画像パスに絶対URL(フルパス)を使う』項目がONなら絶対URL(フルパス)で出力されます。（スキン側で選択する方法はありません。）
  ✅画像がリンクになるかどうか、どんな属性が付いているか、等はすべて「投稿本文内に出力されている内容」と同じです。（つまり、管理画面での設定次第です。）

【投稿本文に含まれる画像関連要素】

• HTML内に、[[PICTCOUNT]] と記述すると、その位置にその投稿本文に含まれている画像の個数が数値で挿入されます。
• HTML内に、[[ONEPICT:1]] と記述すると、その位置に投稿本文に含まれる1つ目の画像だけが表示されます。2番目の画像だけを挿入する [[ONEPICT:2]] のようにも書けます。指定できる数値に仕様上の上限はありません。主にギャラリーモード用スキンで使うことを想定した記法ですが、ギャラリー用スキン以外でも使用可能です。
• HTML内に、[[GETURL:PICT:1]] と記述すると、その位置に投稿本文に含まれる1つ目の画像のURLだけがテキストで挿入されます。URLは相対パスの形で得られます。(画像自体の挿入ではなく、画像のURLだけを得たい場合に使えます。)
• HTML内に、[[GETALT:PICT:1]] と記述すると、その位置に投稿本文に含まれる1つ目の画像の代替文字だけがテキストで挿入されます。
• HTML内に、[[ATT:LIGHTBOX]] と記述すると、その位置にLightboxを適用するための属性がテキストで挿入されます。(自力でリンクタグ(a要素)を構成している際に、管理画面から設定されたLightbox用属性を加えたい場合に使えます。)

【その他】

• HTML内に、[[LOOPCOUNT]] と記述すると、その位置にそのページ内で「何番目に表示されている投稿か？」が半角整数で挿入されます。

【ファイル合成・各種パス挿入・その他の共通要素群】

内側スキンには、上記の他に、任意のファイルを合成したり、各種ディレクトリへのパスを挿入したりできる要素も使用可能です。
➡ それらは、外側スキンでも使用可能なので、「外側スキンと内側スキンの両方で使用可能な共通キーワード」区画にまとめて掲載しています。

外側スキンと内側スキンの両方で使用可能な共通キーワードの一覧と書き方

下記のキーワードは、外側スキンファイル「skin-cover.html」と内側スキンファイル「skin-onelog.html」のどちらでも使用可能です。下記のキーワードはどれも、1スキン内に何度でも挿入できます。（1度も使わない項目があっても構いません。）《リファレンス全体の目次に戻る》

【ファイル合成】

• HTML内に、[[INCLUDE:ファイル名]] と記述すると、その位置に指定ファイルの中身が挿入されます。SSI(Server Side Include)やPHPのinclude文のように動作します。例えば [[INCLUDE:apple/pen.html]] と記述すると、その位置にappleフォルダのpen.htmlの中身がそのまま挿入されます。ファイルは相対パスでも絶対パスでも記述可能(※注)ですが、URLでは指定できません。(※Ver 3.9.0以降)

• HTML内に、[[INCLUDE:FROM-THIS-SKIN-DIR:ファイル名]] と記述すると、その位置に、いま使われているスキンが格納されているディレクトリ内に存在する指定ファイルの中身が挿入されます。(※Ver 3.9.0以降)

【各種パス挿入要素】

• HTML内に、➊[[PATH:CGI]] と記述すると、その位置にCGIのパスが挿入されます。(例: /tsubuyaki/tegalog.cgi )
• HTML内に、➋[[PATH:CGIDIR]] と記述すると、その位置にCGIのディレクトリが挿入されます。(例: /tsubuyaki/ ) ※もし、ドメインの最上階層で動作しているなら「 / 」の1文字だけが得られます。
• HTML内に、➌[[PATH:SKINDIR]] と記述すると、その位置に適用中スキンのディレクトリが挿入されます。(例: /tsubuyaki/skin-twitter/ ) ※デフォルトのスキンが使われている状況なら ➋ と同じ文字列が得られます。
• HTML内に、➍[[PATH:IMAGEDIR]] と記述すると、その位置に画像保存用ディレクトリが挿入されます。(例: /tsubuyaki/images/ ) ※デフォルトでは images ですがCGIのソース冒頭で変更できますから、もし変更されていれば変更後の文字列が得られます。
• HTML内に、➎[[PATH:SKINDIR:GALLERY]] と記述すると、その位置にギャラリーモード用に指定されているスキンのディレクトリが挿入されます。(例: /tsubuyaki/skin-gallery/ ) ※デフォルトでは skin-gallery ですが設定で変更できますから、もし変更されていれば変更後の文字列が得られます。
• HTML内に、➏[[PATH:SKINDIR:SITEMAP]] と記述すると、その位置にサイトマップページ用に指定されているスキンのディレクトリが挿入されます。(例: /tsubuyaki/skin-sitemap/ ) ※デフォルトでは skin-sitemap ですが設定で変更できますから、もし変更されていれば変更後の文字列が得られます。
• HTML内に、➐[[PATH:SKINDIR:RSS]] と記述すると、その位置にRSSモード用に指定されているスキンのディレクトリが挿入されます。(例: /tsubuyaki/rss/ ) ※デフォルトでは rss ですが設定で変更できますから、もし変更されていれば変更後の文字列が得られます。

【その他】

• HTML内に、[[RANDOM:10]] と記述すると、その位置に1～10の間のランダムな整数(1と10を含む)が半角テキストで挿入されます。値は10以外でも、2～9999999999（＝1桁～10桁）の範囲で任意の数値を指定できます。

スキンの処理に特別な指示を与えるキーワードの一覧と書き方

特定の何かと置き換わるのではなく、スキンの処理に特別な指示を与えられる特殊なキーワードもあります。 これらのキーワードは、スキンファイルの先頭（＝1行目の最初）に記述しないと効果がない点に注意して下さい。《リファレンス全体の目次に戻る》

【自動補完・自動調整に関する指示要素】

• スキンHTMLの先頭に、[[NO-COMPLEMENT]] と記述すると、そのスキンに対して自動補完は一切行わなくなります。(※Ver 3.8.0以降) (外側スキンの先頭に1回のみ記述できます。)

• スキンHTMLの先頭に、[[NO-LINKADJUSTMENT]] と記述すると、スキン内に記述されている link要素やform要素に対して、「現在のスキンでの表示を維持する」目的で自動挿入される各種記述をスキップできます。(※Ver 3.9.0以降) (外側スキンと内側スキンの両方で使えます。各スキンの先頭に1回のみ記述できます。)

スキン編集の補足

• 投稿自体を挿入する [[TEGALOG]] や、ライブラリを読み込む [[JS:LIGHTBOX]]系の記述などを除いて、たいていのキーワードは何回でも記述できます。デフォルトのスキン内でも、同一キーワードを何度も使用しています。
• HTML内のその他の部分は、何でも自由に書き換えることができます。
• 付属のスキンファイルを参考にして編集すれば、楽にカスタマイズできるでしょう。

• スキン内に記述したキーワードが認識されない場合は、以下の点を確認してみて下さい。

  《Check.1》 括弧が二重になっているか？

  → [DATE] や [[DATE] では認識されません。[[DATE]] のように開始括弧も終了括弧も二重になっているかどうか確認して下さい。

  《Check.2》 余計な空白文字が入っていないか？

  → 括弧とキーワードの間は [[DATE]] のように詰めて記述する必要があります。[[ DATE ]] のように空白があると認識されません。

  《Check.3》 半角の大文字で記述しているか？

  → 括弧とキーワードは半角文字でしか認識されません。また、英字は大文字でしか認識されません(※日付の指定文字列や識別子は除く)。

  《Check.4》 記述場所は正しいか？

  → 外側スキンでのみ書けるキーワードは内側スキンでは使えません。内側スキンでのみ書けるキーワードは外側スキンでは使えません。また、特別な指示を与えるキーワードは「スキンの1行目の先頭」に書かないと認識されません。なお、ファイルを合成できる [[INCLUDE:～]] の記法は3重までにしか入れ子にできません（それより深い階層は無視されます）。

▼キーワードに加えられるオプションに関する補足

キーワードには、例えば [[CALENDAR]] に対する [[CALENDAR:GALLERY]] や [[CALENDAR:SITEMAP]] のように、ギャラリーモードやサイトマップページで表示されるリンクを出力するオプションが使えるものがいくつかあります。 このとき、例えば、ギャラリーモードの表示対象にならない投稿しか該当しない場合は、1件も表示されないリンクになってしまう点に注意して下さい。

ギャラリーモードは、投稿本文内に投稿画像が1つ以上含まれている場合にだけ表示されるモードです。なので、

• 画像が含まれていない投稿でしか使われていないハッシュタグ
• 画像が含まれていない投稿しかしなかった日付
• 画像が含まれていない投稿でしか使われていないカテゴリ

等がある場合、それらのリンク先では「表示できる投稿が1件も見つかりませんでした」等のメッセージだけが見えます。

スキン側の不備を自動補完して出力する仕様

外側スキンファイル(skin-cover.html)内の <head>～</head> 部分を完全に静的なHTMLとして作ってしまった場合等のための対処（＝不便になってしまわないようにする措置）として、スキン側の不備を自動補完して出力する仕様があります。（Ver 3.8.0以降）

• 自動補完される内容3点
• 自動補完の対象になるスキン
• 自動補完を拒否する記法・設定
• OGP＋Twitter Cardを出力したくない方々への注意

▼自動補完される内容3点

具体的には、以下の3点を自動補完します。（※全てのスキンで自動補完が行われるわけではありません。対象条件は次項「自動補完の対象になるスキン」をご覧下さい。）

●自動補完1：title要素が存在しない場合は加える。

外側スキンにtitle要素が存在しない場合は、<title>[[SITUATION:TITLE]] [[FREE:TITLE:MAIN]] [[FREE:TITLE:SUB]]</title> の記述があるものと解釈して出力します。

●自動補完2：title要素に動的生成要素がなければ加える。

外側スキンにtitle要素があっても <title>文字列</title> のような静的文字列しか指定されていない場合は、<title>[[SITUATION:TITLE]] 文字列</title> の記述だと解釈して出力します。（※「文字列」の部分は実際のtitle要素内の記述をそのまま使います。）

●自動補完3：[[OGP]]がなければ加える。

外側スキンにOGP＋Twitter Cardを出力する [[OGP]] の記述がない場合は、自動で加えて出力します。（※[設定]→[補助出力]で『OGP＋Twitter Cardを出力する』項目にチェックが入っている場合のみ）

▼自動補完の対象になるスキン

上記の自動補完処理の対象になるスキンは、外側スキン(skin-cover.html)が下記の2条件の両方に該当している場合のみです。

• 条件1：html要素がある（＝スキン内に <html という5文字が含まれている）
• 条件2：</head>タグまたは<body>タグがある（＝スキン内に </head> の7文字か、<body の5文字の少なくとも一方が含まれている）

上記の条件1と2があるため、『SSI等で埋め込むことを目的にしたスキン』(＝独立したHTMLとしては成立しないスキン)や、RSSフィード用スキン等は対象にならないでしょう。

▼自動補完を拒否する記法・設定

上記の自動補完3点を拒否する方法には、下記の2通りがあります。

1. スキン側で「自動補完の拒否」を明示する方法
   

   外側スキン(skin-cover.html)の1行目の先頭に [[NO-COMPLEMENT]] と記述して下さい。
   外側スキンの1行目の先頭にこの記述があれば、そのスキンに対して自動補完は一切行いません。

   ※1行目の先頭以外の場所に書かれていても認識しません。（※UnicodeのBOM（＝Byte Order Mark）が先頭にあると正しく認識しない可能性があります。UTF-8のBOMは出力しないでスキンを作って下さい。）
   ※スキンの1行目の先頭に書かれた [[NO-COMPLEMENT]] が正しく認識されていれば、その記述そのものは出力時に自動で削除されます。(Web上に表示されることはありません。もしWeb上にそのまま表示されているなら、正しく認識されていません。)

2. 設定で自動補完を拒否する方法（非推奨）
   

   [設定]→[システム設定]→【機能制限／高度な設定】→『スキンの不備に対する自動補完を禁止する』をONにすることでも、これらの自動補完を拒否できます。

   あらゆるスキンに対して一切チェックしなくなる設定ですので、推奨はしません。どうしても必要な場合にはお使い下さい。

▼OGP＋Twitter Cardを出力したくない方々への注意

OGP＋Twitter Card用のmeta要素は、外側スキンで [[OGP]] と記述した箇所に挿入されますが、[[OGP]] の記述がない場合でも head要素の末尾に自動挿入されます。 そのため、スキンから [[OGP]] の記述を削除するだけではOGP＋Twitter Card用meta要素は出力されてしまいます（※スキンがHTMLとして成立している場合のみ）。

OGPを出力したくない場合は、下図のように [設定]→[補助出力]で『OGP＋Twitter Cardを出力する』項目をOFFにして下さい。そうすれば、OGP＋Twitter Cardは一切出力されなくなります。

適用スキンを維持するためのリンク自動調整仕様

てがろぐには、別スキンを一時的に適用する機能があります。主に、別スキンでの見え方をプレビューする目的の機能ですが、複数のスキンを並行して活用する機能としても活用できます。 その機能を実現するために、「現在プレビュー適用中のスキンでの表示を維持する」ためのリンク自動調整機能があります。

具体的には、デフォルトスキン以外のスキンが適用されている際には、以下の3つの自動調整処理が働く仕様になっています。

• ① そのスキンに含まれている link要素（主にCSSを読み込むために使われます）のhref属性値に「スキンが格納されているディレクトリ名」を自動付加。
• ② form要素（例えば全文検索窓や各種プルダウンメニュー等で使われます）に『いま適用されているスキン』が移動先でも適用され続けるためのinput要素を追加。
• ③ 各種リンクに「skin=」パラメータを自動付加。

▼自動調整を拒否する記法

上記の自動調整を無効化できる指示として、記法 [[NO-LINKADJUSTMENT]] があります。(※Ver 3.9.0以降)

• 外側スキンの1行目の先頭にこの記述があれば、その外側スキンの中では上記の自動調整は行われません。
• 内側スキンの1行目の先頭にこの記述があれば、その内側スキンの中では上記の自動調整は行われません。

内側スキンに [[NO-LINKADJUSTMENT]] を書いた場合、投稿本文やその他（内側スキンで生成される内容すべて）に含まれる各種リンクやフォーム（＝鍵付き投稿の鍵入力フォーム）で、「現在適用中のスキンでの表示」を維持しないように出力します。

※外側スキンでも内側スキンでも両方でこの自動調整を拒否したい場合は、両方のスキンの先頭にこの記述を書く必要がある点にご注意下さい。

▼自動調整を拒否できない箇所

[[NO-LINKADJUSTMENT]]の記述があっても、以下に挙げるリンクでは常に「適用中のスキンを維持するリンク」が出力されます。

• ページ移動ナビゲーション系のリンク（ページ番号リンクや、前後への移動リンクや、初期状態に戻るリンク）
• ランダム表示リンク
• 管理画面にアクセスするリンク (※)

てがろぐでは通常用途のスキンのほかに、RSSモード、ギャラリーモード、サイトマップページモードなど、特別な用途のスキンがあります。 ここでは、それらのカスタマイズ方法をご紹介致します。

RSSフィード用スキンの作り方・使い方

てがろぐではRSSフィードの出力ができます。 標準では、てがろぐCGI本体内蔵のRSS用スキンが使われる設定になっていますから、RSSフィード用のスキンを用意する必要はありません。 しかし、自力でRSSフィードの中身をカスタマイズしたい場合には、RSSフィード用のスキンを自作することもできます。

▼RSSフィード用スキンの認識・設定・仕様

▽認識と出力：

▽仕様：

RSSフィード用スキンは、必ず1行目がXML宣言で始まっていなければなりません。（仕様）
それ以外の部分については、RSSフィード用の特別な書き方は存在しません。スキン内で使えるキーワードは、その他のスキンと同じです。 完全版パッケージに含まれているRSSフィード用サンプルスキンの記述を参考にしてカスタマイズすることをお勧め致します。

▽強制適用される設定：

「mode=rss」のパラメータを使ってRSSフィードとして出力される際に限っては、（管理画面上での設定値に関係なく）自動的に以下の設定が適用されます。

• 日付境界バーは出力しない。
• 画像は絶対URLで出力。
• 画像をリンクにしない。
• LazyLoad用属性を出力しない。
• Lightbox用属性を出力しない。
• ユーティリティリンク枠を出力しない。

※「続きを読む」機能で隠された範囲は出力されません。代わりに、「続きを読む」ボタンラベルに指定されている文字列が出力されます。
※ツイート・YouTube・Spotifyの各埋め込み部分は、ただのテキストリンクとして出力されます(※Ver 3.8.0以降)。

▼複数のRSSフィード用スキンを併用する方法

RSSフィードの表示時でも skinパラメータを併用すれば任意のスキンが適用可能なので、下記のようなURLにアクセスすることで、複数のRSSフィード用スキンを併用できます。（Ver 3.4.0以降）

• 設定画面で設定されたRSS用スキンが適用されるRSSフィード： tegalog.cgi?mode=rss
• rss-2ndディレクトリのRSS用スキンを適用したRSSフィード： tegalog.cgi?mode=rss&skin=rss-2nd
• subrssディレクトリのRSS用スキンを適用したRSSフィード： tegalog.cgi?mode=rss&skin=subrss

上記のように、RSSフィード出力モードを指定するパラメータ mode=rss と同時に、適用スキンを指定するパラメータ skin=ディレクトリ名 を指定すると、そのスキンを適用した状態でRSSフィードが表示されます。

▼条件を限定したRSSフィードを出力する方法

RSSフィードを出力する際に、「条件付き閲覧」のパラメータを併用することで、RSSフィードに含まれる投稿を絞った状態でも出力できます。

例えば、tegalog.cgi?tag=UpdateLog&mode=rss のようなURLなら「UpdateLog」というハッシュタグが含まれる投稿に限定したRSSフィードが得られます。 この方法を活用すれば、

• ユーザ限定のRSSフィード
• カテゴリ限定のRSSフィード
• 特定の検索結果のRSSフィード

などを用意することもできます。

条件は複数を併記できますから、さらに条件を加えて、「ユーザadminが投稿したカテゴリinfoに属する投稿のうち、ハッシュタグ#INFOを含む投稿」だけのRSSフィードなども用意できます。

ギャラリー用スキンの作り方・使い方

▼複数のギャラリー用スキンを併用する方法（・本番使用中のスキンをそのままで、別のギャラリー用スキンを試す方法）

ギャラリーモードでも skinパラメータを使って任意のスキンが適用可能なので、下記のようなURLにアクセスすることで、複数のギャラリー用スキンを併用できます。（Ver 3.4.0以降）

• 設定画面で設定されたギャラリー用スキンが適用されるギャラリーモード： tegalog.cgi?mode=gallery
• skin-altディレクトリのギャラリー用スキンを適用したギャラリーモード： tegalog.cgi?mode=gallery&skin=skin-alt
• skin-subディレクトリのギャラリー用スキンを適用したギャラリーモード： tegalog.cgi?mode=gallery&skin=skin-sub

上記のように、ギャラリーモードを指定するパラメータ mode=gallery と同時に、適用スキンを指定するパラメータ skin=ディレクトリ名 を指定すると、そのスキンを適用した状態でギャラリーモードが表示されます。

これによって、以下のような動作も可能になります。

• ギャラリー用の本番スキンを適用したままで、別のギャラリー用スキンの動作を試す。
• ギャラリー用スキンも複数個を用意しておいて、用途に応じて使い分ける。

例えば、カテゴリによってギャラリー用のスキンを分けるなど、複数のギャラリー用スキンを併用したい場合にもご活用頂けるでしょう。

サイトマップページ用スキンの作り方・使い方

「投稿タイトルの一覧」や「目次ページ」を作る用途にも活用可能な、サイトマップページ出力機能（サイトマップページモード）があります。（Ver 3.6.0以降）
この機能には tegalog.cgi?mode=sitemap のように「mode=sitemap」のパラメータを付加すればアクセスできますが、 表示のためには専用のスキンが必要です。

しかし、サイトマップページモードで使われるサイトマップページ用スキンに特別な作り方はありません。その他のスキンとまったく同じ方法で記述できます。 ただ、1ページあたりに表示される投稿数や、日付境界バーの有無、先頭固定の設定を表示に反映するかどうかなど、一部の表示方法を独自に設定できる点が異なるだけです。 したがって、目次やタイトル一覧としてのほか、一般用途の別スキンを「表示条件を変えて併用したい」という場合にも活用できます。

設定は、管理画面の［設定］→［補助出力］→【サイトマップページの出力】からできます。(上図の黄色矢印の先を参照)
ここでは、サイトマップページとして使うスキンの選択や、サイトマップページ表示時に使われる名称を設定できるほか、以下の個別設定ができます。

• 日付境界バーを挿入するかどうか。：デフォルトではOFF（挿入しません）です。

  タイトル一覧として使いたい場合には、日付境界バーは余計かもしれませんので、挿入しない設定にもできるようになっています。

• 先頭固定設定を反映するかどうか。：デフォルトではOFF（「先頭固定」指定は無視して、全投稿を新しい順に並べて表示します）です。

  「投稿タイトル一覧」や「目次」として使いたい場合には、 「先頭固定」に指定されている投稿でも先頭には掲載せずに「本来の位置」に掲載したい場合もあるでしょう。 そこで、「先頭固定」に指定されている投稿をサイトマップページでも先頭に固定するのかどうかを選択できるようにしてあります。

• 該当件数とページ番号を表示するかどうか。：デフォルトではON（表示します）です。
• 1ページあたりに表示される投稿数。：デフォルトでは100件ずつ表示します。

▼複数のサイトマップページ用スキンを併用する方法

サイトマップページモードでも skinパラメータを使って任意のスキンが適用可能なので、下記のようなURLにアクセスすることで、複数のサイトマップページ用スキンを併用できます。

• 設定画面で設定されたギャラリー用スキンが適用されるサイトマップページモード： tegalog.cgi?mode=sitemap
• skin-altディレクトリのギャラリー用スキンを適用したサイトマップページモード： tegalog.cgi?mode=sitemap&skin=skin-alt
• skin-subディレクトリのギャラリー用スキンを適用したサイトマップページモード： tegalog.cgi?mode=sitemap&skin=skin-sub

上記のように、サイトマップページモードを指定するパラメータ mode=sitemap と同時に、適用スキンを指定するパラメータ skin=ディレクトリ名 を指定すると、そのスキンを適用した状態でサイトマップページが表示されます。

▼(例)カテゴリごとの目次ページを作る方法

サイトマップページモードでも各種パラメータを併用して特定の条件で絞り込み表示ができます。そのため、例えば「カテゴリごとの目次ページ」として機能させることもできます。

• カテゴリ「diary」の目次(サイトマップ)ページ： tegalog.cgi?mode=sitemap&cat=diary
• カテゴリ「memo」の目次(サイトマップ)ページ： tegalog.cgi?mode=sitemap&cat=memo
• カテゴリ「work」の目次(サイトマップ)ページ： tegalog.cgi?mode=sitemap&cat=work

カテゴリ以外でも、ユーザ別の目次(投稿タイトル一覧)、投稿年月別のタイトル一覧などにも活用できます。

SITEMAP XML出力機能の設定方法

検索サイトのクローラーが容易に全ページをクロールできるようにするための、SITEMAP XML出力機能（SITEMAP XMLモード）があります(※Ver 3.6.0以降)。

この機能には、専用のスキンは不要です。この機能を使う設定にするだけで、URLだけが列挙されるXML形式のサイトマップファイルが出力されます。 tegalog.cgi?mode=xmlsitemap のように「mode=xmlsitemap」のパラメータを付加すればアクセスできます。

不要なら出力しないように設定することもできます。設定は、管理画面の［設定］→［補助出力］→【SITEMAP XMLの出力】からできます(下図)。 この機能は、有効な個別投稿URLを列挙するだけのシンプルな決め打ち出力仕様なので、設定項目は「出力する」か「出力しない」かの2択だけです。

スキンをカスタマイズする上での細々した諸々をご紹介致します。

ログインされている場合にだけ表示されるようにしたい場合

スキン内に自由に記述した何かに対して、ログインされている状況でのみ表示させ、ログインされていない状況では非表示にしたい場合は、その要素(HTMLタグ)に class="Login-Required" という属性を加えて下さい。この属性が付加されている要素は、非ログイン時にはCSSで非表示になります。(※あくまでも非表示になるだけで、出力されなくなるわけではありません。)

ただし、この設定が使えるのは、以下の2条件が成立している場合のみです。

• 条件1：外側スキン内に [[QUICKPOST]] を記述している。(※1)
• 条件2：CGIの「設定」→「投稿欄の表示」で、QUICKPOSTを『ログインしている際にのみ表示する』に設定している。(※2)

※1：QUICKPOSTを挿入しない場合は、そもそもログイン状態のチェック処理自体を省く仕様になっているためです。
※2：QUICKPOSTが表示されない状況でだけ、代わりに .Login-Required { display: none !important; } のCSSが出力される仕様だからです。

例：編集ボタンをログイン状態でしか見えなくする方法

編集ボタンを作っている要素に class="Login-Required" を加えれば良いだけです。（先の前提条件2つが成立している必要があります。）

1. 例えば、標準スキンの skin-onelog.html には、編集ボタンを作るためのHTMLとして以下のソースが記述されています。
   <a href="[[EDITURL]]" title="No.[[POSTID]]を編集します。">編集</a>
   
2. このa要素に「class="Login-Required"」の記述を加えれば良いわけですから、以下のように修正します。
   <a href="[[EDITURL]]" class="Login-Required" title="No.[[POSTID]]を編集します。">編集</a>
   

このようにすると、ログイン状態でのみ表示される編集ボタン(リンク)になります。

各投稿に「編集リンク」だけでなく「直接削除するリンク」も表示する方法

備忘録やToDoリストなどのように、頻繁に削除もするメモとして使いたい場合は、「編集」ボタンだけでなく、直接消せる「削除」ボタンも表示しておくと便利かもしれません。 投稿の削除確認画面のURLを出力できる記法 [[DELETEURL]] を使ってリンクを作れば、『押すと削除確認画面へ直接移動できるリンク』になります。(※Ver 3.6.0以降)

上図は、編集ボタンと並べて削除ボタンも掲載した例です。
このように表示するには、内側スキンの中で編集ボタンを作っている位置の隣に、以下のHTMLを書くと良いでしょう。

<a href="[[DELETEURL]]">削除</a>

これだけで、その投稿を直接削除できるボタンが表示できます。 （記述位置やスキンのCSSによっては、ボタンの形ではなく通常のテキストリンクとして表示されます。どちらにせよ効果は同じです。）

フリースペースの書き方（複数のフリースペースを設ける方法）

わざわざスキンHTMLのソースを編集することなく、CGIの管理画面から手軽に任意の文章を更新できる方法として「フリースペース」機能を用意しています。 フリースペースの入力欄は1つしかありませんが、区切り文字「<>」を使うことで、複数個のフリースペースを別々の場所に何度でも掲載できます。

• スキンHTML内に、[[FREESPACE]] と記述すると、その位置にフリースペースとして登録された文章の全文が挿入されます。

• フリースペースの本文内に、区切り文字「<>」を1つ以上使った場合は、以下のような動作になります。
  
  • HTML内に [[FREESPACE:0]] と記述すれば、先頭から最初の区切り文字までの内容だけが挿入されます。
  • HTML内に [[FREESPACE:1]] と記述すれば、1つ目の区切り文字から次の区切り文字(または末尾)までの内容だけが挿入されます。
  • HTML内に [[FREESPACE:2]] と記述すれば、2つ目の区切り文字から次の区切り文字(または末尾)までの内容だけが挿入されます。
  • 区切り文字の使用個数に制限はありません。
  • 区切り文字は半角で記述した場合のみ認識されます。
  • 例えば区切り文字が5つしか使われていない状態で、[[FREESPACE:6]] のように「存在しない番号」を記述した場合は、何も挿入されません。

区切り文字を使用している場合でも、[[FREESPACE]] のように数字を付けずに記述した場所には、全文が挿入されます。(ただし、区切り文字そのものは表示されません。)

※フリースペース内で使えるキーワード（副作用）

外側スキン(skin-cover.html)用の挿入キーワードの一部は、フリースペース内でも使えます。

• 常に使えるキーワードの例：
  • [[SEARCHBOX]]、[[NEWPOST:URL]]、[[ADMIN:URL]]、[[HOME:URL]]、[[VERSION]]、[[REVERSEURL]]、[[REVERSENAME]]、[[CHARCODE]]
• 外側スキンで使われている場合のみ、フリースペース内でも使えるキーワードの例：
  • [[DATEBOX]]、[[HASHTAGLIST]]、[[QUICKPOST]]、[[ONEPOST:番号]]

※この仕様は副作用みたいなものなので、将来的に廃止されるかもしれません。

ページ内リンクを作れる [[LOOPCOUNT]] 記法の活用例

内側スキンに記述できるキーワード [[LOOPCOUNT]] は、（表示される投稿番号に関係なく）そのページ内で上から何番目に表示されているのかを数値で得られます。 これが何の役に立つのか？ と思われるかもしれませんが、例えば以下のような状況で使えます。

• 《前提1》 1ページに50件ずつ表示している場合で、
• 《前提2》 最新の20件をTOPページ(などの別ページ)に埋め込んでいる場合に、
• 《用途》 「続く21件目から読めるリンク」を作れるようにする

例えば、投稿1つ1つを囲んでいる要素に id="pos[[LOOPCOUNT]]" というid属性を割り振っておきます。 すると、てがろぐCGIは、以下のようなHTMLを出力します。

• そのページで最初に表示される投稿→ id="pos1"
• そのページで2番目に表示される投稿→ id="pos2"
• そのページで3番目に表示される投稿→ id="pos3"
• 　　：　：　：
• そのページで10番目に表示される投稿→ id="pos10"
• 　　：　：　：

なので、「そのページ内で21番目に表示される投稿」の表示位置に直接飛ぶリンクを作りたければ <a href="#pos21">21番目</a> のような感じで書けば良いわけです。

実際の投稿番号に関係なく、「そのページで上から何番目に表示されているか」の数値が使われますから、このようなリンクが作れます。 もちろん他にも、単に1・2・3……と装飾目的に数字を表示する用途や、表示位置に応じて装飾を変化させる用途など、いろいろ活用できるでしょう。

例：先頭の投稿だけを装飾する方法

この [[LOOPCOUNT]] は、（そのページ内で表示されている）先頭の投稿だけに特別な装飾を指定する用途にも活用できそうです。

先程と同様に、投稿1つ1つを囲んでいる要素に id="pos[[LOOPCOUNT]]" というid属性を割り振っているなら、 先頭の投稿にだけ適用したいCSSは .pos1 { ～装飾内容～ } のように書けば良いでしょう。

表示できる投稿が1件も存在しない場合に表示されるシステムメッセージを改変する方法

表示できる投稿が1件も存在しない場合に表示される『表示できる投稿が1件も見つかりませんでした』などのシステムメッセージは、管理画面の[設定]→[ページの表示]→【システムメッセージ・表示用語】→「表示対象がない場合に表示されるシステムメッセージ」欄で自由に改変できます(※Ver 3.3.0以降)。 ここにはHTMLソースも入力可能ですから、これらのシステムメッセージを文章(テキスト)ではなく画像で表示させたい場合にも対応可能です。

• 投稿番号が指定されているのにもかかわらずその番号の投稿が存在しない場合は、中段「指定の単独投稿がない場合」欄のメッセージが表示されます。
• そもそもまだ1件も投稿されていない（＝データファイル内に1件もデータがない）場合には、下段「まだ何も投稿されていない場合」欄のメッセージが表示されます。
• それ以外の状況で表示可能な投稿が1件もない場合は、上段「表示対象が１件もない場合」欄のメッセージが表示されます。

投稿本文も合成音声で読み上げ可能にする方法

投稿入力欄の下にあるボタン群から、下図のように[機能]→[読み上げ]をクリックすると、そのときに入力されている内容（何も入力していない場合はプレースホルダの内容）が合成音声で読み上げられますが、 この音声読み上げ機能は、スキンを編集することで既存投稿の本文に対して使うこともできます(※Ver 3.4.0以降)。

既に投稿済みの本文を合成音声で読み上げられるようにするには、内側スキンのどこかに [[VOICEREADING]] と書いておきます。 内側スキンに [[VOICEREADING]] と書かれていると、その位置に合成音声で読み上げるためのリンクが表示され、読み上げ機能を使うためのJavaScriptが挿入されます。

上図は、標準スキンの内側スキンで、「投稿文字数」と「編集ボタン」との間に [[VOICEREADING]] の記述を加えた場合の表示例です。ここに見える「読上」リンクをクリックすると、投稿本文が合成音声で読み上げられます。

ここでは、本文の表示のうち、テキストに関する装飾や、本文領域関連の表示に関するカスタマイズ方法をご紹介致します。
（※本文領域に表示されるものでも、カスタム絵文字の装飾方法や、画像表示のカスタマイズ方法については、それぞれ専用の区画で説明していますので、そちらをご参照下さい。）

リンクの装飾方法

てがろぐCGIで本文中に記述できるリンクには、いくつかのバリエーションがあります。 それらの表示時に、実際にどのようなHTMLソースが出力されているのかを以下で紹介します。CSSで装飾する際の参考にして下さい。

▼URLだけを書いた場合に出力されるHTML

本文中にただURLを書いただけの場合は、 <a class="url" href="(完全なURL)" title="(完全なURL)">(指定文字数で切ったURL)</a> のように出力されます。
例えば、

1. https://www.nishishi.com/ という短いURLと、
2. https://www.example.com/longpath/to/file.php?mode=default という長いURL

……を書いた場合は、以下のように出力されます。

<a class="url" href="https://www.nishishi.com/" title="https://www.nishishi.com/">https://www.nishishi.com/</a>
<a class="url" href="https://www.example.com/longpath/to/file.php?mode=default" title="https://www.example.com/longpath/to/file.php?mode=default">https://www.example.com/longpath/to/file.php?mode=defa...</a>

リンクを作るa要素には まずclass="url" の属性が常に付加され、href属性値とtitle属性値には「完全なURL」が出力され、a要素の内容には「指定文字数で切られたURL」が出力されます。

そのほか、リンクの出力に関する各種設定によっては、a要素に下記の属性も追加出力されます。

• 「rel="nofollow"属性を出力する」設定にしている場合は rel="nofollow" が追加出力されます。
• 「リンク先を新規ウインドウに開く」設定にしている場合は、target="_blank" が出力されます。
• 「リンク先はフレームを解除して開く」設定にしている場合は、target="_top" が出力されます。

したがって、リンクをCSSで装飾するには .url { ～ } の記述を使えば良い……と思われるかもしれませんが、このclass="url"は、リンクラベルを付加する際にも出力される点にご注意下さい。 それらも含めて装飾して構わないなら、.url { ～ } のCSSで装飾できます。

URLをそのままリンクにする場合は、長いURL（※たいていのブラウザでは自動改行されません）によって描画枠が崩れてしまうのを防ぐために、.url { word-break: break-all; } のようなCSSを加えておくことをお勧め致します。（※標準添付スキンのCSSには加えてあります。）

▼URLにリンクラベルを指定した場合に出力されるHTML

投稿本文中に、[ラベル]https://www.nishishi.com/ のようにリンクラベルを付加して記述した場合は、以下のようなHTMLソースとして出力されます。

<a class="url labeledlink" href="https://www.nishishi.com/">ラベル</a>

リンクを作るa要素には、class属性値として url と labeledlink の2つが付加されます。 title属性は出力されません。 そのほか、リンクの出力に関する各種設定によってはいくつかの属性が加わる点は、URLだけを書いた場合に出力されるHTMLの場合と同じです。

なお、URL等を丸括弧で囲んで下記の1～5のように記述した場合は、後述のようなHTMLソースとして出力されます。（先の出力例と同じ構成です。）(※Ver 4.1.1以降)

1. 丸括弧付きURL： [ラベル](https://www.nishishi.com/)
2. 相対パスでの例： [ラベル](../page.html)
3. 絶対パスでの例： [ラベル](/sample/yomple.html)
4. メールリンク例： [ラベル](mailto:abc@example.com)
5. 電話リンクの例： [ラベル](tel:0000112222)

丸括弧付きURL  <a class="url labeledlink" href="https://www.nishishi.com/">ラベル</a>
相対パスでの例 <a class="url labeledlink" href="../page.html">ラベル</a>
絶対パスでの例 <a class="url labeledlink" href="/sample/yomple.html">ラベル</a>
メールリンク例 <a class="url labeledlink" href="mailto:abc@example.com">ラベル</a>
電話リンクの例 <a class="url labeledlink" href="tel:0000112222">ラベル</a>

出力されるclass属性値はすべて同じです。もし、リンク先がサイト内かサイト外かで装飾を分けたい場合や、メールへのリンクや電話番号へのリンクで装飾を分けたい場合には、href属性値がどんな文字列で始まっているのかの情報を使ってCSSを書き分けて下さい。 例えば以下のようなCSSで書けます。

1. URLでリンク装飾： .labeledlink[href^="https://"], .labeledlink[href^="http://"] { /* 装飾 */ }
2. 相対パスでの装飾： .labeledlink[href^="../"] { /* 装飾 */ }
3. 絶対パスでの装飾： .labeledlink[href^="/"] { /* 装飾 */ }
4. メールリンク装飾： .labeledlink[href^="mailto:"] { /* 装飾 */ }
5. 電話リンクの装飾： .labeledlink[href^="tel:"] { /* 装飾 */ }

▼任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML

ラベル付きリンクを記述する際には、オプション記法を使うことで、任意のclass名を追加できます。(※Ver 4.1.1以降)
例えば、[ラベル:CL(sakura)]https://www.nishishi.com/ と書いた場合には、以下のようなHTMLソースが出力されます。

<a class="url labeledlink uc-sakura" href="https://www.nishishi.com/">ラベル</a>

リンクを作るa要素に、class属性値として url と labeledlink の2つが付加される点は他のリンクと同じです。 それに加えて、ユーザが指定した「sakura」という名称に「uc-」の接頭辞を付けて uc-sakura というclass名が加わります。

▼URLをLightboxで開くオプションをラベルに加えた場合に出力されるHTML

オプション記法を使うと、「テキストリンクでありながらクリックするとLightboxで画像が表示されるリンク」を作ることもできます。
例えば、[ラベル:LB]https://www.example.com/images/photo.jpg と書いた場合には、以下のようなHTMLソースが出力されます。

<a class="url labeledlink" href="https://www.example.com/images/photo.jpg" data-lightbox="tegalog">ラベル</a>

上記は、画像拡大スクリプト関連の設定値がデフォルトのまま（初期設定のまま）だった場合の出力例です。 実際には、どのような設定に変更しているかによって出力結果は異なります。 例えば、data-lightbox="tegalog"部分だけでなく、もしclass属性値をトリガーにして起動するタイプのスクリプト用の設定がなされているなら、class属性値にも専用のclass名（設定画面で指定した文字列）が追加出力されます。

▼リンクラベルの中に画像を含めた場合に出力されるHTML

リンクラベルの中には、テキストだけでなく画像を含めることもできます。
例えば、[[PICT:pinoMatcha.jpg]]https://www.nishishi.com/ のように書いた場合、以下のようなHTMLソースが出力されます。

<a class="url labeledlink" href="https://www.nishishi.com/"><img class="embeddedimage" width="200" height="130" loading="lazy" src="images/pinoMatcha.jpg" alt="pino抹茶味"></a>

特別なことは特になく、単に「画像を使ってリンク先にリンクしている」だけですが、 画像表示時に原寸画像へのリンクにする設定にしている場合でも、リンクラベルの中に画像挿入記法を書いた場合は、（原寸画像へのリンクにはならず）リンク記法で指定したURLへのリンクになります。

このように『画像がラベルに含まれているリンク』だけを対象にして装飾したい場合は、CSSを .labeledlink:has(.embeddedimage) { ～ } のように書くと良いでしょう。(※)

文字装飾記法を使った箇所の装飾カスタマイズ方法

文字装飾記法や色指定記法を使った場合に、実際にどのようなHTMLソースが出力されるのかは、「使い方・設定方法ページ」の『文字装飾記法・色指定記法の書き方』項目に（使い方自体の解説と）合わせて掲載しています。 そちらをご参照下さい。

「続きを読む」ボタンによって隠された範囲の装飾方法

本文内に「続きを読む」というボタンを表示させ、そのボタンが押されない限り続きが表示されないようにする機能が2種類(※)あります。 この機能に関しては、次に示すカスタマイズの余地があります。

• 「続きを読む」ボタンや「畳む」ボタンそのものを装飾する方法
• 「続きを読む」機能によって隠されていた範囲が動的に表示される際の空間を装飾する方法

▼「続きを読む」ボタンや「畳む」ボタンそのものを装飾する方法

「続きを読む」ボタンや「畳む」ボタンは、標準添付スキンではどれもボタン形状に見えますが、それはCSSでボタン形状に見えるよう装飾されているからボタンに見えるだけです。 実体はa要素で記述されたテキストリンクなので、（自作スキンなどで）「続きを読む」用の装飾を用意しなければ、ボタンではなくテキストリンクの形状で表示されます。

ボタン表面に表示される「続きを読む」や「畳む」のラベルは、管理画面の[設定]→[ページの表示]→【投稿本文の表示／テキスト】→[文章の表示]欄から下図のように変更できます。

この「続きを読む」ボタンや「畳む」ボタンは、以下のようなHTMLソースで出力されています。（※実際には改行されずに1行で出力されます。）

• 「続きを読む」ボタン（リンク）：
  

  <a href="#readmore" id="■" style="display:none;" class="readmorebutton readmoreopen" onclick="（スクリプト）">続きを読む</a>
  

  id属性の値である「■」部分には、そのボタン固有のidが動的に出力されます。（JavaScriptで制御するため、同一ページ中の他の要素と重複しない値が割り振られます。） このid値は毎回異なる可能性があるため、装飾目的には使えませんのでご注意下さい。

  ここに「style="display:none;"」の記述があるのは、JavaScriptが無効な環境では「続きを読む」ボタンを見えなくするためです。（JavaScriptが有効な環境では、JavaScriptによってこのスタイルが覆され、「続きを読む」ボタンが見えるようになります。）

• 隠されている範囲＋「畳む」ボタン（リンク）：
  

  <span id="■" class="readmorearea">
    （隠されている範囲の本文）
    <a href="#readclose" class="readmorebutton readmoreclose" onclick="（スクリプト）">畳む</a>
  </span>
  

  class属性値の「readmorebutton」は両ボタン共通です。2つ目のclass値は各ボタンで異なります（readmoreopenとreadmoreclose）。

したがって、以下のようなCSSで各部分を装飾できます。

• 「続きを読む」・「畳む」共通の装飾：.readmorebutton { ～装飾～ }
• 「続きを読む」にだけ適用される装飾：.readmoreopen { ～装飾～ }
• 「畳む」にだけ適用される装飾：.readmoreclose { ～装飾～ }

▼「続きを読む」機能によって隠されていた範囲が動的に表示される際の空間を装飾する方法

「続きを読む」ボタンによって隠されている範囲は、<span id="■" class="readmorearea"> ～ </span>でマークアップされます。 そのため、この範囲だけを対象に装飾を施したいなら、CSSで .readmorearea { ～装飾～ } と書けば良いでしょう。

しかしながら、この隠された範囲はJavaScriptによって動的に表示/非表示が切り替わるため、デフォルトでは表示時に「display: inline;」のCSSが適用され、インラインとして表示されます。

もしこの隠された範囲をブロックレベルに装飾したい場合には、このままでは都合が良くありません。 たとえCSSでdisplayプロパティを記述していても、JavaScriptによって上書きされてしまうため効力が及ばない（＝打ち消されてしまう）からです。

そこで、隠された範囲を表示する際に、隠されていた対象要素を inline, inline-block, block のどれで表示するかを指定できるようにする機能があります。

設定箇所は、管理画面の[設定]→[ページの表示]→【投稿本文の表示／テキスト】→「展開する範囲の表示方法」です。 隠された範囲が「続きを読む」ボタンによって表示される際に、その隠されていた領域（＝動的に表示されるブロック）をどのようなスタイルで表示したいかが、「inline」・「inline-block」・「block」の3つから選べます。

隠されている範囲だけに特別な装飾(CSS)を施したい場合には、必要に応じて設定を変更して下さい。

※デフォルトでは inline です。
※特に不都合がなければ inline のままにして下さい。標準添付スキンは、この値が inline であることを前提に作られています。

鍵付き投稿に表示される「鍵入力フォーム」の装飾方法

投稿に鍵が掛けられている(＝パスワード保護されている)ときは、本文の代わりにまず「鍵入力フォーム」が表示されます。この鍵入力フォームの見た目は、設定やCSSを使うことで自由にカスタマイズ・装飾ができます。 標準添付の各スキンでも、スキンに合わせて配色が変わるように作ってあります。

▼鍵入力フォームの文言をカスタマイズする方法

鍵入力フォームに表示される文言をカスタマイズするには、 管理画面の［設定］→［ページの表示］→【鍵付き(パスワード保護)投稿の表示】→［鍵入力フォームの出力設定］区画（下図の黄色矢印部分）を編集して下さい。

▼鍵入力フォームを装飾する方法

鍵入力フォームは、以下のようなHTMLソースとして出力されます。（文字は管理画面で設定した内容が出力されます。）

<form action="..." method="post" class="passkeyform">
   <span class="passkeyerror">鍵が違います。再度入力して下さい。</span>
   <span class="passkeybox">
      <span class="passkeyguide">投稿を見るには鍵を入力：</span>
      <input type="text" value="" name="trykey" autocomplete="◆◆◆" placeholder="🍰" class="passkeyinput">
      <span class="submitcover">
        <input type="submit" value="投稿を見る" class="passkeysubmit">
      </span>
   </span>
</form>

※上記では見やすいように改行とインデントを加えていますが、実際には一切改行されずに1行で全ソースが出力されます。
※実際にはさらに、表示対象の投稿番号を伝える非表示(hidden)なinput要素も出力されます。
※<span class="passkeyerror">～</span>の部分は、鍵の入力を誤った際にだけ出力されます。
※「◆◆◆」の部分は、オートコンプリートの設定(有効/無効)に合わせて on か off かが出力されます。
※上記で「🍰」の部分は、設定項目『鍵プレースホルダ』に入力した内容が出力されます。(デフォルトでは何も出力されません。)

これらのclass名に対してCSSを書けば、自由に装飾できます。

• 鍵入力フォーム全体の装飾： .passkeyform { ～装飾～ } …Ⓐ
• 鍵違いエラー表示の装飾： .passkeyerror { ～装飾～ }
• ガイド文～送信ボタンのある領域全体の装飾： .passkeybox { ～装飾～ } …Ⓑ
• 入力欄前のガイド文の装飾： .passkeyguide { ～装飾～ }
• 鍵入力欄の装飾： .passkeyinput { ～装飾～ } …㋐
• 鍵入力欄プレースホルダの装飾： .passkeyinput::placeholder { ～装飾～ } …㋑
• 送信ボタンの装飾： .passkeysubmit { ～装飾～ }

▼鍵入力フォーム用のCSSがないスキンに、標準のCSSを加える方法

鍵入力フォームを装飾するためのCSSがないと、鍵入力フォームは一切装飾されずに表示されます。したがって、Ver 3.7.4以下のバージョン用に作られたスキンを使っている場合は、鍵入力フォームは一切装飾されずに表示されます。

鍵入力フォームはシンプルなフォームなので、装飾がまったくなくても特に問題はないでしょうが、標準のCSSを加えたい場合には以下の方法があります。

標準添付スキンをそのままお使いの場合

➡ Ver 3.8.0 以降のバージョンのパッケージ(ZIP)に含まれるスキンを上書きしてお使い下さい。すると、鍵入力フォームも装飾された状態で表示できます。

自作のスキンを使っている場合や、かなりカスタマイズされたスキンを使っている場合

➡ Ver 3.8.0 以降のパッケージ(ZIP)に含まれるスキンCSS（tegalog.cssなど）のソースから、下図のような『■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾』部分のソースをコピーしてお使い下さい。

▲鍵入力フォーム用の標準CSSの所在

Ver 3.8.0時点の標準スキンに含まれる tegalog.css の場合は、だいたい832行目付近にあります。

1投稿の単独表示時に見えるユーティリティリンク枠の装飾方法

1投稿の単独表示ページには、標準では下図の右側のように様々なリンクリストが掲載された「ユーティリティリンク枠」が表示されます。 この枠内に表示されるリンクリストは、自由に取捨選択したり、装飾を変更したりできます。

※黄色矢印部分は、Ver 3.3.0から追加された日付別リンクの詳細設定項目群です。橙色矢印部分は、Ver 3.3.0から追加された「長年日記機能／n年m月日記機能」のリンクです。

▼ユーティリティリンク枠内に表示されるリンクの取捨選択方法

管理画面の[設定]→[ページの表示]→【ページの表示／投稿単独】で、上図の左側に見える画面が表示されます。ここにある各チェックボックスで、どのリンクを掲載するかの取捨選択ができます。

▼ユーティリティリンク枠内に表示されるリンクをCSSで装飾する方法

ユーティリティリンク枠全体は、以下のようなHTMLとして出力されています(※Ver 3.3.0以降)。
※見やすいように改行を加えて掲載していますが、実際には一切改行されずに1行で出力されます。

<div class="utilitylinks">
   <ul>
      <li class="urandom"><a href="?mode=random">さらにランダムに表示する</a></li>
      <li class="uuser"><a href="?userid=nishishi">ユーザ「にしし」の投稿だけを見る</a> <span class="revlink">(※<a href="?userid=nishishi&amp;order=reverse">時系列順で見る</a>)</span></li>
      <li class="ucat"><span class="uchead">この投稿と同じカテゴリに属する投稿：</span>
         <ul class="categorylinks">
            <li class="ucat"><a href="?cat=answer" class="cat-answer">カテゴリ「回答/返信」の投稿だけを見る</a> <span class="revlink">(※<a href="?cat=answer&amp;order=reverse">時系列順で見る</a>)</span></li>
            <li class="ucat"><a href="?cat=tsubo" class="cat-tsubo">カテゴリ「つぼやき」の投稿だけを見る</a> <span class="revlink">(※<a href="?cat=tsubo&amp;order=reverse">時系列順で見る</a>)</span></li></ul></li>
         </ul>
      </li>
      <li class="udate"><span class="udhead">この投稿日時に関連する投稿：</span>
         <ul class="datelinks">
            <li class="date-ymd"><a href="?date=2021/01/04">2021年01月04日の投稿だけを見る</a> <span class="revlink">(※<a href="?date=2021/01/04&amp;order=reverse">時系列順で見る</a>)</span></li>
            <li class="date-ym"><a href="?date=2021/01">2021年01月の投稿だけを見る</a> <span class="revlink">(※<a href="?date=2021/01&amp;order=reverse">時系列順で見る</a>)</span></li>
            <li class="date-y"><a href="?date=2021">2021年の投稿だけを見る</a> <span class="revlink">(※<a href="?date=2021&amp;order=reverse">時系列順で見る</a>)</span></li>
            <li class="date-md"><a href="?date=01/04">全年01月04日の投稿をまとめて見る</a> <span class="revlink">(※<a href="?date=01/04&amp;order=reverse">時系列順で見る</a>)</span></li>
            <li class="date-d"><a href="?date=04">全年全月04日の投稿をまとめて見る</a> <span class="revlink">(※<a href="?date=04&amp;order=reverse">時系列順で見る</a>)</span></li>
         </ul>
      </li>
      <li class="uedit"><a href="?mode=edit&amp;postid=1889">この投稿を再編集または削除する</a></li>
   </ul>
</div>

先頭の「さらにランダムに表示する」リンクは、ランダム表示モードの際にだけ出力されます。

上記のソースは、2つのカテゴリに属している投稿の場合です。カテゴリへのリンクは、<ul class="categorylinks">～</ul>というサブリストの内側にリストアップされます。
もし、どのカテゴリにも属していない場合で、その場合でもリンクを表示する設定になっている場合には、以下のようなHTMLが出力されます。 この場合は、<ul class="categorylinks">～</ul>というサブリストは出力されず、第1階層のリストに直接掲載されます。

<li class="ucat"><a href="?cat=-" class="cat-">カテゴリ「カテゴリなし」の投稿だけを見る</a> <span class="revlink">(※<a href="?cat=-&amp;order=reverse">時系列順で見る</a>)</span></li>

概ね、個別にclass名を割り振ってありますから、望みの項目を個別に装飾できるでしょう。
例えば以下のようなCSSで装飾できます。

• ユーティリティリンク枠全体（外枠）を装飾したい場合には、 .utilitylinks { ～装飾～ }のように書くことで装飾できます。
• ユーティリティリンク枠内の第1階層目のリスト項目だけを装飾したい場合には、 .utilitylinks > li { ～装飾～ }のように書くことで装飾できます。
• 「この投稿日時に関連する投稿：」という見出し文字を見えなくしたい場合には、 .udhead { display: none; }のように書くことで非表示にできます。
• 再編集リンクだけを装飾したい場合には、 .uedit a { ～装飾～ }のように書くことで装飾できます。

▼「時系列順に見る」リンクだけを見えなくする方法

ユーティリティリンク枠内に表示されるほとんどの項目には、右側に「時系列順に見る」というリンクが付加されています。これらはすべて、<span class="revlink">～</span> というマークアップで出力されていますから、このclass名を使うことで「時系列順に見る」リンクだけを対象にして装飾できます。

例えば、以下のようにCSSを書けば、すべての「時系列順に見る」リンクを非表示にできます。
.revlink { display: none; }

専用のディレクトリに「絵文字用に作成された画像」を置いておくことで、Unicodeには存在しない任意の絵文字画像を簡単に表示できる「カスタム絵文字」機能があります。(※Ver 4.0.4以降)

カスタム絵文字機能の使い方については、使い方・設定方法ページの「カスタム絵文字」項目をご覧下さい。
以下では、カスタム絵文字の出力に関する詳細を解説しています。カスタム絵文字の表示を装飾・カスタマイズする際にご活用下さい。

カスタム絵文字の実際の出力HTMLと装飾例

▼カスタム絵文字が表示される際のHTMLソース例➊（デフォルト装飾がOFFの場合）

『絵文字画像の高さをCSSで2文字分に制限する』項目がOFFの場合で、次の条件で表示される場合を例にして説明します。

• てがろぐCGIの設置位置が https://ドメイン/tegalog/ で、
• カスタム絵文字用ディレクトリが emoji で、
• [:suika:] と記述することで suika.png （横122px×縦122px）が表示される場合

この場合は、次のようなHTMLソースが出力されます。
※ここでは見やすいように改行を加えていますが、実際にはすべて1行で出力されます。

<span class="cemoji ce-suika">
   <img src="https://ドメイン/tegalog/emoji/suika.png"
        width="122" height="122"
        alt="suika" loading="lazy">
</span>

カスタム絵文字1つごとに、span要素の中にimg要素が含まれている形で出力されます。

▼外側のspan要素には、

• すべての絵文字に共通のclass名：cemoji
• 絵文字名をベースにしたclass名：ce-絵文字名（例えば ce-suika ）

……が出力されます。後者のclass名には接頭辞として必ず ce- が付加されます。「ce」は Custom Emoji の略です。

▼内側のimg要素には、

• 特にclass名は付加されていません。
• 画像の縦横サイズが取得できた場合で、サイズを出力する設定になっている場合は、width="122" height="122"のように属性が出力されます。
• alt属性値には、絵文字名がそのまま入ります。
• loading="lazy"は常に出力されます。

したがって、独自の装飾を用意する際には、span要素側に付加されているclass名を使って下さい。

▽拡張子も含めて記述した場合

なお、[:suika:] ではなく [:suika.png:] のように拡張子を含めて記述した場合は、次のようなHTMLソースが出力されます。

<span class="cemoji ce-suikapng">
   <img src="https://ドメイン/tegalog/emoji/suika.png"
        width="122" height="122"
        alt="suika.png" loading="lazy">
</span>

この場合、class名としては、 ce-suikapng のように、 ドット記号が省略された状態でファイル名＋ファイル拡張子が出力されます。 拡張子まで含まれる点にご注意下さい。
alt属性値には、ドット記号を含むファイル名すべてがそのまま出力されます。

▼カスタム絵文字が表示される際のHTMLソース例➋（デフォルト装飾がONの場合）

『絵文字画像の高さをCSSで2文字分に制限する』項目がONの場合は、OFFの場合に出力されるソースに、次のCSSを含むstyle属性が加わります。（それ以外の出力内容はOFFの場合と同様です。）
style="width:auto; height:auto; max-height:2em; vertical-align:middle;"

※ここでは見やすいように改行を加えていますが、実際にはすべて1行で出力されます。

<span class="cemoji ce-suika">
   <img src="https://ドメイン/tegalog/emoji/suika.png"
        width="122" height="122"
        style="width:auto; height:auto; max-height:2em; vertical-align:middle;"
        alt="suika" loading="lazy">
</span>

これは、装飾用のCSSを用意しなくてもそれなりに表示されるようにするための機能です。自力でCSSを用意する場合にはOFFに設定する方が楽に装飾できるでしょう。

▼カスタム絵文字が表示される際のHTMLソース例➌（コピー用スクリプトが出力される場合）

『絵文字ダブルクリックでそのコードをコピーする』項目がONの場合は、カスタム絵文字を出力するimg要素に対してondblclick属性が加わり、絵文字の表示コードをクリップボードにコピーするためのJavaScriptソースが出力されます。

※ここでは見やすいように改行を加えていますが、実際にはすべて1行で出力されます。

<span class="cemoji ce-suika">
   <img src="https://ドメイン/tegalog/emoji/suika.png"
        width="122" height="122"
        ondblclick="CopyCEC(this);"
        alt="suika" loading="lazy">
</span>

上記の ondblclick="CopyCEC(this);" 部分では、『ダブルクリックされた際に、CopyCEC関数を実行する』という処理をしています。（※CECは、Custom Emoji Codeの略です。）

CopyCEC関数は、JavaScriptで「alt属性値に指定されている絵文字名をベースにして、そのカスタム絵文字を表示するためのコードをクリップボードにコピーする」という処理をします。 このCopyCEC関数自体は、てがろぐが生成するページ内にカスタム絵文字が1個以上存在する場合に限って、「最初のカスタム絵文字が出力された直後」に1度だけ出力されます。（絵文字がいくつあっても、重複して出力されることはありません。）

▼絵文字別に装飾を分けたい場合の装飾方法

カスタム絵文字すべてに共通する装飾を指定したい場合は、共通のclass名 .cemoji が使えます。（cemojiは、Custom EMOJI の略です。）

• カスタム絵文字の外側を装飾する場合：.cemoji { ～装飾～ }
• カスタム絵文字そのものを装飾する場合：.cemoji img { ～装飾～ }

特定のカスタム絵文字だけに限定した装飾を用意したい場合は、個別のclass名 ce-絵文字名 が使えます。（ceは、Custom Emoji の略です。）
例えば、[:takoyaki:] に限定した装飾を用意したい場合は次のようにCSSを書くと良いでしょう。

• カスタム絵文字 takoyaki の外側を装飾する場合：.ce-takoyaki { ～装飾～ }
• カスタム絵文字 takoyaki そのものを装飾する場合：.ce-takoyaki img { ～装飾～ }

カスタム絵文字共通のCSSを上書きする形で装飾したい場合は、詳細度を上げるために .cemoji.ce-takoyaki のような書き方をする方が良いかもしれません。

例えば、「すべてのカスタム絵文字は『高さ21px』にするが、たこ焼き(takoyaki)絵文字だけは『高さ180px』で表示させたい」という場合は、以下のようなCSSで実現できます。

/* カスタム絵文字共通装飾 */
.cemoji img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 21px;
   vertical-align: middle;
}
/* たこ焼き絵文字のための上書き装飾 */
.cemoji.ce-takoyaki img {
   max-height: 180px;
}

▼iPhone等のiOS端末でSVG絵文字が縦に並んでしまう場合の対処方法

iPhone等のiOS端末のブラウザで、SVG形式のカスタム絵文字を複数個表示させたときに、横方向ではなく縦方向に並んでしまう場合があります。 例えば、下図の右側のように横並びで表示されてほしいのに、下図の左側のように縦並びで表示されてしまう場合です。

これは、SVG画像側で横幅サイズが指定されていない場合や、指定されていても「100%」のような相対的な値で指定されている場合に発生するようです。

▽解決策1

この場合は、CSSに .cemoji img { max-width: 2em; } のように追記して、カスタム絵文字の横幅を制限すると解決します。 これでカスタム絵文字の横幅が最大2文字分に制限されますので、上図の右側の通り、横方向に並んでくれます。

ただ、このCSSだと、あらゆるカスタム絵文字の横幅が 2em に制限されてしまいますので、横に大きな絵文字も使いたい場合にはこれでは困る場合もあるでしょう。 その場合には、特定の絵文字だけに限定して装飾する記述方法を使うと良いです。
例えば、もし takoyaki だけに限定して適用したいなら、.ce-takoyaki img { max-width: 2em; } のように書けます。

▽解決策2

なお、SVG画像をテキストエディタで開き、1行目に widthとheightの値を書き足す（または既存の値を書き換える）方法でも対処できます。
下図のように、svg要素の中に width属性と height属性を書き加えて、そこに具体的なサイズをピクセル値で指定します。既に「100%」等の記述がある場合は、ピクセル数に書き換えます。

このようにすると、先に示したようなCSSでの横幅最大値の指定がなくても、SVG画像は（iOSでも）横並びになってくれます。

画像の表示方法に応じた実際の出力HTMLと装飾例

画像を投稿内に表示する際には、[PICT:ファイルパス] や [PICT:FIG:ファイルパス] などの記法を使います。 この記法が実際のどのようなHTMLとして出力されるのかを以下に紹介しておきます。 画像表示を構成する多くの要素に個別のclass名を付加してありますので、画像周りの表示を細かくカスタマイズしたい場合にご活用下さい。

▼画像が表示される際のHTMLソース例（キャプション付き・画像だけ）

キャプション付きの画像が表示される記法 [PICT:FIG:ファイルパス] を使うと、出力されるHTMLはだいたい以下のような感じになります。（※画像をリンクにする設定の場合）
まず、ソースの構造を簡単に見せるために、class等の各属性は省略した状態で掲載します。

<figure>
　<a href="画像パス"><img src="画像パス"></a>
　<figcaption>キャプション</figcaption>
</figure>

なお、キャプションを付けずに画像だけを単独で見せる [PICT:ファイルパス] の記述だと、以下のような感じです。

<a href="画像パス"><img src="画像パス"></a>

要するに、記法に「FIG」オプションが付くと、「画像だけを単独で見せるHTML」の外側に figure要素が付き、さらに画像の直後に figcaption が加わります。

▽実際の出力HTMLソース例（※何も省略しない版）：

例えば、[PICT:FIG:juice.png] という記述によって、「ジュース」というキャプションが登録された 350×442(px)の juice.png が表示される場合には、以下のようなHTMLソースが出力されます。 （※画像をリンクにする設定で、Lightboxを使って拡大される設定の場合。）
※ソースを見やすくするために改行とインデントを加えていますが、実際には1行で出力されます。

<figure class="embeddedpictbox">
   <a class="imagelink" href="images/juice.png" data-lightbox="tegalog" data-title="ジュース">
      <img class="embeddedimage" width="350" height="442" loading="lazy" src="images/juice.png" alt="ジュース">
   </a>
   <figcaption>ジュース</figcaption>
</figure>

細かく装飾するには、要素名のほかに、以下のclass属性値を使うと良いでしょう。

• figure要素には embeddedpictbox というclass名も付加されます。
• a要素には imagelink というclass名も付加されます。
• img要素には embeddedimage というclass名も付加されます。
• figcaption要素には特に何も属性は付加されません。

なお、[PICT:juice.png] という記述で、画像だけ（キャプションなし）で表示される場合には、以下のようなHTMLソースが出力されます。 （※画像をリンクにする設定で、Lightboxを使って拡大される設定の場合。）
※ソースを見やすくするために改行とインデントを加えていますが、実際には1行で出力されます。

<a class="imagelink" href="images/juice.png" data-lightbox="tegalog" data-title="ジュース">
   <img class="embeddedimage" width="350" height="442" loading="lazy" src="images/juice.png" alt="ジュース">
</a>

先程の「キャプション付き」のソースから figure要素と figcaption要素を取り除いた場合と同じです。

▼フラグが付いている画像の出力HTMLソース例

画像にフラグが付いている場合は、そのフラグを示すclass名も出力されますので、CSSで装飾等に利用できます。 例えば、先程と同じ画像に「一覧外」フラグと「NSFW」フラグの2つが付加されている場合は、以下のようなHTMLが出力されます。

<figure class="embeddedpictbox nolisted nsfw">
   <a class="imagelink nolisted nsfw" href="images/juice.png" data-lightbox="tegalog" data-title="ジュース">
      <img class="embeddedimage nolisted nsfw" width="350" height="442" loading="lazy" src="images/juice.png" alt="ジュース">
   </a>
   <figcaption>ジュース</figcaption>
</figure>

付加されるclass属性値は下記の通りです。

• 「一覧外」フラグが付いていれば、figure要素・a要素・img要素のすべてに「nolisted」というclass名が付加されます。
• 「NSFW」フラグが付いていれば、figure要素・a要素・img要素のすべてに「nsfw」というclass名が付加されます。

キャプションを表示しない場合でも、a要素とimg要素にはフラグを示すclass名が出力されます。

3つの要素すべてに同じclass名が付加されますので、 例えば「画像そのものだけ」を装飾したい場合は .nolisted や .nsfw ではなく img.nolisted や img.nsfw というセレクタを使ってCSSを書く方が無難です。 要素名を省略すると、最大で3つの要素に同じ装飾が適用されてしまいますから。

▼キャプション付きの画像・フラグ付きの画像を装飾するCSS例

画像表示部分はあまりCSSで装飾を加えなくてもそれなりに表示されると思いますが、キャプション付きの画像の表示に使われるfigure要素は、デフォルトでは周囲に余白が設けられますので、好みに応じて調整した方が良いかもしれません。 キャプション付き画像の場合は、各パーツを以下のようなCSSで装飾できます。

• 画像ボックス全体(＝figure要素)を装飾したい場合は、 .embeddedpictbox { ～装飾～ } のように書けば良いでしょう。
• キャプション(＝figcaption要素)を装飾したい場合は、 .embeddedpictbox figcaption { ～装飾～ } のように書けます。figcaptionにはclassは特に付加されていません。
• 画像リンク(＝a要素)を装飾したい場合は、 .imagelink { ～装飾～ } のように書けます。
  ただし、この書き方だと「キャプションなし」の画像リンクにも適用されます。 それを避けたい場合は .embeddedpictbox .imagelink { ～装飾～ } のように対象を限定すると良いでしょう。
• 画像そのもの(＝img要素)を装飾したい場合は、 .embeddedimage { ～装飾～ } のように書けます。
  ただし、この書き方だと「キャプションなし」の画像リンクにも適用されます。 それを避けたい場合は .embeddedpictbox .embeddedimage { ～装飾～ } のように対象を限定すると良いでしょう。

また、フラグの付いた画像について何らかの装飾を施したい場合には、自力でCSSを書く必要があります。 特に「NSFW（not safe for work）」フラグの付けられた画像の表示をどうにかしたい（例えば「ぼかしたい」とかの）場合には、そうなるようCSSを事前に用意しておく必要があります。 例えば、NSFWフラグの付いた画像をCSSで装飾するには、以下のように書けます。

• NSFWフラグの付いた画像ボックス全体を装飾したい場合は、.embeddedpictbox.nsfw { ～装飾～ } と書けます。 このとき「.nsfw」の直前に空白を入れないようご注意下さい。入れると意味が変わるので正しく装飾できなくなります。 もしくは、figure.nsfw { ～装飾～ } と書いても良いでしょう。
• NSFWフラグの付いた画像リンクを装飾したい場合は、.imagelink.nsfw { ～装飾～ } と書けます。 このとき「.nsfw」の直前に空白を入れないようご注意下さい。入れると意味が変わるので正しく装飾できなくなります。
• NSFWフラグの付いた画像そのものを装飾したい場合は、.embeddedimage.nsfw { ～装飾～ } と書けます。 このとき「.nsfw」の直前に空白を入れないようご注意下さい。入れると意味が変わるので正しく装飾できなくなります。 もしくは、img.nsfw { ～装飾～ } と書いても良いでしょう。
• NSFWフラグの付いた画像のキャプションを装飾したい場合は、.embeddedpictbox.nsfw figcaption { ～装飾～ } と書けます。 figcaption要素そのものにはclassは付加されていない点に注意して下さい。

例えば、標準スキンでは、NSFWフラグ用の装飾として、画像をぼかして表示するCSSを以下のように書いています。

/* ▽フラグ付き画像 */
figure.nsfw {
   overflow: hidden;  /* ぼかし領域がfigureのボックスからはみ出ないようにする */
}
img.nsfw {
   filter: blur(9px); /* ぼかす */
}

このように、フラグに対してCSSを適用する場合は、.nsfw のように要素名を省略はせず、figure.nsfw や img.nsfw のように要素名を含むセレクタを使う方が無難です。 （そうしないと、異なる種類の要素に一括して同じスタイルが適用されてしまうからです。）

▼キャプション付き画像ボックスを横に並べたい場合

figure要素は（何もCSSで装飾しない標準状態では）横方向には並んで表示されません。 したがって、何のCSSも用意しない状態では、「キャプション付き画像ボックス」は横方向には並ばず、（複数の画像ボックスを掲載した場合には）縦方向に並んでしまいます。

figure要素を横方向に並べるには、figure要素をinline-block等で表示するようなCSSが必要です。
標準添付の各スキンでは、inline-block ではなく下記ソースのように inline-table を使って横に並べています。

/* ▽画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
   margin: 0;                 /* 外側の余白を消す */
   padding: 0;                /* 内側の余白を消す */
   display: inline-table;     /* 横方向に並べる */
   border-collapse: collapse; /* displayをinline-tableにする場合に必要 */
   border: 1px solid #e0eee0; /* 枠線 */
   vertical-align: top;       /* 行内では上に寄せる */
}
   /* キャプション */
   .embeddedpictbox figcaption {
      display: table-caption;    /* キャプションが画像幅から外に出ないようにする */
      caption-side: bottom;      /* キャプションの位置(上にしたければtop) */
      font-size: 0.8em;          /* 文字サイズ */
      text-align: center;        /* センタリング */
      background-color: #e0eee0; /* 背景色 */
   }
   /* 画像ボックスに含まれる画像 */
   .embeddedpictbox img {
      vertical-align: middle;
   }

※inline-tableを使っている理由は、次の2点です。
✅キャプションが長い場合には、画像の横幅を超えることなく自動改行して表示されるようにするため。
✅キャプションの位置を上端にしたい場合や下端にしたい場合に、プロパティの値1つを書き換えるだけで済むようにするため。（caption-sideプロパティの値をbottomにするとキャプションは画像の下に表示されます。topにすると画像の上に表示されます。） ※標準添付スキンの中では、ギャラリーモードだけは top にしてあります。

Lightbox以外の画像拡大スクリプトを読み込んで使う方法

画像をその場で拡大表示するためのスクリプトには、標準ではLightboxが使われます。しかし、FancyboxやFuwaimgなどのような他のスクリプトを使いたい場合もあるでしょう。 そのような場合に、簡単に切り替えられる設定方法を用意しています(※Ver 3.3.0以降)。

Lightbox以外の画像拡大スクリプトを読み込んで使う際に必要な設定箇所は、下記の2カ所あります。

▼設定箇所（1：前半）

まず、管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】で、下図のように「Lightboxを使う」か「他のスクリプトを使う」かを選択できます。ここで、Lightbox以外の任意の画像拡大用スクリプトのURLを指定できます。

上図の設定箇所で『他のスクリプトを使う』項目側にチェックを入れた上で、読み込みたいJavaScriptファイルとCSSファイルのURLを入力すると、スキンに記述された [[JS:LIGHTBOX]] または [[JS:LIGHTBOX:JQ]] の部分では、デフォルトのLightboxではなく指定のスクリプトが読み込まれるようになります（※CSSファイルは、JavaScriptを使ってhead要素に動的に挿入される形で読み込まれます）。

▼備考1：jQueryの読み込みは、スキンの書き方次第
もしスキンに [[JS:LIGHTBOX:JQ]] と書いていると、指定したスクリプトが読み込まれる直前にjQuery本体も読み込まれます。 もし [[JS:LIGHTBOX]] とだけ書いている場合は、jQueryは読み込まれません。 使いたいスクリプトがjQueryを必要としているかどうかで書き分けて下さい。 なお、スキンによっては（別の用途で使うために）既にjQueryを固定的に読み込んでいるかもしれません。そのような場合に、二重に読み込ませてしまわないようご注意下さい。

▼備考2：2つ以上のJavaScriptファイルの読み込みが必要なスクリプトを使いたい場合
2つ以上のJavaScriptファイル（jQueryを除く）を読み込む必要があるなら、この設定画面ではデフォルトのLightboxを選択しておき、直接スキンHTML内に望みのJavaScriptとCSSを読み込む記述を加えて下さい。

上記の設定は単に読み込むスクリプトを指定するだけです。実際に画像拡大用途に使うためには、画像リンクからそのスクリプトが読み込まれる専用の記述を加える必要があります。 その設定場所は下記の通りです。

▼設定箇所（2：後半）

次に、管理画面の[設定]→[ページの表示]→【投稿本文の表示／画像】や【投稿本文内のURL処理】で、画像リンクに対して指定する必要のある特定の記述を加えます。どのような記述が必要なのかは、お使いのスクリプトによって様々ですから、スクリプト側の仕様や説明に従って設定して下さい。 例として、FancyboxとFuwaimgの設定方法は後述します。

ここでの設定は、てがろぐ上で投稿した画像用の指定（上図の赤丸部分）と、外部に存在する画像を埋め込む用の指定（上図の青丸部分）に分かれています。どちらに対しても同じスクリプトを使いたい場合には、両方に同じように設定して下さい。

また、画像拡大スクリプトには、

• 対象リンクに指定の属性を加えなければならないスクリプト（上図の緑色矢印部分）
• 対象リンクのclass属性に指定の値を書かなければならないスクリプト（上図の黄色矢印部分）

……の2種類があります。どちらにも対応可能ですから、スクリプトの仕様に合わせて上図の緑色矢印部分または黄色矢印部分にチェックを入れて指定の文言を追記して下さい。

▼設定例：Fancyboxを使って画像を拡大したい場合

Fancyboxを使いたい場合は、管理画面の[設定]から以下のように設定して下さい。 FancyboxはCDN経由で提供されているため、自サイト内にファイルを設置する必要はなく、下記の設定だけで読み込めます。

1. [システム設定]→【画像拡大スクリプトの選択】→『他のスクリプトを使う』をONにした上で、JavaScriptとCSSの入力欄には以下のURLを入力。
   ➤JavaScript： https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
   ➤CSS： https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
   
2. [ページの表示]→【投稿本文の表示／画像】→『画像リンクにLightbox用の属性を付加する』欄にチェックを入れ、属性欄には data-fancybox="gallery" と入力。
3. [ページの表示]→【投稿本文内のURL処理】→「▼URL自動リンクの特殊表示化」→『画像リンクにLightbox用の属性を付加する』欄にチェックを入れ、属性欄には data-fancybox="gallery" と入力。（➋と同じ）

以上です。

上記の設定により、外側スキンに記述された [[JS:LIGHTBOX:JQ]] の位置にjQueryとFancyboxのファイルが読み込まれ、画像はFancyboxを使って拡大表示されるようになります。

▼設定例：Fuwaimgを使って画像を拡大したい場合

Fuwaimgを使いたい場合は、まずFuwaimgのJavaScriptファイルとCSSファイルを自サイト内の適当な場所にアップロードしてから、管理画面の[設定]で以下のように設定して下さい。

1. [システム設定]→【画像拡大スクリプトの選択】→『他のスクリプトを使う』をONにした上で、自サイト内に設置したFuwaimgのJavaScriptファイルの位置とCSSファイルの位置を入力。（「https://」で始まるURLを入力しても構いませんし、「/」で始まる絶対パスで記述しても構いませんし、tegalog.cgiから見た相対パスで指定しても構いません。）
2. [ページの表示]→【投稿本文の表示／画像】→『img要素に独自のclass属性値を追加する』欄にチェックを入れ、属性欄には fuwaimg と入力。
3. [ページの表示]→【投稿本文内のURL処理】→「▼URL自動リンクの特殊表示化」→『img要素に独自のclass属性値を追加する』欄にチェックを入れ、属性欄には fuwaimg と入力。（➋と同じ）

以上です。

上記の設定により、外側スキンに記述された [[JS:LIGHTBOX]] の位置にFuwaimgのファイルが読み込まれ、画像はFuwaimgを使って拡大表示されるようになります。

てがろぐには検索用のUIとして「検索窓」と「複合検索窓」の2種類があります。 「検索窓」は検索語だけを指定して検索するシンプルUIなのに対して、「複合検索窓」は日付やハッシュタグやカテゴリ等の条件を加えた上で検索できます。（マイナス記号による除外検索など、検索そのものの機能はどちらも同じです。）

標準添付の各スキンでは、たいていJavaScriptを使って両方を切り替えられるように作ってありますが、スキンの書き方次第でどちらか一方だけを表示したり、両方を別々の場所に表示したり、好きなように配置できます。

【小目次】

• 検索窓・複合検索窓の書き方と設定方法
  • 検索ボタンや限定オプションの設定
  • 検索条件プルダウンメニューの取捨選択や掲載順序の指定
  • 複合検索での検索オプション項目名のカスタマイズ方法
• 検索窓(検索フォーム)の装飾方法
  • 検索窓(単独検索窓)をCSSで装飾する方法
  • 複合検索窓の各部分をCSSで装飾する方法
• 検索結果の表示時に検索語に対して適用されるハイライト(強調)の装飾方法
  • ハイライトの表示例とCSSソース例

検索窓・複合検索窓の書き方と設定方法

投稿総数が増えてくると、複雑な条件で検索（絞り込み）したい需要も増えてくるでしょう。 そのため、下図右側のように、任意の検索語に加えて、投稿者(ユーザ)名・投稿年月・ハッシュタグ・カテゴリの各条件を同時に指定して検索できる「複合検索窓」を出力できる機能を用意しています。 （Ver 3.2.0以降）

• スキンHTML内に、[[SEARCHBOX]] と記述すると、その位置に検索窓が挿入されます(上図の左側)。
• スキンHTML内に、[[SEARCHBOX:COMPLEX]] と記述すると、その位置に複合検索窓が挿入されます(上図の右側)。検索語を入力できる検索窓に加えて、投稿者名・投稿年月・ハッシュタグ・カテゴリ名・出力順序を指定するオプションプルダウンメニューが併せて表示されます。（より詳細なカスタマイズ方法は後述）

標準添付スキンでは、上図のように『複合検索窓に切り替える』リンクを押すと「単独検索窓」から「複合検索窓」に切り替わるようになっていますが、これはスキンHTMLの中にJavaScriptで直接そのような切り替え処理を書いているからです。CGIが出力する複合検索窓そのものに、そのような切り替え機能があるわけではありません。もし最初から複合検索窓の方を表示しておきたいなら、スキンに [[SEARCHBOX:COMPLEX]] だけを書いておけば良いでしょう。

▼検索ボタンや限定オプションの設定

検索ボタンのラベルは標準では「検索」ですが、自由なラベルに変更できます。 また、検索語入力欄にはプレースホルダ（＝何も入力されていない状況で薄く表示される文字列）を指定することもできます。 例えばプレースホルダを「Search...」にして、検索ボタンのラベルを絵文字「🔍」にすると、検索窓は下図(右側)のように表示されます。

管理画面の[設定]→[ページの表示]→【全文検索機能】→[検索窓の表示]で、下図のように指定できます。

▼検索条件プルダウンメニューの取捨選択や掲載順序の指定

スキンHTMLに [[SEARCHBOX:COMPLEX]] とだけ書くと全オプションがプルダウンメニューとして列挙されますが、 [[SEARCHBOX:COMPLEX:識別子]] の記述方法を使うことで、表示するオプションを取捨選択したり順序を指定したりできます。例えば1人で使っているなら「投稿者」の選択肢は不要でしょうから非表示にすると良いでしょう。

識別子には、下記の5種類があります。

• U=投稿者
• D=投稿年月
• H=ハッシュタグ
• C=カテゴリ
• O=出力順序

例えば [[SEARCHBOX:COMPLEX:CDH]] のように、識別子として「CDH」を指定すると、(C)カテゴリ→(D)投稿年月→(H)ハッシュタグの順にプルダウンメニューが表示され、投稿者(U)と出力順序(O)は非表示になります。

この記述は同一スキン内に何度でも使えますから、掲載場所によって異なるオプションを提示した複合検索窓を表示することもできます。

▼検索オプション項目名のカスタマイズ方法

検索条件の項目名（検索オプションのラベル）のカスタマイズは、スキン側の記述ではなく管理画面の[設定]→[ページの表示]→【全文検索機能】→「複合検索窓のオプション項目ラベル」欄から図のように指定できます。

プルダウンメニューを見ればオプションの対象は明らかですから、ラベルは「なし」でも良いかもしれません。空欄にして保存すれば、項目名は出力されなくなります。 もしくは、絵文字だけにして省スペース化を図っても良いかもしれません。好みに応じて自由にカスタマイズできます。

どの項目を表示してどの項目を非表示にするかや、各項目をどのような順序で掲載するかは、この管理画面ではなくスキンHTML側に記述します。 記述方法は、先の検索条件プルダウンメニューの取捨選択や掲載順序の指定をご覧下さい。

検索窓(検索フォーム)の装飾方法

全文検索ができる検索フォームには、検索語だけを単独で指定できる「単独検索窓」と、カテゴリや投稿年月等のオプションを指定して検索できる「複合検索窓」があります。 検索入力欄や検索ボタンはもちろん、複合検索窓の各種オプション項目にもclass名を割り振ってありますので、CSSを書くことで自由に装飾ができます。

▼検索窓(単独検索窓)をCSSで装飾する方法

外側スキンに [[SEARCHBOX]] と書くことで表示される単独検索窓は、以下のようなHTMLとして出力されます。（※実際には改行されずに1行で出力されます。）

<form action="tegalog.cgi?" method="get" class="searchbox">
  <span class="searchinputs">
    <input type="text" value="●●●" name="q" class="queryinput" placeholder="◆◆◆" accesskey="◆">
    <span class="submitcover">
      <input type="submit" value="検索" class="submitbutton">
    </span>
  </span>
</form>

※「●●●」にはそのとき検索されている検索語が入ります。検索されていない状況では何も入りません。 「◆」には管理画面で設定された値が入ります。設定値がない場合は何も入りません。 なお、検索ボタンのラベル「検索」は管理画面から設定(変更)できます。

したがって、検索窓を構成する書く部分は、以下のようなCSSで装飾できます。

• 検索語テキスト入力欄を装飾したい場合は、 .queryinput { ～装飾～ }のように書くことで装飾できます。
• 検索ボタンを装飾したい場合は、 .submitbutton { ～装飾～ }のように書くことで装飾できます。
• 検索語テキスト入力欄と検索ボタンをセットにして外枠等を加えたい場合は、 .searchinputs { ～装飾～ }のように書くと良いでしょう。

▼検索対象が限定されている場合に追加表示されるチェックボックスを含んだ出力HTML

カテゴリ限定・ハッシュタグ限定・日付限定・ユーザ限定など、何らかの表示条件が指定されている状況では、「その条件を維持した絞り込み検索」ができる仕様になっているため（※設定でOFFにすることも可能）、そのときは以下のようなHTMLが出力されます。 （検索語入力欄と検索ボタンは上記と同じHTMLソースです。）

<form action="tegalog.cgi?" method="get" class="searchbox">
  <span class="searchinputs">
    <input type="text" value="●●●" name="q" class="queryinput" placeholder="◆◆◆" accesskey="◆">
    <span class="submitcover">
      <input type="submit" value="検索" class="submitbutton">
    </span>
  </span>
  <p class="searchtarget limitedsearch">
    <label class="searchoption"><input type="checkbox" value="★★★" name="cat" checked>表示中のカテゴリに限定して検索</label><br>
    <label class="searchoption"><input type="checkbox" value="★★★" name="date" checked>表示中の日付範囲に限定して検索</label><br>
    　：　：　：
  </p>
</form>

※「★★★」には、その項目に対応するIDや値等（カテゴリIDや日付など）が入ります。上記のソースは、「カテゴリ」と「日付」の2条件で限定表示されている場合の出力例です。実際にはもっと多くの条件を同時に指定可能ですから、そのときの状況に合わせて必要な項目数だけ表示されます。何も限定されていないときは、全体を囲んでいるp要素自体が出力されません。

したがって、検索窓を構成する書く部分は、以下のようなCSSで装飾できます。

• チェックボックスとラベルを含む、限定項目1つ全体を装飾したい場合は、 .searchoption { ～装飾～ }のように書くことで装飾できます。
• チェックボックスだけを装飾したい場合は、 .searchoption input { ～装飾～ }などと書けば良いでしょう。
• このオプションチェックボックス群が表示される領域全体を装飾するには、 .searchtarget { ～装飾～ }のように書くと良いでしょう。

▼複合検索窓の各部分をCSSで装飾する方法

外側スキンに [[SEARCHBOX:COMPLEX]] または [[SEARCHBOX:COMPLEX:UDHCO]] と書くことで表示される複合検索窓は、（オプション項目名等がデフォルト設定のままな場合は）以下のようなHTMLとして出力されます。（Ver 3.2.0以降）
※下記ではソースを見やすくするために、実際の出力よりも改行を多めに加えて掲載しています。

<form action="tegalog.cgi?" method="get" class="complexsearch">
  <p class="searchbox">
    <input type="text" name="q" value="●●●" accesskey="◆" placeholder="◆◆◆" class="queryinput">
    <span class="submitcover">
      <input type="submit" value="検索" class="submitbutton">
    </span>
  </p>
  <ul class="searchoptions">
    <li class="souser"><span class="solabel">投稿者名：</span><select name="userid" class="select-userid">～選択肢～</select></li>
    <li class="sodate"><span class="solabel">投稿年月：</span><select name="date" class="select-date">～選択肢～</select></li>
    <li class="sotag"><span class="solabel">＃タグ：</span><select name="tag" class="select-tag">～選択肢～</select></li>
    <li class="socat"><span class="solabel">カテゴリ：</span><select name="cat" class="select-cat">～選択肢～</select></li>
    <li class="soorder"><span class="solabel">出力順序：</span><select name="order" class="select-order">～選択肢～</select></li>
  </ul>
</form>

※単独検索窓のHTMLとは、form要素に付加されているclass名が異なります。 単独検索窓でform要素に付加されていたclass名「searchbox」は、ここではp要素に付加されています。単独検索窓で検索欄とボタンを囲んでいたspan要素(とそのclass名である「searchinputs」)は、ここでは使われていません。

※「●●●」にはそのとき検索されている検索語が入ります。検索されていない状況では何も入りません。 「◆」には管理画面で設定された値が入ります。設定値がない場合は何も入りません。 なお、検索ボタンのラベル「検索」は管理画面から設定(変更)できます。この設定は、単独検索窓でも複合検索窓でも共通です。 また、「投稿者名：」や「＃タグ」等の検索オプション項目名や掲載順序も管理画面から設定(変更)できます。

たとえば、検索窓を構成する書く部分は、以下のようなCSSで装飾できます。

• 検索語テキスト入力欄を装飾したい場合は、 .queryinput { ～装飾～ }のように書くことで装飾できます。
• 検索ボタンを装飾したい場合は、 .submitbutton { ～装飾～ }のように書くことで装飾できます。
• 検索語テキスト入力欄と検索ボタンをセットにして外枠等を加えたい場合は、 .searchbox { ～装飾～ }のように書くと良いでしょう。
• 検索オプションのリスト全体を装飾したい場合は、 .searchoptions { ～装飾～ }のように書くことで装飾できます。
• 検索オプションのリスト1つ1つを装飾したい場合は、例えば、 .searchoptions li { ～装飾～ }などと書けば良いでしょう。
• 検索オプションのラベル(項目名)1つ1つを装飾したい場合は、例えば、 .searchoptions span { ～装飾～ }のように書けます。
• 検索オプションのプルダウンメニュー1つ1つを装飾したい場合は、例えば、 .searchoptions select { ～装飾～ }のように書くことで装飾できます。

検索結果の表示時に検索語に対して適用されるハイライト(強調)の装飾方法

全文検索結果では、検索に使われた単語がハイライト(強調)表示されます。

検索結果の表示時に、本文中に含まれる検索語をハイライト(強調)表示するかどうかの設定は、管理画面の[設定]→[ページの表示]→【全文検索機能】→[検索結果の表示]にある『検索結果に含まれる検索語を強調表示する』チェックボックスで設定できます。デフォルトでONです。無効にしたい場合はOFFにして下さい。

▼ハイライト(強調)箇所の出力

本文中に含まれる検索語は、以下のようなstrong要素として出力されます。

<strong class="searchword">検索語</strong>

strong要素ですから、何も専用の装飾を用意しなければ、たいていの環境では太字で表示されます。
専用の装飾を用意したい場合は、CSSソースに例えば .searchword { ～装飾～ } のように書くと良いでしょう。

▼ハイライトの表示例とCSSソース例

標準添付の各スキンでは、例えば以下のように表示されます。

これらのハイライト用装飾は、グラデーションを作るlinear-gradientを使って、下記のようなCSSソースで実現しています。

/* ▼検索語のハイライト */
.searchword {
    background: linear-gradient(transparent 60%, #aaf0aa 60%);
}

太字部分の色指定を変更すれば、様々な配色にできます。上記では「60%」になっている割合を変化させることで、線の太さを変えられます。
太字にしたくない場合は、 font-weight: nomal; を加えて下さい。

てがろぐでは投稿をカテゴリで分類できます。1つの投稿を複数のカテゴリに属させることもできます。カテゴリを表示できる位置は、外側スキンと内側スキンにそれぞれあります。

• 外側スキンには「全カテゴリの一覧ツリー」を表示でき、
• 内側スキンには「その投稿が所属しているカテゴリ」を表示できます。

それぞれカスタマイズの余地と装飾の余地が多々ありますので、お好みに合わせてカスタマイズしてみて下さい。

【小目次】

• カテゴリツリー表示内容のカスタマイズ方法
  • カテゴリツリー内の掲載内容を指定できる [[CATEGORY:TREE:識別子]] の書き方
• カテゴリツリーの装飾方法《最小構成ベース》
  • カテゴリツリーの各部分をCSSで装飾する方法
  • カテゴリの第1階層だけを表示させる方法
• カテゴリツリーの装飾方法《カスタマイズ構成ベース》
  • カテゴリアイコン、カテゴリ名、該当数、カテゴリ概要文など『全部盛り』カテゴリツリーのHTMLソース出力例
• 各投稿に表示されるカテゴリ名の装飾方法《最小構成ベース》
  • 所属カテゴリをリンクにせず、カテゴリ名だけの表示にしたい場合
• 各投稿に表示されるカテゴリ情報の取捨選択カスタマイズ方法（アイコンや概要の表示）
• 各投稿に表示されるカテゴリ情報の装飾方法《カスタマイズ構成ベース》
  • カテゴリアイコンとカテゴリ名が3セット表示されるHTMLソース出力例
• 各投稿に表示されるカテゴリリンクのリンク先での表示のされ方を指定する方法（フルパスで出力するとか、ギャラリーモード用のリンクを出力するとか）
• 所属カテゴリ別に装飾を変化させる方法

カテゴリツリー表示内容のカスタマイズ方法

外側スキン内に [[CATEGORY:TREE]] と記述した箇所には、カテゴリ一覧がツリー形式で挿入されます。 このとき、カテゴリアイコンが登録されていれば「アイコン」→「カテゴリ名(テキスト)」→「該当数」の順で表示され、アイコンが登録されていなければ「カテゴリ名(テキスト)」→「該当数」の順で表示されます。 下図右側が、標準スキンでの見え方の例です。

▼カテゴリツリー内の掲載内容を指定できる [[CATEGORY:TREE:識別子]] の書き方

この [[CATEGORY:TREE]] 記法は、順序や掲載内容をカスタマイズするための識別子を追加して [[CATEGORY:TREE:識別子]] のようにも記述できます。 この「識別子」部分の記述次第で、アイコン、カテゴリ名、概要文、該当件数を自由な順序で組み合わせて表示できます。

具体的には、『識別子』の部分に以下の7種類の文字を好きな順序で組み合わせて記述します。（すべて半角で記述して下さい。）

• 「 T 」：カテゴリ名テキスト（Text）
• 「 I 」：カテゴリアイコン（Icon）
• 「 C 」：カテゴリ該当数（Count／丸括弧あり）
• 「 c 」：カテゴリ該当数（count／丸括弧なし）
• 「 D 」：カテゴリ概要文（Description）
• 「 B 」：改行（<br>タグ）
• 「 <> 」：当該カテゴリ限定ページへのリンクにする範囲

例えば……、

• 旧バージョンと同じ表示（アイコンなし）：
  • [[CATEGORY:TREE:<T>C]] のように書くと、てがろぐVer 3.5.0までの表示と同じになります。カテゴリ名テキスト(T)がリンクになり、その後に該当数(C)が表示されるだけです。（アイコンや概要文は表示されません。）
• デフォルト：
  • [[CATEGORY:TREE:<IT>C]] のように書くと、カテゴリアイコン(I)→カテゴリ名テキスト(T)の順に表示されてそれらがリンクになり、その後に該当数(C)が表示されます。 （※上図の右から4つ目「デフォルト」のように表示されます。）

    識別子を省略して [[CATEGORY:TREE]] と書いた場合は、この [[CATEGORY:TREE:<IT>C]] が指定されたものとして解釈されます。

• [[CATEGORY:TREE:<TI>C]] のように書くと、カテゴリ名テキスト(T)→カテゴリアイコン(I)の順に表示されてそれらがリンクになり、その後に該当数(C)が表示されます。（※これは上図の右から3つ目の表示になります。）
• [[CATEGORY:TREE:<IT>CBD]] のように書くと、カテゴリアイコン(I)→カテゴリ名テキスト(T)の順に表示されてそれらがリンクになって表示され、その後に、該当数(C)が続き、改行(B)されてから最後にカテゴリ概要文(D)が表示されます。（※これは上図の右から2つ目の表示になります。）
• [[CATEGORY:TREE:I<T>CBD]] のように書くと、まずカテゴリアイコン(I)が表示され、次にカテゴリ名テキスト(T)だけがリンクになって表示され、その後に、該当数(C)が続き、改行(B)されてから最後にカテゴリ概要文(D)が表示されます。（※この記述ではカッコ < > で囲んでいるのが「T」だけなので、アイコンはリンクになりません。）
• [[CATEGORY:TREE:<I>]] のように書くと、カテゴリアイコン(I)だけがリンクになって表示されます。カテゴリ名も該当数も表示されません。
• [[CATEGORY:TREE:I]] のように書くと、カテゴリアイコン(I)だけが表示されます。リンクにはなりません。

◆備考：カテゴリ該当数の表示バリエーション：

• 識別子に大文字で「 C 」と書くと、該当件数がカッコ付きで (36) などのように表示されます。
• 識別子に小文字で「 c 」と書くと、該当件数の数値だけが 36 などのように表示されます。

丸括弧を付けずに該当数を表示させたい場合には、小文字をご使用下さい。HTMLでは <span class="num">36</span> のように出力されますので、CSS側で独自のカッコを加えることもできます。

カテゴリツリーの装飾方法《最小構成ベース》

外側スキン内に [[CATEGORY:TREE]] を記述した箇所には、カテゴリ一覧がツリー形式で挿入されます。 どのように表示されるかはスキン次第ですが、標準添付の各スキンでは例えば下図のように見えます。

▼カテゴリツリーの各部分をCSSで装飾する方法

カテゴリツリーは、以下のような構造のHTMLとして出力されています。 (※実際には改行せずに1行で全ツリーが出力されます。)

※注：li要素に対するclass属性は、Ver 4.0.4から追加されました。

<ul class="cattree depth1">
   <li class="catbranch cat-info">
      <a href="?cat=info" class="catlink cat-info">
         <span class="cattext cat-info">情報</span>
      </a>
      <span class="num">(2)</span>

      <ul class="cattree depth2">
         <li class="catbranch cat-updates">
            <a href="?cat=updates" class="catlink cat-updates">
               <span class="cattext cat-updates">お知らせ</span>
            </a>
            <span class="num">(4)</span>
         </li>
      </ul>
   </li>
   ：　：　：

※カテゴリIDが、適宜class名としても出力されています。（下線部分）

階層構造を作るul要素には、階層の深さに応じて下記のようなマークアップでclass名が付加されています。

• 第1階層全体：<ul class="cattree depth1"> ～ </ul>
• 第2階層全体：<ul class="cattree depth2"> ～ </ul>
• 第3階層全体：<ul class="cattree depth3"> ～ </ul>
• ：　：　：

li要素に含まれる「カテゴリへのリンク」や「集計数」部分には、以下のようなマークアップでclass名が付加されています。

• リンク：<a href="?cat=カテゴリID" class="catlink cat-カテゴリID">カテゴリ名</a>
• 集計数：<span class="num">(値)</span>

したがって、以下のようなCSSを書けば、各部分を個別に装飾できます。

• カテゴリリンク：.cattree .catlink { ～装飾～ }
• カテゴリ集計数：.cattree .num { ～装飾～ }
• カテゴリツリーの全階層：.cattree { ～装飾～ }
• カテゴリツリーの第3階層のみ：.depth3 { ～装飾～ }

※class名の「depth1」・「depth2」……で末尾に付加されている数値は、階層の深さに合わせて増えます。仕様上の上限はありません。

▼カテゴリの第1階層だけを表示させる方法

例えば、カテゴリの第1階層だけを表示させて、第2階層以降は非表示にしたい場合は、.depth2 { display:none; } のようにCSSを書くと良いでしょう。 HTMLのul要素は、それ以降の全階層を含みますから、.depth2 を非表示にすれば、第2階層だけでなく第2階層に含まれるすべての階層が非表示になります。

その場合、リスト形式（箇条書き形式）ではなく、横一列にカテゴリを並べたい場合は、さらに .cattree { list-style-type:none; } と .cattree li { display:inline-block; } などを加えると（箇条書きの先頭記号を消して）横並びになります。

さらに、カテゴリの集計数を消したい場合は、.cattree .num { display:none; } を追加すれば良いでしょう。ただし、この記述だと同一ページ内のすべてのカテゴリツリーで集計数が消えてしまいます。 必要に応じて、場所を特定するclass名をさらに付加して下さい。

カテゴリツリーの装飾方法《カスタマイズ構成ベース》

先のカテゴリツリー内の掲載内容を指定できる [[CATEGORY:TREE:識別子]] の書き方の 『識別子』に対応する各部分は、下記のようなclass名が加えられたHTMLとして出力されます。

• 「 T 」カテゴリ名テキスト： <span class="cattext cat-(カテゴリID名)">～</span>
• 「 I 」カテゴリアイコン： <span class="caticon"><img … class="cat-(カテゴリID名)"></span> (※アイコンがある場合のみ。アイコンが登録されていない場合は一切何も出力されません。)
• 「 C 」カテゴリ該当数： <span class="num">～</span>
• 「 D 」カテゴリ概要文： <span class="catdescription">～</span>
• 「 <> 」リンク範囲： <a href="?cat=(カテゴリID名)" class="catlink cat-(カテゴリID名)">～</a>

上記以外に、カテゴリツリーの各部分をCSSで装飾する方法で示したように、カテゴリツリーそのものが「cattree」というclass名で出力されていますし、カテゴリ1件は li要素 で出力されますから、それらを組み合わせることで自由に装飾できるでしょう。 リンク・アイコン・テキストにはカテゴリIDもclass名に加わるので、カテゴリごとに異なる装飾を適用することもできます。例えばカテゴリIDが「diary」の場合、加わるclass名は「cat-diary」になります。 なお、「カテゴリなし」を表示する設定にしている場合、カテゴリなしに加わるclass名は「cat-」になります。ハイフンの後に何も続きません（Ver 3.8.0以降）。

したがって、以下のようなCSSを書けば、各部分を個別に装飾できます。

• カテゴリ名テキスト部分：.cattext { ～装飾～ }
  • カテゴリ「diary」のカテゴリ名テキスト部分だけ：.cattext.cat-diary { ～装飾～ } (※注)
• カテゴリアイコンの外枠：.caticon { ～装飾～ }
• カテゴリアイコンの画像：.caticon img { ～装飾～ }
  • カテゴリ「diary」のカテゴリアイコンの画像だけ：.caticon img.cat-diary { ～装飾～ }
• カテゴリリンク：.catlink { ～装飾～ }
  • カテゴリ「diary」のカテゴリリンクだけ：.catlink.cat-diary { ～装飾～ } (※注)

▼カテゴリアイコン、カテゴリ名、該当数、カテゴリ概要文など『全部盛り』カテゴリツリーのHTMLソース出力例

外側スキンに [[CATEGORY:TREE:<IT>CBD]] と記述した場合の出力HTMLソースを例示しておきます。 これは、カテゴリツリーを構成する各カテゴリについて、カテゴリアイコン→カテゴリ名→該当数→改行→カテゴリ概要文のすべてを掲載する『全部盛り』の出力指示です。

全HTMLソースを出力すると長くなりすぎますので、上図の赤枠で囲んだ部分（2項目）だけを抜粋して掲載します。以下のようなHTMLソースとして出力されます。(※実際には改行せずに1行で全ツリーが出力されます。)

※注：li要素に対するclass属性は、Ver 4.0.4から追加されました。

<ul class="cattree depth1">
   <li class="catbranch cat-info">
      <a href="?cat=info" class="catlink cat-info">
         <span class="caticon"><img src="suika.png" alt="情報" class="cat-info"></span>
         <span class="cattext cat-info">情報</span>
      </a>
      <span class="num">(6)</span>
      <br>
      <span class="catdescription">アナウンスなど。</span>

      <ul class="cattree depth2">
         <li class="catbranch cat-updates">
            <a href="?cat=updates" class="catlink cat-updates">
               <span class="caticon"><img src="mikan.png" alt="アップデート" class="cat-updates"></span>
               <span class="cattext cat-updates">アップデート</span>
            </a>
            <span class="num">(2)</span>
            <br>
            <span class="catdescription">アップデート案内。</span>
         </li>
      </ul>
   </li>
   ：　：　：

ツリー構造そのものなど、ベース部分の解説については「カテゴリツリーの各部分をCSSで装飾する方法」項目の解説もご参照下さい。

各投稿に表示されるカテゴリ名の装飾方法《最小構成ベース》

内側スキンに [[CATEGORYLINKS]] と記述した箇所に、その投稿が属するカテゴリ名がリンクの形式で列挙されます。 （※カテゴリにアイコンが登録されていれば、アイコンも表示されます。 その場合、標準では「アイコン」→「カテゴリ名」の順序で表示されますが、後述の方法でスキンをカスタマイズすることで順序を変更したり掲載内容を変更したりできます。）

1つの投稿に複数のカテゴリを設定できる仕様なため、スキンHTML側で細かなclass名を独自に用意することはできず、以下の書式で固定的に出力されます。

• カテゴリ名(リンク)：<a href="?cat=(カテゴリID)" class="categorylink cat-(カテゴリID)"><span class="categoryname cat-(カテゴリID)">カテゴリ名</span></a>
• 区切り記号：<span class="catseparator">区切り記号</span>
• カテゴリがない場合で、ない旨を表示する設定の場合：<span class="nocategory"><a href="?cat=-" class="categorylink cat-">ない旨の表示</a></span>
• カテゴリがない場合で、ない旨を表示しない設定の場合：（何も出力されません）

したがって、以下のようなCSSを書けば、各部分を個別に装飾できます。

• カテゴリリンク部分：.categorylink { ～装飾～ }
• カテゴリ名部分：.categoryname { ～装飾～ }
• 区切り記号部分：.catseparator { ～装飾～ }
• カテゴリなしの場合：.nocategory { ～装飾～ }（※ない旨を表示する設定の場合のみ）

リンクやカテゴリ名部分には「カテゴリID」もclass名に含まれているため、カテゴリ別に装飾を分けることもできます。例えば、

• カテゴリID「info」のカテゴリ名部分：.categoryname.cat-info { ～装飾～ }
• カテゴリID「memo」のカテゴリ名部分：.categoryname.cat-memo { ～装飾～ }

区切りに使われる記号は、標準では半角カンマ「,」ですが、管理画面の「設定」→「ページ設定」→「カテゴリの表示」から自由に設定できます。 また、所属カテゴリが1つもない場合に何か表示するかどうかも、ここから設定できます。

▼所属カテゴリをリンクにせず、カテゴリ名だけの表示にしたい場合

所属カテゴリをリンクの形にはせず、カテゴリ名だけをテキストで列挙させたい場合は、 内側スキンに [[CATEGORYLINKS]] と記述する代わりに、[[CATEGORYNAMES]] と記述します。

その際、マークアップは以下のようなシンプルな内容になります。（アイコンは出力されません。）

• カテゴリ名：<span class="categoryname">カテゴリ名</span>
• 区切り記号：<span class="catseparator">区切り記号</span>

とても短いので、総データサイズを節約できる上、装飾CSSも書きやすいでしょう。class名は [[CATEGORYLINKS]] の場合と同じです。

各投稿に表示されるカテゴリ情報の取捨選択カスタマイズ方法（アイコンや概要の表示）

先の [[CATEGORYLINKS]] 記法は、順序や掲載内容をカスタマイズするための識別子を追加して [[CATEGORYLINKS:識別子]] のようにも記述できます。 この「識別子」部分の記述次第で、カテゴリアイコン、カテゴリ名、概要文を自由な順序で組み合わせて表示できます。

具体的には、『識別子』の部分に以下の4種類の文字を好きな順序で組み合わせて記述します。（すべて半角で記述して下さい。）

• 「 T 」：カテゴリ名テキスト（Text）
• 「 I 」：カテゴリアイコン（Icon）
• 「 D 」：カテゴリ概要文（Description）
• 「 <> 」：当該カテゴリ限定ページへのリンクにする範囲

例えば……、

• デフォルト：
  • [[CATEGORYLINKS:<IT>]] のように書くと、カテゴリアイコン(I)→カテゴリ名テキスト(T)の順に表示されてそれらがリンクになります。

    これはデフォルト設定でもあり、識別子を省略して [[CATEGORYLINKS]] と書いた場合もこうなります。

• 記述バリエーション(例)：
  • [[CATEGORYLINKS:I<T>]] のように書くと、カテゴリアイコン(I)→カテゴリ名テキスト(T)の順に表示されますが、リンクになるのはテキストだけです。
  • [[CATEGORYLINKS:<I>]] のように書くと、カテゴリアイコン(I)だけが表示され、それがリンクになります。この場合、カテゴリ名テキストは表示されません。
  • [[CATEGORYLINKS:<I>D]] のように書くと、カテゴリアイコン(I)→カテゴリ概要文(D)の順に表示され、アイコンだけがリンクになります。カテゴリ名テキストは表示されません。
• リンクなし：
  • [[CATEGORYLINKS:T]] のように書くと、カテゴリ名テキスト(T)だけが表示され、リンクにはなりません。

    これは（カテゴリ名だけを表示してリンクにはしない指定の） [[CATEGORYNAMES]] の記述と同じ効果になります。

  • [[CATEGORYLINKS:I]] のように書くと、カテゴリアイコン(I)だけが表示され、リンクにはなりません。

上記のような感じで、掲載内容と順序を自由に選択して出力できます。

各投稿に表示されるカテゴリ情報の装飾方法《カスタマイズ構成ベース》

投稿1つ1つについて、その属するカテゴリの順序や掲載内容をカスタマイズできる [[CATEGORYLINKS:識別子]] の書き方の『識別子』に対応する各部分は、 下記のようなclass名が加えられたHTMLとして出力されます。

• 「 T 」カテゴリ名テキスト： <span class="categoryname cat-(カテゴリID名)">～</span>
• 「 I 」カテゴリアイコン： <span class="categoryicon"><img … class="cat-(カテゴリID名)"></span> (※アイコンがある場合のみ。アイコンが登録されていない場合は一切何も出力されません。)
• 「 D 」カテゴリ概要文： <span class="categorydescription">～</span>
• 「 <> 」リンク範囲： <a href="?cat=(カテゴリID)" class="categorylink cat-(カテゴリID名)">～</a>

カテゴリIDもclass名に加わるので、カテゴリごとに異なる装飾を適用することもできます。カテゴリIDが「memo」の場合、加わるclass名は「cat-memo」になります。

したがって、以下のようなCSSを書けば、各部分を個別に装飾できます。

• カテゴリ名テキスト部分：.categoryname { ～装飾～ }
  • カテゴリ「diary」のカテゴリ名テキスト部分だけ：.categoryname.cat-diary { ～装飾～ } (※注)
• カテゴリアイコンの外枠：.categoryicon { ～装飾～ }
• カテゴリアイコンの画像：.categoryicon img { ～装飾～ }
  • カテゴリ「diary」のカテゴリアイコンの画像だけ：.categoryicon img.cat-diary { ～装飾～ }
• カテゴリリンク：.categorylink { ～装飾～ }
  • カテゴリ「diary」のカテゴリリンクだけ：.categorylink.cat-diary { ～装飾～ } (※注)

▼カテゴリアイコンとカテゴリ名が3セット表示されるHTMLソース出力例

外側スキンに [[CATEGORYLINKS:<IT>]] と記述した場合で、所属カテゴリが3つある場合の出力HTMLソースを例示しておきます。 これは、カテゴリアイコン→カテゴリ名(テキスト)の順に表示する指示で、識別子を省略して [[CATEGORYLINKS]] と書いた場合と同じ出力です。

上図の赤枠で囲んだ部分のHTMLソースだけを抜粋して掲載します。(※実際には改行せずに1行で出力されます。)

<a href="?cat=diary" class="categorylink cat-diary">
   <span class="categoryicon"><img src="melon.png" alt="つぶやき" class="cat-diary"></span>
   <span class="categoryname cat-diary">つぶやき</span>
</a>

<span class="catseparator">,</span>

<a href="?cat=tsubo" class="categorylink cat-tsubo">
   <span class="categoryicon"><img src="pineapple.png" alt="つぼやき" class="cat-tsubo"></span>
   <span class="categoryname cat-tsubo">つぼやき</span>
</a>

<span class="catseparator">,</span>

<a href="?cat=hachi" class="categorylink cat-hachi">
   <span class="categoryicon"><img src="blueberry.png" alt="つぼはち" class="cat-hachi"></span>
   <span class="categoryname cat-hachi">つぼはち</span>
</a>

もし、アイコンのサイズをCSSで調整したい場合は、.categoryicon img { height: 1.2em; width: auto; } などのように書くと良いでしょう。画像の縦横比を維持したまま、アイコンの高さが1.2文字分になります。

各投稿に表示されるカテゴリリンクのリンク先での表示のされ方を指定する方法（フルパスで出力するとか、ギャラリーモード用のリンクを出力するとか）

これまでに解説した [[CATEGORYLINKS]] 記法(解説) または [[CATEGORYLINKS:識別子]] 記法(解説) は、リンク先のオプションを加えて [[CATEGORYLINKS:オプション]] または [[CATEGORYLINKS:識別子:オプション]] のように記述することもできます。 指定できるオプションには以下の種類があります。

• FULL：カテゴリリンクを「https://」等で始まる絶対URLで出力します。
• PURE：デフォルトスキンを適用して表示されるカテゴリリンクを出力します。（現在適用されているスキンを維持しないリンクを出力します。）
• GALLERY：ギャラリーモードで表示されるカテゴリリンクを出力します。
• SITEMAP：サイトマップページモードで表示されるカテゴリリンクを出力します。

オプションは半角コロン記号「:」を使って複数連結可能なので、下記のバリエーションがあります。

• [[CATEGORYLINKS]] → 相対パスのリンクカテゴリが挿入される。
• [[CATEGORYLINKS:FULL]] → 絶対URLのカテゴリリンクが挿入される。
• [[CATEGORYLINKS:PURE]] → デフォルトスキンを適用して表示されるカテゴリリンクが相対パスで挿入される。
• [[CATEGORYLINKS:PURE:FULL]] → デフォルトスキンを適用して表示されるカテゴリリンクが絶対URLで挿入される。
• [[CATEGORYLINKS:GALLERY]] → ギャラリーモードで表示されるカテゴリリンクが相対パスで挿入される。
• [[CATEGORYLINKS:GALLERY:FULL]] → ギャラリーモードで表示されるカテゴリリンクが絶対URLで挿入される。
• [[CATEGORYLINKS:SITEMAP]] → サイトマップページモードで表示されるカテゴリリンクが相対パスで挿入される。
• [[CATEGORYLINKS:SITEMAP:FULL]] → サイトマップページモードで表示されるカテゴリリンクが絶対URLで挿入される。

所属カテゴリ別に装飾を変化させる方法

カテゴリIDだけを出力する機能も用意しています。 内側スキンに [[CATEGORYIDS]] と記述すると、所属するカテゴリのカテゴリIDだけが挿入されます。何もマークアップはされません。

そのため、内側スキンHTMLに <div class="[[CATEGORYIDS]]">～</div> のように書いておけば、例えば「カテゴリIDが memo である投稿」に対しては <div class="memo">～</div> のようなマークアップで出力させられます。 すると、このカテゴリ専用の装飾をCSSで作っておくことで、所属カテゴリ別に異なる装飾を用意することもできます。

1つの投稿にカテゴリが複数設定されているときでも半角空白文字で区切って出力される仕様にしてありますから、 <div class="memo info diary">～</div> のような感じで、HTMLの文法として破綻しない形で出力できます。

てがろぐCGIが生成するHTMLには、CSSで装飾するためのclass属性が様々な場所に指定されています。 それらを活用して、独自の装飾を作ってみて下さい。

ページ番号リンクの装飾方法

ページネーション（ページ番号を使ったナビゲーションリンク）は、標準設定では全ページ番号を列挙します。 しかし、設定を変更すれば、総ページ数が13ページ以上ある場合に限って、下図のようにページ番号リンクの途中を「1・2・3……38・39・40」のように省略して短く表示できます。

途中を省略する設定にした場合は、（総ページ数が13ページ以上ある場合に限り）「最初の3ページ」＋「現在ページを中心にした3ページ」＋「最後の3ページ」の構成で、最小6ページ～最大9ページだけがリンクとして表示されます。 省略に使われる記号「…」は、設定で自由に変更できます。

▼CSSでの装飾方法（前後のページへ移動するリンク）

前後のページへ移動するリンクは、以下のようなHTMLとして出力されています。

• 前のページ：<a href="?page=番号" class="prevlink">«前のXXX件</a>
• 区切り記号：<span class="linkseparator">/</span>
• 次のページ：<a href="?page=番号" class="nextlink">次のXXX件»</a>

そのため、以下のようなCSSで装飾ができます。

• 前ページリンクの装飾：.prevlink { ～装飾～ }
• 区切り記号部分の装飾：.linkseparator { ～装飾～ }
• 次ページリンクの装飾：.nextlink { ～装飾～ }

▼CSSでの装飾方法（ページ番号リンク）

ページ番号リンクは、以下のようなHTMLとして出力されています。

• 現在位置：<a href="?page=番号" class="pagenumlink pagenumhere">番号</a>
• 他の番号：<a href="?page=番号" class="pagenumlink">番号</a>
• 省略記号：<span class="omitmark">省略記号</span>

そのため、以下のようなCSSで装飾ができます。

• 現在位置の装飾：.pagenumhere { ～装飾～ }
• 他の番号の装飾：.pagenumlink { ～装飾～ } ※現在位置の番号に対しても適用されます。
• 省略記号の装飾：.omitmark { ～装飾～ }

▼ページ番号に記号や区切りを加える

ページ番号リンクでは、ページ番号とページ番号の間に区切り記号を入れたい場合や、ページ番号を (1)・(2)・(3)……などのようにカッコでくくったり、ページ番号1つ1つに何らかのマークアップを加えたい場合もあるでしょう。 その際には、管理画面の[設定]→[ページの表示]→【ナビゲーションリンクの表示】→「ページ番号リンク」区画で、下図のように設定できます。

▼ページ番号の省略を始める総ページ数や、ページ番号リンクの両端に何ページずつ固定表示するかを変更する

ページ番号の省略を始める総ページ数と、ページ番号リンクの両端（先頭と末尾）に何ページずつ固定表示するかを、設定画面で変更できます。(※Ver 3.9.0以降)

ページネーションの占有幅を省略時のデフォルトサイズ（下図の左端）よりももっとコンパクトにしたい場合などにご活用頂けます。詳しくは、下図を拡大してご覧下さい。 下図下側の真ん中にある「▼現在位置が中間ページのとき」の表示を比較すると、どのように省略されるのかが分かりやすいでしょう。

デフォルト設定値では、総ページ数が 13 ページ以上のときに、ページ番号リンクの途中が省略されます。この省略を開始する総ページ数を自由に設定できます。ただし、設定値の下限は 7 です。上限は特にありません。

ページ番号リンクの両端（先頭と末尾）に何ページずつ固定表示するかは、1・2・3 のどれかから選べます。デフォルトは 3 です。少なくすればするほど、ページネーションの占有横幅を狭くできます。（先の図では、左端が 3 を選択した結果の表示、右端が 1 を選択した結果の表示です。）

▼ページナビゲーション領域の外側

ページナビゲーション領域の外側（枠線や背景色など）については、外側スキン skin-cover.html をどのように書くか次第です。（てがろぐCGIが固定的に出力しているわけではありません。） スキン側のHTMLに合わせてCSSを書いて下さい。

ユーザアイコン表示の装飾方法

ユーザアイコンの表示サイズは、管理画面から指定できます。また、表示サイズを指定せずに「画像の原寸」で表示することもできます。 しかし、スキンのCSS側にユーザアイコンの表示サイズを固定する記述がある場合は、設定方法によって表示のされ方が異なります。

管理画面の「設定」→「ページの表示」→「ユーザ情報の表示」の『ユーザアイコンの表示』区画で、上図のようにアイコンの表示サイズと出力方法を選択できます。

▼アイコンサイズの選択肢と効果

• 「HTMLで出力」を選ぶと、スキンCSS側でサイズが指定されていればスキンCSS側のサイズが採用されます。
• 「CSSで出力」を選ぶと、スキンCSS側でサイズが指定されていても管理画面での設定サイズが優先採用されます。(※1)

▼CSSでの装飾方法

ユーザアイコンは、以下のようなHTMLとして出力されています。（サイズ指定が 32×32 の場合）

• アイコン指定がある場合（HTML選択時）：<img src="アイコン画像" class="usericon freeimage" alt="Icon of ユーザID" width="32" height="32">
• アイコン指定がない場合（HTML選択時）：<img src="アイコン画像" class="usericon noimage" alt="NO IMAGE" width="32" height="32">
• アイコン指定がある場合（CSS選択時） ：<img src="アイコン画像" class="usericon freeimage" style="width:32px; height:32px;" alt="Icon of ユーザID">
• アイコン指定がない場合（CSS選択時） ：<img src="アイコン画像" class="usericon noimage" style="width:32px; height:32px;" alt="NO IMAGE">

そのため、設定で「HTMLでの出力」が選択されている場合には、以下のようなCSSで装飾ができます。

• アイコン画像の装飾：.usericon { ～装飾～ } ※指定画像でも「NO IMAGE」画像でもどちらにも適用されます。
• 指定画像だけの装飾：.freeimage { ～装飾～ }
• NO IMAGEだけの装飾：.noimage { ～装飾～ }

例えば、.usericon { width: 64px; height: 64px; } のようにCSSを書くと、アイコンサイズを64×64(px)サイズに指定できます。

カレンダー表示の装飾方法

投稿のあった日がリンクになる箱形カレンダーの表示機能があります。 投稿が存在する日付はリンクになり、クリックすると「その日に投稿されたすべての投稿」を閲覧できるページに移動します。 見た目はスキンで装飾しますので、適用するスキンによって例えば下図のように見た目が変わります。（左から順に、標準スキンでの表示、Twitterっぽいスキン(ブルー)での表示、Twitterっぽいスキン(ピンク)での表示です。）

※カレンダーの先頭行に曜日を表示できるのは、Ver 3.1.0以降のみです。（曜日行は非表示にも設定できますし、曜日の文字は設定から自由に変更できます。）

その時点で表示されている最新投稿の日付が属する月のカレンダーが自動的に表示されます。
単独投稿ページの場合は、その投稿月のカレンダーが表示されます。表示できる投稿がない状況では現在月のカレンダーが表示されます。（ただし、表示できる投稿がなくても、tegalog.cgiのパラメータで表示年月が指定されている場合には、その年月のカレンダーが表示されます。）

▼カレンダーの各部分をCSSで細かく装飾する方法

カレンダー全体は、以下のようなHTMLとして出力されています。（※2021年9月の例。曜日行を表示する設定の場合。）

<table class="calendar year2021 month09">
<caption>2021年09月</caption>
<thead>
<tr class="daysofweek"><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
</thead>
<tbody>
<tr class="week1"> ～第1週目～ </tr>
<tr class="week2"> ～第2週目～ </tr>
<tr class="week3"> ～第3週目～ </tr>
<tr class="week4"> ～第4週目～ </tr>
<tr class="week5"> ～第5週目～ </tr>
</tbody>
</table>

行単位（カレンダーの横方向一括）で装飾したい場合は、上記のclass名を使っても良いですし、曜日行なら「thead要素内のtr要素」、それ以外の行なら「tbody要素内のtr要素」を対象にして装飾しても良いでしょう。

日付部分は、以下のようなHTMLで出力されています。（曜日を表すclass名が付加されるのは Ver 3.3.0以降のみです。）

• 日付のないマス目：<td class="empty"></td>
• 投稿のない日（例:9月1日水曜日）：<td class="day1 wed"><span class="nolink">1</span></td>
• 投稿のある日（例:9月5日日曜日）：<td class="day5 sun"><a href="?date=2020/09/05">5</a></td>
• 今日の日付で投稿がない場合 （例:9月14日火曜日）：<td class="day14 tue today"><span class="nolink">14</span></td>
• 今日の日付で投稿がある場合 （例:9月24日金曜日）：<td class="day24 fri today"><a href="?date=2020/09/24">24</a></td>

そのため、例えば以下のようなCSSで装飾できます。

• カレンダー内での「今日」のセルだけを装飾したい場合には、 .calendar .today { ～装飾～ }のように書くことで装飾できます。
• もし、9月30日だけに限定して特別な装飾を施したい場合には、 .month09 .day30 { ～装飾～ }のように書けます。
• 投稿のある日のリンクを装飾したい場合は、例えば.calendar a { ～装飾～ } のように書けます。
• 投稿のない日の日付を装飾したい場合は、.calendar .nolink { ～装飾～ } のように書けます。

投稿のある日だけを丸くリンクにする方法などは、標準スキンのCSSファイル（tegalog.css）内にある /* ▼カレンダー区画 */ 以降の部分をご参照下さい。 標準スキンのCSSには細かくコメントを書き添えてあります。

▼カレンダーの曜日文字を変更する方法

カレンダーに表示される曜日行については、図のように、 管理画面の[設定]→[ページの表示]→[カレンダーの表示]で設定できます。

チェックボックスをOFFにすると、カレンダーの曜日行は省略されます。この場合、thead要素自体が出力されなくなります。

曜日として表示する文字数に制限はありませんが、多く書きすぎるとカレンダーの表（テーブル）が崩れる可能性が高まりますのでご注意下さい。

新着投稿リストの装飾・設定方法

最新の投稿から指定本数の先頭数文字をリストで掲載できる機能があります。 長文記事を投稿してブログ的に使っている場合に「新着記事リスト」などとしてご活用頂くことを想定した機能です。 HTMLのul＋li要素を使って、下図のように指定個数(デフォルトでは3件)だけ表示されます。

この新着投稿リストに表示される内容を設定するには、下記の2通りの方法があります。

• 設定画面から設定する方法（掲載する項目を選択）
• スキンに記述する方法（掲載する対象を選択）

▼新着投稿リストの掲載内容を設定画面で設定する方法（掲載する項目を選択）

リストアップする個数や、表示する項目は、管理画面の「設定」→「ページ設定」→「新着投稿リストの表示」で選択・設定できます。 タイトルとしては標準設定では「1行目の最大15文字」が採用されますが、自由に変更できます（タイトルとして採用されるのは、投稿本文の1行目だけです。1行目が空行だったり画像だけだった場合は、投稿番号が代わりに使われます）。 投稿日付や投稿時刻・投稿者・文字数などの項目は取捨選択も順序も自由に変更できます。

▼内容と順序の設定方法：

「内容と順序」欄に記述した英字に対応する要素が、記述順に出力されます。

• H = タイトルとリンク (必須)
• D = 投稿日付
• T = 投稿時刻
• U = 投稿者名
• I = 投稿者ID
• N = 投稿番号
• C = カテゴリ名 (※Ver 3.9.3以降)
• L = 本文の文字数
• B = 改行

デフォルトでは HBDTU なので、「タイトルとリンク」→「改行」→「投稿日付」→「投稿時刻」→「投稿者名」の順に出力されます。そのほかに、カテゴリ名や文字数なども出力させたい場合は、設定に英字を加えて下さい。

▼新着投稿リストの掲載対象をスキン側で限定する方法（掲載する対象を選択）

何もオプションを指定しなければ、全投稿を対象にした新着順で掲載されますが、カテゴリを使って掲載対象を絞り込むことができます。(※Ver 3.9.4以降)

新着投稿リストは、スキン側で指定したカテゴリIDに該当する投稿に限定して新着順に表示できます。 対象のカテゴリIDは同時に複数指定できるので、例えば「カテゴリⒶとⒷのどちらかに属する投稿をすべて新着順に出す」というような制限ことも可能です。

表示カテゴリを限定するには、外側スキンに [[LATESTLIST:CAT(カテゴリID)]] のように記述します。例えば、下記のように書けます。

• [[LATESTLIST:CAT(info)]] : カテゴリID「info」に属する投稿だけを新着順に表示。
• [[LATESTLIST:CAT(info,memo)]] : カテゴリID「info」や「memo」に属する投稿を新着順に表示。
• [[LATESTLIST:CAT(info,memo,diary)]] : カテゴリID「info」や「memo」や「diary」に属する投稿を新着順に表示。

カテゴリIDは、カンマ記号「,」を使って複数指定でき、複数指定した場合は AND ではなく OR で評価されます。 つまり、[[LATESTLIST:CAT(info,memo,diary)]] は、 「カテゴリIDが info または memo または diary な投稿」を示します。

▼新着投稿リストの各部分をCSSで装飾する方法

新着投稿リストは、以下のようなHTMLとして出力されています。

• 外側全体のリスト：<ul class="latestpostlist"> ～ </ul>
• タイトル＋リンク：<a href="?postid=番号" class="postlink">タイトル</a>
• 投稿日付：<span class="postdate">年/月/日</span>
• 投稿時刻：<span class="posttime">時:分:秒</span>
• 投稿者名：<span class="username">名前</span>
• 投稿者ID：<span class="userid">ユーザID</span>
• 投稿番号：<span class="postid">No.XXX</span>
• 文字数　：<span class="length">XXX文字</span>
• カテゴリ：<span class="catnames">(カテゴリ名の列挙)</span> (※Ver 3.9.3以降)
  ※カテゴリ名の列挙部分は、以下のようなHTMLとして出力されます。
  • カテゴリの名称：<span class="catname cat-(ID名)">カテゴリ名</span>
  • カテゴリ区切り：<span class="catsep">,</span> (※設定によってはカンマ以外の文字列で区切られます。下記カコミ内参照)

したがって、以下のようなCSSで装飾できます。

• タイトルリンク：.latestpostlist .postlink { ～装飾～ }
• 投稿日付：.latestpostlist .postdate { ～装飾～ }
• 投稿時刻：.latestpostlist .posttime { ～装飾～ }
• 投稿者名：.latestpostlist .username { ～装飾～ }
• 投稿者ID：.latestpostlist .userid { ～装飾～ }
• 投稿番号：.latestpostlist .postid { ～装飾～ }
• 文字数　：.latestpostlist .length { ～装飾～ }
• カテゴリ全体：.latestpostlist .catnames { ～装飾～ } ※複数形 catnames
• カテゴリ名1つ：.latestpostlist .catname { ～装飾～ } ※単数形 catname

新着画像リストの装飾方法

新着画像リスト（最近にUPされた画像だけの一覧）の出力機能があります。 Twitterのプロフィールページ右上に見えるメディア欄のような感じの表示を作りたい場合に活用できます。

この「新着画像リスト」機能を使う場合は、画像サイズを指定するCSSが必須な点に注意して下さい。何もCSSを用意しないままで使ってしまうと、すべての画像は原寸サイズで表示されてしまいます。

▼新着画像リストとして実際に出力されるHTMLソースの例3通り

新着画像リストとして実際に出力されるHTMLは、以下のような感じになっています。独自にカスタマイズする際の参考にして下さい。
ここではソースが見やすいように適宜改行して行頭にインデントを加えていますが、実際には全1行で詰めて出力されます。

▼[[IMAGELIST]] と記述した場合の出力HTML

この記法の場合は、各画像は、クリックすると「その画像を掲載しているすべての投稿」を見るページ(検索結果)に移動するリンクとして出力されます。

<span class="imagelistitem">
   <a href="?q=検索URL" class="imagesearch">
      <img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="34.1KB">
   </a>
</span>

<span class="imagelistitem">
   <a href="?q=検索URL" class="imagesearch">
      <img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="33.6KB">
   </a>
</span>

<span class="imagelistitem">
   <a href="?q=検索URL" class="imagesearch">
      <img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="46.9KB">
   </a>
</span>
　：　：　：

上記のHTMLを簡単に解説すると、以下のような感じです。

• リンクは、class="imagesearch" の付加されたa要素で出力され、
  • 画像は、class="oneimage" の付加されたimg要素で出力されます。
    • width・height属性は画像の縦横サイズが取得できた場合にのみ出力され、
    • alt属性値は常に空です。
    • loading="lazy"属性は常に出力され、
    • data-filesize="***"属性の値にはファイルサイズが出力されます。（data-filesize属性値は特に何にも使っていませんが、参考までに出力しています。JavaScriptで画像のサイズを表示したい場合に使えるかもしれません。^^;）
• 各画像の全体は <span class="imagelistitem">～</span> で囲まれます。(※Ver 3.9.1以降)

▼[[IMAGELIST:LB]] と記述した場合の出力HTML

この記法の場合は、Lightbox（または管理画面で設定された画像拡大スクリプト）を使ってその場で画像を拡大表示するリンクとして出力されます。

<span class="imagelistitem">
   <a href="画像ファイルパス" class="enlargeimage" data-lightbox="tegalog">
      <img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="40.5KB">
   </a>
</span>

<span class="imagelistitem">
   <a href="画像ファイルパス" class="enlargeimage" data-lightbox="tegalog">
      <img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="96.3KB">
   </a>
</span>
　：　：　：

リンクは、class="enlargeimage"（先程とは異なるclass名です）の付加されたa要素で出力され、必要に応じて「lightbox用の属性」や「拡大スクリプトで使用するclass名」が追加出力されます。 画像のimg要素は、先程と同じです。

各画像の全体が <span class="imagelistitem">～</span> で囲まれる点も同じです。(※Ver 3.9.1以降)

▼[[IMAGELIST:PURE]] と記述した場合の出力HTML

この記法の場合は、各画像はリンクにならず、ただ画像だけ(img要素だけ)が出力されます。

<span class="imagelistitem"><img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="40.5KB"></span>
<span class="imagelistitem"><img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="96.3KB"></span>
<span class="imagelistitem"><img src="画像ファイルパス" class="oneimage" width="横サイズ" height="縦サイズ" alt="" loading="lazy" data-filesize="34.1KB"></span>
　：　：　：

リンクにならない場合は、a要素は出力されず、img要素だけが連続して出力されます。画像のimg要素の出力仕様は、先程と同じです。

各画像の全体が <span class="imagelistitem">～</span> で囲まれる点も同じです。(※Ver 3.9.1以降)

▼新着画像リストとして標準スキンで使っているHTML＋CSSソース

新着画像リストは、標準添付の各スキンに加えてあります。特に、標準スキン（＝tegalog.cgiと同じ階層にあるスキン、skin-standardフォルダの中にも同じスキンがあります）では、新着画像リストとして下記のHTML＋CSSを加えています。(※Ver 3.9.0の時点のソースです。)

✅まず、外側スキン（skin-cover.html）には、以下のようなHTMLを加えています。
うまく装飾するためには、[[IMAGELIST]] の外側に何らかのブロック要素を加えておく方が良いと思います。 下記では <p class="imagelistbox">～</p> で囲んでいます。

✅次に、CSS（tegalog.css）では、以下のようなソースで装飾しています。 CSSソース内で ▼画像一覧リスト区画 という文字列を検索すると見つかります。
どの画像も正方形にトリミングして表示するようにしてあります。もし、独自に作成したスキンをお使いの場合等で、とりあえず標準スキンのように表示してみたい場合は、この区画の中身をコピーするなどしてご活用下さい。

特に、画像サイズを調整している箇所は、1080～1089行目にある /* ▼各画像の装飾 */ と書かれた区画です。（上図のほぼ中央付近）

任意の記事番号リンクの装飾方法

任意の記事番号へリンクする記法が下記の3通りあります。(1)と(2)はボタンクリックで簡単に入力する方法も用意されています。（ボタンは投稿欄の下部にデフォルトで表示されますが、設定で表示させなくすることも可能です。）

1. 本文中に [>123] と記述すると、投稿No.123の単独ページへ「123」というリンク文字でリンクになります。
2. 本文中に [>1357:ラベル] と記述すると、投稿No.1357の単独ページへ「ラベル」というリンク文字を使ってリンクできます。
3. 本文中に >>123 と記述すると、投稿No.123の単独ページへ「>>123」というリンク文字でリンクになります。

これらのリンクは、以下のようなHTMLとして出力されています。

<a href="?postid=番号" class="postidlink">リンクテキスト</a>

したがって、以下のようにCSSを書けば、この種のリンクだけに限定して装飾できます。

.postidlink { ～装飾～ }

ハッシュタグリストの装飾方法

外側スキン内に [[HASHTAGLIST]] を記述した箇所には、ハッシュタグの一覧がリスト形式で挿入されます。 どのように表示されるかはスキン次第ですが、標準添付のスキンでは例えば下図のように見えます。（HTMLでは箇条書きリストの形で出力されていますが、CSSで横並びのインライン形状に見えるよう装飾されています。）

▼ハッシュタグリストの内部をCSSで装飾する方法

ハッシュタグリストは、以下のような構造のHTMLとして出力されています。

<ul class="hashtaglist">
   <li class="count63"><a href="?tag=%e8%a6%81%e6%9c%9b" class="taglink" title="要望">要望</a><span class="num">(63)</span></li>
   <li class="count44"><a href="?tag=%e6%84%9f%e8%ac%9d" class="taglink" title="感謝">感謝</a><span class="num">(44)</span></li>
   <li class="count21"><a href="?tag=%e8%b3%aa%e5%95%8f" class="taglink" title="質問">質問</a><span class="num">(21)</span></li>
   ：　：　：
</ul>

ポイントは以下の4点です。

• ハッシュタグリスト全体：<ul class="hashtaglist"> ～ </ul>
• リスト内１項目の全体：<li class="count63"> ～ </li> (※数値部分は集計数に応じて変化します。)
• ハッシュタグ１つのリンク：<a href="?tag=ハッシュタグ名" class="taglink" title="ハッシュタグ名">ハッシュタグ名</a>
• そのハッシュタグの集計数：<span class="num">(集計数)</span>

したがって、以下のようなCSSで各部分を装飾できます。

• ハッシュタグリスト全体：.hashtaglist { ～装飾～ }
• ハッシュタグ１つのリンク：.hashtaglist .taglink { ～装飾～ }
• そのハッシュタグの集計数：.hashtaglist .num { ～装飾～ }

また、「リスト内１項目の全体」を作っているli要素には、その項目の該当数を利用して class="count21" のようなclass名が付加されていますから、タグクラウドのような表示を作る際に活用できるかもしれません。 （あらゆる数値に対する文字サイズを定義しておくのは困難ですから、「デフォルトでは最大の文字サイズ」で表示するよう装飾しておき、「count7～count5」では少し小さく、「count4～2」ではさらに小さく、「count1」では最小にするような装飾だと、短い記述で済みそうです。）

日付境界バーの装飾方法

▼日付境界バーの表示内容のカスタマイズ方法

古いバージョンでは、日付境界バーに表示される日付表記は「2021年08月01日」のように「YYYY年MM月DD日」形式で固定されていましたが、Ver 3.4.0以降にはこれらを自由にカスタマイズできる機能があります。 管理画面の［設定］→［ページの表示］→【ページの表示／全体】→［▼日付境界バーの挿入位置］→『日付の表記形式』欄で、下図のように年と月と日の表記方法をそれぞれ別個に指定できます。 例えば下図右側のように年を元号付きで表記したり、月を和名で表記したりもできます。（下図左側はデフォルト値です。）

内側スキンで [[DATE:Y年M月D日(b) h:m:s]] のように記述すると、投稿日時が「2021年7月31日(土) 01:23:15」のように表示される機能がありますが（詳しくは「投稿日時関連要素」項目を参照）、この表記方法がそのまま設定画面上で使えます。 具体的には下表をご覧下さい。

例えば、

• Y年 G月 N日と設定すると、日付境界バーの日付として下記のように表示されます。
  • 年別表示時： 2021年
  • 月別表示時： 2021年8月
  • 日別表示時： 2021年8月1日
• Y /M /Dと設定すると、日付境界バーの日付として下記のように表示されます。
  • 年別表示時： 2021
  • 月別表示時： 2021/08
  • 日別表示時： 2021/08/01
• R年 J（G月） N日と設定すると、日付境界バーの日付として下記のように表示されます。
  • 年別表示時： 令和3年
  • 月別表示時： 令和3年葉月（8月）
  • 日別表示時： 令和3年葉月（8月）1日

取捨選択・順序は自由で、同じ記号を何度でも使用可能です。なお、時(h)・分(m)・秒(s)は仕様上は記述可能ですが、記述しても意味はありません（すべて「00」が表示されます）。

▼日付境界バーをCSSで装飾する方法

日付境界バーは、以下のような構造のHTMLとして出力されています。（注：設定の『バーに表示する機能』内の2項目がONになっている場合の例です。）

<p class="dateseparator">
   <span class="datetitle">2023年2月</span>
   <span class="datefunclinks">
      <a href="?date=2023/02&amp;order=reverse" class="datereverse">この範囲を時系列順で読む</a>
      <a href="?date=2023/02&amp;mode=export" class="dateexport">この範囲をファイルに出力する</a>
   </span>
</p>

上記ではソースを見やすくするために適宜改行を加えていますが、実際には一切改行のない1行で出力されます。日付部分の出力は、先の設定次第です。

日付境界バーそのものはp要素を使って出力されており、その内側に日付タイトルと機能リンク枠がspan要素で出力されていて、各リンクはa要素で出力されています。それぞれの要素にclass名が付いていますから、望みの箇所だけを対象にして装飾できます。例えば、以下のようなCSSで装飾ができるでしょう。

• 日付境界バー全体の装飾：.dateseparator { ～ }
• 日付境界バー内の日付タイトルの装飾：.datetitle { ～ }
• 日付境界バー内のリンクボタンの装飾：.datefunclinks a { ～ }

日付境界バー内のリンクボタンは、標準スキンではボタン型に装飾されていますが、何もCSSを指定しなければ普通のテキストリンクとして表示されます。

日付一覧リストの装飾方法

外側スキン内に [[DATEBOX:LIST]] を記述した箇所には、日付リンクの一覧がリスト形式で挿入されます。 どのように表示されるかはスキン次第ですが、標準スキンでは下図の左側のように見えます。（HTMLでは西暦と月が同時に出力されていますが、CSSで西暦を非表示にして横並びに配置しています。）

▼日付一覧リストの各部分をCSSで装飾する方法

日付一覧リストは、以下のような構造のHTMLとして出力されています。（注：設定の『日付リストに年単独の階層を加える』項目がONになっている場合の例です。）

<ul class="datelimitlist">
   <li class="datelimit-year">
      <a href="?date=2020" class="datelistlink ">2020<span class="unit nen">年</span></a><span class="num">(324)</span>
         <ul class="datelimitsublist">
            <li class="datelimit-month">
               <a href="?date=2020/09" class="datelistlink">
                  <span class="year">2020<span class="unit nen">年</span></span>
                  <span class="month">09<span class="unit gatsu">月</span></span>
               </a>
               <span class="num">(20)</span>
            </li>
            <li class="datelimit-month">
               <a href="?date=2020/08" class="datelistlink">
                  <span class="year">2020<span class="unit nen">年</span></span>
                  <span class="month">08<span class="unit gatsu">月</span></span>
               </a>
               <span class="num">(24)</span>
            </li>
            <li class="datelimit-month">
               <a href="?date=2020/07" class="datelistlink">
                  <span class="year">2020<span class="unit nen">年</span></span>
                  <span class="month">07<span class="unit gatsu">月</span></span>
               </a>
               <span class="num">(21)</span>
            </li>
            ：　：　：

リストは2階層になっていて、1階層目は年単位、2階層目が月単位です。（注：設定の『日付リストに年単独の階層を加える』項目がONになっている場合に限ります。） 主に以下のようなclass名が付加されています。

• 日付一覧リスト全体(第1階層)：<ul class="datelimitlist"> ～ </ul>
• 月単位のリスト全体(第2階層)：<ul class="datelimitsublist"> ～ </ul>

• 年項目１つを作るli要素：<li class="datelimit-year"> ～ </li>
• 月項目１つを作るli要素：<li class="datelimit-month"> ～ </li>

• 日付限定ページへのリンク：<a href="?date=日付限定リンク先" class="datelistlink ">日付</a>
• 西暦＋月が表示される場合：<span class="year">XXXX年</span><span class="month">XX月</span>
• その日付に対する該当個数：<span class="num">(24)</span>

標準添付の各スキンで日付一覧リスト部分がどのように装飾されているかは、CSSソース内の /* ▼日付リンクリスト区画 */ あたりの部分をご参照下さい。

例えば、「2020年09月」という出力に対して「09月」とだけ表示されるよう西暦の部分だけを非表示にすることでシンプルなリストに見せています。 それは、CSSに .datelimitlist .datelimitsublist .year { display: none; } という記述を加えることで実現しています。

年月表記の「年」や「月」の漢字だけも単独で <span class="unit nen">年</span> や <span class="unit gatsu">月</span> としてマークアップされていますから、これらの漢字部分だけをCSSで装飾したり消したりできます。(※Ver 3.9.1以降)

その際は、.unit のようなCSSを書いてしまうと（日付一覧以外の箇所にある）同種の要素も対象に装飾してしまうので、.datelimitlist .unit のように、親要素のclass名とセットでセレクタを記述して下さい。

例えば、年月の漢字だけを小さめに表示したい場合は、.datelimitlist .unit { font-size: 0.67em; } のようにCSSを書くと良いでしょう。

▼日付一覧リストの月の表示桁数を設定(変更)する方法

日付一覧リストのデフォルト設定では、下図左側のように「01月、02月、03月…………12月」と月数は2桁固定で出力されます。1月～9月は先頭に「0」を付加して2桁で表示されます。 これが日付としては少々不自然だと感じる場合には、下図右側のように「1月、2月、3月……12月」のように1～2桁変動で表示されるよう設定することもできます。(Ver 3.4.0以降)

管理画面の［設定］→［ページの表示］→【日付リストの構成】→『月が1桁の場合は、先頭に0を加えて2桁にする』項目のチェックをOFFにすると、先頭の「0」が付かなくなり、1～2桁変動で表示されるようになります。 （デフォルトはONなので、2桁固定で出力されます。）

▼日付一覧リストの月の並び順を変更する方法

日付一覧での月の並び順は、デフォルトの降順（12月→1月）以外に、昇順（1月→12月）にも設定できます。(※Ver 3.9.5以降)

年が新しい順（降順）に並んでいても、月は1月から順に（昇順に）並べたい場合には、下図の緑色矢印の先の項目で設定を変更して下さい。

• デフォルトは「降順：12→1月」です。上図の水色矢印の方のように見えます。
• これを「昇順：1→12月」に変更すると、上図の黄色矢印の方のように見えます。

先頭固定の装飾方法 (Ver 3.1.0以降)

先頭固定機能では、指定した投稿が指定した順序で先頭に固定表示されます。その際、設定次第では「先頭に固定された投稿であることを示すラベル」と「固定投稿専用の日付境界バー」を表示できます。 それぞれの設定箇所は、管理画面の[ページの表示]→[先頭に固定する投稿]欄で下図の通りです。

上図の右側は、標準添付スキンのうちの「標準スキン」を使った場合の表示例です。 実際にどのように表示されるかは、お使いのスキン次第で変わります。

▼先頭固定専用の日付境界バーをCSSで装飾する方法

先頭固定専用の日付境界バーは、固定投稿がいくつある場合でも最初に1回だけ挿入されます。 このとき、専用のclass名「fixedseparator」が付加されて出力されますので、他の日付境界バーとは異なる装飾を適用できます。ただし、通常の日付境界バーと同じclass名も同時に出力されていますから、何もしなければ他の日付境界バーと同じデザインで表示されます。

普通の日付境界バーは、以下のようなマークアップで出力されています。（※詳しいHTMLソースは、日付境界バーをCSSで装飾する方法をご覧下さい。）

<p class="dateseparator"> ～バーの中身～ </p>

先頭固定専用の日付境界バーは、以下のようなマークアップで出力されています。（ここでは見やすいように改行を加えていますが、実際にはすべて1行で出力されます。）(※Ver 3.9.2以降)

<p class="dateseparator fixedseparator">
   <span class="fixedlabel">固定投稿</span>
</p>

したがって、他の日付境界バーと同じデザインで良いなら何もする必要はありません。 他の日付境界バーとは異なるデザインにしたい場合は、.fixedseparator { ～装飾～ }のように記述して装飾を追加できます。 なお、他の日付境界バーにあるデザインを打ち消す必要がある場合は、.dateseparator.fixedseparator { ～装飾～ }のように記述（※2つ目のドットの直前に空白があってはいけません）する必要があるかもしれません。CSSの書き方次第です。

▼先頭固定投稿であることを示すラベルをCSSで装飾する方法

上図では、先頭に固定された投稿に対して1つずつ「(先頭固定)」という文字列が表示されています。
これは、投稿から間もないことを示すサインを表示する [[NEW]] の位置に、投稿から間もないことを示すサインの代わりとして表示されます。

このとき、以下のようなマークアップで出力されています。
<span class="fixed">(先頭固定)</span>

したがって、先頭固定ラベルだけに限定して何らかの装飾を施したい場合には、CSSを.fixed { ～装飾～ }のように書くと良いでしょう。

なお、投稿から間もないことを示すサインは、特に何もマークアップされることなく、指定された文字列が [[NEW]] の代わりに挿入されます。 なので、お使いのスキンによっては（先頭固定ラベル用に装飾を用意しなくても）何らかの装飾が適用された状態で表示される可能性があります。

状況に応じて変化する見出し行部分も独自に装飾できるほか、 そのときの表示状況に応じてページデザインが切り替わるようにCSSを書くこともできます。

そのときの表示状況に応じてページデザインを切り替える方法

例えば「単独投稿が表示されている場合」や「表示対象が特定のカテゴリに限定されている場合」などのように、『そのとき表示されている状況』に応じてページデザイン等の装飾を分けたい場合のために、「そのとき表示されている状況を示すキーワード」が出力される記法 [[SITUATION:CLASS]] を用意しています。

▼使い方：

例えば、外側スキンのHTMLに class="[[SITUATION:CLASS]]" のように記述しておくと、そのとき表示されている状況に応じて class="home nofiltering hit toppage" のように、そのとき表示されている状況を示すキーワードが出力されます。

▼使い処：

この記述を外側スキンHTMLのbody要素に使って <body class="[[SITUATION:CLASS]]"> のように書いておけば、HTMLとしては <body class="home nofiltering hit toppage"> のように出力されますから、CSSで(ページの状況に応じた)独自の装飾に使いやすいでしょう。

• HOMEページに居る場合： home
• 何も表示が限定されていない状況： nofiltering
• HOMEページに居る場合で、何も表示が限定されていない状況で、スキンのプレビュー状態でもなく、モード指定もない場合： grandhome (※Ver 3.9.5以降)
• ユーザ名限定の表示時： selected-user user-ユーザID
• カテゴリ限定の表示時： selected-cat cat-カテゴリID
• ハッシュタグ限定の表示時： selected-tag tag-ハッシュタグ名(※パーセントエンコーディング形式)
• 日付限定表示時： selected-date date-日付
• 検索表示時： search-result
• 投稿単独表示時： onelog log-投稿番号
• 複数投稿の連結表示時： somelogs (※投稿番号は出力されません)
• 表示データが1件以上ある場合： hit
• 表示データが1件もない場合： nohit
• 1ページ目が表示されている場合： toppage (※全1ページの場合でも出力されます。投稿単独表示時には出力されません。)
• 2ページ目以降が表示されている場合： deeppage (※2ページ目以降なら何ページ目でも全部これ。)
• 逆順に表示している場合： reversed
• 表示モード： mode-モード名（※mode-gallery、mode-sitemap、mode-viewのどれか） (※Ver 3.9.5以降)

これらのサインが（状況によっては複数個）出力されます。
例えば、以下のようにです。

• HOMEページ（1件以上の投稿がある場合）なら：home nofiltering hit toppage mode-view
• カテゴリ「info」の1ページ目なら： selected-cat cat-info hit toppage mode-view
• ユーザ「admin」の2ページ目なら： selected-user user-admin hit deeppage mode-view
• ハッシュタグ「メモ」の1ページ目なら： selected-tag tag-%e3%83%a1%e3%83%a2 hit toppage
• 検索結果で1件もヒットしなかった場合： search-result nohit mode-view
• 何も表示を限定していない状況の2ページ目： nofiltering hit deeppage mode-view
• 投稿No.400の単独表示時（その投稿が存在する場合）： onelog log-400 hit mode-view
• 投稿No.500の単独表示時（その投稿が存在しない場合）： onelog log-500 nohit mode-view
• ギャラリーモードの3ページ目なら： nofiltering hit deeppage mode-gallery

▼装飾CSSの記述例：

この機能があると、例えばCSSを .onelog { ～装飾～ } のように書けば、投稿単独表示時のみに適用される装飾を用意できます。 さらに、ある特定の投稿(例えばNo.123)だけに特別な装飾を施したければ、 .log-123 { ～装飾～ } などのようにも書けます。

カテゴリ限定表示時に限った装飾は .selected-cat { ～装飾～ } で書けますし、 カテゴリのうち「infoカテゴリ」に限定した装飾を作りたければ .cat-info { ～装飾～ } と書けば良いことになります。

▼一覧表示時と単独表示時とで適用デザインを分ける方法

例えば、Ⓐ「記事一覧」とⒷ「記事単独」とで全く異なるデザインを用意したい際は、以下のようにスキンを作ると、1種類のスキンだけで異なるデザインを実現できます。

1. まず、スキンのHTML（特に内側スキンのskin-onelog.html）には「Ⓐ用」と「Ⓑ用」双方のマークアップをすべて含めておきます。その際、例えば以下のようにclass名を付けて書き分けておきます。
   

   <div class="forPostList">
      ～記事一覧用の表示内容～
   </div>
   <div class="forOnePost">
      ～単独表示用の表示内容～
   </div>
   

2. 「Ⓐ用」にはCSSでbody:not(.onelog)配下にスタイルを書き、Ⓑ用にはbody.onelog配下にスタイルを書き、それぞれの状況で不要な要素にはdisplay:none;を適用します。具体的には以下のようにCSSソースを書きます。
   

   body:not(.onelog) .forOnePost { display: none; }  /* 単独表示ではない状況なら、単独表示用要素は見えなくする */
   body.onelog .forPostList { display: none; }        /* 単独表示なら、一覧表示用要素を見えなくする */
   

上記のHTMLとCSSだと、

• 1記事の単独表示時には <div class="forPostList">～記事一覧用の表示内容～</div>部分はCSSで非表示になるため、<div class="forOnePost">～単独表示用の表示内容～</div>部分しか表示されません。
• それ以外の表示時には逆に <div class="forOnePost">～単独表示用の表示内容～</div>部分がCSSで非表示になるため、<div class="forPostList">～記事一覧用の表示内容～</div>部分しか表示されません。

この方法なら、デザインごとにスキンを分離する必要はなく、用意するスキンは1つで済むので管理が楽です。

投稿の状態（先頭固定/鍵付き/下げる/下書き）に応じてデザインを切り替える方法

投稿の状態（先頭固定、下書き、鍵付き、下げる）を内側スキンでclass名等に活用できる記法 [[POSTSTATUS]] を用意しています。 これを使うと、「先頭固定投稿だけの装飾」や「鍵付き投稿だけの装飾」や「下げた投稿だけの装飾」などをCSSで作りたい場合に活用できます。

▼使い方：

例えば、内側スキンのHTMLで「1投稿を構成する親ブロック」に <div class="[[POSTSTATUS]]"> のような感じで記述しておくと、 その投稿の状態に応じて下記のように状態を示すキーワードが出力されます。

• 先頭固定の場合には class="logstatus-fixed"
• 鍵付き投稿の場合には class="logstatus-lock"
• 鍵付き投稿で、正しい鍵が入力された後では class="logstatus-lock logstatus-unlocked" (2つ出力されます)
• 下げる投稿の場合には class="logstatus-rear"
• 下書き投稿の場合には class="logstatus-draft" (※注：下書き投稿は、投稿者本人によるプレビュー時にしか表示されません。)

「鍵付き投稿にだけ特別な装飾を加えたい」など、投稿の状況に応じてCSSで装飾を分けたい場合に活用できるでしょう。

▼装飾CSSの記述例：

上記のようにHTMLを書いているなら、例えば以下のようにCSSを書くことでそれぞれの状態を装飾できます。

• 先頭固定投稿に限定して適用する装飾は .logstatus-fixed { ～装飾～ } で書けます。
• 鍵付き投稿に限定して適用する装飾は .logstatus-lock { ～装飾～ } で書けます。
• 鍵付き投稿で、正しい鍵が入力されて本文が表示された状況に限定して適用する装飾は .logstatus-unlocked { ～装飾～ } で書けます。(このとき、.logstatus-lockも同時に適用されている点に注意して下さい。)
• 下げる投稿に限定して適用する装飾は .logstatus-rear { ～装飾～ } で書けます。
• 下書き投稿がプレビュー表示されている状況で装飾したい場合は .logstatus-draft { ～装飾～ } で書けます。

状況に応じた見出し行の装飾方法

てがろぐ標準添付の各スキンでは、ページの上部付近に「状況に応じた見出し行」が表示されています。 ノーマルな状況では何も表示されませんが、カテゴリ別表示時、ハッシュタグ別表示時、日付別表示時、検索時など、「表示条件が限定されている状況」では下図の矢印部分のように表示条件が表示されます。 このようにページ上に表示されるだけでなく、ページタイトル（HTMLのtitle要素）でも同様の文字列が表示されます。

表示条件が複合的に限定されている状況では、これらの文言がとても長くなります。 例えば、カテゴリ「雑記」に属する投稿で、タグ「思いつき」を含む投稿に限定した、2022年5月の投稿［50件］（2ページ目）のような感じです。

この部分の表示形態は、もっと短い仕様に変更したり、独自のCSSで装飾したりできるようになっています。 （Ver 3.7.0以降）
お好みに合わせて選択したりカスタマイズしたりしてみて下さい。

• 状況に応じた見出し行の表示形態をカスタマイズする方法
• 状況に応じた見出し行の装飾方法
• 該当件数とページ番号の表示形態をカスタマイズする方法
• 該当件数とページ番号の装飾方法

▼状況に応じた見出し行の表示形態をカスタマイズする方法

「状況に応じた見出し行」の表示バリエーションは、下図のように、ラジオボタンで3つの選択肢の中から1つを選択できます。 設定箇所は、管理画面の［設定］→［ページの表示］→【状況に応じた見出しの表示】→「状況に応じた見出しの表示形態」項目です。

▼状況に応じた見出し行の装飾方法

状況に応じた見出しの各テキストには、個別の装飾に使って頂けるようそれぞれ異なるclass名を付加してあります。 class名は対象によって異なりますから、「カテゴリ名だけ」や「ハッシュタグ名だけ」のように種類別に装飾を分けることもできます。

※下記のHTMLソースは（見やすさのために）改行とインデントを加えて掲載していますが、実際には一切改行せずに全1行で出力されます。

• ユーザ名が指定されている場合の出力：

  • ▼『文章』に設定されているとき

    <span class="situation-username-cover">
       ユーザ「<span class="situation-username">さくら</span>」の投稿
    </span>
    

  • ▼『ラベル』に設定されているとき

    <span class="situation-username-cover">
       ユーザ「<span class="situation-username">さくら</span>」
    </span>
    

  • ▼『列挙』に設定されているとき

    <span class="situation-username-cover">
       <span class="situation-username">さくら</span>
    </span>
    

• ハッシュタグが指定されている場合の出力：

  • ▼『文章』に設定されているとき

    <span class="situation-tagname-cover">
       タグ「<span class="situation-tagname">思いつき</span>」を含む投稿
    </span>
    

  • ▼『ラベル』に設定されているとき

    <span class="situation-tagname-cover">
       タグ「<span class="situation-tagname">思いつき</span>」
    </span>
    

  • ▼『列挙』に設定されているとき

    <span class="situation-tagname-cover">
       <span class="situation-tagname">思いつき</span>
    </span>
    

• 検索語が指定されている場合の出力：

  • ▼『文章』に設定されているとき

    <span class="situation-search-cover">
       検索語「<span class="situation-search">テスト</span>」の検索結果
    </span>
    

  • ▼『ラベル』に設定されているとき

    <span class="situation-search-cover">
       検索語「<span class="situation-search">テスト</span>」
    </span>
    

  • ▼『列挙』に設定されているとき

    <span class="situation-search-cover">
       <span class="situation-search">テスト</span>
    </span>
    

• 投稿日付が指定されている場合の出力：

  • ▼『文章』に設定されているとき

    <span class="situation-date-cover">
       <span class="situation-date">2022年5月</span>の投稿
    </span>
    

  • ▼『ラベル』・『列挙』に設定されているとき

    <span class="situation-date-cover">
       <span class="situation-date">2022年5月</span>
    </span>
    

• カテゴリ（1つだけ）が指定されている場合の出力：

  複数のカテゴリが指定されている場合の出力は別なので注意して下さい。（次の項目で紹介）

  • ▼『文章』に設定されているとき

    <span class="situation-onecatname-cover">
       カテゴリ「<span class="situation-catname">雑記</span>」に属する投稿
    </span>
    

  • ▼『ラベル』に設定されているとき

    <span class="situation-onecatname-cover">
       カテゴリ「<span class="situation-catname">雑記</span>」
    </span>
    

  • ▼『列挙』に設定されているとき

    <span class="situation-onecatname-cover">
       <span class="situation-catname">雑記</span>
    </span>
    

• カテゴリ（複数個）が指定されている場合の出力：

  ここでの外側のclass名だけは「catnames」のように複数形なので注意して下さい。

  • ▼『文章』に設定されているとき

    <span class="situation-catnames-cover">
       カテゴリ
       「<span class="situation-catname">日記</span>」・
       「<span class="situation-catname">情報</span>」・
       「<span class="situation-catname">雑記</span>」のどれかに属する投稿
    </span>
    

  • ▼『ラベル』に設定されているとき

    <span class="situation-catnames-cover">
       カテゴリ
       「<span class="situation-catname">日記</span>」・
       「<span class="situation-catname">情報</span>」・
       「<span class="situation-catname">雑記</span>」
    </span>
    

  • ▼『列挙』に設定されているとき

    <span class="situation-catnames-cover">
       <span class="situation-catname">日記</span>
       <span class="situation-catname">情報</span>
       <span class="situation-catname">雑記</span>
    </span>
    

• カテゴリなしが指定されている場合の出力：

  どのカテゴリにも属していない投稿を表示する場合の出力は以下のようになります。

  • ▼カテゴリなしをカテゴリツリーに加えていない場合

    <span class="situation-nocatname-cover">
       どのカテゴリにも属していない投稿
    </span>
    

  • ▼カテゴリなし用の項目名を指定（例えば「未区分」に）してカテゴリツリーに加えている場合

    <span class="situation-nocatname-cover">
       カテゴリ「<span class="situation-catname">未区分</span>」の投稿
    </span>
    

• モード指定時（ギャラリーモード、サイトマップページモード）の場合の出力：

  ギャラリーモードやサイトマップページモードでは、モード名称（※管理画面から自由な名称に変更できます）が表示されます。その際の出力は以下のようになります。(※Ver 3.9.3以降)

  • ▼ギャラリーモードの場合

    <span class="situation-mode">ギャラリー</span>
    

  • ▼サイトマップページの場合

    <span class="situation-mode">サイトマップ</span>
    

▼該当件数とページ番号の表示形態をカスタマイズする方法

状況に応じた見出しの後に続く、［54件］（3ページ目） のような該当件数とページ番号部分も、個別にカスタマイズができます。 設定箇所は、管理画面の［設定］→［ページの表示］→【状況に応じた見出しの表示】→「表示条件が限定されている場合に表示する付加情報」項目です。

ページ番号は、（デフォルト設定では）何も表示条件が限定されていない状況の2ページ目以降でしか表示されません。 しかし、上図の「表示条件が限定されていない場合でもページ番号を表示」項目にチェックを入れておけば、表示条件が限定されていない状況でも（2ページ目以降に限っては）ページ番号を表示できます。

▼該当件数とページ番号の装飾方法

状況に応じた見出しの後に続く、［54件］（3ページ目） のような該当件数とページ番号にも、装飾に使って頂けるよう個別にclass名を付加してあります。

※カッコの種類や単位の表記は、（上図で示した）設定で自由に変更できます。ここではデフォルトの表記を使って説明しています。

• 該当件数の出力：

  <span class="situation-hits">［<span class="num">54</span>件］</span>
  

• ページ数の出力：

  <span class="situation-page">（<span class="num">3</span>ページ目）</span>
  

任意のスキンを併用する方法

完全版パッケージに添付されている「Twitterっぽいスキン」や「ジャーナル用スキン」などのように、ページを生成する用途に作られたスキンでも、複数のスキンを併用できます。

手順は下記の3ステップだけです。(2ステップ目までだけで済む場合もあります。)

1. 併用したいスキン1つ1つを別々のサブディレクトリにUPする
2. パラメータ「skin=スキンディレクトリ名」でアクセスできることを確認する
3. 必要に応じて、内部リンクの出力方法などの設定を調整する

▼STEP.1：併用したいスキン1つ1つを別々のサブディレクトリにUPする

メインで使うスキン1つは、CGI本体（tegalog.cgi）と同じディレクトリにUPして下さい。
それ以外のスキンは、「1スキン＝1ディレクトリ」になるよう必要なだけサブディレクトリを作成して、そこにUPして下さい。

▼STEP.2：パラメータ「skin=スキンディレクトリ名」でアクセスできることを確認する

メインで使うスキンと、それ以外のスキンが、以下のようなURLでアクセスできるようになるはずです。

• メインで使うスキン（＝標準適用スキン）で表示する場合： tegalog.cgi
• サブで使うスキン1（例：Twitterっぽい）で表示する場合： tegalog.cgi?skin=skin-twitter
• サブで使うスキン2（例：付箋型スキン）で表示する場合： tegalog.cgi?skin=skin-fusen

書式は「skin=スキンディレクトリ名」です。

▼STEP.3：必要に応じて、内部リンクの出力方法などの設定を調整する

本文中の内部リンクのリンク先として、以下の2点を設定できます。

• どのスキンを適用したURLにリンクさせたいか（適用中のスキンを維持させたいのか、標準適用スキンを使った表示の方にリンクにしたいのか）
• リンクを相対パスで出力するか、絶対URL(フルパス)で出力するか

どちらも、管理画面の「設定」→「ページ設定」→「投稿本文の表示／テキスト」区画の「テキストリンクの出力調整」項目内にチェックボックスがあります。

• 適用中のスキンを維持したリンクを出力したい場合は、「一時適用中のスキンを維持できるリンクを出力する」にチェックを入れて下さい。（標準ではこちらが選択されています。）
• 常にメインのスキンを適用するリンクを出力したい場合は、「一時適用中のスキンを維持できるリンクを出力する」からチェックを外して下さい。

もし、あるスキンを適用した結果をSSI等の方法で他のページに埋め込む場合は、内部リンクは絶対URLで出力しないとリンクが切れてしまう可能性があります。 その際には、「本文中のテキストリンクを絶対URL(フルパス)で出力する」にチェックを入れて下さい。

あるスキンの出力結果を別のページに埋め込む方法

お使いのWebサーバで、SSI（＝Server Side Include）という記述方法が使えるなら、その仕組みを利用して、てがろぐCGIの出力をページ内に埋め込むことができます。 （SSIが使えない場合は、iframeを使うと似たような見た目を作ることはできます。）

具体的には、ブログ記事「てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法」をご参照下さい。 ここに記載している設定方法や注意点は、PHP等で埋め込む場合にも有効です。

▼先頭固定機能を使いつつ、最新の1件を別ページに埋め込みたい場合の方法

例えば「最新の1件」を別ページに埋め込んでいるとき、先頭固定機能を使って先頭に特定の投稿を固定してしまうと、埋め込み先には常に「先頭固定された投稿」だけが表示され続けてしまうので、そのままでは「最新の1件」を埋め込むことができなくなります。

先頭固定機能を使いつつ、最新の1件をSSIで埋め込みたい場合は、『表示条件が限定されている状況では先頭固定機能は働かない』という仕様を利用して、以下のⒶやⒷのようにすると良いでしょう。（※埋め込み用スキンの格納ディレクトリ名が umekomi のとき）

• Ⓐ （1人だけで利用しているなら）ユーザ限定表示のURL ?skin=umekomi&userid=admin を使って埋め込む。
• Ⓑ 絶対に使っていない単語を除外検索するURL ?skin=umekomi&q=-BibbidiBobbidiBoo を使って埋め込む。

《説明Ⓐ》自分1人だけ（＝ユーザIDを1つだけ）で利用しているなら、特定のユーザだけの投稿を表示する「ユーザ限定表示」にしたところで、全投稿が表示対象になります。しかし、システム的には表示対象を限定していることになるので、先頭固定機能は働きません。その結果、埋め込んでいる先では「最新の1件」が表示されます。

《説明Ⓑ》複数人で使っていたり、自分1人だけであっても複数のユーザIDを使い分けている場合は、Ⓐの方法が採れません。その場合は、マイナス検索(除外検索)機能に「絶対に使わない単語」を指定する方法が使えます。 例えば検索語に -BibbidiBobbidiBoo と指定すると、「BibbidiBobbidiBooという文字列が含まれていない投稿」だけが表示対象になります。 この文字列を（これまでも＆これからも）絶対に投稿本文やカテゴリ名等に使わなければ、全投稿が表示対象になります。 しかし、システム的には表示対象を限定していることになるので、先頭固定機能は働きません。その結果、埋め込んでいる先では「最新の1件」が表示されます。

各種設定などの操作を行う管理画面にも、少しだけカスタマイズの余地を用意しています。

新規投稿/編集画面に自由なCSSやJavaScriptを加える方法 【高度な設定】

QUICKPOST（ページに埋め込む投稿欄）のデザインはスキンHTMLから読み込まれるCSSやJavaScriptを使って自由にカスタマイズできますが、編集時などに使われる「管理画面上の投稿欄」は（デフォルトでは）CGI内部のデザインで固定されています。 しかし、あらかじめ設定をしておくことで、管理画面上の投稿欄(新規投稿/編集画面)では、以下のような動作にもできます。（Ver 3.4.0以降）

• CGI本体と同じディレクトリに edit.css というファイル名でCSSファイルがあれば、それが読み込まれる。
• CGI本体と同じディレクトリに edit.js というファイル名でJavaScriptファイルがあれば、それが読み込まれる。

この機能よって、管理画面上の新規投稿/編集画面でも、望みのCSSやJavaScriptを追加して自由にカスタマイズができるようになります。（※この仕様はデフォルトではOFFなので、下記の事前設定が必要です。）

▼設定箇所

この機能は、下図1枚目のように管理画面の[設定]→[システム設定]→【機能制限／自動調整／高度な設定】→[高度な設定]→『編集画面で、edit.cssとedit.jsを(あれば)読み込む』項目にチェックを入れている場合のみ機能します。デフォルトではOFFです。

上図2枚目のように管理画面上の投稿欄(新規投稿/編集画面)だけが対象です。QUICKPOSTの投稿欄では読み込まれません。（QUICKPOSTでも読み込みたい場合は、スキンHTMLにそう記述して下さい。）

edit.css も edit.js も、CGI本体（tegalog.cgi）と同じディレクトリに置いて下さい。それ以外の場所・それ以外のファイル名では読み込まれません。両方必要なわけではなく、どちらか片方だけでも構いません。（存在するファイルだけが読み込まれます。）

▼編集画面カスタマイズのための参考情報

管理画面上の投稿欄(新規投稿/編集画面)は、以下のようなHTMLで生成されています。（※QUICKPOSTではid属性値が異なります。）

• 投稿フォーム全体は、<form class="postform" ...>～</form>で囲まれています。
• 投稿編集領域(テキストエリア)は、<textarea class="tegalogpost" name="comment" id="tegalogpostSYS" ...>(中身)</textarea>で生成されています。
• 投稿ボタンから装飾ボタン等の一連のボタン空間は、<p class="line-control">～</p>で囲まれています。
• 投稿ボタンは、<span class="submitcover"><input type="submit" class="postbutton" value="投稿する" id="tegalogsubmitSYS" ...></span>のようなinput要素で出力されています。(文字列は設定によって異なる可能性があります。)

そのほか詳しくは、編集画面のHTMLソースを表示させて、<!-- 投稿フォーム(SYS) -->から<!-- 投稿フォーム(SYS)ここまで -->までの領域のソースをご参照下さい。 この範囲内には装飾ボタン等で使われるJavaScriptソースも含まれています。自力でJavaScriptを加える場合は、関数名や変数名が重複しないようご注意下さい。

FAQ・Tips（活用豆知識）・トラブルシューティングを見る

てがろぐCGIに関するFAQ・Tips（活用豆知識）は、FAQ・豆知識ページにまとめてありますのでご覧下さい。

著作権表示とPowered-by表記について

てがろぐCGIをご使用頂く上では、「著作権表示」と「Powered-by表記」の掲載が必要です。それぞれ下図の部分を指します。

• 「著作権表示」はCGIの管理画面などの下部に表示されています。この表示はどのような場合でも必須であり、削除したり改変したりしてお使い頂くことはできません。
• 「Powerd-by表記」は、CGIが生成するWebページ内に表示される「Powerd by てがろぐ」等の表記のことです。条件によっては削除可能で、掲載が必要な条件や装飾については下記の通りです。

Powerd-by表記は、CGIを無償でお使い頂く限り、表示・掲載が必須です。 削除したり改変したり見えなくしたり、極端に見えにくくしたりしてお使い頂くことはできません。 しかし、平均的な人類が問題なく読める範囲内でなら配色やサイズ等の装飾を加えて頂いても構いませんし、スクロールするだけで見える位置であれば掲載場所を変更して頂いても問題ありません。外側スキン内に [[VERSION]] と記述しておけば、そこに必要なPowerd-by表記が出力されます。 外側スキンから [[VERSION]] の記述を削除すると、CGI側が強制的にHTMLソースの末尾に追加します。この場合、文法的に正しくないHTMLになってしまいますから、スキンを自作する場合でも [[VERSION]] の記述を自ら含めておく方が、より望みのデザインを作りやすいでしょう。

▼Powered-by表記を非表示にして使うには

てがろぐCGIを企業サイトでお使いになる場合など、生成ページ中にPowerd-by表記を含めたくない場合は、有償ライセンスをご取得頂くことで、Powerd-by表記を非表示にできます。

ライセンスについて詳しくは、お気軽にお問い合わせ下さい。

「このCGIについて」枠の表示制限

ライセンスを取得している場合に、管理画面HOME右上に見える「このCGIについて」枠の一部または全部を非表示にできる機能もあります（Ver 3.4.0以降）。

てがろぐCGIにおける「ライセンス」とは、先の項目「著作権表示とPowered-by表記について」で示したように「Powered-by表記」を非表示にして使用できる権利のことです。 そういう場合、たいていはビジネス用途で活用していたり、客先サーバにセットアップして納品している場合がよくあります。 その場合、管理画面のTOPに「作者にコーヒーをおごる」等のリンクはあまり表示したくないでしょう。(^_^;) なので、ライセンスが取得されているなら、下図のようにこの「このCGIについて」枠の一部または全部の表示を削減できる機能を用意しています。

左端①がデフォルトの状態（ライセンスをご取得頂いていないフリー版でご使用なら、常にこの表示）です。中央②、右端③の表示のほか、完全に非表示④に設定することもできます。

法人向けのカスタマイズサービス

「てがろぐ」を御社サイトのニュースリリース案内枠などに使ってみませんか？

「てがろぐ」は単独ページを生成するだけでなく、既存ページの内部に埋め込むこともできます。
既に複数のウェブサイトでご活用頂いています。

• 例:熊本県マンション管理士会（冒頭のトピックス欄に埋め込み）＋てがろぐページ（トピックスページ）
• 例:松永建築設計事務所（冒頭のトピックス欄に埋め込み）＋てがろぐページ（トピックスページ）
• 例:京都伏見稲荷ラーメン ら～麺処 克享（上部の白帯部分に埋め込み）＋てがろぐ生成実体（掲載作業用ページ）、＋営業時間の御案内ページなど複数で活用。
• 例:ボードゲーム専門店 ファニーテーブル（後半のお知らせ欄に埋め込み）＋てがろぐページ（お知らせページ）
• 例:名古屋の害虫駆除屋さん（後半のお知らせ欄に埋め込み）＋てがろぐページ（NEWSページ）
• 例:福井県越前市NPOエンジェルキッズ（冒頭のお知らせ欄に埋め込み）＋てがろぐページ（お知らせページ）
• 例:一般社団法人よりどころ（冒頭のお知らせ欄に埋め込み）＋てがろぐページ（お知らせページ）
• 例:佐藤施設工業株式会社（末尾の新着情報欄に埋め込み）＋てがろぐページ（新着情報ページ）

ご依頼頂ければ、Powered-by表記を非表示にして使える永久ライセンスとセットにして、セットアップや設定を致します。
そのほか、御社サイトデザインに合わせたスキンの製作や、CGIソースそのもののカスタマイズも承ります。
詳しくは、お気軽にお問い合わせ下さい。