WordPressテーマ、OceanWPの使い方を解説!【カスタマイズ編】

いつも人気テーマ上位にいる、OceanWP。日本人の方は海外製テーマをあまり使わない傾向にあるので、使っている方をあまり見かけません。

ですが、このテーマは細かくカスタマイズできるので、WordPress初心者には難しいかもしれないですが、理解すれば誰でも使いこなせるようになります!

今回は、OceanWPの基本的な機能を解説していきます。

紹介する、カスタマイズの概要

赤丸をしたところを解説していきます。

基本設定

基本設定では、9種類に分かれています。その中でも、カスタマイズに重要なところを解説します。

全体のスタイル

BEFORE
AFTER

背景色やメイン色、ホバー色、ボーダー色などを変更してみました。

主なカスタマイズ

・メイン色
・メイン色ホバー
・メインボーダー色
・背景色変更 or 背景画像挿入
・リンク色
・リンクホバー色

一般設定

BEFORE
AFTER

一般設定では、主にレイアウトを変更することができます。

主なカスタマイズ

・レイアウトスタイル
・メインコンテナーの幅
・コンテンツ幅
・サイドバー幅

ページタイトル

BEFORE
AFTER

ページタイトル部分のレイアウトや背景色、文字色などを変更することができます。パンくずリストもレイアウトや文字色を変更できます。

主なカスタマイズ

・文字色
・背景色
・端末ごとに表示切り替え

トップへスクロール

BEFORE

AFTER

ページ右下にある、トップへスクロールをカスタマイズすることができます。

主なカスタマイズ

・背景色
・アイコン
・形
・位置

ページ送り

BEFORE
AFTER

主なカスタマイズ

・背景色
・文字色
・ホバー色
・配置

テーマボタン

BEFORE
AFTER

こちらではボタンのカスタマイズができます。

主なカスタマイズ

・ボタンの大きさ
・背景色
・文字色
・ホバー色
・ホバー文字色

テーマアイコン(Theme Icons)

BEFORE
AFTER

で囲ったところのアイコンが変更可能です。

タイポグラフィ

カスタマイズができる箇所は、以下の通りです。

とても細くカスタマイズできます。日本語のフォントファミリーはほとんどないですが、英字はたくさんあります。

主なカスタマイズ

・フォント
・フォントの太さ
・フォントスタイル
・フォントカラー
・行間
・文字間隔

トップバー

BEFORE
AFTER

サイト上部のカスタマイズができます。

主なカスタマイズ

・幅
・背景色
・文字色
・ソーシャルアイコン

ヘッダー

BEFORE
AFTER

主なカスタマイズ

・幅
・レイアウト
・背景色(動画や画像も挿入可能)
・メニュー位置
・ソーシャルアイコン
・ロゴ挿入

ブログ

BEFORE
AFTER

サイドバーを左、メタ情報の表示をなしにしてみました。

ここでは、ブログ投稿リストと個別投稿ページのレイアウトがカスタマイズ可能です。

主なカスタマイズ

・レイアウト(サイドバーの位置など)
・要素の表示指定(メタやタイトル、アイキャッチなど)
・メタ情報の表示指定

サイドバー

主なカスタマイズ

・背景色
・余白

フッターウィジェット

BEFORE
AFTER

主なカスタマイズ

・フッターウィジェットのオンオフ
・端末による、表示切り替え
・背景色
・文字色

フッター下

BEFORE
AFTER

主なカスタマイズ

・フッター下のオンオフ
・端末による、表示切り替え
・背景色
・文字色

まとめ:カスタマイズが豊富!!

とてもカスタマイズ豊富だと思いませんか?これらを駆使していけば、個性のあるサイトが完成します!

OceanWPの他の機能についても、随時更新しますのでご覧いただけたら嬉しいです。