拡張パーツ ＞ コンテンツスライダー
他の投稿ページや記事、あるいは画像に依存せず、スライダーを使って独立した告知や誘導リンクを作りたいときに活用できるパーツです。
背景の設定とコンテンツとしての画像、動画、文字の情報を組み合わせて多彩なスライダーを作成できます。
モバイル端末用の調整を使用して画面の大きさによる表示分けも可能です。
使用例
一般設定（スライダー全体）
高さ指定
スライダーの最低の高さ（縦方向の大きさ）を設定します。使用画像の縦横比や各スライドの内容によって、ここで指定した数値より大きく表示されることがあります。
自動再生
ページが表示された際に自動で再生を始めるかどうかを指定します
タイミング
1つのスライド内容の表示持続時間を調整します。
リピート再生
最後のスライドまで再生されたあと、最初に戻って再生を続けるかどうかを指定します。
表示入れ替わり効果
内容1つ1つの切り替わり方を設定します。以下が選択できます。
- スライド
- フェード
表示入れ替わり効果の速度
スライドが入れ替わる際の速さを設定します。
矢印を表示
エリアの左右に内容を手動で送るための矢印ナビゲーションを表示させるかどうか選択します。
選択用ポチポチ
内容を手動で切り替えるためのドットナビゲーションを表示するかどうか選択します。Yesを選択するとエリアの下中央に表示されます。
詳細
内容の最大幅
大きな画面での表示でページの表示幅が広がったときに、各スライド設定の「内容のレイアウト」で置かれた文字や画像が表示される最大幅を設定します。
各スライドの背景は、この数値に関係なく表示できる最大幅まで広がります。
スライド
パーツを配置して最初に設定が開いた状態で「スライド1」のみが項目として表示されています。「スライド追加」ボタンを押すことで、「スライド２」「スライド３」と設定が追加されて現れますので、必要なだけの内容をスライダーに追加していくことができます。
設定が終わったスライドは、右にあるファイルマークを押して複製することができます。さらに複数のスライドがある場合に現れる十字マークをドラッグアンドドロップすれば、表示順序の入れ替えもできます。不要なものは「X」マークをクリックすれば削除されます。
実際に公開されたスライダーでは、このリストの上から順に表示されていきます。
スライド1〜
右側の「スライド編集」をクリックすることで、入れ代わって「スライド設定」が開きますので、そこで各スライド内の画像や文字、デザインなどを設定します。
スライドごとに「スライド編集」内で個別に記入・設定を行っていきます。
背景画像や見出し、内容文の表示方法、画像、リンク設定といった調整ができます。
一般設定（各スライド設定内）
スライド名
スライドごとのタイトルを記入する欄です。作業上での判別用ですので、簡易でも分かりやすい名前をお勧めします。
背景のレイアウト
いずれかを選択
このスライドが表示された際に使用する背景を選びます。
- 画像 → 選択によって下に「バックに置く画像」として画像選択欄が現れます。「画像を選択」をクリックしてWordPressのメディアライブラリから、あるいは画像をアップローダーを使用して新規アップロードのあと「画像を選択」ボタンを押します。決定したあと現れる画像サイズのプルダウンメニューも忘れずに確認・設定してください。
ここで背景に置いた画像は、スライダー全体の縦幅が大きくなったり、スライドごとにサイズが変化したりする可能性があります。画像のサイズ設定にご注意ください。 - 動画 → 選択によって下に「背景用動画の指定コード入りURL」の記入欄が出現します。YoutubeやVimeoから取得した使用動画のURLコードを貼り付けてください。
背景に動画を選択すると全面が動画のみのスライドとなります。また、調整の必要がないため、次項の「内容のレイアウト」と各調整項目タブの表示は消えます。 - 色 → 選択によって下に「背景色」を決めるパレットが現れますので色決めを行ってください。
- なし → 背景に何も指定されません。ページの下地を背景に文章や画像のみが表示されます。
内容のレイアウト（背景のレイアウトで動画以外を選んだ場合）
このスライドの中に置きたい文字や画像などの内容を設定する項目です。
いずれかを選択
- 文字 → 選択によって下に「見出し」と「文字内容」の記入欄が現れます。スライド内に表示する文章や見出しを入れてください。通常の記事と同じく、「文章編集欄」と同じ機能ですので、文字にさまざまな調整を行えます。
- 文字と画像 → 選択によって下に「見出し」と「文字内容」の記入欄のほかに「画像」が現れます。「画像を選択」をクリックしてWordPressのメディアライブラリ内から選ぶか、画像をアップローダーを使用して新規アップロードのあと「画像を選択」ボタンを押します。選択後に現れる画像サイズのプルダウンメニューも忘れずに確認・設定してください。
加えて見出しと文章内容を入力します。 - 文字と動画 → 選択によって下に「見出し」と「文字内容」の記入欄のほかに「動画の指定コード入りURL」の記入欄が出現しますので、YoutubeやVimeoから取得した使用したい動画のURLコードを貼り付けます。スライド内では動画サイズは制限されます。
加えて見出しと文章内容も入力してください。 - なし → 何も指定されません。背景で指定されているものだけが表示されます。設定の必要がなくなるため、以下の調整用各項目タブの表示は消えます。
スタイル（各スライド設定内）
見出し
見出しの重要度指定
見出しのレベルを設定します。次のようなイメージで設定するのが一般的です。
- h1→ページ自体の見出し
- h2→記事ブロックごとの大見出し
- h3→記事内の中見出し
- h4→各項目上の小見出し
- h5→さらに項目が詳細に分かれている場合
- h6→任意
見出しの大きさ
文字サイズを調整します。
- 全体設定値→Webサイトの全体デザインで決められている大きさになります。
- 個別設定→任意の数値を入力して文字サイズを変更できます。
文字の配置
スライド上のどこに文字内容を配置するかを決めるための設定です。見出しと文章はひとかたまりの文字エリアとして扱われます。文字内容は、文字エリアの内側四方に30pxの余白部分が設定された中に収まります。ここで設定する数値はすべて余白を含めた文字エリアに対しての値です。
位置
文字エリアをスライド上のどこを基準に配置するかを指定します。
- 左→スライドの左端を基準にします。画像や動画は文字エリアのすぐ右側に配置されます。
- 右→スライドの右端を基準とします。画像や動画はスライドの左端を基準に配置されます。
- 中央→スライドの中央を基準にします。画像や動画は文字エリアのすぐ下に配置されます。
表示幅の設定
文字エリアの表示幅を設定します。スライドの横幅に対しての割合を％で指定します。
上からの間隔
文字エリアの上端をスライド上端からどのぐらい空けるか、ピクセル単位で指定します。この設定と文字エリアの高さの合計値がスライド表示の高さを越えた場合、スライド表示の高さはその分プラスされます。
下からの間隔
文字エリアの下端をスライド下端からどのぐらい空けるか、ピクセル単位で指定します。この設定と文字エリアの高さの合計値がスライド表示の高さを越えた場合、スライド表示の高さはその分プラスされます。
左端からの間隔
文字エリアの左端をスライド左端からどのぐらい空けるか、ピクセル単位で指定します。ここでの値が上の「表示幅の設定」での幅からマイナスされることで間隔が設定されます。
右端からの間隔
文字エリアの右端をスライド右端からどのぐらい空けるか、ピクセル単位で指定します。ここでの値が上の「表示幅の設定」での幅からマイナスされることで間隔が設定されます。
文字色
スライド内の文字色と文字エリアの背景の設定を行います。
文字色
スライド内の文字の基本色を決めます。
文字の影
文字に軽く影（ドロップシャドウ）をつけます。明るい背景の場合に使用できます。
文字エリアの背景色
文字エリアに背景色を設定します。
背景色の透過度
文字エリアにつけた背景色の透過度を設定します。0を指定すると完全に透明になります。
文字エリアの高さ設定
- 自動設定 → 文字の量に合わせて余白調整したエリアが設定されます。
- 100% → スライドの高さいっぱいに文字エリアが設定されます。
誘引スタイル（各スライド設定内）
リンク先
リンク先
スライド上の見出しやボタンなどをクリックした際に移動するリンク先のURLアドレスを入力します。
自己サイト内のページであれば、「選択」を押して現れた入力欄に、リンクを張りたい記事やページのタイトルを一部入力します（３文字以上必要）。
候補が一覧で表示されますので、その中から目的のものを選択すれば、自動でリンクが張られます。
リンク先の開き方
クリックした際にリンク先ページを同じウインドウで開くか別のウインドウで開くかを選択します。
リンク先を検索エンジンに知らせない
検索エンジンのページ情報収集ロボットに対し、リンクの先をたどってほしくないという意思表示（nofollow指示）します。ただし、収集ロボットが必ず言うことを聞くとは限りません。主にSEO対策として使用します。
通常はNoを選択して知らせておいて問題ありませんが、有料サイト、ログインが必要なページへのリンクの場合はYesにしてください。
> GoogleのnoFollowに対する考え方
誘引リンク
いずれかを選択
- なし → 見出し部分がリンクとなります。
- リンク先 → リンク用の文字列を設定できるようになります。こちらを選択すると、下にある設定に不要な項目が表示されなくなります。
- ボタン → ボタンパーツと同じようなリンク用ボタンを配置します。
文字
ボタン上に表示する文字内容を入力します。
ボタン内アイコン
ボタン上にアイコンを加えたい場合に、リストから選択できます。
ボタン内アイコンの位置
文字内容に対してのアイコン表示位置を選択します。
アイコン表示状態
- 常に表示→ボタン上にアイコンをずっと表示します。
- マウスオーバー時にフェードイン→マウスポインターを重ねるとアイコンが表示されます。
ボタンの色
背景色
ボタン自体の色を指定します。指定しなければ、ホームページの全体設定に準じた色になります。
また、ここで色を設定することで、下に「ボタンのスタイル」の設定欄が出現します。
マウスオーバー時の背景色
マウスポインターを重ねた際にボタンの色を変化させる場合に設定します。
文字色
文字の色を設定します。
マウスオーバー時の文字色
マウスポインターを重ねた際に文字色を変化させる場合に設定します。
ボタンのスタイル（上で背景色を指定すると表示）
スタイル
以上の中からボタンの形状を選択できます。
フラット
簡易グラデーション
エッジ線
表示入れ替わり効果
ボタンにマウスポインターを重ねた際の変化のさせ方を設定します。
- 無効 → 段階なく切り替わります
- 有効 → 切り替わりに視覚効果が加わります。
ボタンの構造設定
文字サイズ
ボタン上の文字サイズを調整します。
余白設定
文字の周りにどのぐらいの余白をつくるかを調整します。
角丸
ボタンの角の形状を調整します。（0にすると角は直角になります）
モバイル端末（各スライド設定内）
モバイル端末での画像の扱い
スマホをはじめとするモバイル端末の小さな画面で表示した際、内容のレイアウトに画像や動画を使っている場合はスライドの背景に設定している画像は表示されず、内容のレイアウト側のみでデザインが再構成されます。
これにより、不都合が生じる場合にモバイル端末表示に合わせた別設定を行えます。
いずれかを選択
内容のレイアウトで使用している画像を、モバイル端末表示の時のみ差し替える処理を行えます。
- そのままの画像を使う
- 別の画像を選択 → 下に「画像」項目が表示され、スマホ表示の際の代替画像を選択できます。
- 画像なし → 画像の表示をせずに文字だけにします。
モバイル端末での文字色
モバイル端末表示の際の画像関連の調整処理により文字色に変更が必要となる場合に設定します。
文字色
文字の色を変更します。変更しない場合は再度選ぶ必要はありません。
文字部分の背景色
文字エリアの背景色を変更します。変更しない場合は再度選ぶ必要はありません。