#author("2026-08-30T08:46:54+00:00","","") *pagebg.inc.php[#t0ee296e] **画像の置き場 [#sf4035b7] imageページを作成し、そこに画像をぶら下げることを想定。 #author("2026-08-30T09:25:49+00:00","","") *pagebg.inc.php [#l4de229d] ページごとに背景画像や本文の文字色を設定できるプラグイン。 **使い方(ページ本文の1行に書く) [#wabbbaaa] **画像の置き場 [#i2df16ab] 基本的に、「image」という名前のページに画像を添付ファイルとしてぶら下げておく運用を想定しています(&fig(image/xxx.png) と同じ流儀)。 **画像の指定方法(第1引数) [#oc452ff3] 以下の3通りの書き方が使えます。 #pagebg(image/xxx.png,mode=full,text=#eaf5ea,link=#8be08b,overlay=0.45) #pagebg(image/xxx.png,mode=banner,height=320,text=#eaf5ea,link=#8be08b) #pagebg(image/xxx.png,mode=article,text=#eaf5ea,link=#8be08b,overlay=0.45) -''ファイル名のみ''(例:musubi03_l.png) --refer=で指定したページ(省略時は「image」ページ)に添付されたファイルとして解決されます -''ページ名/ファイル名''(例:image/musubi03_l.png) --「/」の直前までがページ名、直後が添付ファイル名として解決されます(&fig()と同じ流儀) --実際のディスク上のファイルパスではないので注意してください。「image/musubi03_l.png」は「imageというページに添付されたmusubi03_l.png」という意味であり、image/フォルダの実ファイルではありません -''https://から始まる完全なURL'' --外部画像や、すでに完成した添付リンクをそのまま使う場合 **引数(すべて省略可、1個目の画像パス以外): [#g3321a4e] **使い方(ページ本文の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) -1個目(位置引数): 画像パス。image/xxx.png のような相対パス(既存の &fig() と同じ流儀)か、https:// の完全URLのどちらでも可 -mode=full(デフォルト): 画像をページ全体の固定背景にする -mode=banner: 呼び出した位置にバナー画像を表示(レイアウトはそのまま) -mode=article:ヘッダー・サイドバー・フッターには一切触れず、<article>(本文エリア)だけに背景画像を適用 --mode=fullと同じoverlay=(暗さ調整)・text=/link=(文字色)がそのまま使えます --mode=fullのようなheader/nav/footerの透明化処理は不要なので、それらは今まで通り不透明のままです -text=#RRGGBB: そのページの本文の文字色を変更 -link=#RRGGBB: そのページ内のリンク色を変更 -overlay=0.0〜1.0(fullモードのみ): 背景に重ねる暗さ。デフォルト0.45(文字を読みやすくするため) -height=数値(bannerモードのみ): バナーの高さ(px)。デフォルト320 **4つのモード [#k8f29271] ***full(デフォルト) [#ub7f7aa8] ページ全体の背景として画像を固定表示します。ヘッダー・サイドバー・本文・フッターの下地全部に画像が透けて見える状態になります(それらが元々持っている不透明な背景色は、このページに限って透明化しています)。 ***banner [#ic7a9461] #pagebg()を書いた場所に、横幅いっぱいのバナー画像を表示します。それ以外のレイアウトはいつも通りです。 ***article [#ue31d5ba] ヘッダー・サイドバー・フッターには一切手を加えず、本文(記事エリア)の一番上に、height=で指定した高さ分だけ画像を表示します。画像はその高さを超えて伸びることはなく、スクロールすると画面に対して画像が固定されたまま奥に流れていく、パララックス風の見え方になります。 ***follow [#p0c5024a] 画面の右下に固定表示される小さな装飾パネルです。スクロールしても常に画面内の同じ位置に留まり続けます。 -''overlap=0''(デフォルト):本文の右側にパネル分の余白をあらかじめ確保するので、文字とパネルが重なることは絶対にありません -''overlap=1'':余白を作らず、本文の文字をパネルの上に重ねて表示します(画像を背景にして文字が浮かび上がるような見た目になります) ※ mode=followのパネルは、画面の横幅が700px未満のときは表示されません(スマホなど狭い画面向けの配慮です)。 **パラメータ一覧 [#id39e029] |パラメータ|説明|対応モード|デフォルト|h |(第1引数)|画像パス。上の「画像の指定方法」を参照|全モード共通|なし(必須)| |refer=ページ名|第1引数がファイル名のみの場合に、添付ファイルを探すページ名|全モード共通|image| |mode=|full / banner / article / follow のいずれか|-|full| |text=#RRGGBB|本文の文字色を上書き|全モード共通|なし(サイト既定色)| |link=#RRGGBB|本文内リンクの文字色を上書き|全モード共通|なし(サイト既定色)| |overlay=0.0〜1.0|画像の上に重ねる暗さ(文字を読みやすくするため)|full / article / follow|0.45| |height=数値(px)|高さ。banner→バナーの高さ/article→先頭のヒーロー領域の高さ/follow→パネルの高さ|banner / article / follow|320(80〜800にクランプ)| |width=数値(px)|パネルの横幅|follow|240(80〜800にクランプ)| |overlap=1|本文をパネルの上に重ねて表示する|follow|0(重ねない)| **注意点 [#zbe823fa] -色(text=/link=)は #RGB / #RRGGBB / #RRGGBBAA の16進数指定のみ有効です。それ以外の書き方をした場合は無視され、サイトの既定色のままになります。 -画像パスに使えない文字(引用符・山括弧・バックスラッシュ・制御文字、および「..」を含むパス)が含まれている場合は無視され、エラーメッセージが表示されます。 -この設定は、#pagebg()を書いたページを実際に閲覧しているときだけ有効になります。#includexなどで別のページにこのページの内容を埋め込んでも、埋め込み先のページの見た目には影響しません。