HOME document : rain

doc : rain

WordPressテーマ「rain」の仕様に関するドキュメントです。
テーマのご使用やカスタマイズの参考にしてください。

ご質問やご要望は下記メールアドレスまでどうぞ。
webmaster@cocoa-project.com

サイドバー

表示ユニットの選択

サイドバーのユニットは<!–– begin xxx ––> 〜 <!–– end xxx ––>のコメントブロックで区切られています。
必要のないユニットはコメントごと削除してお使いください。
例えば、"Recent Entries"のサイドバーユニットが不要な時は、<!–– begin Recent Entries ––> 〜 <!–– end Recent Entries ––>までを削除してください。

サイドバー用リストの構造

サイドバーユニット構造イメージサイドバーに表示されるユニットは、基本的に左図のようなタグでマークアップされています。
<ul>にclass"listType2"または"listType3"を指定することで、リスト項目の先頭に表示させるアイコンを変更することができます。

ウィジェット

ウィジェットに対応しています。

Top

CSS class

このテーマでは、記事の投稿やページ作成時に使用できるいくつかのclassが用意されています。
各classはそれぞれ対応する要素に指定し、cssを適用させます。

画像のフロートとマージン(投稿用)

imageファイルを投稿する際、テキストを右に回り込ませたい場合は<img>要素にclass="left"を、テキストを画像の左に回り込ませたい時はclass="right"を指定してください。
なお、どちらの場合にも、回り込ませる対象の<img>要素を含むblock要素にclass="clearfix"を指定してください。
これにより、回り込み(float)が解除されます。

sample imageこの画像にはclass"left"が指定されているので、後に続くテキストは右に回り込みます。

画像の含まれている<p>タグにclass"clearfix"が指定されているので、フロートが解除されます。

imageファイルの周りに余白を持たせたい場合は、上方向にマージンを取るならば<img>要素にclass="topMargin"を指定してください。
同様に、"rightMargin"、"bottomMargin"、"leftMargin"を指定すると、それぞれ右方向、下方向、左方向にマージンが追加されます。

sample imageこの画像にはclass"left"が指定されているので、後に続くテキストは右に回り込みます。
また、class"rightMargin"と"bottomMargin"も指定されているので、右方向と下方向にそれぞれマージンが取られて表示されます。

画像の含まれている<p>タグにclass"clearfix"が指定されているので、フロートが解除されます。

画像の枠線(投稿用)

imageファイルの周りに枠線を表示させたい場合は、<img>要素にclass="border"を指定します。

テーブル(投稿用)

class="styleTable"を<table>要素に指定すると、そのテーブルにボーダーや背景色が設定されます。
初期状態ではテーブルのボーダーなどは表示されません。

以下はclass"styleTable"を指定した<table>要素のサンプルです。

スタイル有りテーブル
セル : th セル : th セル : th
セル : td セル : td セル : td
コードのタイトル (投稿用)

JavaScriptやphpなどのソースコードをWebページに載せる際、その種類を示したい時は<code>要素の前にclass="codeTitle"を指定した<p>要素を配置します。

ページ向け記事ボックス用スタイル (ページ作成用)

ページを作成する際に、WordPressのHTMLエディタで<div>要素にclass="pageDescription"を指定すると、ページの概略用スタイルがボックスに適用されます。
また、<div>要素にclass="entry pageEntry"と指定することで、ページ向けに調整されたスタイルがボックスに適用されます。
"entry"は通常の投稿に使用されているclassですが、"pageEntry"を合わせて指定することで、ページ向けに余白等が調整されます。

上記のどのclass指定をした場合でも、ボックスに内包される<p>要素などの行間やマージンに影響を与えます。
基本的に、ページを作成する際はコンテンツを<div>で囲み、いずれかのclassを指定するようにしたほうが良いでしょう。

以下は使用例のサンプルコードです。

XHTML 

<div class="pageDescription">
  <p>
    説明文などを含む<div>要素にclass="pageDescription"を指定します。
  </p>
</div>
<div class="entry pageEntry">
  <p>
    コンテンツ部分の<div>要素にclass="entry pageEntry"を指定します。
  </p>
</div>
Top

プラグイン

以下のWordPressプラグインに最適化されています。
このテーマのファイルにプラグイン自体は含まれていないので、未使用のプラグインは各リンク先からダウンロードしてインストールしてください。

WP-PageNavi 2.31
インデックスなどで複数に渡るページが存在した場合、そのナビゲーションを提供してくれるプラグインです。
Breadcrumb NavXT 3.0.2
単独記事やアーカイブページなどにパンくずナビゲーションを表示してくれるプラグインです。
Breadcrumb NavXT-Coreの方を使用してください。
WP Multibyte Patch
日本語版WordPressのマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。
Page 1 of 0
Top