【 OnePress 】無料のワードプレス・テーマOne Pressの使い方

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

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

目次

OnePressとは

ワードプレスで利用できるテーマです。シンプルだからこそ、ユーザーの心に残りやすいページの作成が可能となっております。ワンページで表現されている構造は、ユーザビリティも高く、直感で操作することにより、ユーザーにストレスを感じさせることがありません。そして、何よりも伝えたいことはなにか。どんなサービスなのか。それらをわかりやすく、視覚効果を用いながら、伝えることが可能となっております。PLUSという有料版の利用も可能ですが、今回は無料でどれだけの機能が使えるのかについてご説明します。

インストール

それでは早速ですが、ワードプレスのテーマ「OnePress」のインストール手順についてご説明します。

まずはOnePressをダウンロードします。

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

上記のURLにアクセスすると、スクリーンショットのような形で、ワードプレスのテーマ「OnePress」のダウンロードページが表示されます。ここではページ右側「ダウンロード」をクリックして、パソコンに保存します。なお、保存する場所については任意ですが「onepress.1.3.5.zip」は.zip形式のまま解凍しないようにしましょう。ワードプレスでテーマをインストールする時は、.zip形式で圧縮されたままアップロードしてインストールすることが可能となっております。
1x1.trans

次は、ワードプレスにログインして、ダッシュボードを表示します。ダッシュボードの左側の外観をクリックします。メニューが開くので、その中のテーマをクリックします。

こちらはまだワードプレスにテーマをインストールしていない状態のスクリーンショットです。画面左上の「テーマ」という文字列の右側に「新規追加」というボタンがあるので、そこをクリックします。
1x1.trans

画面が移動したら、また画面左上の「テーマを追加」の文字列の右側にある「テーマのアップロード」というボタンをクリックします。
1x1.trans

テーマのアップロードをクリックすると、上記のようにファイルの選択を促す表示が出るので、「ファイルを選択」をクリックします。ダイアログが開きますので、先ほどダウンロードした「onepress.1.3.5.zip」を選択します。
1x1.trans

ファイルが選択されると、上記のように「ファイルを選択」の右側に「onepress.1.3.5.zip」が表示されます。表示されたことを確認して、その右側の「今すぐインストール」をクリックします。
1x1.trans

「今すぐインストール」をクリックすると、上記のような画面になります。次は青文字で下線のある「有効化」をクリックします。
1x1.trans

下記のように画面が移動します。ここまでが、ワードプレスでテーマをインストールする方法と、インストールしたテーマを有効化する手順となっております。
1x1.trans

次にOnePressの場合は固定ページのテンプレートをデフォルトテンプレートからフロントページに変更します。これはOnePressのテーマのオプションである「セクション」を使えるようにするために必ず行う項目です。

画面左側の外観をクリックして、カスタマイズを開きましょう。

下記画面のように現在のテーマの下に赤丸で2という表示があるので、その部分をクリックします。
1x1.trans

下記の画面が表示されます。ページ下部のトップページのページテンプレートを変更をクリックしましょう。
1x1.trans

※ここでは2つのプラグインの導入を促す表示がされていますが、今回はページテンプレートの変更のみを行います。

画面の右側にテンプレートという文字列があり、その下のプルダウンにデフォルトテンプレートという表示があるのでクリックしてフロントページに変更します。
1x1.trans

このような表示ですね。変更したらページ右側の青地に白文字の更新のボタンをクリックしましょう。
1x1.trans

次に、実際に有効化したテーマが、どのように適用されているかを確認しましょう。ワードプレスのダッシュボードの左隅にあるサイト名にマウスカーソルを合わせると「サイトを表示」というツールチップが表示されるので、それをクリックします。

きちんとテーマが適用されていることが確認できますね。ワンページでとても見やすく、そして伝わりやすい構造だということがわかります。
1x1.trans

こちらはワードプレスのテーマ「Twenty Seventeen」を有効化した場合のサイトのトップページです。こうしてテーマごとに違いがあることが理解出来ます。
1x1.trans

次は、ワードプレスのダッシュボードに戻り、画面左側の「外観」をクリックします。そして、OnePressのテーマのサムネイルにカーソルを合わせます。「テーマの詳細」という表示が出ますので、クリックしてみましょう。
1x1.trans

OnePressについての説明が表示されます。ここで確認しておくのは画面右下の部分です。

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

上記の引用の部分がテーマごとに違いがあります。これがOnePressの主要なデザインの要素・機能・設定することが可能な項目となっています。これらを確認することで、テーマをインストールした時に、どのようなものがあるのか、すぐに確認することが可能です。

外観・カスタマイズ

次はインストールしたテーマのカスタマイズをします。先ほどと同じように、ダッシュボードの左側の外観をクリックして、「有効化:OnePress」の文字列の右側にある青地白文字の「カスタマイズ」をクリックします。

カスタマイズ

カスタマイズをクリックすると、下記のような画面に移動します。
1x1.trans

これがワードプレスのテーマ「OnePress」をカスタマイズする画面です。一般的にカスタマイズと聞くと、もともとあるプログラムやコードを改変したり、改造するイメージがありますが、ワードプレスでは表示される文字列や配置など、テーマごとに設定できる項目を変更することを意味します。
ワードプレスでテーマのカスタマイズをするというのはWeb上で、実際にサイトをどのように表示したいのかを自分自身で自由に設定することです。スクリーンショットを見るとわかりますが、青い丸の中に鉛筆のアイコンが何箇所か表示されていますね。これをクリックすると、その項目を編集することが可能になります。

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

それでは早速、サイトのタイトル、タグ&ロゴの部分をクリックしてみましょう。

上記の画面に移動しました。ここがOnePressのタイトルやキャッチフレーズ、ロゴを設定することが可能です。項目についてひとつひとつ見てみましょう。
1x1.trans

ロゴ

ここでサイトの顔とも言えるロゴが設定できますね。ロゴについては視覚的にここだ!と検索エンジンの結果から来て、ページごとに閲覧しているユーザーにも覚えてもらいやすいので、必ず設定しましょう。そういえば前も違うことでここのサイト見たかも?といった形の印象を与えることが出来て、他のページやコンテンツも見てくれるようになります。

サイトのタイトル、キャッチフレーズ

ロゴがサイトの顔だとすれば、サイトのタイトルは名前、キャッチフレーズは簡単な自己紹介です。ここは何をするところなの?どんなサービスなの?その疑問にすぐに答えることで、ユーザーに安心感を与えることが出来ます。

サイトタイトルを非表示、サイトのキャッチフレーズを非表示

デザインや他に伝えたいことを優先したい場合や、サイトタイトルが会社名、キャッチフレーズが文章ではなく、簡単な単語による企業紹介の場合に非表示にすることも検討出来ます。Webページ全般におけることですが、ファーストキャッチとしてのイメージはとても大切であり、サイトタイトルやキャッチフレーズが固いと感じたり、意味が伝わりにくい場合にも非表示にしておくことでページに対する好感度を上げることが可能です。

サイトアイコン

サイトアイコンはサイトのアプリとブラウザーのアイコンとして使用されます。アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があります。
画像が選択されていません

画像を選択

この部分は説明通りです。ファビコンと呼ばれるものでもあります。

テーマオプション

カスタマイズの画面に戻り、次はテーマオプションをクリックしてみましょう。

一般・サイト配色・ヘッダー・ソーシャルプロフィール・ニュースレターという項目がありますね。ひとつひとつ見てみましょう。
1x1.trans

一般

まずは一般の項目をクリックします。
1x1.trans

Site Layout

Site Layout, apply for all pages, exclude home page and custom page templates.

“”サイトのレイアウト
サイトレイアウト、すべてのページに適用、ホームページとカスタムページテンプレートを除外””

上記はGoogle翻訳を利用して、日本語化したものです。OnePressではホームページとカスタムページテンプレート以外ではサイドバーが表示されるということがわかります。上記の項目を設定することで右側・左側・非表示にすることが可能です。

固定ヘッダーを無効にする。

スクロール時の固定ヘッダーを無効にするには、チェックします。

サイトのタイトルとキャッチフレーズ、そしてメニューの固定化を解除します。ページ上部に常に表示しておきたい場合はチェックを外したままにしましょう。
非表示にする基準としては、ページ上部に常に固定で表示されることで、スクロールした時に視覚的に表現できるスペースが減ってしまうことが嫌な場合にチェックを入れるようにします。

アニメーション効果を無効にします。

ボックスをチェックして、スクロール時に全ての要素アニメーションを無効にします。

この項目にチェックを入れると、スクロールしている時の動きを無効にできます。無効にする基準としては、動きの大きいアニメーションや、スクロールすることで見られなくなってしまうことを防ぎます。

ページトップへ戻るを非表示にする。

ボックスをチェックして、フッターのトップに戻るボタンを非表示にします。

こちらを非表示にするのは、デザイン的に邪魔になる。もしくは、ページのボリュームを考えて作成し、少なく簡素に伝えたい時に余計な要素を少しでも省きたい場合に利用します。

サイト配色

次はサイト配色の部分をクリックしてみましょう。
1x1.trans

メインカラー、フッター背景、フッター情報の背景

ここでは上記の3つの色について設定することが可能です。ワードプレスでサイトを構築する時に意識するべきことの一つが統一感です。配色や配置がバラバラ過ぎるとユーザーの気が散ってしまいます。それらをしっかりと考えることで、ユーザーが落ち着いてコンテンツに集中することができ、また訪問しようという気持ちを起こさせます。

ヘッダー

一つ前に戻り、次はヘッダーの部分をクリックしましょう。
1x1.trans

  • 背景色
  • サイト名の色
  • 画像ロゴを使用しない場合のみ設定します。
  • メニューリンク色
  • メニューリンクのホバー/アクティブ時の色
  • メニューリンクのホバー/アクティブ時の背景色
  • レスポンシブメニューボタンの色

ここではヘッダー部分の細かい色について設定出来ます。先ほどの配色と同じように統一感を意識しながら設定するようにしましょう。

メニューを中央揃えにする

利用するロゴが高すぎる場合、チェックして自動でメニューのタテを揃えます。

ヘッダーの透過

フロントページテンプレートでのみ適用します。

こちらも記載してある通りですね。試しにチェックを入れたり外したりしてみましょう。

Scroll to top when click to the site logo or site title, only apply on front page.

“”サイトロゴやサイトタイトルをクリックするとトップにスクロールし、フロントページにのみ適用されます。””
こちらもGoogle翻訳で日本語化したものです。スマホでヘッダーをタップ、もしくはマウスでクリックするとページトップに移動するという意味ですね。

ソーシャルプロフィール

またひとつ目前の画面に戻り、次はソーシャルプロフィールをクリックします。
1x1.trans

フッターの SNS を非表示にします。

ボックスをチェックして、フッター SNS セクションを非表示にする。
以下の SNS プロフィール設定はサイトのフッターに表示されます。

SNS フッターのタイトル

更新を維持する

ソーシャル

上記のように項目があり、初期設定ではフッターのSNSを非表示にしているようですね。
こちらも試しに表示・非表示を試してみましょう。基本的にワードプレスでは、チェックを入れたり、項目を追加してもすぐに戻すことが可能です。そして、色々と試してみないと機能に対する知識が増えません。特にテーマのカスタマイズでは、直感で選ぶ必要性おあるので、自分で試せるようになりましょう。

ニュースレター

一つ前に戻り、次はニュースレターをクリックします。
1x1.trans

ニュースレターのフッターを非表示にします。

フッターのニュースレターのフォームを非表示にするには、このボックスをチェックします。

こちらも初期状態ではチェックが入っており、非表示になっています。

ニュースレターのフォームタイトル

タイトルの入力が可能です。初期状態は「ニュースレターを受け取る」になっています。

MailChimp アクション URL

ニュースレターフォームは MailChimp を利用しています。ガイドに従って MailChimp アクション URL の取得方法を確認してください。

ニュースレターの機能については別途設定が必要ということですね。

メニュー

カスタマイズのトップに戻り、次はメニューをクリックしてみましょう。
1x1.trans

メニューの位置・トップメニュー・ソーシャルリンクメニューの項目があります。どんなものなのか見てみましょう。

メニューの位置

お使いのテーマは1つのメニューに対応しています。使用したいメニューを選択してください。

「カスタムメニュー」ウィジェットを利用してウィジェットエリアへメニューを配置することもできます。
下記のように記載されています。初期状態では何も設定されていないので、ヘッダー部分の右端の三本線のメインメニューをクリックすると下記のように×が表示されます。
1x1.trans

メインメニュー
  • トップメニュー

では、メインメニューの下のプルダウンをトップメニューに変更してみましょう。

トップメニューに変更したら、先ほどと同じようにヘッダーの右端の三本線のメニューをクリックしてみます。上記のように4つの項目が表示されました。
1x1.trans

  • ソーシャルリンクメニュー

次はプルダウンをソーシャルリンクメニューにしてみます。

同じようにメニュー部分をクリックすると、今度はSNSの表示に変更されていることがわかります。このようにヘッダー部分の表示を自分で自由に決められるということは、ユーザビリティを高めるために、自分で画面の遷移を想像することが出来ることと、Webページでありながら、アプリのように使いやすくすることが可能になります。
1x1.trans

トップメニュー

一つ前の戻り、トップメニューをクリックしてみましょう。
1x1.trans

先ほどのメニューで表示された項目が変更することが出来ます。

ソーシャルリンクメニュー

また一つ前に戻り、ソーシャルリンクメニューをクリックします。
1x1.trans

こちらも同様にSNSについての項目を自分で設定することが可能になっています。SNSについてのこうした項目は、ユーザーからのフィードバックを得られることもありますので、なるべく用意した方が良いです。メールアドレスだけですと、メールはちょっと…というユーザーからの声を聞くことが出来なくなってしまうからです。拡散などを意識しなくても、連絡先という位置づけで登録し、増やしておくのもおすすめです。

ウィジェット

カスタマイズのトップに戻りましょう。次はウィジェットです。
1x1.trans

ウィジェットエリアはテーマ内の他のページにあり、表示中のページには存在しません。
OnePressの今の設定ではテーマからのウィジェットの設定は出来ないようですね。次の項目に進みましょう。

固定フロントページ

カスタマイズのトップで固定フロントページをクリックします。
1x1.trans

テーマは固定フロントページをサポートしています。
フロントページの表示
○ 最新の投稿
● 固定ページ

固定フロントページとはブログの投稿をサイトのトップにするか、固定ページにするかを選ぶ項目です。初期設定でフロントページは固定ページに設定されています。

投稿ページについてはここではブログになっていますが、フロントページ・投稿ページともにプルダウン項目で選べるようになっています。

+新規固定ページを追加

上記をクリックすると固定ページを新しく作ることが出来ます。固定ページはブログのように時系列でのコンテンツというよりは、時間軸とは別で、伝えたいコンテンツとして利用するのがとても便利です。

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

カスタマイズに戻り、セクションの順序とスタイリングをクリックしてみましょう。
1x1.trans

ここでは有料のOnePress PLUSへのリンクが表示されているようですね。次の項目に進みましょう。

セクション:ヒーロー

カスタマイズのトップでセクション:ヒーローをクリックします。

ヒーロー設定・ヒーローの背景メディア・ヒーローのコンテンツレイアウトの3つがあります。
1x1.trans

それぞれクリックして見てみましょう。

ヒーロー設定

1x1.trans

セクションを非表示にします。

ボックスをチェックして、セクションを非表示にする。

セクションID:

2番目のID、リンクアンカーに使用します。
ヒーロー

ヒーローセクションを全画面表示にする
ボックスをチェックしてヒーローセクションを全画面表示にします。
上部の余白:

ヒーローコンテンツの上の余白(%で指定)
初期値:10

下部の余白:

ヒーローコンテンツの下の余白(%で指定)
初期値:10

テキストアニメーション

初期値:flipInX

Text animation speed

フレーズごとの変化の間隔をミリ秒で指定
初期値:5000

Slider animation speed

This is the speed at which the image will fade in. Integers in milliseconds are accepted.
初期値:750

Slider duration speed

The amount of time in between slides, expressed as the number of milliseconds.
初期値:5000

かなり細かく設定できますね。これらの項目についてはひとつひとつご自身でクリックや数値を変更してみましょう。アドバイスとして、ここに抜粋してある数値や設定を参考にして、変更した後におかしくなったら元に戻せば良いということです。

ヒーローの背景メディア

1x1.trans

次はヒーローの背景メディアをクリックしてみましょう。

背景画像

項目
項目を追加

パララックス効果を有効にする (最初の背景画像のみ適用)
背景に重ねる色

Want to add background video for hero section? Upgrade to OnePress Plus version.

こちらはヒーローの背景画像を設定することが可能になっています。パララックス効果とはスクロールやマウスカーソルの位置によって背景画像に動くというものです。視覚効果の高いページはユーザーの心に残りやすく、メッセージが伝わりやすいです。ヒーロー効果についても文字列の変化などで、同じくユーザーに伝えやすくなると言えます。

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

次はヒーローコンテンツレイアウトを見てみましょう。

  • 表示レイアウト
  • 大きなテキスト
  • テキスト回転について
  • 小さなテキスト

1x1.trans

こちらはヒーローを直接編集する画面ですね。動きのある文字列は目線や視線を引き寄せます。これは心理的にも気になるという部分が大きく、上手に利用することで同じ位置で伝えたいことをいくつか配置・表示することが可能となります。

セクション:特集

カスタマイズのトップに戻り、次はセクション:特集の部分をクリックしましょう。画面が移動すると下記の2つのこうもくが現れました。ひとつずつ見てみましょう。

  • セクションの設定
  • セクション内容

1x1.trans

セクションの設定

セクションの設定をクリックすると下記の画面に移動します。
1x1.trans

セクションを非表示にします。

ボックスをチェックして、セクションを非表示にする。

セクション ID:

2番目の ID、リンクアンカーに使用します。
初期値:特集

セクションタイトル

初期値:機能について

セクションサブタイトル

初期値:セクションサブタイトル

セクション説明

任意の説明文章を入力します。

特集レイアウト設定

こちらもかなり細かく設定できますね。セクションについては伝えたいことをまとめて、その項目に対しての詳細を説明するというイメージです。

セクション内容

ひとつ前に戻り、次はセクション内容をクリックします。
1x1.trans

特集コンテンツ

「項目を追加」こちらの項目の追加をクリックしてみましょう。下記のように左側のサイドバーが編集画面に変わりました。
1x1.trans

試しに文字列を入力してみます。機能についての下の部分にテストという文字と、ここに試しに入力しています。という表示が出ました。
1x1.trans

このようにセクション内で伝えたいことを自由に編集することが可能です。

以下のセクションについてもほぼ同様の設定が可能です。セクションによって設定項目の違いはありますが、上記を参考にすることで、ご自身でも自由に設定出来ます。

セクション:私たちについて
セクション:サービス
セクション:ビデオライトボックス
セクション:ギャラリー
セクション:カウンター
チームセクション
セクション:ニュース
セクション:お問い合わせ

プレビューモードの選択

画面の左下にアイコンで表示されていますね。こちらをクリックすることでそれぞれの端末での表示を確認することが可能です。

デスクトッププレビューモードに入る
1x1.trans

タブレットプレビューモードに入る
1x1.trans

モバイルプレビューモードに入る
1x1.trans

このようにテーマのカスタマイズをする時には端末ごとの見栄えをしっかりと確認することが大切です。文字数によって、パソコンだとちょうどよくても、スマホだと3行くらいになったりすることもあります。テーマやデザインはしっかりとしているのに、意外と文字列の長さや、折り返す位置などを気にしない場合がありますから、これもひとつのアドバイスとして覚えておいてくださいね。

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

テーマを削除する時はまず別のテーマを有効化する必要があります。デフォルトのテーマなどに変更した上で、外観をクリックし、OnePressにマウスカーソルを合わせるとテーマの詳細という文字が表示されるのでクリックしましょう。OnePressについての詳細が表示されます。画面右下に赤文字で削除という文字列があるので、そこをクリックすればOnePressをテーマ一覧から削除することが可能です。
1x1.trans

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

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

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

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

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

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

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

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

まとめ

ビジネスにおける大切な要素、信頼。それをテーマで見事に再現し、表現していることが感じられます。
どんなに素晴らしい企業やサービスを持っていても、それらを上手に伝えることが出来なくては、収益に繋がりません。
しっかりとメッセージを伝えられる要素、提案だけでなく実績などもわかりやすく表現することが可能であり、かつ視覚効果に嫌味がない。動きのあるページはとても素敵で、まるでWebアプリケーションのような表示はとても魅力的なものだと感じました。