eyecatch アイキャッチ
ページのファーストビューに背景画像を設定したりできる領域を作成します。
もくじ
使い方
#eyecatch(*オプション*){{
!大見出し
サブタイトル
}}
オプション
下記のようなオプションがあります。 * には適当な値を入れてください。
| オプション | タイプ | 説明 |
| left center right | レイアウト | 内容の水平位置を指定します。 |
| top middle bottom | レイアウト | 内容の垂直位置を指定します。 |
| 数値（例： 500） | レイアウト | eyecatch の高さを指定します。 |
| page | レイアウト | eyecatch の高さを画面いっぱいの高さにします。 |
| fit | レイアウト | eyecatch の内部余白をゼロにします。 内側に設置した要素（例：#bs_carousel）を横幅いっぱいに広げたい場合に指定します。 |
| relative | レイアウト | eyecatch のCSSポジションをrelativeにします。 |
| bgcolor=* | 背景 | eyecatch の背景色を指定します。 |
| primary info success warning danger | 背景 | eyecatch の背景色をプリセットを利用して指定します。 |
| 画像名（例：eyecatch.jpg） | 背景 | 背景画像を指定します。 |
| repeat | 背景 | 背景画像を縦横リピートします。 |
| fix | 背景 | スクロールしても背景画像が動かないように固定します。（一部ブラウザでは無効になります） |
| blur | 背景 | 背景画像をぼかします。（一部ブラウザでは無効になります） |
| light=数値 | 背景 | 背景画像を明るくします（0~100の数値で明るさを調節できます）。デフォルトは40です。 |
| dark=数値 | 背景 | 背景画像を暗くします（0~100の数値で暗さを調節できます）。デフォルトは40です。 |
| bgvideo=*.mp4 | 背景 | 背景動画を指定します。詳しくは背景動画の項を参照してください。 |
| class=* | その他 | eyecatch にクラスを指定します。 |
| style=* | その他 | eyecatch にスタイルを指定します。 |
| color=* | その他 | eyecatch 内の文字色を指定します。 |
| title=* | その他 | eyecatch に内部的にタイトルを指定します。 |
| xsbg=画像名（例：eyecatch_mobile.jpg） | 背景 | スマホの時の背景画像を指定します。 |
| xsheight=数値（例：300） | レイアウト | スマホの時のアイキャッチの高さを指定します。 |
| force | その他 | このオプションを最初に付けたアイキャッチを必ず表示します |
スライドショーを使う
スライドショープラグイン?を利用して、
アイキャッチにスライドショーを設定できます。
書き方
必ず、fitオプションを指定します。
// アイキャッチにスライドショーを指定する
#eyecatch(fit){{{
#bs_carousel{{
画像ファイル名,タイトル,説明
画像ファイル名,タイトル,説明
画像ファイル名,タイトル,説明
}}
}}}
サンプル
※eyecatch を section で代用しています。
背景動画
bgvideo=*.mp4 で指定できる背景動画について解説します。
背景動画の基本
eyecatch の背景で動画を再生することができます。動画は無音（ミュート）で連続（ループ）再生されます。
iOS や Android など、モバイルユースの端末では背景動画を無効にしますので、必ず動画と雰囲気が近い背景画像を指定するようにしてください。
背景動画の選び方
- 前面の文字があまり見づらくならないもの
- 音が出なくても良いもの
背景動画のファイル形式
mp4 形式の動画を用意してください。（コーデックは H.264 ） Firefox など、対応していないブラウザもあるため、同じ内容の webm形式の動画もご用意ください。
サーバーを webm に対応させる
webm形式の動画をFirefox 上で再生させるには、サーバー側が正しく Content-Type: video/webm ヘッダを返す必要があります。こちら?を参考に、.htaccess ファイルを変更してください。
離れ業でデフォルトアイキャッチをリッチにする
haik palette シリーズが対象です
メニューなど、全てのページで読み込まれるところに `#eyecatch` を書くと、全ページに反映されます。
メニューを編集するだけで、アイキャッチに、サイト名だけでなくサブタイトルなど好きな文言を配置することができます。
ただし、ページごとに書いたアイキャッチが上書きされてしまいます。解決するには次節の解説をお読みください。
force オプションで表示するアイキャッチを指定する
`#eyecatch` は本文やメニューなど、あらゆる場所に書けますが、基本的に最後に書いたものが採用されます。
前節で解説した離れ業デフォルトアイキャッチを使うと、ページごとに書いたアイキャッチがメニュー内のアイキャッチに上書きされてしまいますが、 force オプションを利用することで上書きを回避できます。
利用するには、本文中の `#eyecatch に force` を追加するだけです。
#eyecatch(force){{
! ページのタイトル
}}