tech.farend

技術メモ置き場

SHIRASAGIで始めにやったこと

サイトの作成

SHIRASAGIにログイン後、システム/サイト にある「新規作成」

  • サイト名：ブラウザのタブで表示させたいサイトのタイトルを入力する。
    （htmlで<title>サイト名</title>と入力する文字）

  • ホスト名

  • ドメイン名

  • グループを選択
    （このときにグループに追加しないとSHIRASAGI ログイン後の画面に反映されなかった。）

レイアウトの作成

画面左 メインメニュー/レイアウト にある「新規作成」
まずはトップページのレイアウトを作成した。

  • レイアウト名：top

  • ファイル名：top.layout.html
    拡張子.layout.htmlの入力は省略してもいい。

  • HTML
    ここにソースコードを入力する。
    パーツをどの位置に置くかを記述していく。

1
2
3
4
5
6
7

<html>  
  <head>  
  </head>  
  <body>  
    </ part "news" />  
  </body>  
</html>

※ 5行目の</ part "news" />は以下で作成。

パーツの作成

画面左 メインメニュー/パーツ にある「新規作成」
自分の分かりやすいように適当に入力。

  • パーツ名：お知らせ

  • ファイル名：news.part.html
    拡張子.part.htmlの入力は省略してもいい。
    さっきtop.layout.htmlで</ part "news" />と入力したので、ここはnews.part.htmlとなる。

    ？マークをクリックすると「.htmlなどの拡張子の記述は不要です。」と書いてあるので
    newsだけ入力すると「保存」をクリックすれば自動的に拡張子はつく。
    また、拡張子を省略せずにnews.part.htmlと入力するのは問題ないが、
    news.partと途中まで入力するとエラーが表示されるので気をつける。

  • HTML
    ここにソースコードを入力する。

1
2
3

<div id="news">  
  お知らせ内容  
</div>

これで、レイアウトとパーツが繋がった。

サイトメニュー/サイトプレビュー で見てみる。
しかし表示されない…固定ページを作っていなかった。

固定ページの作成

画面左 メインメニュー/固定ページ にある「新規作成」

  • タイトル：index

  • ファイル名：index.html
    拡張子.htmlの入力は省略してもいい。

  • レイアウト：top
    ここでさっき作ったレイアウトのtopを選択

もう一度、サイトメニュー/サイトプレビュー で見てみると表示された。