WordPress OceanWPテーマのカスタマイズ・基本設定のトップへスクロールから４０４エラーページまで ～その３～
コンテンツ
OceanWPの続き（その３）
WordPressの海外製のテーマOceanWP（無料版）をインストールして試行錯誤した時の備忘録の３回目。
インストールからホームページ設定までは前々回の記事を参照。
基本設定の全体のスタイルからページタイトルまでは前回の記事を参照。
尚、OceanWPは設定項目が非常に多く、細かい設定ができるので複数の記事にまたがってしまっている。
今回は基本設定の中のトップへスクロールから404エラーページの設定までの記事とする。
基本設定
トップへスクロール
デフォルトでページ右下に表示されるページトップに一気に戻るためのボタンの表示形式を設定する。
|
上スクロールボタン |
一気に上にスクロールしたい時に画面下に表示されるアイコン チェックをすると表示される
|
|
矢印アイコン |
以下の１０パターンから指定する事ができる
|
|
位置 |
表示位置を左、右のどちらかを指定する デフォルトは右 |
|
Bottom Position (px) |
ページの下端からの位置（マージン）をピクセルで指定する
|
|
ボタンサイズ (px) |
ボタンのサイズをピクセルで指定する |
|
アイコンサイズ (px) |
ボタンの中のアイコンサイズをピクセルで指定する |
|
角の丸み (px) |
ボタンの角の丸みをピクセルで指定する 大きな数値を指定すると丸みがかる １５を指定した時の表示例
|
|
背景色 |
背景色を色パレットで指定する
|
|
背景色: ホバー |
マウスオーバーした時の背景色を色パレットから指定する |
|
色 |
ボタンの中のアイコンの色をパレットから指定する |
|
色: ホバー |
マウスオーバーした時のアイコンの色をパレットから指定する |
ページ送り
記事が複数ある際に表示されるページ送りの表示に関する設定を行う。
|
配置 |
ページ送りの配置位置
から選択可能 |
|
フォントサイズ (px) |
数字のフォントサイズ指定する デフォルトは１８ |
|
ボーダー幅 (px) |
数字の枠の幅をピクセルで指定する ボーター幅＝５の指定例
|
|
背景色 |
背景色を色パレットから指定する |
|
背景色: ホバー |
マウスオーバー時及び現在のページの背景色を色パレットから指定する 下記は分かりやすい様に赤を指定した時の例
|
|
色 |
文字（数字）色を色パレットから指定する |
|
色: ホバー |
マウスオーバー時の文字（数字）色を色パレットから指定する |
|
ボーダー色 |
ボーダーの色を色パレットから指定する |
|
ボーダー色: ホバー |
マウスオーバー時のボーダーの色を色パレットから指定する |
フォーム (Input, Textarea)
テキストの入力フォーム（例えば検索欄）の表示形式の設定を行う。
|
ラベル色 |
入力フォームのラベルの色の設定だとは思うのだが設定を変更しても反映されなかった |
|
パディング (px) |
ボックス内のテキストのパディングを上、右、下、左の順で指定する パディング（上）の例
|
|
フォントサイズ (px) |
ボックス内のテキストのフォントサイズ |
|
ボーダー幅 (px) |
ボーダー（枠）の幅をピクセルで指定する ボーダー幅 ５の表示例
|
|
角の丸み (px) |
ボーダーの角の丸み 幅：１、丸み：１０の表示例
|
|
ボーダー色 |
枠線の色を色パレットから指定する |
|
ボーダー色: フォーカス |
フォーカスが当たった時の枠線の色を色パレットから指定する |
|
背景色 |
背景色を色パレットから指定する |
|
色 |
フォーム内に入力する文字色を色パレットから指定する |
テーマボタン
ボタンの表示形式に関する設定を行う。
何でも良いのでボタンのあるウィジェットをサイドバーに表示させてみる。
下記はメルマガ登録用フォームのMailChimpウィジェットを表示させた時の例。
|
パディング (px) |
ボタン内のテキストのパディング（ボタン枠とテキストとの幅）を上、右、下、左の順で指定する |
|
角の丸み (px) |
ボタンの角の丸み １０の時の表示例
|
|
背景色 |
ボタンの背景色を色パレットで指定する |
|
背景色: ホバー |
マウスオーバー時のボタンの背景色を色パレットで指定する |
|
色 |
文字の色を色パレットで指定する |
|
色: ホバー |
マウスオーバー時の文字の色を色パレットで指定する |
404 エラーページ
ページが見つからない時の４０４エラーページをカスタマイズできる。
|
空白ページ |
オンにすると４０４エラーページをカスタマイズできる |
|
レイアウト |
以下の選択が可能
|
|
テンプレートを選択 |
プルダウンからテンプレートを選択する テンプレートの作成手順は以下の通り WordPressのメニューからTheme Panel※ー＞My Libraryを選択して”Add New”をクリックする ※Theme PanelはOcean Extraプラグインを有効化すると表示される
タイトルとスラッグを設定して「Elementorで編集※」ボタンをクリックする ※Elementorプラグインを有効にしている場合
画像ウィジェットを右側のエリアにドラッグ・アンド・ドロップ
テンプレートを選択から先程作成したテンプレートを選択する
４０４エラーページがカスタマイズされた
|
続く
長くなったので今回の記事は一旦終了。
この記事が何処かで誰かの役に立つことを願っている。
続きの記事をお待ちしています。
お忙しいところ恐縮ですがどうぞよろしくお願いします！
コメントありがとうございます。
次回の「タイポグラフィ～その４～」までアップしているのですがちょっと手が止まっています😅
折を見て手を付けたいと思っています。
お返事ありがとうございます！
ご無理のない範囲でよろしくお願いします