管理画面操作マニュアル「レイアウト」

v1.18.02023 年 9 月 11 日更新
1目次

レイアウト ....................................................................................................................... 2
概要 ......................................................................................................................................... 2
レイアウト一覧 ........................................................................................................................ 3
新規作成 .................................................................................................................................. 4編集 ......................................................................................................................................... 8
削除 ......................................................................................................................................... 9
使用パーツ ............................................................................................................................... 9
レイアウト使用ページを検索 .................................................................................................. 11

ログインについては『管理画面操作マニュアル「ログイン・個人設定」』をご覧ください。

レイアウトの新規作成や編集などの操作は、その権限があるユーザーにしかできません。
本マニュアルではデモサイトのシステム管理者（sys）にて説明します。

レイアウト

概要
「レイアウト」とは、ページ全体をどのように構成するかを定義したもので、ロゴの位置、ナビゲーシ
ョンやメニューの位置、本文の位置、フッターの位置などを定義したもので、HTML で記述します。ここでは、「レイアウト」の新規作成・編集・削除について説明します。

2

レイアウト一覧(1)

左サイドメニューの「レイアウト」をクリックします。

(2)

登録されているレイアウトが一覧表示されます。
レイアウトは、各フォルダー内に設置できます。フォルダー内でレイアウトを作成する場合は、該当フォルダーに移動後左メニューでレイアウトをクリックし、「新規作成」（次項参照）を行います。

3

新規作成
(1)

一覧画面で「新規作成」をクリックします。

(2)

必要な項目に内容を入力します。

基本情報
レイアウト名レイアウトの名称を入力します。日本語での入力が可能です。

ファイル名

半角英数字で入力してください。.html などの拡張子の記述は不要です。

4

レイアウトHTML

レイアウトを HTML で記述します。

①本文の呼び出し{{ yield }}②パーツの呼び出し{{ part "パーツのファイル名（拡張子は除く）" }}ファイル名の前にフォルダーのファイル名を指定することでフォルダー内のパーツも呼び出し可能です。パーツについての詳細は「マニュアル【パーツ】」をご覧ください。

③ページやフォルダーに設定しているタイトルの呼び出し#{page_name}④ページの公開・更新日時の表示#{page_released} ページの公開日時が「2021/4/1」の形式で表示されます。
#{page_released.default}

ページの公開日時が「2021/4/1」の形式で表示されます。

#{page_released.iso}ページの公開日時が「2021-04-01」の形式で表示されます。

#{page_released.long}

ページの公開日時が「2021 年 4 月 1 日」の形式で表示されます。
#{page_released.short}ページの公開日時が「4/1」の形式で表示されます。

#{page_updated} ページの更新日時が「2021/4/1」の形式で表示されます。
#{page_updated.default}

ページの更新日時が「2021/4/1」の形式で表示されます。

#{page_updated.iso}

ページの更新日時が「2021-04-01」の形式で表示されます。

#{page_updated.long}

ページの更新日時が「2021 年 4 月 1 日」の形式で表示されます。
#{page_updated.short}

ページの更新日時が「4/1」の形式で表示されます。

⑤コメントアウト<!-- skip-voice --><div>読み上げない</div><!-- end-skip-voice -->コメントアウトで囲われた個所の読み上げをスキップします。

5

⑥Adobe Reader ダウンロード案内<nav class=”ss-adobe-reader” style=”display:none”>Adobe Reader</nav>
ページ内に PDF ファイルがある場合に Adobe Reader のダウンロード案内が表示されます。

⑦PC、スマホ切り替えボタン表示<footer id=”ss-pc” style=”display:none”>PC 表示</footer><footer id=”ss-mb” style=”display:none”>スマートフォン表示</footer>
スマートフォンやタブレットで表示した際に PC 表示とスマートフォン表示を切り替えるボタンを表示します。

⑧条件分岐#{if 条件分岐タグ A}内容 A#{end}
条件分岐タグ A が true のとき、内容 A を表示します。

#{if 条件分岐タグ A}内容 A#{elsif 条件分岐タグ B}内容 B#{end}
条件分岐タグ A が true の場合は内容 A、条件分岐タグ A が false かつ条件分岐タグ Bが true の場合は内容 B を表示します。

#{if 条件分岐タグ A}内容 A#{else}内容 B#{end}
条件分岐タグ A が true の場合は内容 A、false の場合は内容 B を表示します。
※条件分岐タグ
is_page() : ページならば true, それ以外は false を返します。
is_node() : フォルダーならば true, それ以外は false を返します。
in_node('/docs') : ファイル名が docs から始まるならば true, それ以外は false を返します。
has_pages() : 現在のフォルダーにページがある、または現在のフォルダーのカテゴリーに所属しているならば true, それ以外は false を返します。

⑨ふりがなを振る範囲指定<!-- write-kana --><p>ふりがなを使用する</p><!-- skip-kana --><p>ふりがなを使用しない</p><!-- end-skip-kana --><!-- end-write-kana -->6

<!-- write-kana --> と <!-- end-write-kana --> で囲むと、ふりがなを使用する範囲を設定できます。 <!-- skip-kana --> と <!-- end-skip-kana --> で囲むと、ふりがなを使用しない範囲を設定できます。

管理権限の帯をクリックすることで以下の入力項目が表示されます。
公開設定
管理グループ(3)

このページを編集可能にするグループを選択します。

ページを保存します。

7

編集
(1)

一覧画面で、編集するレイアウト名をクリックし、遷移後の画面で「編集する」をクリックする。
もしくは一覧画面のタイトルとチェックボックス以外の部分をクリックし表示されるウィンドウ内の「編集する」をクリックすることで編集画面へ移動します。

(2)

編集後、画面下部の「保存」をクリックします。入力項目の詳細については、前項「新規作成」をご参照ください。

8

削除
ページを削除します。完全に削除され、復旧することはできませんのでご注意ください。
(1)

一覧画面で、削除するレイアウト名をクリックし、遷移後の画面で「削除する」をクリックする。
もしくは一覧画面のタイトルとチェックボックス以外の部分をクリックし表示されるウィンドウ内の「削除する」をクリックします。

(2)

確認画面で「削除」をクリックするとページが削除されます。

使用パーツ
9

詳細画面では該当レイアウトで使用しているパーツを確認することができます。
(1)

一覧画面で該当レイアウト名をクリックし、詳細画面に移動します。

(2)

使用パーツ欄に該当レイアウトで使用されているパーツが一覧表示されています。

パーツ名をクリックすると該当パーツの詳細画面に移動します。

10

レイアウト使用ページを検索
詳細画面では該当レイアウトを使用しているページを確認することができます。
(1)

一覧画面で該当レイアウト名をクリックし、詳細画面に移動します。

(2)「レイアウト使用ページを検索」をクリックします。

(3)

サイト内検索のページに移動します。ここで該当レイアウトを検索できます。

詳しくは、管理画面操作マニュアル「レイアウト」をご覧ください。

11