WordPress OceanWPテーマのカスタマイズ・基本設定のトップへスクロールから404エラーページまで ~その3~ | そう備忘録

WordPress OceanWPテーマのカスタマイズ・基本設定のトップへスクロールから404エラーページまで ~その3~

OceanWPの続き(その3)

WordPressの海外製のテーマOceanWP(無料版)をインストールして試行錯誤した時の備忘録の3回目。

インストールからホームページ設定までは前々回の記事を参照

基本設定の全体のスタイルからページタイトルまでは前回の記事を参照

尚、OceanWPは設定項目が非常に多く、細かい設定ができるので複数の記事にまたがってしまっている。

今回は基本設定の中のトップへスクロールから404エラーページの設定までの記事とする。

トップへスクロールから404エラーページの設定まで

基本設定

トップへスクロール

デフォルトでページ右下に表示されるページトップに一気に戻るためのボタンの表示形式を設定する。

トップへスクロール 設定

上スクロールボタン

一気に上にスクロールしたい時に画面下に表示されるアイコン

チェックをすると表示される

上にスクロール

矢印アイコン

以下の10パターンから指定する事ができる

矢印アイコンのパターン

位置

表示位置を左、右のどちらかを指定する

デフォルトは右

Bottom Position (px)

ページの下端からの位置(マージン)をピクセルで指定する

Bottom Position

ボタンサイズ (px)

ボタンのサイズをピクセルで指定する

アイコンサイズ (px)

ボタンの中のアイコンサイズをピクセルで指定する

角の丸み (px)

ボタンの角の丸みをピクセルで指定する

大きな数値を指定すると丸みがかる

15を指定した時の表示例

ボタンの丸みで15を指定

背景色

背景色を色パレットで指定する

背景色色パレット

背景色: ホバー

マウスオーバーした時の背景色を色パレットから指定する

ボタンの中のアイコンの色をパレットから指定する

色: ホバー

マウスオーバーした時のアイコンの色をパレットから指定する

ページ送り

記事が複数ある際に表示されるページ送りの表示に関する設定を行う。

ページ送り 表示例

ページ送り 設定

配置

ページ送りの配置位置

  • 中央

から選択可能

フォントサイズ (px)

数字のフォントサイズ指定する

デフォルトは18

ボーダー幅 (px)

数字の枠の幅をピクセルで指定する

ボーター幅=5の指定例

ボーダー幅 5の指定例

背景色

背景色を色パレットから指定する

背景色: ホバー

マウスオーバー時及び現在のページの背景色を色パレットから指定する

下記は分かりやすい様に赤を指定した時の例

背景色 ホバー

文字(数字)色を色パレットから指定する

色: ホバー

マウスオーバー時の文字(数字)色を色パレットから指定する

ボーダー色

ボーダーの色を色パレットから指定する

ボーダー色: ホバー

マウスオーバー時のボーダーの色を色パレットから指定する

フォーム (Input, Textarea)

テキストの入力フォーム(例えば検索欄)の表示形式の設定を行う。

検索フォーム 表示例

フォーム 設定

ラベル色

入力フォームのラベルの色の設定だとは思うのだが設定を変更しても反映されなかった

パディング (px)

ボックス内のテキストのパディングを上、右、下、左の順で指定する

パディング(上)の例

パディング(上)の例

フォントサイズ (px)

ボックス内のテキストのフォントサイズ

ボーダー幅 (px)

ボーダー(枠)の幅をピクセルで指定する

ボーダー幅 5の表示例

ボーダー幅 5の表示例

角の丸み (px)

ボーダーの角の丸み

幅:1、丸み:10の表示例

ボーダー幅:1 丸み:10の表示例

ボーダー色

枠線の色を色パレットから指定する

ボーダー色: フォーカス

フォーカスが当たった時の枠線の色を色パレットから指定する

背景色

背景色を色パレットから指定する

フォーム内に入力する文字色を色パレットから指定する

テーマボタン

ボタンの表示形式に関する設定を行う。

何でも良いのでボタンのあるウィジェットをサイドバーに表示させてみる。

下記はメルマガ登録用フォームのMailChimpウィジェットを表示させた時の例。

ボタン表示例

テーマボタン表示例

テーマボタン 設定

パディング (px)

ボタン内のテキストのパディング(ボタン枠とテキストとの幅)を上、右、下、左の順で指定する

角の丸み (px)

ボタンの角の丸み

10の時の表示例

角の丸み 10の表示例

背景色

ボタンの背景色を色パレットで指定する

背景色: ホバー

マウスオーバー時のボタンの背景色を色パレットで指定する

文字の色を色パレットで指定する

色: ホバー

マウスオーバー時の文字の色を色パレットで指定する

404 エラーページ

ページが見つからない時の404エラーページをカスタマイズできる。

404エラーページ 設定

空白ページ

オンにすると404エラーページをカスタマイズできる

レイアウト

以下の選択が可能

  • 全幅
  • 100%全幅

テンプレートを選択

プルダウンからテンプレートを選択する

テンプレートの作成手順は以下の通り

WordPressのメニューからTheme Panel※ー>My Libraryを選択して”Add New”をクリックする

※Theme PanelはOcean Extraプラグインを有効化すると表示される

My Libraryの新規作成

タイトルとスラッグを設定して「Elementorで編集※」ボタンをクリックする

※Elementorプラグインを有効にしている場合

テンプレートの新規作成

画像ウィジェットを右側のエリアにドラッグ・アンド・ドロップ

画像をドラッグ・アンド・ドロップ画像の選択から404エラーページの時に表示させたい画像を選択して「公開」ボタンをクリックした後、左上のメニューから”ダッシュボードに戻る”を選択する

画像を選択して公開する

テンプレートを選択から先程作成したテンプレートを選択する

404エラーページテンプレートの選択

404エラーページがカスタマイズされた

404エラーページ

続く

長くなったので今回の記事は一旦終了。

タイポグラフィ以降の次回の記事はこちらを参照して欲しい

最後に

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

3件のフィードバック

  1. 匿名 より:

    続きの記事をお待ちしています。
    お忙しいところ恐縮ですがどうぞよろしくお願いします!

    • souichirou より:

      コメントありがとうございます。
      次回の「タイポグラフィ~その4~」までアップしているのですがちょっと手が止まっています?
      折を見て手を付けたいと思っています。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。