WordPress OceanWPテーマのカスタマイズ・基本設定のトップへスクロールから404エラーページまで ~その3~
OceanWPの続き(その3)
WordPressの海外製のテーマOceanWP(無料版)をインストールして試行錯誤した時の備忘録の3回目。
インストールからホームページ設定までは前々回の記事を参照。
基本設定の全体のスタイルからページタイトルまでは前回の記事を参照。
尚、OceanWPは設定項目が非常に多く、細かい設定ができるので複数の記事にまたがってしまっている。
今回は基本設定の中のトップへスクロールから404エラーページの設定までの記事とする。
基本設定
トップへスクロール
デフォルトでページ右下に表示されるページトップに一気に戻るためのボタンの表示形式を設定する。
上スクロールボタン |
一気に上にスクロールしたい時に画面下に表示されるアイコン チェックをすると表示される |
矢印アイコン |
以下の10パターンから指定する事ができる |
位置 |
表示位置を左、右のどちらかを指定する デフォルトは右 |
Bottom Position (px) |
ページの下端からの位置(マージン)をピクセルで指定する |
ボタンサイズ (px) |
ボタンのサイズをピクセルで指定する |
アイコンサイズ (px) |
ボタンの中のアイコンサイズをピクセルで指定する |
角の丸み (px) |
ボタンの角の丸みをピクセルで指定する 大きな数値を指定すると丸みがかる 15を指定した時の表示例
|
背景色 |
背景色を色パレットで指定する |
背景色: ホバー |
マウスオーバーした時の背景色を色パレットから指定する |
色 |
ボタンの中のアイコンの色をパレットから指定する |
色: ホバー |
マウスオーバーした時のアイコンの色をパレットから指定する |
ページ送り
記事が複数ある際に表示されるページ送りの表示に関する設定を行う。
配置 |
ページ送りの配置位置
から選択可能 |
フォントサイズ (px) |
数字のフォントサイズ指定する デフォルトは18 |
ボーダー幅 (px) |
数字の枠の幅をピクセルで指定する ボーター幅=5の指定例
|
背景色 |
背景色を色パレットから指定する |
背景色: ホバー |
マウスオーバー時及び現在のページの背景色を色パレットから指定する 下記は分かりやすい様に赤を指定した時の例 |
色 |
文字(数字)色を色パレットから指定する |
色: ホバー |
マウスオーバー時の文字(数字)色を色パレットから指定する |
ボーダー色 |
ボーダーの色を色パレットから指定する |
ボーダー色: ホバー |
マウスオーバー時のボーダーの色を色パレットから指定する |
フォーム (Input, Textarea)
テキストの入力フォーム(例えば検索欄)の表示形式の設定を行う。
ラベル色 |
入力フォームのラベルの色の設定だとは思うのだが設定を変更しても反映されなかった |
パディング (px) |
ボックス内のテキストのパディングを上、右、下、左の順で指定する パディング(上)の例
|
フォントサイズ (px) |
ボックス内のテキストのフォントサイズ |
ボーダー幅 (px) |
ボーダー(枠)の幅をピクセルで指定する ボーダー幅 5の表示例
|
角の丸み (px) |
ボーダーの角の丸み 幅:1、丸み:10の表示例 |
ボーダー色 |
枠線の色を色パレットから指定する |
ボーダー色: フォーカス |
フォーカスが当たった時の枠線の色を色パレットから指定する |
背景色 |
背景色を色パレットから指定する |
色 |
フォーム内に入力する文字色を色パレットから指定する |
テーマボタン
ボタンの表示形式に関する設定を行う。
何でも良いのでボタンのあるウィジェットをサイドバーに表示させてみる。
下記はメルマガ登録用フォームのMailChimpウィジェットを表示させた時の例。
パディング (px) |
ボタン内のテキストのパディング(ボタン枠とテキストとの幅)を上、右、下、左の順で指定する |
角の丸み (px) |
ボタンの角の丸み 10の時の表示例
|
背景色 |
ボタンの背景色を色パレットで指定する |
背景色: ホバー |
マウスオーバー時のボタンの背景色を色パレットで指定する |
色 |
文字の色を色パレットで指定する |
色: ホバー |
マウスオーバー時の文字の色を色パレットで指定する |
404 エラーページ
ページが見つからない時の404エラーページをカスタマイズできる。
続く
長くなったので一旦終了。
最近のコメント