ドキュメント

Aipo風のデザインを適用する

ソーシャルアプリは iframe の内部で展開されるため、コンテナ側のスタイルシートは適用されません。ただしソーシャルアプリでも、aipostyle という独自の機能を有効にすることにより、Aipo風のデザインを適用することができるようになります。Aipo標準のポートレットや他のアプリケーションとの統一性を維持するためにも、aipostyle の適用を推奨しています。

aipostyle の利用宣言

Aipo風のデザインを適用したい場合、以下のようにガジェットXMLを記述して aipostyle フィーチャーを有効にする必要があります。

<Module ...>
  <ModulePrefs>

    <Optional feature="aipostyle" />
     ...
  </ModulePrefs>
...
</Module>

デザインをスタイルシートで指定する

aipostyle を有効にした場合、aipostyle というCSSクラス名を指定することにより、デザインが適用されます。 aipostyle を利用した HTML の例は以下のようになります。

<div class="aipostyle">
    <h3>見出しh3</h3>
    テキストテキストテキストテキストテキストテキスト

    <h4>見出しh4</h4>
    テキストテキストテキストテキストテキストテキスト

    <ul>
        <li>行1
        </li>
        <li>行2
        </li>
        <li>行3
        </li>
        <li>行4</li>
    </ul>

    <a href="#">テキストアンカー</a>

    <blockquote>引用 引用 引用 引用 引用 引用 引用<br/>
        引用 引用 引用 引用 引用 引用 引用 引用
    </blockquote>

    <table class="form wide">
        <tr>
            <th>項目1</th>
            <td><input class="text w75" type="text" name="text"/></td>
        </tr>
        <tr>
            <th>項目2
            </th>
            <td><textarea class="text w75" col="5" row="10"></textarea></td>
        </tr>
        <tr>
            <th>項目3
            </th>
            <td>テキストテキストテキスト
            </td>
        </tr>
    </table>

    <table class="list wide">
        <tr>
            <th class="thin">&nbsp;
            </th>
            <th>項目1
            </th>
            <th>項目2</th>
            <th class="thin">項目3
            </th>
        </tr>
        <tr>
            <td><input type="checkbox" name="check"/></td>
            <td>テキスト</td>
            <td><a href="#">テキストリンク</a></td>
            <td nowrap="nowrap"><a href="#" class="button">ボタンリンク</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check"/></td>
            <td>テキスト
            </td>
            <td><a href="#">テキストリンク</a></td>
            <td nowrap="nowrap"><a href="#" class="button">ボタンリンク</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="check"/></td>
            <td>テキスト
            </td>
            <td><a href="#">テキストリンク</a></td>
            <td nowrap="nowrap"><a href="#" class="button">ボタンリンク</a></td>
        </tr>
    </table>
</div>