ウェブデザインとプログラムのナインマイルズ

s9yドキュメント

スタイル

  1. このセクションのオリジナルドキュメント
  2. ..（テクニカルドキュメント）
  3. スタイルを適用する
  4. テンプレート、スタイル、テーマ…？
  5. スタイルの作成
  6. 利用可能なスタイルのidとclass
  7. 多すぎる！
  8. 全ての問題、全ての楽しみなど、もっと知りたい！
  9. 貢献！

スタイルを適用する

スタイルはブログがユーザーにどう表示されるのかを決めるものです。
Serendipityにはいくつかのテーマが同梱されており、カスケーディングスタイルシート (CSS) に基づいているので、カスタマイズも簡単です。

あなたのブログの見た目を選ぶには、管理スイートにアクセスしスタイル管理をクリックします。
そこに既存テンプレートの概要一覧が表示されます。 テーマの作者とたぶん小さなスクリーンショットも表示されるはずです。 適用させたいスタイルの横にある設定用のボタンをクリックすれば保存されます。 次にページをリロードすれば、ブログはあなたが希望したレイアウトで表示されるでしょう。

もしブログの見た目をどうするかを訪問者に任せたいのなら、テンプレートドロップダウンサイドバープラグインの利用を検討してください。

テンプレート、スタイル、テーマ…？

ええ、わかっています、私たちは間違いなく用語の統一に取り組む必要があります。
私たちは今のところ、テンプレートについて全部で3つの用語を使っていて、スタイルとテーマは実際のところ同じことを指しています。 それらに違いは無く、開発者によって違う用語を使っているだけです。

スタイルの作成

自作スタイルを作るのはとても簡単です。 利用可能な全スタイルはs9yのtemplatesサブディレクトリに保存されています。 各々のスタイルがそこに自身のサブディレクトリを持っています。

新しいスタイルを作成するには、既存のサブディレクトリを新しいディレクトリにコピーしてから、そのファイルをカスタマイズするのがお勧めです。 もしあなたのテーマが今一だったら、Serendipityではいつでもデフォルトのテンプレートファイルに戻せます。
あなたのテンプレートの見た目にとって不要なコードはそのままにしておいて、カスタマイズに必要なファイルだけを修正するようにしてください。

フロントエンドにはSmartyテンプレートだけが利用できます。
管理者インターフェイスの見た目は、CSSによってのみ影響を受けます。
これは主に、テンプレートを用いて管理者インタフェースを改良するのはかなり困難であり、メインテナンスにおいてより多くのオーバーヘッドが出てくるためです。
また、そうすると性能に悪影響が出ますし、こうしておけばサーバでSmartyアプリケーションによるトラブルが生じた場合にでも、管理者インターフェイスを利用するチャンスは残ります。

各々のスタイルのサブディレクトリ内には、次のような様々なファイルが存在します：

CSSファイルの作成

最も重要なのは、あなたのページの見た目を即座に決めることになるCSSファイルです。

style.css、admin/atyle.css、admin/pluginmanager.css

このスタイルシートは、あなたのブログのフロントエンドとバックエンド、両方のページための全てのCSS定義を含んでいます。

atom.css

このスタイルシートは、ユーザーがAtomを選んだ際のRSS/XML配信用リンクに適用されます。 XMLディレクティブに適用されるいくつかの要素だけに部分利用されます。

htmlarea.css

エントリ作成にWYSIWYGエディタを使っている場合、そのエリアをブログの見た目に合わせたくなると思います。 エリアの見た目を変えるために、このファイルの中の全てのCSSクラスを変更可能です。

info.txt の作成

このファイルの中にあなたのクレジットを挿入できます。
クレジットはs9yのバックエンドで表示されます。

preview.png の作成

テンプレートの見た目が簡単にわかるように、後でレイアウトの小さなスクリーンショットを作って、preview.png ファイルとして保存すべきです。

dragdrop.js、imgedit.js、treeview/、YahooUI/ の作成

これらのファイルは、メディアデータベース表示でドラッグ&ドロップ機能を利用するために、YAHOO UI 用の部品として同梱されています。

layout.php

この layout.php ファイルはSerendipity 0.8以前用の非推薦のものです。 当時はまだSmarty機能がありませんでした。
raw/backwards compatibility mode内に挿入すれば ※、layout.phpの仕組みはまだ利用可能です。
(※訳者注：既に旧バージョンのファイルを持っていないので、何のことかよくわかりません。)

基本的に、あなたはこれらのlayout.phpファイルを編集する必要はありません。
これらはもはや必要ではなく、今はほとんどのことを個別のSmartyの .tplファイルで行います。
layout.phpがあなたのテーマにもたらす唯一の利点は、ページの「ワークフロー」を制御するために、このファイルでPHPコードを使えることくらいです。 このようなファイルの例は /templates/newspaper/layout.phpで見ることができますが、これ以上その部分を理解する必要は本当にありません。

Smarty*.tpl ファイルの編集

HTML表示とプログラムロジック用のSmartyテンプレートコードを持ったさまざまな *.tplファイルがあります。

様々な変数については、このドキュメントの該当ページかチュートリアルを参照きてください。

commentform.tpl

このファイルは、訪問者があなたのエントリにコメントする際のコメントフォームの見た目を制御します。

commentpopup.tpl

オプションであるコメントポップアップウィンドウの、基本的なHTMLレイアウトを制御します。

comments.tpl, trackbacks.tpl

エントリーへの利用可能なコメントとトラックバックを表示します。

comments_by_author.tpl

訪問者によるコメントが表示される機能のレイアウトを制御します。

content.tpl

コンテントエリアを制御するマスターテンプレートです。 ページのタイプ (エントリの概要、検索、アーカイブなど) によって異なったメッセージを出力します。

entries_archives.tpl

エントリのアーカイブ (月毎・年毎) の表示を制御します。

entries_summary.tpl

エントリのアーカイブ (月毎・年毎) の概要を表示します。

feed_*.tpl

このファイルは色々なRSS/ATOMフィードのテンプレートファイルを制御します。
ここでこれらフィードにカスタマイズを加えることができます。

index.tpl

あなたのブログの見た目全体だけでなく、HTMLヘッダやメタタグ、CSSの埋め込みやサイドバーの配置なども制御するためのメインテンプレートファイルです。

entries.tpl

これはメインとなるロジック用のファイルです。
エントリの概要をどう形成するか、エントリをどう繋げていくか、コメントフォームをどこに表示するかなどをSerendipityに指示します。

plugin_calendar.tpl, plugin_categories.tpl

いくつかのプラグインはそれ自体のテンプレート化が可能です。
それらのファイルは plugin_ というファイル名で始まっており、ある特定のプラグインと共に動作することもできます。
あなたのテンプレートディレクトリにそれらのファイルを入れると、そのプラグインの外観はあなたのテーマに合わせてカスタマイズされるでしょう。
同梱プラグインのために標準で利用可能なファイルは、カレンダーとサイドバープラグインのためのものです。 ただし、最初にそれらのプラグイン設定において、テンプレート適用を有効にする必要があります。

preview_iframe.tpl

管理者インターフェイスでエントリのプレビューを作成する時、このファイルがプレビューを保持しているiframeの基本的な見た目を制御します。 プレビューの見た目が変だったり、表示されない時はこのファイルを調整する必要があります。

サイドバープラグインのリストをどのように表示するかを制御します。

config.inc.php

このマスターPHPファイルは、あなたのテーマ内で利用可能なオプションを、PHPコードを用いてカスタマイズできます。

活用方法については次のドキュメントをチェックしてください：
Smarty特有のテンプレート操作・プラグインの機能、 テーマオプションの構造

メディアマネージャーのスタイル

メディアマネージャーはSmartyでカスタマイズできるただ一つの管理者インターフェイスパートです。

あなたのテーマの中の admin/サブディレクトリにファイルがあります。

media_choose.tpl

メディアマネージャーのポップアップウィンドウのメインテンプレートファイルです。

media_items.tpl

メディアデータベース内で特定アイテムを表示させるロジックです。

media_pane.tpl

メディアデータベースの概要のヘッダとフッタ部分です。

media_properties.tpl

選択したアイテムのプロパティ (キーワード、EXIF情報など) を表示するページです。

media_showitem.tpl

ブログのフロントエンドで訪問者にイメージを表示するときに使用されます。

media_upload.tpl

一つまたは複数の画像をアップロードする際のテンプレートファイルです。

media_imgedit.tpl, media_imgedit_done.tpl, imgedit.css

画像を編集する際に責任を負うファイルです。
現在まだ開発途中です。

画像の作成

あなたのテンプレートディレクトリの imgサブディレクトリに、一般的な画像の一覧を配置できます：

back.png

この画像はカレンダープラグインの戻る矢印に使用されます。

forward.png

この画像はカレンダープラグインの進む矢印に使用されます。

xml.gif

この画像は (RSS配信やカテゴリプラグインのように) XMLファイルへのリンクを示すのに使用されます。

cry_smile.gif, embaressed_smile.gif, omg_smile.gif, regular_smile.gif, sad_smile.gif, shades_smile.gif, teeth_smile.gif, tounge_smile.gif, wink_smile.gif

テキストの顔文字をグラフィカルな表示に変えるのため、感情表現プラグインによって使用される様々な顔文字です。

テーマにおいて顔文字を自作画像でカスタマイズする場合、emoticons.inc.phpファイルをテンプレートディレクトリに置いて以下のような配列を使ってください： 

<?php
$serendipity['custom_emoticons'] = array(
    ":'(" =< serendipity_getTemplateFile('img/cry_smile.gif'),
    ':-)' =< serendipity_getTemplateFile('img/regular_smile.gif'),
    ':-O' =< serendipity_getTemplateFile('img/embaressed_smile.gif'),
    ':O' =< serendipity_getTemplateFile('img/embaressed_smile.gif'),
    ...
    );
?>

これでplugins/serendipity_event_emoticate/serendipity_event_emoticate.phpに書かれた顔文字の標準リストが上書きされるので、あなたが自分のテンプレートのために作ったものが利用できます。

利用可能なスタイルのidとclass

全般的に使用されるHTMLの要素

ページの見出しには<h1>要素を、小見出しには<h2>要素を使います。 <h3>要素はエントリの日付に、<h4>要素は各エントリのタイトルに使われます。

サイドバープラグインでは、あなたのlayout.phpによりますが、<table>または<div>コンテナのどちらかが使われ、それらに応じて内包するセルに<td>か<div>がまた使われます。

その他全てのHTML要素は、クラスまたはIDを持った周囲の要素との関係に応じてスタイル付けが可能です。

.emoticon

感情表現マークアッププラグインで生成される顔文字画像用のクラスです。

ページ最上部のエリアで、ブログのタイトル (<h1>) と概要 (<h2>) を含みます。

ブログのタイトル(<h1>) と概要 (<h2>) を囲むリンクアンカー要素です。

.serendipity_calendar

カレンダープラグインのテーブル (<td>と<tr>を含有) 囲みです。

td.serendipity_weekDayName, td.serendipity_calendarHeader

曜日または見出しを含むセルです。

td.serendipity_calendarBlankDayFirstInRow, td.serendipity_calendarDayFirstInRow, td.serendipity_calendarBlankDay, td.calendarDay, td.serendipity_calendarBlankDayLastInRow, td.serendipity_calendarDayLastInRow

(空の) 日付部分です。

#mainpane

ここにサイドバーを含むSerendipityのメインコンテンツが含まれます。

#content

Serendipityのエントリ一覧が含まれます。

#serendipityLeftSideBar

左サイドバー領域が全て含まれます。

#serendipityRightSideBar

右サイドバー領域が全て含まれます。

.serendipitySideBarItem

左サイドバーまたは右サイドバーの項目内で、各プラグインを囲むブロックです。

h3.serendipitySideBarTitle

serendipitySideBarItemの項目内の、各サイドバープラグイン構成パーツのタイトル部分です。

.serendipitySideBarContent

serendipitySideBarItemの項目内の、各サイドバープラグイン構成パーツのコンテンツ部分です。

.serendipity_Entry_Date

1日分の全記事を囲むラッパーです。

h3.serendipity_date

日付表示部分の見出しです。

h4.serendipity_title

各エントリのタイトルです。

.serendipity_entry

全ての記事コンテンツを囲むラッパーです。

.serendipity_entry_body_folded

記事の先行表示を囲むラッパーです。
記事の詳細表示の時ではなく、概要表示の時にだけ利用されます。

.serendipity_entry_body_unfolded

記事の先行表示を囲むラッパーです。
記事の概要表示の時ではなく、詳細表示の時にだけ利用されます。

.serendipity_entry_extended

記事の拡張テキストを囲むラッパーです。
記事の詳細表示の時にだけ利用されます。

.serendipity_entryFooter

serendipity_entryに内包されており、投稿者についての詳細情報 (投稿日、名前など) を囲む部分です。

.serendipity_commentsTitle

以下のコメント部分のタイトルです。

.serendipity_comment

記事の詳細表示の中のコメント部分です (コメントごとの囲み)。

.serendipity_comment_source

コメントをした人についての詳細情報を囲みます。

.serendipityCommentForm

コメント入力フォームの周りを囲みます。

.serendipity_commentsLabel

コメント投稿箇所の、入力フォームの各項目タイトルを囲むspanタグ部分です。

.serendipity_commentsValue

コメント投稿箇所の、入力フォームの各入力部分を囲むspanタグ部分です。

#serendipity_comment_page

コメントポップアップ表示時の全体の囲みです。

.serendipity_imageComment_center, .serendipity_imageComment_left, .serendipity_imageComment_right

s9yイメージマネージャーで提供されるコメントへの画像投稿を利用する際、.serendipity_entry内で全てのコメントボックスを囲みます。

.serendipity_imageComment_img, .serendipity_imageComment_txt

The nested parts within .serendipity_imageComment_* to seperate comment from the actual image.

#serendipity_admin_entries_page, #serendipity_admin_image_page, #serendipity_admin_page

バックエンド： 管理スイート、イメージマネージャーのページエリア全てを囲みます。

.serendipity_Admin_title

バックエンド： バックエンドでのタイトル部分です。

.serendipity_Admin

バックエンド： コンテンツエリアです。

多すぎる！

これらのIDとクラスを用いた組み合わせやバリエーションの可能性はかなりありますが、いざCSSを扱おうとするとすぐに混乱してしまうでしょう。
Mozilla Firefoxes EditCSSを試してみてください。
本当は簡単なことなんだと分かると思います！

全ての問題、全ての楽しみなど、もっと知りたい！

このページは、あなたのブログを作り上げるためのSmaryとHTMLのコードをわかりやすく説明しているだけのものです。

HTMLによる独特なページ表現やナビゲーションのアイテム、カスタマイズされた機能性など、さらなる機能が欲しいのなら、とても強力なSerendipityのプラグインAPIやイベントフックについて自分自身で精通していく必要があるでしょう。

または、スパルタカスリポジトリにある全てのプラグインとテーマに目を通してください。

貢献！

ご自分のスタイルが完成したら、貢献していただけますか？ :-)

Serendipity