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

s9yドキュメント

デフォルトテーマのスタイルシート

  1. このセクションのオリジナルドキュメント
  2. ..(テクニカルドキュメント)

このページはSerendipity標準テーマを再編集し、コメントを追加したものです。
スタイルは以下のグループの中に再編成されました:general, header, footer, entry, comments, commentform, sidebar, calendar, image media

全般的なスタイル

h4,h3 {
    margin: 0; }

説明:エントリとサイドバーのタイトルに使用される。

input, textarea {
    font-size: 10pt;
    font-family: verdana, arial, helvetica, sans-serif; }

説明:フォーム内の入力ボックスに使用される。

th, td {
    font-size: 10pt; }

説明:全ての表組みのヘッダと列。

p, td, th, div, span {
    font-family: verdana, arial, helvetica, sans-serif; }

説明:テーマ内のフォントタイプに使用される。

a:link, a:visited, a:active {
     color: #003366;
     text-decoration: underline; }

説明:全てのリンクは青でアンダーラインがつく。

a:hover {
     color: #000000;
     text-decoration: underline; }

説明:マウスホバー時はリンクの色を黒にする。

.serendipity_center {
     margin-left: auto;
     margin-right: auto;
     text-align: center; }

説明:何らかの要素を中央に置きたい時に使用される。 margin:auto は (例えばdivなどの) ブロック要素をそのブロックの幅に合わせるために使われる。
この際、ブロックはその親ブロックに対して相対的にセンタリングされる。
text-align: center もまた、ブロックの中央にテキストを揃える。
この代替案として margin-left:0; text-align:center; を組み入れることもでき、これはブロックをその親ブロック内の左端に置くことになるが、テキストは中央揃えのままとなる。

.serendipity_msg_important {
     color: red; } 

説明:s9yからの警告メッセージ。

.serendipity_msg_notice {
     color: green; }

説明:例えば「コメントが保存されました」のように、何らかの動きが発生したことをあなたに知らせるメッセージ。

構造スタイル

body {
     font-size: 10pt;
     margin: 0;
     background-color: #D2DFF2;
     font-size: 10px;
     font-family: verdana, arial, helvetica, sans-serif;
     margin-bottom: 30px;}

説明:他に上書きされた設定が一切無い場合の、ブログ全体に対するプリセットスタイル。 ページフッタもここで決まる。

#serendipity_banner {
     margin: auto;
     width: 100%;
     height: 72px;
     background-image: url({TEMPLATE_PATH}img/background.png);}

説明:バナー部用のコンテナ。

#mainpane {
     border-bottom: 1px solid #000000;
     margin: auto;
     width: 100%;
     border-top: 0px;
     background-color: #FFFFFF;
     border-top: 1px solid #000000;}

説明:コンテンツとサイドバー用のコンテナ。

#content {
     padding: 10px;
     margin: 10px;
     width: auto;}

説明:エントリカラム用のコンテナ。

#serendipityRightSideBar {
     width: 170px;
     border-left: 1px dashed #000000;
     padding: 10px;
     vertical-align: top;}

説明:右サイドバー用のコンテナ。

#serendipityLeftSideBar {
     width: 170px;
     border-right: 1px dashed #000000;
     padding: 10px;
     vertical-align: top;}

説明:左サイドバー用のコンテナ。

ヘッダとバナーのスタイル

a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
     color: #FFFFFF;
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size : 20px;
     padding-left:15px;
     padding-top: 10px;
     margin: 0px;
     text-decoration: none;}

説明:バナー部の大きなリンク (ブログの名称とエントリのタイトル)。

a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
     color: #FFFFFF;
     padding-left: 15px;
     font-size: 14px;
     margin: 0px;
     text-decoration: none;}

説明:バナー部の小さめのリンク (ブログの概要)。

エントリのスタイル

.serendipity_Entry_Date {
     margin: auto;}

説明:エントリタイトルと日付用のコンテナ。

.serendipity_date {
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: large;
     color: #333333;
     margin: 0;
     margin-top: 20px;
     text-align: right;}

説明:エントリタイトル下の日付のスタイル。

.serendipity_title {
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: medium;
     font-weight: bold;
     margin-top: 10px;
     color: #333333;
     padding-left: 5px;
     border-bottom: 2px solid #36558C;}

説明:エントリタイトル。

.serendipity_title a:link, .serendipity_title a:visited {
     text-decoration: none;
     border: 0;
     color: #000000;}

説明:エントリタイトルのリンクで、標準色は黒。

.serendipity_title a:hover {
     color: #FF0000;}

説明:マウスホバー時のエントリタイトルのリンクで、色は赤になる。

.serendipity_entry {
     font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
     color: #333333;
     font-size: 9.5pt;
     font-weight: normal;
     padding-right: 10px;
     width: 95%;
     margin: auto;
     margin-top: 10px;}

説明:エントリ及び投稿用のコンテナ。

.serendipity_entry p {
     margin: 0px;
     padding-bottom: 0px;}

説明:エントリのテキストに使われる追加スタイル。

.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
     }

説明:標準テーマでは使われないが、エントリ全表示の際にここで追加設定が可能。

div.serendipity_entryFooter {
     font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: x-small;
     color: #000000;
     padding-top: 10px;
     padding-bottom: 4px;
     clear: both;}

説明:各エントリの最下部にある 投稿者~~ の小さなテキスト。

img.serendipity_entryIcon {
     float: right;
     border: 0px;}

説明:カテゴリアイコンが使われている場合、そのスタイル。

.serendipity_entry_author_self {
     }

説明:使われていないが、管理者がログイン中に表示されている自分の投稿に対して追加できるスタイル。

コメントのスタイル

.serendipity_comments {
     }

説明:全てのコメント用のコンテナで、標準テーマでは特にスタイル化はされていない。

.serendipity_commentsTitle {
     font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
     font-size: small;
     font-weight: bold;
     margin-top: 10px;
     color: #333333;
     padding-left: 5px;
     border-bottom: 2px solid #36558C;}

説明:コメント、トラックバックおよびコメントフォームのタイトル。

.serendipity_comment {
     font-size: 13px;
     margin-top: 10px;
     margin-right: 10px;
     margin-left: 10px;
     color: #404040;
     padding: 3px;
     background-color: #FFFFFF;
     overflow: auto;}

説明:個々のコメント用のコンテナ。

.serendipity_comment_source {
     margin-top: 5px;
     padding-left: 5px;
     margin-bottom: 5px;
     padding-bottom: 3px;
     border-bottom: 2px solid #36558C;}

説明:コメント投稿者名やコメントされた日付などのスタイル。

.serendipity_comment_author_self .serendipity_comment_source {
     background-color: #EEEEFF;}

説明:本人がログイン中のコメント投稿者名のスタイル。

コメントフォーム

.serendipity_commentForm {
     font-size: 13px;
     color: #404040;
     margin-bottom: 13px;
     margin-right: 10px;
     margin-left: 10px;
     background-color: #FFFFFF;}

説明:コメントフォーム全体を囲むコンテナ用のスタイル。

td.serendipity_commentsLabel {
     font-size: 12px;
     font-weight: bold;
     vertical-align: top;}

説明:コメントフォーム内の名前やEメールなどのフィールドのスタイル。

td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
     font-size: 12px;
     padding: 2px;
     width: 400px;}

説明:コメントフォーム内の入力ボックスのスタイル。

サイドバーのスタイル

div.serendipitySideBarItem {
     padding-bottom: 12px;
     margin-bottom: 12px;
     font-size: 12px;
     font-weight:normal;
     border-bottom: solid 2px #36558C;}

説明:個々のサイドバーブロック用コンテナのスタイル。

.serendipitySideBarTitle {
     margin: 0;
     font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
     color: #000000;
     font-size: 12px;
     font-weight:bold;
     padding-left:2px;
     padding-bottom:2px;}

説明:各サイドバータイトルのスタイル。

div.serendipityPlug {
     padding-left: 10px;}

説明:「powered by」サイドバーブロックのスタイル。

div.serendipityPlug a {
     text-decoration: none;
     border: 0px;}

説明:「powered by」のリンクアンカーのスタイル。

.serendipityImageButton {
     cursor: pointer;}

説明:「powered by」に画像が使われている場合、そのスタイル。

カレンダーのスタイル

table.serendipity_calendar td {
     font-size:11px;
     padding: 3px;}

説明:カレンダーの表組みの列のコンテナ用スタイル。

table.serendipity_calendar a {
     color: #FF0000;
     font-weight: bold;
     text-decoration:none;}

説明:カレンダーの日付部分のリンク用スタイル。

table.serendipity_calendar a:hover {
     text-decoration: none;}

説明:カレンダーのリンクがマウスホバーされた時のスタイル。

td.serendipity_weekDayName {
     font-size:11px;
     font-weight:bold;}

説明:カレンダーの曜日用のスタイル。

td.serendipity_calendarHeader a:link, 
td.serendipity_calendarHeader a:visited, 
td.serendipity_calendarHeader a:hover {
     border: 0;
     text-decoration: none;}

説明:カレンダーの月と矢印用のスタイル。

イメージマネージャで埋め込まれた画像

.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
     border: 1px solid #DDDDDD;
     background-color: #EFEFEF;
     margin: 3px;
     padding: 3px;
     text-align: center;}

説明:画像とテキストのコンテナ。

.serendipity_imageComment_center {
     margin: auto;}

説明:エントリ内の画像とテキストを中央揃えにするスタイル。

.serendipity_imageComment_left {
     float: left;}

説明:エントリ内の画像とテキストを左合わせにするスタイル。

.serendipity_imageComment_right {
     float: right;}

説明:エントリ内の画像とテキストを右合わせにするスタイル。

.serendipity_imageComment_img, .serendipity_imageComment_img img {
     margin: 0px;
     padding: 0px;
     text-align: center;}

説明:画像用のスタイル。

.serendipity_imageComment_txt {
     border-top: 1px solid #DDDDDD;
     margin: 0px;
     padding: 3px;
     clear: both;
     font-size: 8pt;
     text-align: center;}

説明:画像下のキャプションテキストが使われている場合、そのスタイル。

Serendipity