plugin/Manual/pagebg の編集

<div id="contents"><div id="body"><h2 id="l4de229d">pagebg.inc.php</h2>
<p>ページごとに背景画像や本文の文字色を設定できるプラグイン。</p>
<h3 id="i2df16ab">画像の置き場</h3>
<p>基本的に、「image」という名前のページに画像を添付ファイルとしてぶら下げておく運用を想定しています（&fig(image/xxx.png) と同じ流儀）。</p>
<h3 id="oc452ff3">画像の指定方法（第1引数）</h3>
<p>以下の3通りの書き方が使えます。</p>
<ul class="list1 list-indent1"><li><strong>ファイル名のみ</strong>（例：musubi03_l.png）
<ul class="list2 list-indent1"><li>refer=で指定したページ（省略時は「image」ページ）に添付されたファイルとして解決されます</li></ul></li>
<li><strong>ページ名/ファイル名</strong>（例：image/musubi03_l.png）
<ul class="list2 list-indent1"><li>「/」の直前までがページ名、直後が添付ファイル名として解決されます（&fig()と同じ流儀）</li>
<li>実際のディスク上のファイルパスではないので注意してください。「image/musubi03_l.png」は「imageというページに添付されたmusubi03_l.png」という意味であり、image/フォルダの実ファイルではありません</li></ul></li>
<li>https://から始まる完全なURL
<ul class="list2 list-indent1"><li>外部画像や、すでに完成した添付リンクをそのまま使う場合</li></ul></li></ul>
<h3 id="vef4af9a">使い方（ページ本文の1行に書く）</h3>
<pre>#pagebg(musubi03_l.png,mode=full,text=#eaf5ea,link=#8be08b,overlay=0.45)<br />#pagebg(image/musubi03_l.png,mode=banner,height=320,text=#eaf5ea,link=#8be08b)<br />#pagebg(musubi03_l.png,mode=article,height=800,text=#eaf5ea,link=#8be08b,overlay=0.45)<br />#pagebg(musubi03_l.png,mode=follow,width=240,height=320,overlay=0.3)<br />#pagebg(musubi03_l.png,mode=follow,overlap=1,text=#eaf5ea)<br />#pagebg(musubi03_l.png,mode=banner,height=280,caption=WILD GROWTH:R)<br />#pagebg(musubi03_l.png,mode=banner,height=280,focus=top)<br />#pagebg(musubi03_l.png,mode=banner,height=280,focus=bottom:30%)</pre>
<h3 id="k8f29271">4つのモード</h3>
<h4 id="ub7f7aa8">full（デフォルト）</h4>
<p>ページ全体の背景として画像を固定表示します。ヘッダー・サイドバー・本文・フッターの下地全部に画像が透けて見える状態になります（それらが元々持っている不透明な背景色は、このページに限って透明化しています）。</p>
<h4 id="ic7a9461">banner</h4>
<p><strong>#pagebg()</strong>を書いた場所に、横幅いっぱいのバナー画像を表示します。それ以外のレイアウトはいつも通りです。</p>
<h4 id="ue31d5ba">article</h4>
<p>ヘッダー・サイドバー・フッターには一切手を加えず、本文（記事エリア）の一番上に、height=で指定した高さ分だけ画像を表示します。画像はその高さを超えて伸びることはなく、スクロールすると画面に対して画像が固定されたまま奥に流れていく、パララックス風の見え方になります。</p>
<h4 id="p0c5024a">follow</h4>
<p>画面の右下に固定表示される小さな装飾パネルです。スクロールしても常に画面内の同じ位置に留まり続けます。</p>
<ul class="list1 list-indent1"><li><strong>overlap=0</strong>（デフォルト）：本文の右側にパネル分の余白をあらかじめ確保するので、文字とパネルが重なることは絶対にありません</li>
<li><strong>overlap=1</strong>：余白を作らず、本文の文字をパネルの上に重ねて表示します（画像を背景にして文字が浮かび上がるような見た目になります）</li></ul>
<p>※ mode=followのパネルは、画面の横幅が700px未満のときは表示されません（スマホなど狭い画面向けの配慮です）。</p>
<h3 id="id39e029">パラメータ一覧</h3>
<table class="style_table" cellspacing="1" border="0" align="center"><thead><tr><td class="style_td" _hspace="0" _fspace="0">パラメータ</td><td class="style_td" _hspace="0" _fspace="0">説明</td><td class="style_td" _hspace="0" _fspace="0">対応モード</td><td class="style_td" _hspace="0" _fspace="0">デフォルト</td></tr></thead><tbody><tr><td class="style_td" _hspace="0" _fspace="0">（第1引数）</td><td class="style_td" _hspace="0" _fspace="0">画像パス。上の「画像の指定方法」を参照</td><td class="style_td" _hspace="0" _fspace="0">全モード共通</td><td class="style_td" _hspace="0" _fspace="0">なし（必須）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">refer=ページ名</td><td class="style_td" _hspace="0" _fspace="0">第1引数がファイル名のみの場合に、添付ファイルを探すページ名</td><td class="style_td" _hspace="0" _fspace="0">全モード共通</td><td class="style_td" _hspace="0" _fspace="0">image</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">mode=</td><td class="style_td" _hspace="0" _fspace="0">full / banner / article / follow のいずれか</td><td class="style_td" _hspace="0" _fspace="0">-</td><td class="style_td" _hspace="0" _fspace="0">full</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">text=#RRGGBB</td><td class="style_td" _hspace="0" _fspace="0">本文の文字色を上書き</td><td class="style_td" _hspace="0" _fspace="0">全モード共通</td><td class="style_td" _hspace="0" _fspace="0">なし（サイト既定色）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">link=#RRGGBB</td><td class="style_td" _hspace="0" _fspace="0">本文内リンクの文字色を上書き</td><td class="style_td" _hspace="0" _fspace="0">全モード共通</td><td class="style_td" _hspace="0" _fspace="0">なし（サイト既定色）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">overlay=0.0〜1.0</td><td class="style_td" _hspace="0" _fspace="0">画像の上に重ねる暗さ（文字を読みやすくするため）</td><td class="style_td" _hspace="0" _fspace="0">full / article / follow</td><td class="style_td" _hspace="0" _fspace="0">0.45</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">height=数値(px)</td><td class="style_td" _hspace="0" _fspace="0">高さ。banner→バナーの高さ／article→先頭のヒーロー領域の高さ／follow→パネルの高さ</td><td class="style_td" _hspace="0" _fspace="0">banner / article / follow</td><td class="style_td" _hspace="0" _fspace="0">320（80〜800にクランプ）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">width=数値(px)</td><td class="style_td" _hspace="0" _fspace="0">パネルの横幅</td><td class="style_td" _hspace="0" _fspace="0">follow</td><td class="style_td" _hspace="0" _fspace="0">240（80〜800にクランプ）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">overlap=1</td><td class="style_td" _hspace="0" _fspace="0">本文をパネルの上に重ねて表示する</td><td class="style_td" _hspace="0" _fspace="0">follow</td><td class="style_td" _hspace="0" _fspace="0">0（重ねない）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">caption=文字列</td><td class="style_td" _hspace="0" _fspace="0">画像の上に、大きく太字のロゴ風キャプションを中央表示（80文字まで）</td><td class="style_td" _hspace="0" _fspace="0">banner / article / follow</td><td class="style_td" _hspace="0" _fspace="0">なし（非表示）</td></tr><tr><td class="style_td" _hspace="0" _fspace="0">focus=</td><td class="style_td" _hspace="0" _fspace="0">画像のどの部分を残して切り抜くか。top / center / bottom、または「top:120px」「bottom:30%」のように具体的な位置も指定可</td><td class="style_td" _hspace="0" _fspace="0">全モード共通</td><td class="style_td" _hspace="0" _fspace="0">center</td></tr></tbody></table>
<h3 id="zbe823fa">注意点</h3>
<ul class="list1 list-indent1"><li>色（text=/link=）は #RGB / #RRGGBB / #RRGGBBAA の16進数指定のみ有効です。それ以外の書き方をした場合は無視され、サイトの既定色のままになります。</li>
<li>画像パスに使えない文字（引用符・山括弧・バックスラッシュ・制御文字、および「..」を含むパス）が含まれている場合は無視され、エラーメッセージが表示されます。</li>
<li>この設定は、#pagebg()を書いたページを実際に閲覧しているときだけ有効になります。#includexなどで別のページにこのページの内容を埋め込んでも、埋め込み先のページの見た目には影響しません。</li></ul>
</div></div>

タイムスタンプを変更しない

*pagebg.inc.php [#l4de229d]
ページごとに背景画像や本文の文字色を設定できるプラグイン。

**画像の置き場 [#i2df16ab]
基本的に、「image」という名前のページに画像を添付ファイルとしてぶら下げておく運用を想定しています（&fig(image/xxx.png) と同じ流儀）。

**画像の指定方法（第1引数） [#oc452ff3]
以下の3通りの書き方が使えます。

-''ファイル名のみ''（例：musubi03_l.png）
--refer=で指定したページ（省略時は「image」ページ）に添付されたファイルとして解決されます
-''ページ名/ファイル名''（例：image/musubi03_l.png）
--「/」の直前までがページ名、直後が添付ファイル名として解決されます（&fig()と同じ流儀）
--実際のディスク上のファイルパスではないので注意してください。「image/musubi03_l.png」は「imageというページに添付されたmusubi03_l.png」という意味であり、image/フォルダの実ファイルではありません
-https://から始まる完全なURL
--外部画像や、すでに完成した添付リンクをそのまま使う場合

**使い方（ページ本文の1行に書く） [#vef4af9a]
 #pagebg(musubi03_l.png,mode=full,text=#eaf5ea,link=#8be08b,overlay=0.45)
 #pagebg(image/musubi03_l.png,mode=banner,height=320,text=#eaf5ea,link=#8be08b)
 #pagebg(musubi03_l.png,mode=article,height=800,text=#eaf5ea,link=#8be08b,overlay=0.45)
 #pagebg(musubi03_l.png,mode=follow,width=240,height=320,overlay=0.3)
 #pagebg(musubi03_l.png,mode=follow,overlap=1,text=#eaf5ea)
 #pagebg(musubi03_l.png,mode=banner,height=280,caption=WILD GROWTH:R)
 #pagebg(musubi03_l.png,mode=banner,height=280,focus=top)
 #pagebg(musubi03_l.png,mode=banner,height=280,focus=bottom:30%)

**4つのモード [#k8f29271]

***full（デフォルト） [#ub7f7aa8]
ページ全体の背景として画像を固定表示します。ヘッダー・サイドバー・本文・フッターの下地全部に画像が透けて見える状態になります（それらが元々持っている不透明な背景色は、このページに限って透明化しています）。

***banner [#ic7a9461]
''#pagebg()''を書いた場所に、横幅いっぱいのバナー画像を表示します。それ以外のレイアウトはいつも通りです。

***article [#ue31d5ba]
ヘッダー・サイドバー・フッターには一切手を加えず、本文（記事エリア）の一番上に、height=で指定した高さ分だけ画像を表示します。画像はその高さを超えて伸びることはなく、スクロールすると画面に対して画像が固定されたまま奥に流れていく、パララックス風の見え方になります。

***follow [#p0c5024a]
画面の右下に固定表示される小さな装飾パネルです。スクロールしても常に画面内の同じ位置に留まり続けます。

-''overlap=0''（デフォルト）：本文の右側にパネル分の余白をあらかじめ確保するので、文字とパネルが重なることは絶対にありません
-''overlap=1''：余白を作らず、本文の文字をパネルの上に重ねて表示します（画像を背景にして文字が浮かび上がるような見た目になります）

※ mode=followのパネルは、画面の横幅が700px未満のときは表示されません（スマホなど狭い画面向けの配慮です）。

**パラメータ一覧 [#id39e029]

**注意点 [#zbe823fa]

-色（text=/link=）は #RGB / #RRGGBB / #RRGGBBAA の16進数指定のみ有効です。それ以外の書き方をした場合は無視され、サイトの既定色のままになります。
-画像パスに使えない文字（引用符・山括弧・バックスラッシュ・制御文字、および「..」を含むパス）が含まれている場合は無視され、エラーメッセージが表示されます。
-この設定は、#pagebg()を書いたページを実際に閲覧しているときだけ有効になります。#includexなどで別のページにこのページの内容を埋め込んでも、埋め込み先のページの見た目には影響しません。

テキスト整形のルールを表示する