Danganページビルダーの基本的な使い方
クイックガイド
ページビルダーの画面に切り替える
DanganページビルダーはWordPressのダッシュボードにある固定ページの新規追加・編集画面で使用します。
手順
- 「新規固定ページを追加」の画面を開く（固定ページ > 新規追加）
- 画面右側の「テンプレート」の項目でドセレクトボックスから「Danganページビルダー」を選択する（固定ページの属性 > テンプレート）
- 自動的にページビルダーの画面に切り替わる
新規追加をする場合以外に、既存の固定ページにも同様に編集画面でテンプレートの項目を切り替えることでページビルダーを使用することができます。ただし、その場合は、ビジュアルエディターに入力していた内容は無効になりますのでご注意下さい。
なお、ページのタイトルは、作成したページのtitleタグとして使用されますので、こちらも入力しておくことをおすすめします。タイトルは、後で変更することも可能です。
パーツの追加
ページビルダーの画面に切り替わったら、デザイン済みパーツを追加できるようになります。
手順
- 「パーツを追加」のボタンをクリックする
- パーツの一覧が表示されるので、追加したいものを選択する
- 各設定項目を入力する
プレビューと公開
表示の確認を行う場合は、「プレビュー」ボタンをクリックします。新しいタブが開いて、表示を確認することができます。作業を一時中断する場合は、「下書きとして保存」のボタンをクリックすることで、内容を非公開のまま保存することができます。
下書きとして保存している状態では、WordPressにログインしているユーザーしか表示を確認することができません。ページの編集が完了して一般公開するには、「公開」のボタンをクリックします。
設定項目
ここでは各パーツ共通の設定項目を紹介します。パーツごとの設定項目については以後のページを参照してください。
スタイル
「スタイル」のタブでは、パーツごとに用意されている配色やレイアウトのパターンを選択します。セレクトボックスから選択すると、表示例が切り替わりますので、そちらを参考に選んでください。
背景
「背景」のタブでは、背景色や背景画像を設定します。この設定を使用するには「背景設定を有効にする」のスイッチを切り替えて下さい。そうすると、各設定項目が表示されます。
スイッチを切り替えたら、「背景色」でカラーを指定するか、「背景画像」で画像を指定します。未指定の場合は、スタイルの設定が優先されます。背景画像を指定する場合は、さらに表示方式を設定することができます。
背景画像の表示
- 元のサイズ…指定した画像をそのままの大きさで表示します。リサイズは行われません。
- 横幅に合わせてリサイズ…画面の横幅に合わせて自動的にリサイズを行います。ほとんどの場合はこの設定がおすすめです。ただし、画像の一部が見切れる場合もありますのでその点はご注意下さい。
- 繰り返し…画像を繰り返してタイル状に表示します。リピートすることを想定した画像を利用する場合はこの設定を選択して下さい。
背景画像の位置を固定する
この設定をすると、画面をスクロールしても画像の表示位置が変わりません。
背景画像を暗くする
この設定を使用すると、画像を暗く（黒っぽく）表示されます。テキストが読みにくい場合は、この設定を使うことで改善する可能性があります。
余白
パーツの上下の余白を指定します。余白を大きくしたい場合は、「広く」または「もっと広く」を選択します。逆に余白を狭くしたい場合は、「狭く」または「余白なし」を選択します。
オプション
※この設定はCSSの知識がある方向けのものです。
CSSのクラス名やIDを指定する場合に使用します。入力する際には、.や#は必要ありません。そのページだけにCSSを追加する場合は、ページごとにCSSを追加するを参照して下さい。
その他の操作方法
並び替え
追加したパーツの順番を並び替えることができます。パーツの名称が表示されている箇所にマウスのカーソルをあわせて、ドラッグ・アンド・ドロップしてください。
追加・削除
パーツの名称が表示されている箇所にマウスのカーソルをあわせると、右側に+と-のアイコンが表示されます。（上記の画像を参照）
+のアイコンをクリックすると、そのパーツの上部に新しいパーツを追加することができます。追加できるパーツは「パーツを追加」のボタンを押すと一番下に追加されますので、挿入される位置が違います。
-のアイコンをクリックすると、そのパーツを削除することができます。確認のダイアログが表示されますので、「取り除く」をクリックすると削除が実行されます。一度削除した内容は戻すことができませんのでご注意下さい。
表示の切り替え
パーツの右上にある▲をクリックすると、設定項目を折りたたんで最小表示されます。その後、▼をクリックすると本の表示に戻ります。パーツ数が多くなってきた場合に、入力内容が確定したものを折りたたんでおくと、編集作業がしやすくなります。順番を並び替えるときにもご活用下さい。