Elegant Themesが提供している有料のWordPressテーマ「Divi」は、非常に多機能ですね。
サイドバーの［外観］［カスタマイズ］項目の設定内容の中で、気になるポイントをまとめていきます。
（テーマのバージョンアップ等によって、項目は変更される可能性があります）
Contents
操作に関して
インポート／エクスポート
カスタマイズ中、左上のやじるしアイコンをクリックする事で、インポート／エクスポートが出来るようです。
ページ上の鉛筆アイコン
カスタマイズ中、ページ上に表示されるアイコンをクリックすると、その箇所を編集する項目にジャンプします。これは便利ですね。
一般設定
サイトアイデンティティ
サイトのタイトル
キャッチフレーズ
サイトアイコン
サイトアイコンはブラウザーのタブやブックマークバー、WordPress モバイルアプリで表示されます。ぜひアップロードしましょう。
サイトアイコンは512 × 512ピクセル以上の正方形にしてください。
レイアウト設定
箱入りレイアウトを有効にする
センターに、影つきボックスを配置する機能。
ウェブサイトコンテンツ幅
ウェブサイトコンテンツ間隔
カスタムサイドバーの幅を使用します
セクション高さ
行の高さ
テーマカラー
サイト全体のテーマカラーの設定です。
書式
ボディテキストサイズ
ボディ行の高さ
ヘッダーテキストサイズ
ヘッダー文字間隔
ヘッダー行の高さ
ヘッダーフォントスタイル
ボディリンクカラー
テキストのカラー設定です。
ボディテキストカラー
テキストのカラー設定です。
ヘッダーテキストカラー
テキストのカラー設定です。
背景
背景色
背景の色を選択
背景画像
背景に配置する画像を選択
ヘッダーとナビ
ヘッダー形式
ヘッダースタイル
ヘッダの配置を調整。
縦ナビを有効にする
ヘッダナビゲーションを、サイドバー風に縦方向に配置。
スクロールするまでナビを非表示
ページの表示段階では、ヘッダナビゲーションを非表示。スクロール後に表示。
第一メニューバー
メニューバーの設定です。
配置としては、こうなります
第二メニューバー（SNSアイコンや、電話番号、メールアドレス）
第一メニューバー（ロゴ、メニュー、検索アイコン）
第二メニューバーは非表示の方がスッキリして良いかもしれません。
全幅にする
メニューバー要素を、左右に全幅で配置
ロゴ画像を非表示
メニューの高さ
ロゴの最大高さ
テキストサイズ
文字間隔
フォントスタイル
テキストの色
アクティブリンクカラー
背景色
ドロップダウンメニュー背景色
ドロップダウンメニュー行カラー
ドロップダウンメニューテキストカラー
ドロップダウンメニューアニメーション
フェード／拡大／スライド／反転
第二メニューバー
全幅にする
メニューバー要素を、左右に全幅で配置
テキストサイズ
文字間隔
フォントスタイル
背景色
テキストの色
ドロップダウンメニュー背景色
ドロップダウンメニューテキストカラー
ドロップダウンメニューアニメーション
フェード／拡大／スライド／反転
固定ナビ設定
固定ナビとは、スクロールダウンした時に最上部に表示されるナビゲーションです。
ロゴ画像を非表示
固定メニューの高さ
テキストサイズ
第一メニュー背景色
第二メニュー背景色
メインメニューリンクの色
セカンダリメニューリンクの色
アクティブなプライマリメニューリンク色
ヘッダー要素
ページ最上部のヘッダー設定です。ソーシャルアイコン表示、検索アイコンを表示、電話番号、Eメール、などを配置することができます。なにも配置しないとヘッダは配置されません。この方がすっきり見えるので、未設定のまま進める手もありますね。
ソーシャルアイコン表示
twitter、Facebookなどのアイコンを表示
検索アイコンを表示
検索アイコン（虫眼鏡）を表示
電話番号
Eメール
フッター
レイアウト
フッターに配置するウイジェットの数や、背景色を設定します。
列レイアウト
4列、3列、2列、1列、1/4 + 3/4列、3/4 + 1/4列、1/3 + 2/3列、2/3 + 1/3列、1/4 + 1/4 + 1/2列、1/2 + 1/4 + 1/4列、から選択
フッターの背景色
ウィジェット
フッターに配置されるウイジェットの、テキストサイズや色などを設定。
ヘッダーテキストサイズ
ヘッダーフォントスタイル
ボディ・リンクテキストサイズ
ボディ・リンク行の高さ
ボディフォントスタイル
ウィジェットテキストカラー
ウィジェットリンクカラー
ウィジェットヘッダーカラー
ウィジェットドットカラー
フッター要素
ソーシャルアイコンを表示するかどうか設定。
ソーシャルアイコン表示
フッターメニュー
フッターメニューの背景色などを設定
フッターメニュー背景色
フッターメニューテキストカラー
フッターメニューアクティブリンクカラー
文字間隔
フォントスタイル
フォントサイズ
下部ナビ
背景色
テキストの色
フォントスタイル
フォントサイズ
ソーシャルアイコンサイズ
ソーシャルアイコンカラー
フッタークレジット無効化
テーマのクレジットを外すことができます。
ボタン
ボタンスタイル
ボタンのスタイルを設定
テキストサイズ
テキストの色
背景色
ボーダー幅
ボーダーカラー
ボーダー丸み
文字間隔
ボタンフォントスタイル
ボタンアイコンを追加
アイコン選択
アイコンの色
アイコン配置
マウスオーバー時のみアイコンを表示
ブログ
投稿
ブログ投稿のテキストを調整できます。
メタ情報テキストサイズ
メタ情報行の高さ
メタ情報文字間隔
メタ情報フォントスタイル
ヘッダーテキストサイズ
ヘッダー行の高さ
ヘッダー文字間隔
ヘッダーフォントスタイル
モバイルスタイル
タブレット／電話（スマホ？）からアクセス時の、ロゴ画像を非表示／テキストの色／背景色を設定。
また、各端末の表示を再現。
タブレット
セクション高さ
行の高さ
ボディテキストサイズ
ヘッダーテキストサイズ
電話
セクション高さ
行の高さ
ボディテキストサイズ
ヘッダーテキストサイズ
モバイルメニュー
ロゴ画像を非表示
テキストの色
背景色
カラースキーム
カラースキームが選択できるようです。
メニュー
メニューを配置する位置の選択など。
・メニューの位置
メインメニュー ：ナビゲーションに配置
サブメニュー ：ヘッダに配置
フッターメニュー：フッタに配置（サブメニューは表示されず）
［メニューの各項目］
メニュー名
メニューの位置
ここにこのメニューを表示します。変更したい場合は、別の位置を選んでください。
メニュー設定
このメニューに新しいトップレベルページを自動的に追加
メニューの位置
お使いのテーマにはメニューの表示位置が3か所あります。
ウイジェット
ウイジェットのエリアの管理が出来ます。
ホームページ設定
投稿の逆順表示 (従来のブログ) または固定・静的なページから、サイトのホームページの表示内容を選択することができます。静的なホームページを設定するには、まず2つの固定ページを作成します。1つはホームページになり、もうひとつは投稿が表示される場所になります。
ホームページの表示
ホームページ
投稿ページ
追加 CSS
サイトの外観とレイアウトをカスタマイズするには、ここに独自の CSS コードを追加してください。 CSS について詳細を読む (新しいウィンドウで開きます)
キーボードナビゲーションの利用方法:
編集エリアの中で Tab キーを押すと、タブ文字を入力します。
このエリアから移動するには、Esc キーを押した後に Tab キーを押します。
スクリーンリーダー利用者: フォームモードではエスケープキーを2回押す必要があります。
エディターは自動的にコードシンタックスをハイライトします。プレーンテキストモードを利用するには、ユーザープロフィール (新しいウィンドウで開きます)から無効化することができます。
まとめ
詳細な箇所まで設定できるので、思いどおりのサイトが制作ますね。その分、設定に時間がかかりそうですが。
コメント