【 OnePress 】ワードプレス・テーマのインストールとカスタマイズ方法

※この記事は2017/3/21日時点のバージョン4.7.3のワードプレスを使用したスクリーンショットを利用しております。使用するテーマOnePressのバージョンは1.3.5です。

OnePressとは

コーポレートサイトや個人のホームページに最適なテーマでシンプルなレイアウトが見やすい無料で利用できるテーマです。

ワンカラムデザイでユーザーが思わずクリックしたくなるようなアニメーションも取り入れられています。様々なデバイスに対応するレスポンシブデザインでWooCommerceとの連携もスムーズにできるようになっています。

テーマには、より簡単に高機能な設定ができる有料版のPLUSも用意されています。

コーポレートサイトや1カラムデザインを探している方はワードプレスでビジネス向けなテーマの選び方とテンプレート17選とワードプレスの1カラムで美しいテンプレート10選もご参照ください。

インストール

「OnePress」のインストール手順についてご説明します。

下記ページにアクセスしてテーマをダウンロードしてください。

https://ja.wordpress.org/themes/onepress/

ページ右側「ダウンロード」をクリックして、パソコンに保存します。ダウンロードしたテーマはzip形式のまま解凍しないでください。ワードプレスにテーマをインストールする時は、zip形式のままアップロードする必要があります。

管理画面で「外観」をクリックして、テーマ画面を表示します。画面上部に「新規追加」と表示されていますので、こちらをクリックしてください。

次に画面上部に表示されている「テーマのアップロード」をクリックします。

「ファイルを選択」をクリックし、先ほどダウンロードした「onepress.1.3.5.zip」を選択します。

ファイルが選択されたことを確認したら、右側の「今すぐインストール」をクリックします。

インストールが完了したら赤枠で囲んだ「有効化」をクリックします。

これでテーマのインストールと有効化が完了しました。

次にOnePressの機能をフル活用するためにテーマをカスタマイズしていきます。
管理画面より「外観」→「カスタマイズ」の順でクリックします。

カスタマイズ画面でテーマ名の横に通知表示があるのでクリックします。

One Pressのテーマ詳細ページが表示されますので、下部の「トップページのページテンプレートを変更」をクリックしてください。

画面の右側の「テンプレート」をクリックして「フロントページ」を選択してください。

設定が完了したら「更新」をクリックします。

現在のサイトがどのように表示されるのか確認しましょう。管理画面左上にあるサイト名にマウスカーソルを合わせると現れる「サイトを表示」をクリックします。

下画像のようにテーマが適用されていればOKです。

次にワードプレス管理画面より「外観」をクリックします。テーマ一覧が表示されるのでOnePressの「テーマの詳細」をクリックしてください。

OnePressの詳細が表示されます。ここで画面右下の「タグ」に注目してください。

タグ: 1列, 2列, 左サイドバー, 右サイドバー, カスタムメニュー, アイキャッチ画像, 全幅テンプレート, 固定投稿, テーマオプション, スレッドコメント, 翻訳対応, e コマース, ブログ, ポートフォリオ

引用部分はテーマごとに異なります。これがOnePressの主要なデザインの要素・機能・設定することが可能な項目となります。こちらを確認することでテーマの特性を確認することができます。

外観・カスタマイズ

テーマをカスタマイズしていきましょう。管理画面より「外観」→「カスタマイズ」と進んでOne Pressのカスタマイズ画面を表示します。

カスタマイズ

カスタマイズ画面が表示されました。ワードプレスではプログラミングの知識のない方でも簡単に外観やコンテンツのレイアウトが変更できるようになっています。画面左側が設定項目のリストで右側は変更がリアルタイムに確認できるプレビュー画面になっています。各変更は画面左最上部の「変更を保存」をクリックしない限り適用されないので、ここでプレビューを見ながら試行錯誤することが可能です。

上から順に各設定項目を見ていきましょう。

サイトのタイトル、タグライン＆ロゴ

ここではサイトのタイトルやロゴを設定します。

• ロゴ：サイトにロゴ画像などを設定したい場合はこちらで設定します。
• サイトのタイトル：サイトのタイトルを入力します。
• キャッチフレーズ：サイトのキャッチフレーズを入力します。
• サイトタイトルを非表示：チェックを入れるとサイトタイトルが非表示になります。
• サイトのキャッチフレーズを非表示：チェックを入れるとキャッチフレーズが非表示になります。
• サイトアイコン：ブラウザなどに表示されるサイトアイコンを設定します。

尚、サイトのキャッチフレーズは基本的に設定しない方が良いです。理由については以下の参考記事をご覧ください。

参考記事：ワードプレスの初期設定は7個だけ、あとで困らない初期設定を教えます！

テーマオプション

ここでは配色やヘッダーの設定などテーマの大まかな設定をします。
上から順に見ていきましょう。

一般

• Site Layout：サイトのレイアウトを設定します。
• 固定ヘッダーを無効にする。：ヘッダーの固定表示を無効にします。
• アニメーション効果を無効にします。：サイトが表示された時などのアニメーションを
• ページトップへ戻るを非表示にする。：フッターに表示されるトップページへ戻るボタンを非表示にします。

「Site Layout」は、トップページ以下の投稿や固定ページのレイアウトを変更します。デフォルトでは右にサイドバーがある状態になっていますが、任意で左サイドバー、もしくは1カラムにすることができます。

サイト配色

• メインカラー：ヘッダーの「当社について」などサイトのメインとなるカラーを設定します。
• フッター背景：フッターエリアの背景カラーを設定します。
• フッター情報の背景：フッター情報の背景カラーを設定します。

ヘッダー

• 背景色：ヘッダーエリアの背景色を設定します。
• サイト名の色：サイト名のカラーを設定します。
• メニューリンク色：メニューのカラー設定します。
• メニューリンクのホバー/アクティブ時の色：メニューにカーソルを合わせた時のカラーを設定します。
• メニューリンクのホバー/アクティブ時の背景色：メニューにカーソルを合わせた時の背景色を設定します。
• レスポンシブメニューボタンの色：スマホなどで表示した時のメニューのカラーを設定します。
• メニューを中央揃えにする：メニューの縦を揃えます。
• ヘッダーの透過：ヘッダーエリアを透過します。
• Scroll to top when click to the site logo or site title, only apply on front page.：サイトロゴやサイトタイトルをクリックした時にスクロールアクションでトップに戻ります。こちらはフロントページでのみ動作します。

デバイスによる表示を確認したい場合はカスタマイズ画面左したにあるPC、タブレット、スマホの各マークをクリックすると実際の表示を確認することができます。

ソーシャルプロフィール

• フッターの SNS を非表示にします。：チェックで非表示になります。
• SNS フッターのタイトル：SNSエリアのフッタータイトルを設定します。
• ソーシャル：各SNSの設定をします。

ニュースレター

• ニュースレターのフッターを非表示にします。：チェックで非表示になります。
• ニュースレターのフォームタイトル：ニュースレターのタイトルを表示します。
• MailChimp アクション URL：ニュースレターのフォーム作るサービスを利用してフォームを作成します。作成したURLを入力することでフォームが表示されます。

Single Post

• Show single post meta：チェックを入れると投稿ページに日付や作者の情報を表示します。
• Show single post thumbnail：チェックを入れると投稿ページにサムネイル画像を表示します。

メニュー

ここではメニューの設定をしていきます。

メニューの位置

ここではヘッダーに表示されるメインメニューの設定をします。

「メニューを追加」をクリックして新規メニューを作成します。

メニュー名を入力して「メニューを作成」をクリックします。

「項目を追加」をクリックすると右側にメニューに追加する項目が表示されるので、メニューに追加したいものを選択してください。追加された項目は左側に表示されます。項目をクリックしながら動かすと並び順の変更もできます。

• 表示位置：メニューを表示できる位置を指定します。このテーマの場合は1つの場所のみ表示可能なので「メインメニュー」にチェックを入れます。
• メニュー設定：チェックを入れると固定ページを作成する度に自動的にメニューに追加されます。基本的にはチェックを外しておいた方が良いでしょう。

これでヘッダーエリアにメニューが追加されました。

表示されるサイズに応じてメニューの形も変わります。カスタマイズ画面の左下にある「コントロールを非表示」をクリックすることでPCで表示された画面をプレビューすることができます。

ウィジェット

ウィジェットの設定はカスタマイズ画面ではなく管理画面から「外観」→「ウィジェット」で表示されるウィジェット編集画面で設定します。
ウィジェットの編集がしたい方は管理画面より設定しましょう。

固定フロントページ

• フロントページの表示：「最新の投稿」か「固定ページ」を選択します。
• フロントページ：フロントページに表示するページを選択します。
• 投稿ページ：投稿ページを選択します。

One Pressの機能を活用するためには「フロントページの表示」を「固定ページ」にしてください。「最新の投稿」にすると通常のブログサイトのような2カラム表示のサイトになります。

セクションの順序とスタイリング PLUS

こちらは有料版の機能なので省略します。

セクション：ヒーロー

トップ画像や、そこに表示されるテキストなど、ヒーローセクションの3つの設定をします。それぞれ見ていきましょう。

ヒーロー設定

• セクションを非表示にします。：トップ画像を含むヒーローセクションを非表示にします。
• セクションID：IDを入力します。デフォルトのままで問題ありません。
• ヒーローセクションを全画面表示にする：チェックを入れるとヒーローセクションを全画面表示にします。
• 上部の余白：ヒーローセクションの上部の余白を指定します。
• 下部の余白：ヒーローセクションの下部の余白を指定します。
• テキストアニメーション：テキストのアニメーションを指定します。
• Text animation speed：テキストのアニメーションスピードを指定します。
• Slider animation speed：スライダーアニメーションのスピードを指定します。
• Slider duration speed：スライダーアニメーションの間隔を指定します。

アニメーションの動きについてはプレビューを見ながら細かく設定してみると何がどのように機能しているのか確認できますので、試してみてください。

ヒーローの背景メディア

• 背景画像：トップの背景画像を設定します。
• パララックス効果を有効にする：チェックを入れるとパララックス効果が有効になります。
• 背景に重ねる色：背景画像に被せる色合いを指定します。
• Want to add background video for hero section? Upgrade to OnePress Plus version.：プロ版への誘導です。トップの背景に動画を設定したい方は有料版をお試しください。

ヒーローコンテンツレイアウト

• 表示レイアウト：トップのテキストのレイアウトを2パターンから選択します。
• 大きなテキスト：大きなテキストの文字を入力します。「 | 」を間に挿入することで回転するテキストを指定できます。
• 小さなテキスト：小さなテキストを入力します。こちらでも「 | 」で回転が有効になります。
• ボタン#1テキスト：左側のボタンのテキストを入力します。
• ボタン#1リンク：左側のボタンのリンク先URLを入力します。
• ボタン#1スタイル：左側のボタンのデザインを選択します。
• ボタン#2テキスト：右側のボタンのテキストを入力します。
• ボタン#2リンク：右側のボタンのリンク先URLを入力します。
• ボタン#2スタイル：右側のボタンのデザインを選択します。

セクション：特集

特集の表示設定をするセクションです。上から順に見ていきましょう。

セクションの設定

• セクションを非表示にします。：チェックを入れると特集セクションを非表示にします。
• セクション ID：IDを入力します。デフォルトのままでOKです。
• セクションタイトル：セクションタイトルを入力します。
• セクションサブタイトル：サブタイトルを入力します。
• セクション説明：セクションの説明を追加したい場合はこちらで入力します。
• 特集レイアウト設定：セクションのレイアウトを選択します。

デフォルトではセクションが追加されていないので「セクションタイトル」なども表示されていません。次の「セクション内容」を設定することで表示されます。

「セクション説明」ではHTMLを使って文字の装飾も画像を追加することもできます。

セクション内容

特集コンテンツ

コンテンツを追加していきます。
「項目を追加」をクリックしてください。

追加された項目をクリックすると詳細設定が表示されます。

• タイトル：コンテンツのタイトルを入力します。
• カスタムアイコン：アイコンまたは画像を選択します。
• アイコン：リストの中からアイコンを選択します。
• 備考：備考がある場合はこちらに入力します。
• カスタムリンク：リンク先のURLを入力します。

アイコンを選択してタイトルを入力した例です。画面右端のコンテンツが追加されていることが確認できます。

プレビューモードの選択

ワードプレスのカスタマイズ画面ではデバイスの大きさによってどのように表示されるのかを確認することができます。昨今ではスマホでのアクセスが非常に多くなってきていますので、見やすいサイトを意識してレイアウトなどをきめていきましょう。

カスタマイズ画面左下の3つのアイコンをクリックすることでプレビューサイズを切り替えることができます。

デスクトップモード

タブレットモード

モバイルモード

各サイズでの表示の違いを確認することができます。デスクトップの場合は4つの特集セクションを横並びで表示することができますが、タブレットでは最大2個、スマホでは1個の表示に切り替わり、縦並びになります。各項目の表示の違いを把握しておくと良いですね。

OnePressをテーマ一覧から削除する。

テーマを削除する際は事前に違うテーマを有効化しておいてください。
管理画面より「外観」をクリックしてテーマにカーソルを合わせると「テーマの詳細」を表示されますので、こちらをクリックします。

テーマの詳細が表示されました。画面右下に「削除」と表示されていますので、こちらをクリックして削除完了です。

以上がOnePressをインストール・カスタマイズ・削除までの手順となります。

有料版と無料版の違いについて

OnePressの有料版と無料版の違いについては下記URLがとても参考になります。
https://www.famethemes.com/plugins/onepress-plus/#panel-8537-5-0-0

下記が上記の項目を日本語化し、有料版で追加となる機能です。

セクションオーダーをドラッグアンドドロップする
新しいセクションを追加
すべてのセクションのスタイリング

背景ビデオ
背景スライド 2→無制限
セクションについて
アイテム数 3→無制限
サービス部門
アイテム数 4→無制限
カウンターセクション
カウンタ項目の数 4→無制限
チームセクション
会員数 4→無制限

Googleマップセクション
価格設定セクション
証言セクション
コール・トゥ・アクション・セクション
プロジェクトセクション
タイポグラフィオプション
24/7プライオリティサポート

主にはスライドやアイテム数などが無制限になるということですね。大きな企業であれば有料版を使うことも考えた方が良いですが、どんなサービスかを伝えたいという形であれば、無料版でも十分活用できるでしょう。

コーポレートサイトや1カラムデザインを探している方はワードプレスでビジネス向けなテーマの選び方とテンプレート17選とワードプレスの1カラムで美しいテンプレート10選もご参照ください。

まとめ

使いやすいカスタマイズ機能とセンスのよいレイアウトが魅力のOne Pressは企業のホームページだけではなく個人のPRページなどにも活用できる素晴らしいテーマです。コンテンツをより魅力的に紹介できるようなアニメーションの動きなども考えられて作られていると感じます。有料版ではトップ画像に動画を設置できるなどより高機能でアピールすることができるようになっているのも興味深いですね。無料ながら非常に使いやすいテーマですので、是非活用してみてください。