記事一覧

使用例

ファイル 130-1.jpg

サンプルは全てHTML化しています。
コメントやトラックバックのテストや閲覧はできません。
コンテンツとリンク集以外のリンク先は、スキン配布ページにつながっています。

Simple1 は、海月屋が以前からデザインの原点にしている、シンプルなデザインです。
カスタマイズ向けです。

Simple1デザインスキン

  • 日記系CGIスキン
  • 掲示板CGIスキン
  • メール・拍手CGIスキン
  • その他CGIスキン
    • ギャラリー
      Web Gallery / Web Gallery Pro / プラグイン用
    • ショッピングカート
      Web Cart / Web Cart Pro / プラグイン用
    • チャット
      Web Chat
    • データ収集
      Web Analyze / Web Reader / Web Stock
    • サイト管理
      Web Editor / Web Limit / Web Link / Web Scheduler / Web Search

他デザインサンプルへのリンク

更新履歴

2007.7.8
正式配布開始。
2007.7.21
WDPスキンの「最新の画像」リストのデザインを変更。
WDP,WCP,WGPのプラグイン用スキンを同梱。

記事内でタグ使用

正しいxhtmlに沿った記述方法

改行を変換する」で記事を投稿すると、自動的にpタグにはさまれるので、ブロック要素のタグを中に入れることは好ましくありません。

「改行を変換する」のチェックをはずすと、いろいろなタグを使って記事を装飾することができます。
しかし、投稿した記事の本文は何のタグにもはさまれないので、自分でタグも記述する必要があります。
以下のことに気をつけてなるべく正しい記述をしてください。

見出しについて

見出しサンプルh5
見出しサンプルh6

各記事の題名が<h3> ~ </h3>なので、記事内の細かい見出しは<h4> ~ </h4>を使うのが適切です。
下位の見出しはh5タグやh6タグになります。
そうすると上の「見出しサンプル」のように表示されます。

普通の文や画像

普通の文や画像はすべて<p> ~ </p>ではさみます。
改行するときは、<br />を記述します。
2回改行したいときは</p><p>を記述します。
もっと改行させたいときは、</p><p><br />をその数だけ並べます。

なぜ複数改行の場合、1回pタグを閉じてまたpタグをスタートさせるのかというと、改行タグをたくさん並べるのは良くないとされているからです。
pタグでどのくらいのすきまが空くかは、スタイルシートの設定しだいです。

この際、あらかじめ、スタイルシートで設定しておいたクラス名をpタグに指定することでいろいろな装飾ができます。

強調したいことばは<em> ~ </em>で挟み、さらにより強く強調したいことばを<strong> ~ </strong>ではさむと、太字になって目立ちます。

追加した情報<ins> ~ </ins>ではさむと、下線がつきます。
削除した情報を消さずに<del> ~ </del>で挟むと抹消線がつきます。

引用文

昔々、あるところにおじいさんとおばあさんがいました。

おじいさんは山へ芝刈りにおばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると 川上から桃がどんぶらこどんぶらこと流れてきました。

引用文はまず<p> ~ </p>ではさんだ後、全体を<blockquote> ~ </blockquote>ではさむのがよい感じです。リストを使用こともできます。
改行等も普通の文と同じようにします。

リスト

非序列リスト
  • 番号なしの非序列リストは、
    ひとつのリストの前後を<li> ~ </li>ではさみ、最後に全体を<ul> ~ </ul>ではさみます。
  • 非序列リストのリストマークはスタイルシートの設定です。
    • このように階層をつくることができます。
    • 序列リストも同じように入れ子にできます。
  • 非序列リストのリストマークはスタイルシートの設定です。
    1. このように階層をつくることができます。
    2. 序列リストも同じように入れ子にできます。
序列リスト
  1. 番号つきの序列リストは、
    ひとつのリストの前後を<li> ~ </li>ではさみ、最後に全体を<ol> ~ </ol>ではさみます。
  2. 序列リストの数字はスタイルシートの設定で変更可能です。
  3. 非序列リストのリストマークはスタイルシートの設定です。
    • このように階層をつくることができます。
    • 序列リストも同じように入れ子にできます。
定義リスト
定義語
定義語の説明を記述
定義リストについて
定義リストは、定義語とその説明からなります。
定義語を<dt> ~ </dt>ではさみ、その説明を<dd> ~ </dd>ではさんだ後、全体を<dl> ~ </dl>ではさみます。
注意
定義語にはpタグ等を使うことはできませんが、説明のほうはpタグやリストなどのブロック要素も使えます。

整形済みテキスト

半角スペースや改行などをそのまま表します。
表示が崩れないように横幅を指定しているので、
全体の横幅を変更したときは同じだけ増減してください。

整形済みテキストは<pre> ~ </pre>ではさみます。

スタイルシートについて

記事に使われたタグのスタイルはスタイルシートで設定します。

div#diary .text ○○ { }という形で指定すると、変わったスタイルを指定しても、記事以外に影響しなくてすみます。

コメント一覧

くらげ メール URL - 06/17 18:19 Edit

アイコン

アイコンありコメントテスト

くらげ - 07/07 18:48 Edit

コメントテスト

便利な機能

このCGIには、嬉しい機能がたくさんあります。
たとえば、画像をアップロードすると、通常は先頭に表示されますが、文中内に「$FILE1」と記述すれば、任意の場所に表示させることができます。
Ver 4.17 以降では「$FILE1_l」や「$FILE2_r」で回り込みできます。

アップロードファイル 122-1.jpg

また、「-」を5つ連続置くと、そこから「続きを読む」リンクにすることができます。
続きを読む

トラックバック一覧

  • TEST from ○○ブログ - 04/23 11:57
  • TEST from △△日記 - 04/23 11:58