HTML5 Powered with CSS3 / Styling, and Semantics

feed-icon-28x28.png

印刷用表示

Pageマニュアル

Page(ページ)はオールマイティ、なんでもOK!

page-entry.jpg
Pageの入力フォーム

Pageモデルの特徴

Pageモデルは、従来型の固定ページを編集するためのモデルですが、Diaryなど他の列挙型モデルでは不可能な、柔軟なレイアウトが可能です。Pageモデルでは*一般的なCMSとは異なり、1ページを複数のブロック(記事)に分割する考え方が大切です。具体的には大見出し(通常は1〜3個程度)、中見出し(通常は大見出しごとに2〜5個程度)、小見出し(通常は中見出しごとに2〜5個程度)単位でブロック分けを行い、その記事の表示順位によってページを構成します。ページ内容の編集はブロック(記事)単位で行うので、マニュアルのようにテキストの分量が多く、追加・修正が頻繁に生じるコンテンツに適しています。

*いわゆるWiki系を除いてほとんどのCMSにおいて、静的なページは1個の記事として丸ごと投稿しなければならないので、テキストの分量が多く、追加・修正が頻繁に生じるようなコンテンツの制作は苦手です。

表示順位

記事のページ中の順位を設定できます。同じ番号の場合、先に登録した記事が優先します。何も記事が存在しないデフォルトでは、オートナンバーが効いて「2」となります。記事を書き込む前に、おおよその番号を決めておくのがコツです。あまり小刻みにせず、5番単位や10番単位にしておけば、あとで記事ブロックの割り込みが必要になっても対応しやすくなります。

*割り込み記事が増えて、新たな表示順位を決めにくくなったときは、まとめてリナンバー(番号の付け直し)が可能です(後述)。

大見出し

ページ先頭の大見出し(HTMLではh2タグ)はデフォルトで、カテゴリーの名称を示しますが、ページ中に別の大見出しを加えることができます。入力フォームの「中見出し」項目と「表示順位」項目にだけ入力すると、大見出しとみなされます。

中見出し

「中見出し」項目に記入すると、中見出し(HTMLではh3タグ)となります。通常は画像を添付し、最初の小見出しと本文を加えます。

添付する画像とネーム(説明)

多彩な表現を必要とする固定ページだけに、画像のオプションも増えます。「画像拡大表示」は有無に加えて、右寄せの画像配置を指定できます。右寄せを指定すると、本文が左側となります。画像にはネームと呼ばれる、短い説明を加えることができます。ネームは画像に対してセンタリングされます。ネームの長さが画像の幅を越える場合、折り返しになってしまいますが、<br />タグをはさめば改行されます。特に1行におさめたい場合、画像の両端にホワイト空間を加えておくという裏ワザがあります。

小見出し

「中見出し」を空白として「小見出し」項目を記入すれば、小見出し(HTMLではh4タグ)となります。通常は「本文」を書き加えますが、画像の添付は必要に応じて行います。

本文

「本文」項目だけに記事を書き込むと、前のブロック(パラグラフ)の本文から連続した、本文のように表示されます。画像が添付されていると、自動的に画像の回りこみの効果が得られます。

HTML

なし」は通常の文章ですが、インラインタグは有効となります。

あり」はHTMLコードをそのまま流し込むときに指定します。改行には<br />タグが必要です。

プレーン」はプレーンテキストを意味し、改行は有効となります。「なし」と異なるのは、記事中のHTMLタグが無効となってそのまま表示されるところで、HTMLコード自身の説明が必要なときに指定します。

枠プレーン」はプレーンテキストの周りに枠を表示し、背景を淡い灰色で着色します。HTMLコードだけでなく、PHPやJavaなどのプログラムソースを引用したいときに指定してください。次のブロックは「枠プレーン」の例を示しています。

<html>
<head>
<title>タイトル</title>
<body>
メッセージ1<br />
メッセージ2<br />
</body>
</html>

記号リスト」は文頭に記号のついたリストで、HTMLの<ul><li>タグに相当します。本文の改行ごとに1項目となり、インラインタグが有効なので、項目の中で改行するには<br />タグを挿入してください。

番号リスト」は文頭に番号のついたリストで、HTMLの<ol><li>タグに相当します。記号リストと同様、本文の改行ごとに1項目となり、インラインタグが有効です。記号リストと番号リストの切り替えは、オプションの選択を変えるだけですみます。

*二重リスト(リストの入れ子、字下げ)を記述するには、字下げする直前の行末に「{」(大カッコ、カール)を付けます。解除するには解除前の行末に「}」(閉じ大カッコ、閉じカール)を付けます。次に番号リストの文例と表示結果を示します。なお記号の形状と番号の表記方法はスタイルシートで設定します。

富山県{
富山市
高岡市}
石川県{
金沢市
七尾市
小松市}
福井県{
福井市
武生市}

  1. 富山県
    1. 富山市
    2. 高岡市
  2. 石川県
    1. 金沢市
    2. 七尾市
    3. 小松市
  3. 福井県
    1. 福井市
    2. 武生市

本文整列

「HTML・なし」の記事を、左寄せだけでなく、右寄せあるいは中央揃えとすることができます。

URL

「HTML・なし」「HTML・あり」に関わらず、本文に関連したURLを書き込むことができます。サイト名でハイパーリンクを作成するには、次のようにURLに続いて「|」(半角縦バー)を挟んでサイト名を記述します。ただし全体で100文字を超えないようにしてください。サイト名を明示する機能はバージョン1.2RC2から備えられました。

「http://www.yahoo.co.jp/|Yahoo!

またTableモデルで作成した表形式のコンテンツをリンクさせることができます(実例は「Tableマニュアル」にあります)。

公開オプション

オーナー権限において、すぐ公開したくない場合は「しない」、公開したい場合は「する」を選択できます。「Topic」を選択すると、トップページのTopicsとして表示できます。


HTML埋め込みと流し込み

どこでもHTML

Pageモデルではブロック単位で、どこでもHTMLタグを記事中に書き込むことができます。ページ全体を1ブロックとして、まるごとHTMLコードを流し込むこともできますが、従来のHTMLソース(bodyタグの内部)をそのまま使いたい場合に限ります。CMSならではの検索機能を活かすには、なるべく読みやすい段落ごとに、divタグでブロック分けすることが望まれます。

HTML」項目で「なし」を選択すると、ブロック全体がpタグで囲まれ、改行は/pタグと新しいpタグに置き換えられて表示されます。bタグやrタグ(ek-MyWEB独自タグで、文字が赤色となる)、およびspanタグなど、簡単なインラインタグだけ記事中に含まれる場合は「HTML・なし」としてください。tableタグを使った表組み、あるいはul-liタグを使った箇条書きがある場合は、表示がおかしくなるので、必ず「HTML・あり」としてください。

記事中のHTMLコードは矛盾なく完結している必要があります。画面表示がくずれてしまうおそれがあるので、本文中に直接長文のHTMLコードを書き込むことは避けてください。万が一表示がくずれてしまったら、「記事編集」ボタンをクリックして元の記事中のコードを修正してください。「記事編集」ボタンが記事のはじめのところに配置されているのは、表示がくずれても影響を受けないためです。またオンラインならばサイドバーの最後にあるW3Cへのリンクをクリックして、バリデーションチェックをかけてみるのもエラー処理には有効です。

CSSの適用

CSS(スタイルシート)を適用するには二つの方法があります。ひとつはek-MyWEBの標準添付CSSのうち、使いやすいものをそのまま流用する方法、もうひとつはインラインでHTMLソースに書き込む方法です。自動的にインラインでスタイルを書き込んでくれるWebエディタ(市販ではExpression Web 2、フリーウェアではKompoZerなど)があります。

ブログパーツ、Flashムービーなど

iframeタグを使った「Yahoo MAP」やブログパーツを埋め込むことができます。またFlashムービーも埋め込み用に仕上げられたHTML形式になっていればOKです。いずれもHTMLコードが矛盾なく完結している必要があります。次のサンプルムービーは「Web Effect」(ソースネクスト社)で作成したもので、埋め込みにはJavascriptのライブラリを使っています。なおFlashムービーファイルのアップロードは、特にファイルサイズが大きくなることがあるので、サイト管理者にご相談ください。

<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject("ek-Uploads/world2.swf", "world", "690", "100", "6", "#ffffff");
so.write("headerFlash");
</script>
</div>

YouTubeビデオの埋め込み

YouTubeのビデオについてはサイトのコンテンツに掲載されている埋め込みコードを「本文」に流し込んで「HTML・あり」とします。次にサンプルビデオ(25分:JAXA制作)と埋め込みコードを示します。

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/fRI6gCUC6sE&hl=ja&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/fRI6gCUC6sE&hl=ja&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

*ムービーやビデオの埋め込みコードには、W3C非推奨の記述が多く含まれていて、バリデーションチェックをパスできないことがあります。


Pageの印刷

印刷用表示

Pageモデルのカテゴリーを開くと「印刷用表示」というリンクがページの右上に現れますが、ここをクリックするとコンテンツ部分のみが画面に表示されます。この機能を活用すれば、ページ単位の印刷が楽になります。また「印刷プレビュー」とは異なり、簡単なスライドショーも可能となります。印刷用表示のスタイルシート(ek-PrintPage.css)は「テンプレートの編集」から編集できます。なおbackgroundプロパティで指定する背景画像は、ブラウザによっては画面では見えますが印刷されないので、印刷の条件に合わせて適宜修正を加えてください。ちなみにFirefox3.5以降では背景画像を含めて印刷するオプションが用意されています。

カテゴリー名を印刷しない方法

カテゴリー名を印刷したくない場合は、印刷コマンドラインに「&skip」という実行オプションを加えてください。例を次のURLに示します。

記事のリナンバー

表示順位のつけ直し

記事が増えてくると、余裕をもって表示順位を決めたつもりでも番号が混みいってきて、新しい記事を投稿しづらくなります。そのようなときは編集モードでページの最下部に表示される「このページの記事をリナンバー」ボタンをクリックしてください。すると記事の表示順位が未公開記事を含めて、2から始まる偶数の連続番号につけ直されます。

Powered by ek-MyWEB.com 2.0 RC3