クイックリファレンス（タグ資料集）

1．会議・会適テンプレート（追加資料タグ）
2．面談・面適テンプレート（追加資料タグ）
3．現地調査（担当追加タグ）
4．見出し表示（タグ）
5．何項目か並べる表示（タグ）
6．日付つき表示（タグ）
7．HPスタイルガイド（表示デザインのためのクラス）
8．プロジェクト作成の注意点
9．CMS ALAYA操作マニュアル

平成29年08月08日（更新）
広報室広報班

このページはALAYAでページを作成していて、HTML記述がわからないときの参考ページです。
タグをそのままコピーペースト（以下コピペ）してお使いください。
ご不明な点等ございましたら、広報室広報班までお問い合わせください。

1．会議・会適テンプレート（追加資料タグ）

会議・会適の配布資料は、10件まで自動登録できます。
HTMLを記述する前に、11件目以降の資料はコンテント登録を行いコンテントIDを控えておきましょう。

HTMLコピー用タグ

何項目か並べるためのタグ


<ul class="arrow01">
<li><a href="[[[id=]]]" target="_blank">【資料】【PDF：KB】</a></li>
<li><a href="[[[id=]]]" target="_blank">【資料】【PDF：KB】</a></li>
</ul>

1項目のみならおすすめタグ


<p class="arrow01">
<a href="[[[id=]]]" target="_blank">【資料】【PDF：KB】</a>
</p>

HTMLタグ注意点

何項目か並べるためのタグ

ブラウザ表示例
※この間には改行タグは入れても良いです
※この間に改行タグ
入れています

タグ入力例
```
<ul>
```
この間に他のタグを入れないようにしてください。

<li>※この間には改行タグは入れても良いです</li>

<li>※この間に改行タグ<br（半角スペース）/>入れています</li>

この間に他のタグを入れないようにしてください。
```
</ul>
```

1項目のみならおすすめタグ

閉じタグ（</p>）を忘れないようにしてください。

ブラウザ表示例
※この間には改行タグは入れても良いです

タグ入力例

<p>※この間には改行タグは入れても良いです</p>

リンクアイコンタグ

それぞれ指定の箇所に半角スペース（全角はエラーなので注意）を入れてください。
リンク表示には、タグに丸緑矢印アイコンのクラスを入力してください。

ブラウザ表示例
【資料○○】○○○○【PDF：○○KB】

タグ入力例

<p（半角スペース） class="arrow01">

<a（半角スペース） href="[[[id=コンテントIDを入れる]]]"（半角スペース） target="_blank">

【資料○○】○○○○【PDF：○○KB】

</a></p>

目次へ戻る

2．面談・面適テンプレート（追加資料タグ）

面談・面適（ヒアリング）の配布資料は、10件まで自動登録できます。11件目までは1ページ内に追加できますが12件以上の場合は新しくプロジェクトを立ててページを作成してください。
HTMLを記述する前に、11件目の資料はコンテント登録を行いコンテントIDを控えておきましょう。

HTMLコピー用タグ

資料追加のためのタグ

<li class="arrow01"><a href="[[[id=]]]" target="_blank">資料【PDF：KB】</a></li>

注釈追加のためのタグ


<li>※</li>

HTMLタグ注意点

この資料追加欄には下記タグのみ使用可能です。

<ul>～</ul><p>～</p>タグは入力しないでください。

資料追加のためのタグ

ブラウザ表示例
テキストが、※や【で始まるときは必ずタグを入力してください。
※この間には改行タグは入れても良いです
【この間に改行タグ
入れています】

タグ入力例

<li>テキストが、※や【で始まるときは必ずタグを入力してください。</li>

<li>※この間には改行タグは入れても良いです</li>

<li>【この間に改行タグ<br（半角スペース)/>入れています】</li>

リンクアイコンタグ

それぞれ指定の箇所に半角スペース（全角はエラーなので注意）を入れてください。
リンク表示には、タグに丸緑矢印アイコンのクラスを入力してください。

ブラウザ表示例
資料○○【PDF：○○KB】

タグ入力例

<li（半角スペース） class="arrow01">

<a（半角スペース） href="[[[id=コンテントIDを入れる]]]"（半角スペース） target="_blank">

資料○○【PDF：○○KB】

</a></li>

目次へ戻る

3．現地調査（担当追加タグ）

現地調査の担当課室が3つ以上になる場合は、HTMLを記述する必要があるのでタグを確認してください。

HTMLコピー用タグ

担当課室3つ以上入力のためのタグ


<h4>取材に関する問い合わせ先</h4>
<div class="dep">原子力規制庁<br />
課</div>
<p>担当：<br />
電話（直通）：</p>

HTMLタグ説明

担当課室複数入力のためのタグ

ブラウザ表示例

取材に関する問い合わせ先

原子力規制庁
○○課○○室

担当：○○、○○
電話（直通）：03-○○○○-○○○○

タグ入力例

<h4>取材に関する問い合わせ先</h4>

<div（半角スペース）class="dep">原子力規制庁<br（半角スペース）/>

```
○○課○○室</div>
```

<p>担当：○○、○○<br（半角スペース）/>

電話（直通）：03-○○○○-○○○○</p>

目次へ戻る

4．見出し表示（タグ）

大見出し、中見出し、小見出しはテンプレートで選択できますが、テキスト途中で表示させて段落を分けたい場合は、直接HTMLで記述できます。
基本的には、大見出し＞中見出し＞小見出しの順で見出しを付けます。

4-1．HTMLコピー用タグ

```
<h2><span>大見出し</span></h2>
```
```
<h3><span>中見出し</span></h3>
```
```
<h4><span>小見出し</span></h4>
```

4-2．ブラウザ表示例

大見出し

中見出し

小見出し

目次へ戻る

5．何項目か並べる表示（タグ）

基本的にWEB上では、字下げ、行やスペースをあけることで段落を区別せず、番号もしくは記号で段落を区別します。

5-1．段落番号と黒丸

HTMLコピー用タグ


<p>1．</p>
<ul class="circle02">
<li class="ml15"></li>
<li class="ml15"></li>
<li class="ml15"></li>
</ul>
<p>2．</p>
<ul class="circle02">
<li class="ml15"></li>
<li class="ml15"></li>
<li class="ml15"></li>
</ul>

HTMLタグ説明

ブラウザ表示例

1．サンプル

（li class="ml15"→数字が大きくなるほど右にずれていきます）
この間には改行タグは入れても良いです
この間に改行タグ
入れています

2．サンプル

（li class="ml25"→数字が大きくなるほど右にずれていきます）
この間には改行タグは入れても良いです
この間に改行タグ
入れています

タグ表示例

```
<p>1．サンプル</p>
```

<ul（半角スペース）class="circle02">

この間に他のタグを入れないようにしてください。

<li（半角スペース）class="ml15>（li class="ml15"→数字が大きくなるほど右にずれていきます）</li>

<li（半角スペース）class="ml15>この間には改行タグは入れても良いです</li>

<li（半角スペース）class="ml15>この間に改行タグ<br（半角スペース）/>入れています</li>

この間に他のタグを入れないようにしてください。
```
</ul>
```
```
<p>2．サンプル</p>
```

<ul（半角スペース）class="circle02">

この間に他のタグを入れないようにしてください。

<li（半角スペース）class="ml25>（li class="ml25"→数字が大きくなるほど右にずれていきます）</li>

<li（半角スペース）class="ml25>この間には改行タグは入れても良いです</li>

<li（半角スペース）class="ml25>この間に改行タグ<br（半角スペース）/>入れています</li>

この間に他のタグを入れないようにしてください。
```
</ul>
```

5-2．緑丸と黒丸

HTMLコピー用タグ


<p class="circle01"></p>
<ul class="circle02">
<li class="ml15"></li>
<li class="ml15"></li>
<li class="ml15"></li>
</ul>

HTMLタグ説明

ブラウザ表示例

テキスト

（li class="ml15"→数字が大きくなるほど右にずれていきます）
この間には改行タグは入れても良いです
この間に改行タグ
入れています

タグ表示例

```
<p class="circle01">テキスト</p>
```

<ul（半角スペース）class="circle02">

この間に他のタグを入れないようにしてください。

<li（半角スペース）class="ml15>（li class="ml15"→数字が大きくなるほど右にずれていきます）</li>

<li（半角スペース）class="ml15>この間には改行タグは入れても良いです</li>

<li（半角スペース）class="ml15>この間に改行タグ<br（半角スペース)/>入れています</li>

この間に他のタグを入れないようにしてください。
```
</ul>
```

目次へ戻る

6．日付つき表示（タグ）

基本的にWEB上では、最新情報がすぐに見つけられるように、新しい年月日がページや項目の上位に表示されるように配置します。
同じページ内では、西暦（201○）と和暦（平成2○年）を統一した方が親切です。

HTMLコピー用タグ

リンクあり（西暦を含む年月日）


    <dl class="dateList04 date arrow">
    <dt></dt>
    <dd><a href="[[[pageid=]]]"></a></dd>
    <dd><a href="[[[id=]]]" target="_blank"></a></dd>
    </dl>

リンクあり（月日のみ）


    <dl class="dateList05 date arrow">
    <dt></dt>
    <dd><a href="[[[pageid=]]]"></a></dd>
    <dd><a href="[[[id=]]]" target="_blank"></a></dd>
    </dl>

リンクなし（西暦を含む年月日）


    <dl class="dateList04 date arrow">
    <dt></dt>
    <dd></dd>
    <dd></dd>
    </dl>

リンクなし（月日のみ）


    <dl class="dateList05 date arrow">
    <dt></dt>
    <dd></dd>
    <dd></dd>
    </dl>

※リニューアル以前は<dl class="date arrow">のタグを使用していましたが、現在使用すると矢印アイコンが表示されず、表示崩れが起こりますので（右側が縦に揃わない等）新しい表記に切り替えてください。

※西暦を含む年月日用（dateList04）と月日のみ用（dateList05）と二種類ございますが、日付の右側に空くスペース（160pxと80px）の違いなので適宜選択してください。
日付以外も入れることができますが文字数超過で表示崩れが起こります。

※日付は半角数字を使用してください。

HTMLタグ説明

リンクあり（西暦を含む年月日）

ブラウザ表示例

xxxx年xx月xx日: ページをリンクする時に使います。; PDFファイルをリンクする時に使います。【PDF：○○KB】

タグ表示例

<dl（半角スペース）class="dateList04 （半角スペース）date（半角スペース）arrow">

この間に他のタグを入れないようにしてください。
```
<dt>xxxx年xx月xx日</dt>
```

<dd><a（半角スペース）href="[[[pageid=ページIDを入れる]]]">

ページをリンクする時に使います。</a></dd>

<dd><a（半角スペース）href="[[[id=コンテントIDを入れる]]]"（半角スペース）target="_blank">

PDFファイルをリンクする時に使います。【PDF：○○KB】</a></dd>

この間に他のタグを入れないようにしてください。
```
</dl>
```

リンクあり（月日のみ）

ブラウザ表示例

xx月xx日: ページをリンクする時に使います。; PDFファイルをリンクする時に使います。【PDF：○○KB】

タグ表示例

<dl（半角スペース）class="dateList05 （半角スペース）date（半角スペース）arrow">

この間に他のタグを入れないようにしてください。
```
<dt>xx月xx日</dt>
```

<dd><a（半角スペース）href="[[[pageid=ページIDを入れる]]]">

ページをリンクする時に使います。</a></dd>

<dd><a（半角スペース）href="[[[id=コンテントIDを入れる]]]"（半角スペース）target="_blank">

PDFファイルをリンクする時に使います。【PDF：○○KB】</a></dd>

この間に他のタグを入れないようにしてください。
```
</dl>
```

リンクなし（西暦を含む年月日）

ブラウザ表示例

xxxx年xx月xx日: 同じ日付でテキストが並ぶ; 同じ日付でテキストが並ぶ

タグ表示例

<dl（半角スペース）class="dateList04 （半角スペース）date（半角スペース）arrow">

この間に他のタグを入れないようにしてください。
```
<dt>xxxx年xx月xx日</dt>
```

<dd>同じ日付でテキストが並ぶ</dd>

<dd>同じ日付でテキストが並ぶ</dd>

この間に他のタグを入れないようにしてください。
```
</dl>
```

リンクなし（月日のみ）

ブラウザ表示例

xx月xx日: 同じ日付でテキストが並ぶ; 同じ日付でテキストが並ぶ

タグ表示例

<dl（半角スペース）class="dateList05 （半角スペース）date（半角スペース）arrow">

この間に他のタグを入れないようにしてください。
```
<dt>xx月xx日</dt>
```

<dd>同じ日付でテキストが並ぶ</dd>

<dd>同じ日付でテキストが並ぶ</dd>

この間に他のタグを入れないようにしてください。
```
</dl>
```

目次へ戻る

7．HPスタイルガイド（表示デザインのためのクラス）

基本的にWEB上での表示は、アクセシビリティ面でデザインが制限されることがあります。
原子力規制庁HPでは以下のデザインで統一していますので参考にされてください。

改行折り返し時の字下げ

テキストの折り返しが起きた際、2行目からは全角1文字分、字下げされるスタイルです。
pタグ、spanタグ、ulタグでnote01を付加して使用することが出来ます。

HTMLコピー用タグ

```
<ul class="note01">
```
```
<li>※</li>
```
```
<li>※</li>
```
```
</ul>
```
```
<p class="note01">※</p>
```

note01タグ説明

ブラウザ表示例

※テキスト
※テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

タグ入力例

<ul（半角スペース）class="note01">

```
<li>※テキスト</li>
```

<li>※テキストテキスト～テキストテキストテキスト</li>

```
</ul>
```

<p（半角スペース）class="note01">※テキストテキスト～テキストテキストテキスト</p>

テキストの表示

下記表示はアクセシビリティ面で使用時には注意が必要です。

機種依存文字の使用時の注意

表示が必要な場合は下記のように入力してください。
①②･･･○囲み数字→1、2もしくは（１）（２）
Ⅰ、Ⅱ、Ⅳ･･･ローマ数字→I（アルファベットの大文字アイ）、II（アルファベットの大文字アイを2つ並べる）、IV（アルファベットの大文字アイとブイを並べる）
㈱ →（株）（カッコと株の漢字）
&※（【･･･行頭に記号やカッコを使用するときは、必ず前にタグが必要になるので使用時は注意が必要です。

日付入りテキスト表示の注意

更新日など日付を表示する場合は基本的には、下記のように統一しています。
新しい年月日がページや項目の上位に表示されるように配置します。
更新年月日はテキストの前に表示して、最新の情報がすぐに見つけられるようにしています。
例：多国間協力・二国間協力の枠組み

テキストデザイン

見出しや本文中にスペースを入れて表示をデザインすると、検索や文字の読み込みツールを使用しているユーザにきちんと情報が伝わらないので適切ではありません。必要ならば「：」「・」、改行などで工夫することが必要です。
文面で太文字を使う、色を変えて強調する･･･「意味合い的」に強調したい場合のみで、デザイン的に太文字にする、色を変えることは適切ではありません。
文字に下線を引くのも「リンク」と勘違いするので適切ではありません。

リンクテキスト

文章の途中に「こちらへ」にリンクを貼る･･･「こちら」がどこにリンクされているのか不安になるので適切ではありません。
リンクテキストとリンク先ページやPDFの表題が一致しない･･･本当にそのリンク先ページがあっているのか確認ができないので、出来る限り表示は合わせる必要があります。

例：

目次へ戻る

8．プロジェクト作成の注意点

プロジェクトで作成して公開済みのページ修正は各担当課室で行えます。
修正したいページのURLで検索して、プロジェクトを立ち上げて修正してください。
プロジェクトと公開ページ削除については、広報室でしか行えませんのでお知らせください。
公開済みのページを修正する際に「配信ファイル名」を変更して再配信しないでください。ページが二重で公開されることになります。

9．CMS ALAYA操作マニュアル

CMSALAYA操作マニュアル（共通機能）
CMSALAYA操作マニュアル（各テンプレート機能）
プロジェクトテンプレートクイックガイド（会議、面談プロジェクトの立ち上げ方から編集、配信方法まで）ご入用の方は広報班まで