にしし ふぁくとりー:西村文宏 個人サイト

てがろぐ カスタマイズ方法

お手軽マイクロブログCGI「てがろぐ」のカスタマイズ方法です。主にスキンを自分好みに作り替える方法を解説しています。
てがろぐCGIでのページ表示はスキン式なので、スキンHTMLを書き換えれば、何でも好きなように表示できます。

《最終更新: 2021年09月09日 》

てがろぐCGIカスタマイズ方法の概要

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

てがろぐスキンHTMLでは、専用のキーワードさえ書ければ他は自由に編集可能ですから、ホームページビルダーのような汎用作成ソフトでも編集できます。 もちろん、テキストエディタをお使いになる方が自由度の高い編集が可能ですが。 テキストエディタには(特にCGIソースを編集する場合には)EmEditorをおすすめしていますが、スキンHTMLやCSSを編集するだけなら(UTF-8コードが扱える)テキストエディタなら何を使っても問題ありません。なお、EmEditorは有償ソフトですが無料版として使うこともできます。

スキンの置き方

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

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

スキンHTMLの2ファイル(skin-cover.htmlとskin-onelog.html)があれば、スキンとして認識されます。ディレクトリ名は、半角英数字と記号「-」・「_」内で構成されていれば、何でも構いません。 CSSファイルはいくつでも構いません(0個でも2個以上でも)。

別スキンの置き方については、セットアップ(設置)方法ページ内の別スキン(オプションスキン)を使う場合のアップロード先もご参照下さい。

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

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

スキンのディレクトリ名は、必ずしも「skin-」で始まっている必要はありません。公式配布しているスキンのディレクトリ名が「skin-」で始まっているのは、単に中身を分かりやすくするためです。 RSSフィード用のスキンのディレクトリ名は「rss」にしていますが、これは、一般ページ生成用のスキンとしては使えないので、それと誤解されないようにするためです。 将来的にRSSフィード用スキンの仕様を拡張することがある際には、ディレクトリ名が「rss」で始まっている点を利用する気がするので、もし独自にRSSフィード用スキンを作るなら、ディレクトリ名は「rss」で始めておくと後々良さそうな気がします。(具体的な計画はまだないので、気がするだけですが。)

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

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

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

スタイルシートファイル(CSSファイル)のファイル名は、スキンによって異なります。標準スキンの場合は「tegalog.css」です。スキンによっては、CSSファイルが存在しない場合もあります。

標準添付スキンのうち、「標準スキン」に含まれているCSSファイル(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宣言は書かないで省略して下さい。

※要は、外側スキンファイルの先頭がXML宣言ではない記述なら問題ありません。普通は、<!DOCTYPE html> のようなDOCTYPE宣言を書いておくと良いでしょう。
※逆に、(ページ表示用途ではなく)RSSフィードのように「XMLデータを出力するためのスキン」の場合は、先頭をXML宣言で書き始める必要があります。

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

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

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

▼標準で同時に使用される特別スキン

標準適用されるスキン(=ページの表示に使われるスキン)の他に、以下の2つのスキンが同時に使用されます。

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

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

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

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

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

RSSフィード用に作られたスキンをこの方法で表示に使うと、正しいXMLでは出力されない可能性がありますのでご注意下さい。(日付境界バーの出力を無効にするなど、いくつかの設定項目を調整していれば、正しいXMLが維持できる可能性もありますが。詳しくは、RSSフィード用スキンの作り方・使い方項目をご覧下さい。) RSSを出力する際は tegalog.cgi?mode=rss のようにmodeパラメータを使います。

スキンのカスタマイズ方法

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

  • skin-cover.html : ページ全体用の「外側スキン」ファイルです。
  • skin-onelog.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: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」が必要なだけ挿入されます。URLが単独で挿入されるわけではありませんので注意して下さい。 また、他のページが存在しない状況など、「何も挿入されない」場面もある点にもご注意下さい。

  • HTML内に、[[HOME:URL]] と記述すると、その位置にてがろぐHOMEのURL相対パスで挿入されます。(1スキン内で何回でも記述できます。)
  • HTML内に、[[HOME:URL:FULL]] と記述すると、その位置にてがろぐHOMEのURL絶対URIで挿入されます。(1スキン内で何回でも記述できます。)

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

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

【表示モード要素】

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

【特殊機能要素】

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

RSSフィードのURLに関しては、Ⓐ状況に合致したRSSフィードを指すURLが得られる記述方法と、Ⓑ常に全投稿を対象にしたRSSフィードを指すURLが得られる記述方法が別々に用意されています。

  • [[RSS:URL:PURE]] と [[RSS:URL:PURE:FULL]] のように「PURE」が含まれる記述では、どのような表示状況でも常に全投稿を対象にしたRSSフィードへのURLが挿入されます。
  • [[RSS:URL]] と [[RSS:URL:FULL]] のように「PURE」が含まれない記述では、
    • 「カテゴリ限定表示時には『そのカテゴリに属する投稿だけが含まれるRSSフィード』へのURLが挿入され、
    • 「ハッシュタグ限定表示時には『そのハッシュタグが含まれる投稿だけが含まれるRSSフィード』へのURLが挿入される
    など、『そのときの表示限定状況』に応じたRSSフィードへのURLが挿入されます。

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

  • HTML内に、[[ONEPOST:123]] と記述すると、その位置にNo.123の投稿本文が挿入されます。挿入されるのは本文だけです(日付などは含まれません)。存在しない番号を指定すると「存在しない」旨のエラー文字が挿入されます。(1スキン内で何回でも記述できます。)
    ※もし、No.5の本文を挿入したいなら [[ONEPOST:5]] と記述します。数値は半角で書き、頭に0は付けず「005」や「05」ではなく「5」と書いて下さい。
  • 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内に、[[DATEBOX:LIST]] と記述すると、その位置に日付別リンクリストが挿入されます。標準設定では年と月を別々に出力しますが、(管理画面から設定を変更すれば)年月をまとめて出力するようにもできます。(1スキン内で何回でも記述できます。)
  • HTML内に、[[DATEBOX:PULL]] と記述すると、その位置に日付限定窓がプルダウンメニューの形で挿入されます。また、降順(新しい順)で表示するか昇順(時系列順)で表示するかを指定するラジオボタンも表示(※)されます。(1スキン内で何回でも記述できます。)
  • HTML内に、[[DATEBOX]] と記述すると、 [[DATEBOX:LIST]] → [[DATEBOX:PULL]] の順で2つを指定したのと同じ内容が挿入されます。

※降順(新しい順)で表示するか昇順(時系列順)で表示するかを指定するラジオボタンを非表示にしたい場合は、.datelimitboxoptions { display: none !important; }のようにCSSを書いて下さい。 この方法で非表示にした場合は、常に「降順(新しい順)」で表示されます。

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

ハッシュタグリスト部分には、セットアップ直後だとハッシュタグが見つからない旨のメッセージだけが表示されます。 管理画面から「再カウント」を実行すると、ハッシュタグがある場合はリストアップされる(=使用されているハッシュタグ名と出現回数が表示される)ようになります。 ハッシュタグの並び順は、管理画面の[設定]→[ページの表示]→[ハッシュタグの表示]から指定できます。

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

※ツリー形式で出力されるカテゴリリストは、階層ごとにclass名が割り振ってあるため、CSSを書くことで「第1階層だけを表示する」といったカスタマイズができます。 詳しくは、「カテゴリツリーの装飾方法」項目の「カテゴリの第1階層だけを表示させる方法」をご参照下さい。

  • HTML内に、[[CALENDAR]] と記述すると、その位置に1ヶ月分のカレンダーが挿入されます。(1スキン内で何回でも記述できます。)
  • HTML内に、[[CALENDAR:数値]] と記述すると、その位置に本来の表示月から指定月数ほどずらした1ヶ月分のカレンダーが挿入されます。(1スキン内で何回でも記述できます。)
    • [[CALENDAR:2]] なら、2ヶ月のカレンダーを表示します。
    • [[CALENDAR:-3]] なら、3ヶ月のカレンダーを表示します。

カレンダーは、ずらす月数が指定されていない限りは「そのページで表示されている最新投稿の日付が属する月」のカレンダーが自動的に表示されます。 単独投稿ページの場合は、その投稿月のカレンダーが表示されます。 表示できる投稿がない状況では現在月のカレンダーが表示されます(ただし、パラメータで表示年月が指定されている場合にはその月のカレンダーが表示されます)。 カレンダー内の日付リンクをクリックすると、その日に投稿されたすべての投稿が表示されます。

Ver 3.1.0以降なら、カレンダーの最上行に曜日を表示するかどうかが選べます。設定は、管理画面の[設定]→[ページの表示]→[カレンダーの表示]からできます。 詳しくは、「カレンダー表示の装飾方法」内の「カレンダーの曜日文字を変更する方法」項目をご覧下さい。

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

主にカレンダーの前後移動用として用意した機能ですが、カレンダーとセットにしなくても使えます。挿入されるのはリンクではなくURLだけな点に注意して下さい。

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

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

【汎用要素・その他】

  • HTML内に、[[RANDOM:10]] と記述すると、その位置に1~10の間のランダムな整数(1と10を含む)が半角テキストで挿入されます。値は10以外でも、1桁~10桁の範囲で任意の数値を指定できます。(1スキン内で何回でも記述できます。外側スキン・内側スキン両方で使えます。)
  • HTML内に、[[CHARCODE]] と記述すると、CGIの文字コード名が挿入されます。(1スキン内で何回でも記述できます。) ※標準では「UTF-8」です。
  • HTML内に、[[VERSION]] と記述すると、CGIの名称とバージョン番号が挿入されます。(1スキン内で何回でも記述できます。) ※この記述が1度もない場合は、CGI側が強制的にHTML末尾に同文を挿入します。スキン内にこの表記を使っておく方が、望み通りにデザインを作れるでしょう。この表示を見えなくしたり、極端に見えにくくしたりしないで下さい。

【ファイル合成・ライブラリ読み込み】

  • HTML内に、[[INCLUDE:ファイル名]] と記述すると、その位置に指定ファイルの中身がそのままが挿入されます。SSI(Server Side Include)のように動作します。例えば [[INCLUDE:apple/pen.html]] と記述すると、その位置にappleフォルダのpen.htmlの中身がそのまま挿入されます。ファイルは相対パスで記述して下さい。セキュリティのため、標準設定ではCGI本体よりも上位のディレクトリは参照できません。設定はCGIソース冒頭付近で変更できます。(1スキン内で何回でも記述できます。)
  • 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回のみ記述できます。)

※「Lightboxが必要な場合」とは、投稿内に画像が1枚でも掲載されている状況で、その画像にLightbox用の属性「data-lightbox」が記述されている場合です。(外側スキンファイルに直接何かを記述している場合など、投稿以外の部分にLightboxを必要とする記述があっても反応しませんのでご注意下さい。その場合は、[[JS:LIGHTBOX]] を使うのではなく、常時Lightboxを読み込むようなHTMLをスキンに直接記述して下さい。)

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

個別投稿を表示する部分を作るためのスキン(テンプレートHTML)ファイルです。下記のキーワードはどれも、1スキン内に何度でも挿入できます。(1度も使わない項目があっても構いません)

【投稿ID関連要素】

  • HTML内に、[[POSTID]] と記述すると、その位置に投稿No.(投稿1つ1つに付加される固有番号)が挿入されます。
  • HTML内に、[[PARMAURL]] と記述すると、その位置に投稿単体を表示するための固有URL相対パスで挿入されます。
  • HTML内に、[[PARMAURL:FULL]] と記述すると、その位置に投稿単体を表示するための固有URL絶対URIで挿入されます。
  • HTML内に、[[PARMAURL:PURE]] と記述すると、その位置にデフォルトスキンを使って投稿単体を表示するための固有URL相対パスで挿入されます。
  • HTML内に、[[PARMAURL:PURE:FULL]] と記述すると、その位置にデフォルトスキンを使って投稿単体を表示するための固有URL絶対URIで挿入されます。
  • HTML内に、[[EDITURL]] と記述すると、その位置に投稿の内容を編集するための編集ページの固有URLが挿入されます。

【投稿ユーザ関連要素】

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

【カテゴリ関連要素】

  • HTML内に、[[CATEGORYLINKS]] と記述すると、その位置にその投稿が属しているカテゴリ相対パスのリンク形式で挿入されます。(※1)
  • HTML内に、[[CATEGORYLINKS:FULL]] と記述すると、その位置にその投稿が属しているカテゴリ絶対URIのリンク形式でが挿入されます。(※1)
  • HTML内に、[[CATEGORYLINKS:PURE]] と記述すると、その位置にその投稿が属しているカテゴリデフォルトスキンを使って表示されるリンクが相対パスで挿入されます。(※1)
  • HTML内に、[[CATEGORYLINKS:PURE:FULL]] と記述すると、その位置にその投稿が属しているカテゴリデフォルトスキンを使って表示されるリンクが絶対URIで挿入されます。(※1)
  • HTML内に、[[CATEGORYNAMES]] と記述すると、その位置にその投稿が属しているカテゴリの表示名だけが挿入されます。リンクにはなりません。(※1)
  • HTML内に、[[CATEGORYIDS]] と記述すると、その位置にその投稿が属しているカテゴリのIDだけが挿入されます。カテゴリ別に装飾を変化させるために、class属性の中にカテゴリIDを入れたい場合などに活用できます。(※2)
  • HTML内に、[[CATEGORYIDS:IFEMPTY:代替文字列]] と記述すると、その位置にその投稿が属しているカテゴリのIDだけが挿入され、もしカテゴリが1つもない場合には代わりに代替文字列に指定された文字列が挿入されます。(※3)

※1:[[CATEGORYLINKS]]、[[CATEGORYLINKS:***]]、[[CATEGORYNAMES]] では、複数のカテゴリ名が挿入される場合には、管理画面の「設定」→「カテゴリの表示」→「カテゴリ間の区切り文字」項目に入力した区切り文字を使って区切られます。デフォルトではカンマ記号「,」です。
※2:[[CATEGORYIDS]] では、複数のカテゴリがある場合は(設定に関係なく)常に半角の空白文字で区切られます。HTMLの属性値として破綻させないための仕様です。
※3:内蔵RSSフィード用スキンや、標準添付のRSS用スキンのcategory要素で使っています。

【投稿日時関連要素】

  • HTML内に、[[NEW]] と記述すると、その位置に新規投稿から間もないことを示す文字列(標準では「New!」)が挿入されます。表示期間(標準では72時間)や文字列は管理画面から設定できます。なお、先頭固定に設定されている投稿では、この位置には「先頭固定を示す文言」が挿入されます。
  • HTML内に、[[DATE]] と記述すると、その位置に投稿の日付が「2021/11/07 11:03:00」形式で挿入されます。
  • HTML内に、[[DATE:●●●]] と記述すると、その位置に投稿の日付が指定の形式で挿入されます。
    • 「●●●」の部分には任意の文字列を指定でき、下表のように解釈されます。取捨選択も掲載順序も自由です。同じ文字を何度も使えます。大文字・小文字は区別するので注意して下さい。下記以外の文字はそのまま出力されます。
      記号挿入内容挿入例または範囲備考
      Y年 (西暦)2021
      y年 (西暦下2桁)21
      R年 (和暦:元号+年)令和3数字の桁数は不定
      r年 (和暦:年のみ)3
      M月 (2桁固定)01 ~ 121桁なら先頭に0を付加
      G月 (1~2桁)1 ~ 121桁は1桁のまま
      J月名(和暦)睦月 ~ 師走
      E月名(英語)January ~ December
      e月名(英略)Jan ~ Dec英字3文字
      D日 (2桁固定)01 ~ 311桁なら先頭に0を付加
      N日 (1~2桁)1 ~ 311桁は1桁のまま
      W曜日(英語)Monday ~ Sunday
      w曜日(英略)Mon ~ Sun英字3文字
      B曜日(和名)月曜日 ~ 日曜日漢字3文字
      b曜日(和略)月 ~ 日漢字1文字
      h00 ~ 232桁固定
      m00 ~ 59
      s00 ~ 59
    • 例えば、[[DATE:Y年M月D日(w) h:m:s]] と記述すると、「2021年11月07日(Sun) 11:03:00」の形式で挿入されます。
    • 例えば、[[DATE:Y/M/D W h:m]] と記述すると、「2021/11/07 Sunday 11:03」の形式で挿入されます。
    • 例えば、[[DATE:w, D e Y h:m:s]] と記述すると、「Sun, 07 Nov 2021 11:03:00」の形式で挿入されます。
    • 例えば、[[DATE:R年(Y年)G月N日]] と記述すると、「令和3年(2021年)8月1日」の形式で挿入されます。
    • 例えば、[[DATE:M月(J)のD日]] と記述すると、「6月(水無月)の08日」の形式で挿入されます。
    • 例えば、[[DATE:B h時m分]] と記述すると、「火曜日 17時55分」の形式で挿入されます。

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

【投稿本文関連要素(基本)】

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

編集画面内でリアルタイムにカウントされる文字数は、実際に入力した文字数が表示されています。そのため、装飾用途の記号や、リンク先URLなども1文字ずつカウントされます。 それに対して、キーワード [[LENGTH]] で埋め込まれる文字数は、表示される文字をベースにカウントするため、両者の文字数は必ずしも一致しません。

【投稿本文関連要素(オプション)】

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

  • 行単位で別々に挿入:
    • HTML内に、[[COMMENT:LINE:1]] と記述すると、その位置に投稿本文の1行目だけが挿入されます。
    • HTML内に、[[COMMENT:LINE:2]] と記述すると、その位置に投稿本文の2行目だけが挿入されます。
    • HTML内に、[[COMMENT:LINE:3]] と記述すると、その位置に投稿本文の3行目だけが挿入されます。
      : : : (以降、上限なく特定の行番号を指定可能。)
  • 指定行以降を挿入:
    • HTML内に、[[COMMENT:LINE:2*]] と記述すると、その位置に投稿本文の2行目以降(最後まで)が挿入されます。
    • HTML内に、[[COMMENT:LINE:3*]] と記述すると、その位置に投稿本文の3行目以降(最後まで)が挿入されます。
      : : : (以降、上限なく特定の行番号を指定可能。)

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

  • 指定文字数だけを挿入:
    • HTML内に、[[COMMENT:TEXT:120]] と記述すると、その位置に投稿本文の先頭から120文字だけプレーンテキストで挿入されます。(文字数は数値で自由に指定できます。)
  • 役割別に挿入:
    • HTML内に、[[COMMENT:TITLE]] と記述すると、その位置に原則として投稿本文の1行目プレーンテキストで挿入されます。ただし、1行目が空行の場合や、画像しかない場合は、それらは挿入されずに「No.123」の形式で投稿番号が挿入されます。
    • HTML内に、[[COMMENT:TITLE:30]] と記述すると、その位置に原則として投稿本文の1行目プレーンテキスト最大30文字だけ挿入されます。(超過分は三点リーダ「…」で省略されます。) ただし、1行目が空行の場合や、画像しかない場合は、それらは挿入されずに「No.123」の形式で投稿番号が挿入されます。
    • HTML内に、[[COMMENT:BODY]] と記述すると、その位置に原則として投稿本文の2行目以降(最後まで)が挿入されます。ただし、投稿が全1行しかない場合には1行目の全文が挿入されます。(※プレーンテキスト化はされません。)
    • HTML内に、[[COMMENT:BODY:100]] と記述すると、その位置に原則として投稿本文の2行目以降先頭100文字プレーンテキストで挿入されます。(※改行も無視されます。) ただし、投稿が全1行しかない場合には1行目の先頭100文字が挿入されます。

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

  • 抽出結果を挿入:
    • HTML内に、[[COMMENT:TAGS]] と記述すると、その位置に投稿本文に含まれるハッシュタグ(リンク)だけが抽出されて挿入されます。ハッシュタグの文字列だけではなく、リンクになった形で挿入されます。本文内のどこにハッシュタグが書かれているかは関係なく、先頭から順に抽出されます。もし本文内に同じハッシュタグが複数回登場していれば、抽出結果にも同じハッシュタグが複数回出てきます。

※「LINE」の後の数値は行番号で、「TITLE」や「BODY」の後の数値は制限文字数なので注意して下さい。行番号は省略できません。制限文字数は省略でき、省略すると全文字を返します。
※「1行目を表題と解釈して、2行目以降を本文として解釈する」という書き方を使って『タイトル付きブログ』のように表示できるスキンには、「ブログタイプスキン」があります。

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

  • HTML内に、[[PICTCOUNT]] と記述すると、その位置にその投稿本文に含まれている画像の個数が数値で挿入されます。
  • HTML内に、[[GETURL:PICT:1]] と記述すると、その位置に投稿本文に含まれる1つ目の画像のURLだけがテキストで挿入されます。URLは相対パスの形で得られます。(画像自体の挿入ではなく、画像のURLだけを得たい場合に使えます。)
  • HTML内に、[[ATT:LIGHTBOX]] と記述すると、その位置にLightboxを適用するための属性がテキストで挿入されます。(自力でリンクタグ(a要素)を構成している際に、管理画面から設定されたLightbox用属性を加えたい場合に使えます。)

【その他】

  • HTML内に、[[LOOPCOUNT]] と記述すると、その位置にそのページ内で「何番目に表示されている投稿か?」が半角整数で挿入されます。
  • HTML内に、[[RANDOM:10]] と記述すると、その位置に1~10の間のランダムな整数(1と10を含む)が半角テキストで挿入されます。値は10以外でも、1桁~10桁の範囲で任意の数値を指定できます。(この記述は、外側スキン・内側スキン両方で使えます。)

スキン編集の補足

  • 投稿自体を挿入する [[TEGALOG]] と、ライブラリを読み込む [[JS:LIGHTBOX]]系の記述以外は、すべて何回でも記述できます。デフォルトのスキン内でも、同一キーワードを何度も使用しています。
  • HTML内のその他の部分は、何でも自由に書き換えることができます。
  • 付属のスキンファイルを参考にして編集すれば、楽にカスタマイズできるでしょう。
  • スキン内に記述したキーワードが認識されない場合は、以下の点を確認してみて下さい。
    • 括弧が二重になっているか?
      [DATE][[DATE] では認識されません。[[DATE]] のように開始括弧も終了括弧も二重になっているかどうか確認して下さい。
    • 余計な空白文字が入っていないか?
      →括弧とキーワードの間は詰めて記述する必要があります。空白があると認識されません。
    • 半角の大文字で記述しているか?
      →括弧とキーワードは半角文字でしか認識されません。また、英字は大文字でしか認識されません(※日付の指定文字列は除く)。

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

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

▼RSSフィード用スキンの認識・設定・仕様
▽認識と出力:

RSSフィード用スキンは、てがろぐCGIの本体ファイル(tegalog.cgi)が存在するディレクトリに、「rss」という名称でサブディレクトリを作成し、そこに格納することで認識されます(ディレクトリ名は図のように設定で変更できます)。

RSSフィード用スキンの格納先として指定されたサブディレクトリ(標準ではrss)にRSS用のスキンファイルが存在する場合で、 管理画面の「設定」→「ページ設定」→「RSSフィードの出力」項目に『自作のRSSスキンを使う』が選択されていれば、 tegalog.cgi?mode=rss のように「mode=rss」のパラメータを使ってアクセスした際に、そのRSS用スキンが適用された状態でRSSフィードが出力されます。

自作のスキンでRSSの存在を(閲覧者のブラウザに)自動認識させたい場合は、外側スキンのhead要素内に <link rel="alternate" type="application/rss+xml" title="[[FREE:TITLE:MAIN]]RSSフィード" href="[[RSS:URL:FULL]]"> のような1行を追記して下さい。(これは、RSS Auto-Discoveryを出力する記述です。) 標準添付の各スキンには最初から記述されています。

▽仕様:

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

1行目がXML宣言で始まっていないと、XMLを示す application/xml ヘッダが出力されず、一般的なHTMLページを示す text/html ヘッダが出力されてしまう仕様なため、RSSフィードだと認識されなくなる可能性があります。

▽強制適用される設定:

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

  • 日付境界バーは出力しない。
  • 画像は絶対URIで出力。
  • 画像をリンクにしない。
  • LazyLoad用属性を出力しない。
  • Lightbox用属性を出力しない。
  • 続きを読む機能を使わない。
  • ユーティリティリンク枠を出力しない。

RSSモードを示すパラメータ mode=rss を使わずに、別スキンを適用するパラメータ skin=*** を使ってアクセスした場合でも、スキンの先頭がXML宣言で始まってさえいれば(XML用のヘッダが出力されるため)RSSフィードとして使うことは可能です。 ただし、その際には上記のような設定の自動調整は行われないため、設定によってはXMLとして正しくない(もしくはRSSとして正しくない)文法で出力されてしまう可能性がある点に注意して下さい。 複数のRSSフィード用スキンを併用したい場合は、下記の「複数のRSSフィード用スキンを併用する方法」をご使用下さい。

▼複数の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用スキンは更新チェック用にして、別ページに埋め込む用途のRSSスキンでは skinパラメータを使うようにすると良いでしょう。)

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

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

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

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

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

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

検索結果をRSSフィードにしたい場合は、検索結果のURLの末尾に「&mode=rss」を加える方法が手軽です。

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

ギャラリーモードで使われるギャラリー用スキンに特別な作り方はありません。その他のスキンとまったく同じ方法で記述できます。 単に、ギャラリーモードで表示される際には「画像が1つ以上含まれる投稿だけが表示される」(※)という動作が異なるだけです。 したがって、例えば「黒板スキン」などをギャラリー用のスキンとして指定することもできます。

デフォルト設定では、てがろぐCGIの本体ファイル(tegalog.cgi)が存在するディレクトリに、「skin-gallery」という名称でサブディレクトリを作成し、そこにスキン構成ファイルを格納することで認識されます。(ディレクトリ名は、図のように設定で自由に変更できます。)

ギャラリーページが出力される際には、(管理画面上の設定値に関係なく)自動的に以下の設定が適用されます。

  • 画像は絶対URIで出力。
  • 画像出力の省略時に「(画像省略)」とは出力しない。

ギャラリーモードでの日付境界バーを出力するかどうかなど、いくつかの設定は管理画面の「設定」→「補助出力」→【ギャラリーの出力】から変更できます。

※今のところ、「てがろぐ上で投稿された画像」だけが対象です。外部に存在する画像を [IMG:代替文字]URL の記法を使って埋め込んでいる投稿は、ギャラリーモードでの表示対象にはなりません。 (この仕様は将来的には拡張する可能性もあります。)

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

ギャラリーモードでも 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=ディレクトリ名 を指定すると、そのスキンを適用した状態でギャラリーモードが表示されます。

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

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

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

ギャラリーモードは単に「画像の含まれる投稿だけが表示されるモード」なので、ギャラリーモード用に作られたスキン以外でも何でも適用できます。 例えば、tegalog.cgi?mode=gallery&skin=skin-fusenのようにして、(完全版に標準添付の)付箋型スキンをギャラリーモードで使うこともできます。

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

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

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

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

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

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

先の前提条件2つが成立していない限り、常時表示される編集ボタンのままですのでご注意下さい。

フリースペースの書き方

わざわざスキン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:番号]]

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

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

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

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

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

検索機能の使い方に関しては、 使い方・設定方法ページの「全文検索」項目や「複合検索窓」項目をご参照下さい。

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

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

標準スキンでの検索窓の見え方

検索窓の表示のカスタマイズ例

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

検索窓や検索関連フォームの見た目(装飾)をCSSでカスタマイズする方法は、 後述の検索窓(検索フォーム)の装飾方法をご覧下さい。

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

複合検索窓の表示例

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

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

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

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

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

検索条件(オプション)をすべて省略して [[SEARCHBOX:COMPLEX:]] と記述した場合は、単独検索窓を表示する [[SEARCHBOX]] が書かれた場合と同じ表示になります。

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

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

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

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

ページ内リンクを作れる [[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 { ~装飾内容~ } のように書けば良いでしょう。

先頭の投稿や、最後の投稿を対象にして装飾したい場合は、 [[LOOPCOUNT]] を使わなくても、事前にHTMLの書き方を工夫しておけば、CSSの「first-child疑似要素」や「last-child疑似要素」を使う方法もあります。

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

この機能を使わずに、外側スキンファイル内に直接スクリプトを読み込む記述を加えても構いません。しかし、この機能を使えば、「画像が1つも表示されない状況では、画像拡大スクリプト自体が読み込まれなくなる」ため、無駄な通信量を削減できます。

拡大画像が表示される際に、ぐいーんと枠が広がるアニメーションが嫌で「Lightbox以外のスクリプトを使いたい」と思われる方もいらっしゃるかも知れませんが、わざわざ別のスクリプトに変更しなくても、Lightboxのオプションを追記するだけで、ぐいーんと広がったり、ふわっと切り替わったりするアニメーション効果をOFFにして、一瞬で拡大画像を表示することもできます。 詳しくは、FAQ・豆知識ページの「画像拡大時にぐいーんと枠が広がるアニメーションを無効にして一瞬で表示する方法」項目をご覧下さい。

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を必要としているかどうかで書き分けても良いのですが、様々なスクリプトを試してみたい場合にはいちいちスキンを書き換えるのは面倒でしょうから [[JS:LIGHTBOX:JQ]] のまま使うと良いでしょう。

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

ここで指定したスクリプトが使われるのはあくまでも「ページ表示の際」であって、「管理画面内での画像一覧」などではこの設定に関係なく常にLightboxが使われます。

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

▼設定箇所(2:後半)

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

画像リンクから拡大スクリプトが読み込まれる専用の記述の設定箇所

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

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

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

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

※Fancyboxのようにカスタムdata-属性を使うスクリプト(Lightboxと同じ)の場合は、上図の緑色矢印部分にある『画像リンクにLightbox用の属性を付加する』欄にチェックを入れた上で「属性」欄に指定の属性を入力して下さい。
※Fuwaimgのようにclass属性に指定のclass名が必要なスクリプトの場合は、上図の黄色矢印部分にある『img要素に独自のclass属性値を追加する』欄にチェックを入れた上で「属性」欄に指定のclass名を入力して下さい。

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

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

Fancyboxを使って画像を拡大したい場合の設定方法

  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ファイルを自サイト内の適当な場所にアップロードしてから、管理画面の[設定]で以下のように設定して下さい。

Fancyboxを使って画像を拡大したい場合の設定方法

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

以上です。

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

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

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

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

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

表示できる投稿が1件もない場合にだけ適用する何らかの装飾を用意したいだけの場合は、上記の入力欄にアクロバットなHTMLソースを書くのではなく、「そのときの表示状況に応じてページデザインを切り替える方法」項目で紹介している方法を使う方がCSSだけでシンプルに実現できるでしょう。

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

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

投稿入力欄の下にあるボタン[機能]→[読み上げ]

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

投稿本文を合成音声で読み上げるリンクの表示例

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

読み上げ時の注意:
●ボリュームの設定に注意して下さい。(^_^;) ●読み上げが始まった後、途中で止める機能はありません。 ●読み上げボタンを連打すると、打った回数だけ繰り返し読み上げてしまいますので注意して下さい。

装飾のカスタマイズ方法

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

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

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

ページ番号リンク部分の表示例

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

ページ番号の途中を省略するかどうかは、 管理画面の[設定]→[ページの表示]→【ナビゲーションリンクの表示】内の『総ページ数が多い場合に途中のページ番号リンクを省略する』チェックボックスで設定できます。 ONにすると途中が省略されます。デフォルトではOFFです。

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

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

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

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

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

「«前のXXX件」のようなリンクラベルは、設定から自由に変更できます。「XXX件」のような番号を表示せず、単に「PREV / NEXT」などのような表記にすることも可能です。 1投稿単独ページの場合には、前後の投稿へ移動するリンクが表示されます。その場合のマークアップも同じです。

▼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つに何らかのマークアップを加えたい場合もあるでしょう。 その際には、管理画面の[設定]→[ページの表示]→【ナビゲーションリンクの表示】→「ページ番号リンク」区画で、下図のように設定できます。

ページ番号の表示設定項目

この設定項目にはHTMLを記述可能なので、CSSで装飾する目的で何らかのclass名を付加したい場合は、span要素など適当なHTMLタグを書くと良いでしょう。

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

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

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

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

ユーザアイコンサイズの設定画面

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

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

※1:スキン側のCSSでアイコンのサイズが指定されている場合で、CSSに!importantの記述が併用されている場合は、常にCSS側の設定が採用されます。この場合、管理画面の設定からでは装飾を上書きできません。その場合は、(管理画面上でどのように設定しても)スキン側のCSSで設定されたサイズが使われます。

▼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)サイズに指定できます。

ピクセル(px)単位以外の方法でアイコンのサイズを指定したい場合は、管理画面上では設定できませんので、スキンのCSSに記述するしかありません。

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

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

カレンダーの表示例

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

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

外側スキンに [[CALENDAR]] と書いた箇所にカレンダーが挿入されます。外側スキン内に [[CALENDAR]] の記述がなければ、カレンダーはどこにも表示されません。 カレンダーが不要なら、外側スキンから [[CALENDAR]] の記述自体を削除しておく方が、動作は軽くなります。

外側スキンに [[CALENDAR:-1]] と書くと、本来表示される月の1ヶ月前のカレンダーが表示されます。 なので、[[CALENDAR:-2]] [[CALENDAR:-1]] [[CALENDAR]] のように記述すると、2ヶ月前から当月までの計3ヶ月分のカレンダーが並んで出力されます。 詳しくは、リファレンスの【サイドコンテンツ要素】項目をご覧下さい。

▼カレンダーの各部分を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要素」を対象にして装飾しても良いでしょう。

曜日行を表示しない設定の場合は、灰色の範囲内(=<thead>~</thead>)は出力されません。 曜日の文字は設定次第で変わります。詳しくは、カレンダーの曜日文字を変更する方法をご覧下さい。

日付部分は、以下のような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には細かくコメントを書き添えてあります。

カレンダー用のCSSがない状況では、カレンダーは何も装飾されません。

前後の月へ移動するリンクを出力する機能は、カレンダーの出力とは別個に(独立して)存在しています。 例えば、[[MOVEMONTH:-1:URL]] と記述すると、その位置に前月の投稿ページのURLが挿入されますので、<a href="[[MOVEMONTH:-1:URL]]">前月</a> のようにHTMLを書くと、前月へのリンクが作れます。 詳しくは、リファレンスの【サイドコンテンツ要素】項目をご覧下さい。

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

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

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

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

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

全文検索ができる検索フォームには、検索語だけを単独で指定できる「単独検索窓」と、カテゴリや投稿年月等のオプションを指定して検索できる「複合検索窓」があります。 検索入力欄や検索ボタンはもちろん、複合検索窓の各種オプション項目にも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="◆">
    <input type="submit" value="検索" class="submitbutton">
  </span>
</form>

標準スキンでの検索窓の見え方

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

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

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

form要素に対して指定されているclass「searchbox」を使って装飾すると、この下で解説している「絞り込み検索用のチェックボックス」も含んだ領域を装飾することになりますのでご注意下さい。

標準スキン等では、検索窓の前に「■全文検索:」のような見出しが表示されています。これは、スキンHTML側に直接記述してあるテキストであって、CGI側が出力しているわけではありません。変更したい場合は、スキンHTMLソースを直接書き換えて下さい。

▼検索対象が限定されている場合に追加表示されるチェックボックスを含んだ出力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="◆">
    <input type="submit" value="検索" class="submitbutton">
  </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>

2つの条件で限定されている場合の検索窓

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

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

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

このオプションチェックボックス群を出力しているp要素には、class名として「searchtarget」と「limitedsearch」の2つが指定されています。 なぜ2つあるのかの理由は作者も忘れてしまいました。(^_^;) このclass名は、他の場所では(たぶん)使っていません。

▼複合検索窓の各部分を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">
    <input type="submit" value="検索" class="submitbutton">
  </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 { ~装飾~ }のように書くことで装飾できます。

検索オプション項目1つ1つに異なるclass名が割り振ってありますので、CSSを使って任意の項目を非表示にすることも可能ですが、 項目の表示/非表示の選択はスキンHTMLに記述する専用記法で指定(取捨選択)できます。このとき、各検索オプション項目の掲載順序も同時に指定できますから、スキンHTMLに専用記法で記述する方が便利です。 詳しくは、検索条件プルダウンメニューの取捨選択や掲載順序の指定項目をご覧下さい。

複合検索窓で検索オプション全体を囲んでいる要素のclass名は「searchoptions」ですが、 単独検索窓に条件次第で自動付加されるチェックボックスを囲んでいるlabel要素に付加されるclass名は「searchoption」です。 前者は複数形、後者は単数形でちょっと紛らわしいのでご注意下さい。

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

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

新着投稿リストの表示例

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

新着投稿リストの設定画面と反映例

表示上の仕様:
  • 投稿者に関係なく、新着順に指定個数がリストアップされます。
  • 日付限定・カテゴリ限定・ハッシュタグ限定などの表示状況に関係なく、全体を基準した新着順で常に表示されます。
  • タイトルとして採用されるのは、投稿本文の1行目だけです。1行目が空行だったり画像だけだった場合は、投稿番号が代わりに使われます。(ブログタイプスキンなどで採用されている方法と同じです。)

外側スキンに [[LATESTLIST]] と書いた箇所に挿入されます。外側スキン内に [[LATESTLIST]] の記述がなければ、どこにも表示されません。

リストアップされたデータは(表示速度向上のため)キャッシュされます。もし最新のデータが表示されない場合は、管理画面から「投稿の再カウント」を実行して下さい。

▼新着投稿リストの各部分を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>

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

  • タイトルリンク:.latestpostlist .postlink { ~装飾~ }
  • 投稿日付:.latestpostlist .postdate { ~装飾~ }
  • 投稿時刻:.latestpostlist .posttime { ~装飾~ }
  • 投稿者名:.latestpostlist .username { ~装飾~ }
  • 投稿者ID:.latestpostlist .userid { ~装飾~ }
  • 投稿番号:.latestpostlist .postid { ~装飾~ }
  • 文字数 :.latestpostlist .length { ~装飾~ }

ピンポイントで対象を特定するclass名の前に .latestpostlist を書いておかないと、新着投稿リスト以外の場所に存在する同種のclass名も装飾対象になってしまう可能性がある点にご注意下さい。

掲載内容の取捨選択や順序は、管理画面で設定した通りになります。上記の順序ではありません。

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

任意の記事番号へリンクする記法が下記の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 { ~装飾~ }

URLの自動リンク機能をOFFにしている場合でも、この機能はOFFにはなりませんのでご注意下さい。 これらの記法を有効にするかどうかは、管理画面の「設定」→「ページ設定」→「投稿本文の表示/テキスト」にある、「指定の投稿番号へリンクできる記法を許可」項目や、「書式「>>123」形式でのリンク記法も許可」項目で設定できます。

カテゴリツリーの装飾方法

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

カテゴリツリーの表示例

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

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

<ul class="cattree depth1">
   <li>
      <a href="?cat=info" class="catlink">情報</a><span class="num">(2)</span>
      <ul class="cattree depth2">
         <li>
            <a href="?cat=announce" class="catlink">お知らせ</a><span class="num">(4)</span>
         </li>
      </ul>
   </li>
   : : :

階層構造を作る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">カテゴリ名</a>
  • 集計数:<span class="num">(値)</span>

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

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

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

リンクや集計数を対象に装飾する場合は、ピンポイントで対象を特定するclass名の前に .cattree を書いておかないと、カテゴリツリー以外の場所に存在する同種のclass名も装飾対象になってしまう可能性がある点にご注意下さい。 特に .num は、ハッシュタグの集計数や、日付別の集計数でも使われています。

▼カテゴリの第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]] と記述した箇所に表示されます。 この記述は1つのスキン内で何度でも使えますから、「全階層を表示するツリー」と「第1階層だけを表示するリスト」とを1ページ内に同時に掲載することもできます。

各投稿に表示されるカテゴリ名の装飾方法

内側スキンに [[CATEGORYLINKS]] と記述した箇所に、その投稿が属するカテゴリがリンクの形式で列挙されます。

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

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

※所属カテゴリが1つだけの場合には、区切り記号は出力されません。
※所属カテゴリが1つもない場合(0個の場合)は、標準設定では何も出力されません。(設定で「なし」などの文字列を挿入することもできます。その際は、上記の「ない旨の表示」のマークアップで出力されます。「ない旨の表示」が出力される場合は、「カテゴリなし」だけに限定して表示されるURLへのリンクとして出力されます。)

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

  • カテゴリ名部分:.categorylink { ~装飾~ }
  • 区切り記号部分:.catseparator { ~装飾~ }
  • カテゴリなしの場合:.nocategory { ~装飾~ }(※ない旨を表示する設定の場合のみ)

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

  • カテゴリID「info」のカテゴリ名部分:.categorylink.cat-info { ~装飾~ }
  • カテゴリID「memo」のカテゴリ名部分:.categorylink.cat-memo { ~装飾~ }

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

リンクと区切り記号だけが出力されるので、内側スキンでは <span class="categories">[[CATEGORYLINKS]]</span> のように、カテゴリ全体を囲む要素を1つ用意しておく方が装飾しやすいでしょう。

標準スキンでは、カテゴリはカテゴリ単独でいきなり表示されるだけですが、例えば、『カテゴリ:』という接頭辞を置いてから所属カテゴリを列挙させたい場合もあるでしょう。 そのようなときには、「何のカテゴリにも属していない投稿」については「なし」のような文字列で明示したいでしょうから、そのように設定できる仕様にしてあります。

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

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

その際、マークアップは以下のようになります。

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

区切り記号のマークアップは(リンクにする場合と)同じですが、カテゴリ名のマークアップは使用要素とclass名が異なります。

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

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

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

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

この [[CATEGORYIDS]] の記述を使う場合は、管理画面で設定したカテゴリ区切り記号は使われません。常に半角空白文字で区切られます。

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

外側スキン内に [[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>
  • リスト内1項目の全体:<li class="count63"> ~ </li> (※数値部分は集計数に応じて変化します。)
  • ハッシュタグ1つのリンク:<a href="?tag=ハッシュタグ名" class="taglink" title="ハッシュタグ名">ハッシュタグ名</a>
  • そのハッシュタグの集計数:<span class="num">(集計数)</span>

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

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

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

リンクや集計数を対象に装飾する場合は、ピンポイントで対象を特定するclass名の前に .hashtaglist を書いておかないと、ハッシュタグリスト以外の場所に存在する同種のclass名も装飾対象になってしまう可能性がある点にご注意下さい。 特に .num は、カテゴリの集計数や、日付別の集計数でも使われています。

日付境界バーの装飾方法

表示条件が限定されていない状況では、(デフォルト設定では月が変わる度に)「日付境界バー」が出力されます。この日付境界バーは、設定で「年が変わる度に挿入」・「月が変わる度に挿入」・「日が変わる度に挿入」・「一切挿入しない」の4つの選択肢から選べます。 また、その範囲を逆順に表示するリンクや、エクスポートするリンクを表示することもできます。

この日付境界バーの表示形態は、管理画面の[設定]→[ページの表示]→【ページの表示/全体】で設定できるほか、見栄えはCSSで装飾できます。詳しくは以下で説明します。

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

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

日付境界バーのカスタマイズ方法と例

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

記号挿入内容挿入例または範囲備考
Y年 (西暦)2021
y年 (西暦下2桁)21
R年 (和暦:元号+年)令和3数字の桁数は不定
r年 (和暦:年のみ)3
M月 (2桁固定)01 ~ 121桁なら先頭に0を付加
G月 (1~2桁)1 ~ 121桁は1桁のまま
J月名(和暦)睦月 ~ 師走
E月名(英語)January ~ December
e月名(英略)Jan ~ Dec英字3文字
D日 (2桁固定)01 ~ 311桁なら先頭に0を付加
N日 (1~2桁)1 ~ 311桁は1桁のまま
W曜日(英語)Monday ~ Sunday
w曜日(英略)Mon ~ Sun英字3文字
B曜日(和名)月曜日 ~ 日曜日漢字3文字
b曜日(和略)月 ~ 日漢字1文字
h00 ~ 232桁固定
m00 ~ 59
s00 ~ 59

例えば、

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

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

上表にない文字は、その文字がそのまま出力されます。(※「<」記号や「>」記号もそのまま記号として表示されるため、HTMLは使えません。)
上表にない文字でも、半角英字に関しては今後の機能追加によって新たな挿入記号として使われる可能性がありますので、半角英字は「そのまま表示される」という前提では考えない方が無難です。

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

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

<p class="dateseparator">
   2021年8月
   <a href="?date=2021/08&amp;order=reverse">この範囲を時系列順で読む</a>
   <a href="?date=2021/08&amp;mode=export">この範囲をファイルに出力する</a>
</p>

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

p要素を使って出力されており、class名が付いているのはそのp要素1つだけです。したがって、以下のようなCSSで装飾ができます。

  • 日付境界バー全体の装飾:.dateseparator { ~ }
  • 日付境界バー内のリンクボタンの装飾:.dateseparator a { ~ }

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

先頭固定用の日付境界バーについては、先頭固定専用の日付境界バーをCSSで装飾する方法項目をご覧下さい。

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

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

日付一覧リストの表示例と、元々のHTMLとの差

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

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

<ul class="datelimitlist">
   <li class="datelimit-year">
      <a href="?date=2020" class="datelistlink ">2020年</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><span class="month">09月</span></a>
               <span class="num">(20)</span>
            </li>
            <li class="datelimit-month">
               <a href="?date=2020/08" class="datelistlink "><span class="year">2020年</span><span class="month">08月</span></a>
               <span class="num">(24)</span>
            </li>
            <li class="datelimit-month">
               <a href="?date=2020/07" class="datelistlink "><span class="year">2020年</span><span class="month">07月</span></a>
               <span class="num">(21)</span>
            </li>
            : : :

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

  • 日付一覧リスト全体(第1階層):<ul class="datelimitlist"> ~ </ul>
  • 月単位のリスト全体(第2階層):<ul class="datelimitsublist"> ~ </ul>
  • 年項目1つを作るli要素:<li class="datelimit-year"> ~ </li>
  • 月項目1つを作る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; } という記述を加えることで実現しています。

管理画面の「設定」→「ページの表示」→「日付リストの構成」区画にある「日付リストに年単独の階層を加える」チェックボックスのチェックを外すと、西暦単独の階層が出力されなくなります。(その場合は、「年月」だけの項目が並ぶ「1階層のリスト」として出力されます。)

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

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

日付一覧の「月」を2桁固定で表記するか、1~2桁で表記するかを選択できる機能

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

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

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

日付一覧リストの表示例と、元々のHTMLとの差

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

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

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

普通の日付境界バーは、以下のようなマークアップで出力されています。
<p class="dateseparator"> ~中身~ </p>

先頭固定専用の日付境界バーは、以下のようなマークアップで出力されています。
<p class="dateseparator fixedseparator">固定投稿</p>

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

ここには、通常の日付境界バーにあるような「この範囲を×××順で読む」や「この範囲をファイルに出力する」といった機能ボタンは(それらの設定に関係なく)表示されません。

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

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

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

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

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

内側スキン内に [[NEW]] の記述がない場合にはどこにも表示されませんので注意して下さい。 また、先頭に固定されている投稿が実際に投稿直後だったとしても、先頭に固定されている限りは(New!サインではなく)先頭固定ラベルが表示されます。

Ver 3.1.0より前の標準添付スキンのうち、「Twitterっぽいスキン(ブルー/ピンク)」には [[NEW]] の記述が含まれていませんでしたのでご注意下さい。 必要な場合は自力で書き足すか、もしくはVer 3.1.0以降の完全版ZIPに含まれているスキンと置き換えてご使用下さい。

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

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

※「それ以降のすべてを隠す」機能と、「指定範囲だけを隠す」機能の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 であることを前提に作られています。

もし、この隠された範囲の外側に inlnie として扱われている要素があるとき、この隠された範囲のスタイルを block にしてしまうと、表示が崩れてしまう可能性があります。その際は、inline-block で済まないか検討してみて下さい。

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

カ1投稿の単独表示時に見えるユーティリティリンク枠の設定

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

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

ユーティリティリンク枠全体は、以下のような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; }

「時系列順に見る」リンクの「時系列順」という表記は、管理画面の[設定]→[ページの表示]→【システムメッセージ・表示用語】→「表示順序を示す用語」項目で設定した名称が使われます。

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

例えば「単独投稿が表示されている場合」や「表示対象が特定のカテゴリに限定されている場合」などのように、『そのとき表示されている状況』に応じてページデザイン等の装飾を分けたい場合のために、「そのとき表示されている状況を示すキーワード」が出力される記法 [[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で(ページの状況に応じた)独自の装飾に使いやすいでしょう。

標準添付スキンでは、最初からこのように記述してあります。(Ver 3.2.0以降のみ)

  • HOMEページに居る場合: home
  • 何も表示が限定されていない状況: nofiltering
  • ユーザ名限定の表示時: selected-user user-ユーザID
  • カテゴリ限定の表示時: selected-cat cat-カテゴリID
  • ハッシュタグ限定の表示時: selected-tag tag-ハッシュタグ名(※パーセントエンコーディング形式)
  • 日付限定表示時: selected-date date-日付
  • 検索表示時: search-result
  • 投稿単独表示時: onelog log-投稿番号
  • 表示データが1件以上ある場合: hit
  • 表示データが1件もない場合: nohit
  • 1ページ目が表示されている場合: toppage (※全1ページの場合でも出力されます。投稿単独表示時には出力されません。)
  • 2ページ目以降が表示されている場合: deeppage (※2ページ目以降なら何ページ目でも全部これ。)
  • 逆順に表示している場合: reversed

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

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

「HOMEページ」は、同時に「1ページ目」でもあり「何も表示条件が限定されていない状況」でもありますから、 home は常に toppage と nofiltering も同時に出力されます。

▼装飾CSSの記述例:

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

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

複数スキンの共存カスタマイズ方法

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

完全版パッケージに添付されている「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でアクセスできるようになるはずです。

書式は「skin=スキンディレクトリ名」です。

管理画面の「スキンの切り替え」ボタンを押してスキン一覧を表示させた上で、「適用結果をプレビュー」リンクを押すと、上記のリンク先のようなURLが簡単に得られます。

▼STEP.3:必要に応じて、内部リンクの出力方法などの設定を調整する

本文中の内部リンクのリンク先として、以下の2点を設定できます。

  • どのスキンを適用したURLにリンクさせたいか(適用中のスキンを維持させたいのか、標準適用スキンを使った表示の方にリンクにしたいのか)
  • リンクを相対パスで出力するか、絶対URI(フルパス)で出力するか

どちらも、管理画面の「設定」→「ページ設定」→「投稿本文の表示/テキスト」区画の「テキストリンクの出力調整」項目内にチェックボックスがあります。

  • 適用中のスキンを維持したリンクを出力したい場合は、「一時適用中のスキンを維持できるリンクを出力する」にチェックを入れて下さい。(標準ではこちらが選択されています。)
  • 常にメインのスキンを適用するリンクを出力したい場合は、「一時適用中のスキンを維持できるリンクを出力する」からチェックを外して下さい。

もし、あるスキンを適用した結果をSSI等の方法で他のページに埋め込む場合は、内部リンクは絶対URIで出力しないとリンクが切れてしまう可能性があります。 その際には、「本文中のテキストリンクを絶対URI(フルパス)で出力する」にチェックを入れて下さい。

あるスキンの出力結果を別のページに埋め込む方法

お使いのWebサーバで、SSI(=Server Side Include)という記述方法が使えるなら、その仕組みを利用して、てがろぐCGIの出力をページ内に埋め込むことができます。 (SSIが使えない場合は、iframeを使うと似たような見た目を作ることはできます。)

具体的には、ブログ記事「てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法」をご参照下さい。 ここに記載している設定方法や注意点は、PHP等で埋め込む場合にも有効です。

そのうちもう少し詳しくまとめて解説したいとも思うのですが、基本的には上記のブログ記事に書いた内容がすべてです。(^_^;) ちょくちょく更新していますので、過去に1度読んだ場合でも覗いてみて下さい。

スキン単位ではなく、てがろぐCGIそのものを複数個設置して共存させたい場合の方法は、セットアップ(設置)方法ページのCGIを複数個設置して併用する方法をご参照下さい。

てがろぐ管理画面のカスタマイズ方法

各種設定などの操作を行う管理画面にも、少しだけカスタマイズの余地を用意しています。

新規投稿/編集画面に自由な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)と同じディレクトリに置いて下さい。それ以外の場所・それ以外のファイル名では読み込まれません。両方必要なわけではなく、どちらか片方だけでも構いません。(存在するファイルだけが読み込まれます。)

edit.css や edit.js に記述する内容によっては、画面表示が崩れたり正しく投稿できなくなったりする可能性がありますので、ファイルを作成する際には充分ご注意下さい。

▼編集画面カスタマイズのための参考情報

管理画面上の投稿欄(新規投稿/編集画面)は、以下のようなHTMLで生成されています。(※QUICKPOSTではid属性値が異なります。)

  • 投稿フォーム全体は、<form class="postform" ...>~</form>で囲まれています。
  • 投稿編集領域(テキストエリア)は、<textarea class="tegalogpost" name="comment" id="tegalogpostSYS" ...>(中身)</textarea>で生成されています。
  • 投稿ボタンから装飾ボタン等の一連のボタン空間は、<p class="line-control">~</p>で囲まれています。
  • 投稿ボタンは、<input type="submit" class="postbutton" value="投稿する" id="tegalogsubmitSYS" ...>のようなinput要素で出力されています。(文字列は設定によって異なる可能性があります。)

そのほか詳しくは、編集画面のHTMLソースを表示させて、<!-- 投稿フォーム(SYS) -->から<!-- 投稿フォーム(SYS)ここまで -->までの領域のソースをご参照下さい。 この範囲内には装飾ボタン等で使われるJavaScriptソースも含まれています。自力でJavaScriptを加える場合は、関数名や変数名が重複しないようご注意下さい。

※CSSもJavaScriptも、head要素の最後で読み込まれます。
※edit.cssは、内蔵CSSソースよりも後で読み込まれるため、何でも上書きができます。直接edit.cssにCSSを書くほか、既存のCSSを読み込みたいなら @import の書式を使って読み込むと良いでしょう。
※edit.jsは、head要素内で読み込まれるため、編集領域など(body要素内に存在する何か)に対して操作を加えたい場合は、ページの読み込み完了を待ってから処理が実行されるように書かないと機能しない点にご注意下さい。 もし既存のJavaScriptファイルを読み込みたいなら、例えば var altjs = document.createElement('script'); altjs.src = "other.js"; document.head.appendChild(altjs); などのように書くことで other.js ファイルを読み込めます。必要なだけ列挙すれば良いでしょう。

その他

FAQ・Tips(活用豆知識)・トラブルシューティングを見る

てがろぐCGIに関するFAQ・Tips(活用豆知識)は、FAQ・豆知識ページにまとめてありますのでご覧下さい。

てがろぐ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表記を非表示にできます。

ライセンスについて詳しくは、お気軽にお問い合わせ下さい。

企業サイト等の商用目的でお使いになる場合でも、Powerd-by表記を表示して運営なさる場合は、無償でお使い頂けます。
てがろぐCGIの使用条件については、CGI使用条件(ライセンス)項目もご参照下さい。

「このCGIについて」枠の表示制限

ライセンスを取得している場合に、管理画面HOME右上に見える「このCGIについて」枠の一部または全部を非表示にできる機能もあります(Ver 3.4.0以降)

てがろぐCGIにおける「ライセンス」とは、先の項目「著作権表示とPowered-by表記について」で示したように「Powered-by表記」を非表示にして使用できる権利のことです。 そういう場合、たいていはビジネス用途で活用していたり、客先サーバにセットアップして納品している場合がよくあります。 その場合、管理画面のTOPに「作者にコーヒーをおごる」等のリンクはあまり表示したくないでしょう。(^_^;) なので、ライセンスが取得されているなら、下図のようにこの「このCGIについて」枠の一部または全部の表示を削減できる機能を用意しています。

左端①がデフォルトの状態(ライセンスをご取得頂いていないフリー版でご使用なら、常にこの表示)です。中央②、右端③の表示のほか、完全に非表示④に設定することもできます。

設定項目は、ライセンスをご取得頂いた際にご案内した「Powered-by表記の非表示化方法」と同じ場所にあります。(ご不明な場合はお問い合わせ下さい。)

法人向けのカスタマイズサービス

「てがろぐ」を御社サイトのニュースリリース案内枠などに使ってみませんか?

「てがろぐ」は単独ページを生成するだけでなく、既存ページの内部に埋め込むこともできます
既に複数のウェブサイトでご活用頂いています。

ご依頼頂ければ、Powered-by表記を非表示にして使える永久ライセンスとセットにして、セットアップや設定を致します。
そのほか、御社サイトデザインに合わせたスキンの製作や、CGIソースそのもののカスタマイズも承ります。
詳しくは、お気軽にお問い合わせ下さい。

Last modified: 2021/09/09 23:57:00

--- 当サイト内を検索 ---