「てがろぐ」では、表示用のスキンファイル(=テンプレート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で記述することを前提にしています。
HTML4以下の文法で書いても大丈夫ですが、XHTMLで書いてしまうとブラウザがエラーを出すケースがあります。
特に、外側スキンファイルをXML宣言で書き始めてしまうと、text/htmlではなくapplication/xmlのヘッダで出力してしまうため、ウェブページとして表示されない可能性がありますのでご注意下さい。
どうしてもXHTMLで書きたい場合は、ファイル先頭の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内に、[[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内に、[[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スキン内で何回でも記述できます。)
- HTML内に、[[CALENDAR]] と記述すると、その位置に1ヶ月分のカレンダーが挿入されます。(1スキン内で何回でも記述できます。)
カレンダーは、「そのページで表示されている最新投稿の日付が属する月」のカレンダーが自動的に表示されます。
単独投稿ページの場合は、その投稿月のカレンダーが表示されます。
表示できる投稿がない状況では現在月のカレンダーが表示されます。
カレンダー内の日付リンクをクリックすると、その日に投稿されたすべての投稿が表示されます。
Ver 3.1.0以降なら、カレンダーの最上行に曜日を表示するかどうかが選べます。設定は、管理画面の[設定]→[ページの表示]→[カレンダーの表示]からできます。
詳しくは、「カレンダー表示の装飾方法」内の「カレンダーの曜日文字を変更する方法」項目をご覧下さい。
- HTML内に、[[LATESTLIST]] と記述すると、その位置に新着投稿リストが挿入されます。(1スキン内で何回でも記述できます。)
※表示件数や表示情報は管理画面で設定できます。
【検索窓・汎用要素・その他】
- HTML内に、[[SEARCHBOX]] と記述すると、その位置に検索窓が挿入されます。標準では全投稿を対象に全文検索しますが、ユーザ別表示時やハッシュタグ別表示時など表示条件が制限されている状況では、その条件に限定した範囲内で全文検索ができるチェックボックスが追加表示されます(この機能は管理画面の「設定」で無効にも設定できます)。Ver 2.5.0以降なら、検索語には空白文字で区切ることで複数の単語を指定できます。(1スキン内で何回でも記述できます。)
- 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/01/11 04:53:00」形式で挿入されます。
- HTML内に、[[DATE:●●●]] と記述すると、その位置に投稿の日付が指定の形式で挿入されます。
- 「●●●」の部分には任意の文字列を指定でき、
Y=年、
M=月(数値)、
J=月名(和暦:睦月~師走)、
E=月名(英語:January~December)、
e=月名(英略:Jan~Dec)、
D=日、
W=曜日(英表記)、
w=曜日(英略表記)、
B=曜日(和表記)、
b=曜日(和略表記)、
h=時、
m=分、
s=秒
のように解釈されます。取捨選択も掲載順序も自由です。同じ文字を何度も使えます。大文字・小文字は区別するので注意して下さい。それ以外の文字はそのまま出力されます。
- 例えば、[[DATE:Y年M月D日(w) h:m:s]] と記述すると、「2021年01月11日(Mon) 04:53:00」の形式で挿入されます。
- 例えば、[[DATE:Y/M/D W h:m]] と記述すると、「2021/01/11 Monday 04:53」の形式で挿入されます。
- 例えば、[[DATE:w, D e Y h:m:s]] と記述すると、「Mon, 11 Jan 2021 04:53:00」の形式で挿入されます。
- 例えば、[[DATE:M月(J)のD日]] と記述すると、「6月(水無月)の08日」の形式で挿入されます。
- 例えば、[[DATE:B h時m分]] と記述すると、「火曜日 17時55分」の形式で挿入されます。
【投稿本文関連要素(基本)】
- HTML内に、[[LENGTH]] と記述すると、その位置に投稿本文の文字数が挿入されます。改行も1文字にカウントされます。文字コードによっては正しくカウントできない場合があります。(※文字実体参照などで絵文字や特殊記号を使った場合は、若干多めにカウントされてしまいます。) 任意の文字列でリンクを作った場合、URL自体はカウントされません(見えている文字だけがカウントされます)。
編集画面内でリアルタイムにカウントされる文字数は、実際に入力した文字数が表示されています。そのため、装飾用途の記号や、リンク先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内に、[[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フィードの出力ができます。
標準では、てがろぐCGI本体内蔵の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フィード用スキンを置いた場合でも、スキンの先頭がXML宣言で始まってさえいれば(XML用のヘッダが出力されるため)RSSフィードとして使うことは可能です。(URLは、「?skin=スキン名」になります。)
ただし、上記のような設定の自動調整は行われないため、設定によってはXMLとして正しくない(もしくは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で出力。
- 画像出力の省略時に「(画像省略)」とは出力しない。
日付境界バーは出力するかどうかなど、いくつかの設定は管理画面から変更できます。
ログインされている場合にだけ表示されるようにしたい場合
スキン内に自由に記述した何かに対して、ログインされている状況でのみ表示させ、ログインされていない状況では非表示にしたい場合は、その要素(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つが成立している必要があります。)
-
例えば、標準スキンの skin-onelog.html には、編集ボタンを作るためのHTMLとして以下のソースが記述されています。
<a href="[[EDITURL]]" title="No.[[POSTID]]を編集します。">編集</a>
-
この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:番号]]
※この仕様は副作用みたいなものなので、将来的に廃止されるかもしれません。
ページ内リンクを作れる [[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疑似要素」を使う方法もあります。
てがろぐ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 { ~装飾~ }
ページ番号の途中が省略されない場合は、省略記号はどこにも表示されません。
▼ページナビゲーション領域の外側
ページナビゲーション領域の外側(枠線や背景色など)については、外側スキン 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以降のみです。(曜日行は非表示にも設定できますし、曜日の文字は設定から自由に変更できます。)
その時点で表示されている最新投稿の日付が属する月のカレンダーが自動的に表示されます。
単独投稿ページの場合は、その投稿月のカレンダーが表示されます。表示できる投稿がない状況では現在月のカレンダーが表示されます。
外側スキンに [[CALENDAR]] と書いた箇所にカレンダーが挿入されます。外側スキン内に [[CALENDAR]] の記述がなければ、カレンダーはどこにも表示されません。
カレンダーが不要なら、外側スキンから [[CALENDAR]] の記述自体を削除しておく方が、動作は軽くなります。
▼カレンダーの各部分をCSSで細かく装飾する方法
カレンダー全体は、以下のようなHTMLとして出力されています。(※2020年9月の例。曜日行を表示する設定の場合。)
<table class="calendar year2020 month09">
<caption>2020年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で出力されています。
- 日付のないマス目:
<td class="empty"></td>
- 投稿のない日(例:9月1日):
<td class="day1"><span class="nolink">1</span></td>
- 投稿のある日(例:9月5日):
<td class="day5"><a href="?date=2020/09/05">5</a></td>
- 今日の日付で投稿がない場合 (例:9月14日):
<td class="day14 today"><span class="nolink">14</span></td>
- 今日の日付で投稿がある場合 (例:9月24日):
<td class="day24 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がない状況では、カレンダーは何も装飾されません。
現時点では、カレンダーに関して設定できる項目はありません。前後の月へ移動するリンクを出力する機能は(今のところは)ありません。そのうち作ります。
▼カレンダーの曜日文字を変更する方法
カレンダーに表示される曜日行については、図のように、
管理画面の[設定]→[ページの表示]→[カレンダーの表示]で設定できます。
チェックボックスをOFFにすると、カレンダーの曜日行は省略されます。この場合、thead要素自体が出力されなくなります。
曜日として表示する文字数に制限はありませんが、多く書きすぎるとカレンダーの表(テーブル)が崩れる可能性が高まりますのでご注意下さい。
新着投稿リストの装飾方法
最新の投稿から指定本数の先頭数文字をリストで掲載できる機能があります。
長文記事を投稿してブログ的に使っている場合に「新着リスト」などとしてご活用頂くことを想定した機能です。
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)はボタンクリックで簡単に入力する方法も用意されています。(ボタンは投稿欄の下部にデフォルトで表示されますが、設定で表示させなくすることも可能です。)
- 本文中に
[>123]
と記述すると、投稿No.123の単独ページへ「123」というリンク文字でリンクになります。
- 本文中に
[>1357:ラベル]
と記述すると、投稿No.1357の単独ページへ「ラベル」というリンク文字を使ってリンクできます。
- 本文中に
>>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">カテゴリ名</a>
- 区切り記号:
<span class="catseparator">区切り記号</span>
- カテゴリがない場合で、ない旨を表示する設定の場合:
<span class="nocategory">ない旨の表示</span>
- カテゴリがない場合で、ない旨を表示しない設定の場合:(何も出力されません)
※所属カテゴリが1つだけの場合には、区切り記号は出力されません。
※所属カテゴリが1つもない場合(0個の場合)は、標準設定では何も出力されません。(設定で「なし」などの文字列を挿入することもできます。その際は、上記の「ない旨の表示」のマークアップで出力されます。)
したがって、以下のようなCSSを書けば、各部分を個別に装飾できます。
- カテゴリ名部分:
.categorylink { ~装飾~ }
- 区切り記号部分:
.catseparator { ~装飾~ }
- カテゴリなしの場合:
.nocategory { ~装飾~ }
(※ない旨を表示する設定の場合のみ)
区切りに使われる記号は、標準では半角カンマ「,」ですが、管理画面の「設定」→「ページ設定」→「カテゴリの表示」から自由に設定できます。
また、所属カテゴリが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
は、カテゴリの集計数や、日付別の集計数でも使われています。
日付一覧リストの装飾方法
外側スキン内に [[DATEBOX:LIST]] を記述した箇所には、日付リンクの一覧がリスト形式で挿入されます。
どのように表示されるかはスキン次第ですが、標準スキンでは下図の左側のように見えます。(HTMLでは西暦と月が同時に出力されていますが、CSSで西暦を非表示にして横並びに配置しています。)
▼日付一覧リストの各部分を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階層のリスト」として出力されます。)
先頭固定の装飾方法 (Ver 3.1.0以降)
先頭固定機能では、指定した投稿が指定した順序で先頭に固定表示されます。その際、設定次第では「先頭に固定された投稿であることを示すラベル」と「固定投稿専用の日付境界バー」を表示できます。
それぞれの設定箇所は、管理画面の[ページの表示]→[先頭に固定する投稿]欄で下図の通りです。
上図の右側は、標準添付スキンのうちの「標準スキン」を使った場合の表示例です。
実際にどのように表示されるかは、お使いのスキン次第で変わります。
▼先頭固定専用の日付境界バーを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に含まれているスキンと置き換えてご使用下さい。