ワードプレス無料プラグインPage Builderでトップページ作成

プラグイン

「Page Builder」でトップページをカスタマイズしよう

ここではワードプレスのプラグインを使用したトップページの作成方法について解説していきます。

「ブログにホームページのようなトップページを作成したい!!」

「投稿記事がどんどん積み重なって見づらい!!」

って思った事はありませんか?だけど、

投稿記事しか書いたこと無いのにどうやってトップページなんか作るの???

HTMLやCSSコードとかいう難しいことは自分には無理!!!

もう少し使い方に慣れてからにしよう

って思ったりしてませんか?

事実、自分もそう思ってました。記事は増えていくけど、トップページが手付かず。。。

そんな時、いつも通りネットでワードプレスの使い方を検索してた時に見つけたのが、

Page Builder by SiteOrigin」(ページビルダー)というプラグインでした。

直感的に操作できるので初心者でも扱いやすく、それでいて無料って言葉に惹かれて、ダメ元でトップページの作成をチャレンジしてみたら、以外にもあっさり作成することができました。

ただ、途中で何ヶ所か立ち止まった場所もあったので、備忘録がてらトップページ作成マニュアルを作成しました。

ここでは、「Page Builder by SiteOrigin」のインストールから、最終的にトップページに設定するまでの全てを沢山のスクリーンショットを使いながら解説していきます。

解説にはいる前に自分がトップページを作成する前のホーム画面を見て下さい。少し縦長なのでバーっと流す感じでスクロールして大丈夫です。

トップページ上段の画像

 

トップページ中盤の画像

 

トップページ後半の画像

元々はこんな感じでした。投稿記事がひたすら積み重なっていくやつです。

これが、トップページを作成することでどのように変わったかというと、

変更後トップページ上段の画像

 

変更後トップページ下段の画像

こんな完成図になります。上図は50%縮小バージョンである為、横幅が狭いですが、100%にしたら横幅一杯埋まる感じになります。ヘッダー部分も「ブログテーマ」という文字の上に表示されます。

素人感丸出しの作りですが、逆にいえば初心者でもこんな感じであっさり作れちゃいます。

それでは、前置きが長くなりましたが、トップページの作成について解説していきます。

プラグイン「Page Builder by SiteOrigin」をインストール

トップページを意識したお店の看板の画像

今回、トップページをカスタムする方法は、HTMLやCSSを編集する方法ではなく、WordPressプラグインの「Page Builder by SiteOrigin」を使用します。

このプラグインを使うと直感的に操作が可能なので、初心者の方も抵抗なくトップページのカスタマイズ出来ると思います。

それでは早速プラグインをダウンロードして行きましょう。

プラグインの新規追加画面で右上のキーワード欄に「Page Builder by SiteOrigin」と入力すると、以下のような画面が表示されるので、「Page Builder by SiteOrigin」をダウンロードします。

プラグインダウンロード画面の画像

ダウンロード後、「有効化」をクリックします。

プラグインが有効化された時の画像

これでインストールは完了しました。それでは実際にトップページをカスタマイズしていきます。

「Page Builder by SiteOrigin」の設定方法

ページビルダーエディタ基本画面

今回は、トップページのカスタマイズということなので、先ずはトップページを作成します。固定ページで新規追加をクリックします。

固定ページ新規追加ボタンの画像

新規固定ページ追加の画像

一見通常の固定ページ新規作成画面ですが、「Page Builder by SiteOrigin」をダウンドードしたことにより、既存の「テキストエディタ」、「ビジュアルエディタ」の横に「ページビルダーエディタ」が作成されていますのでクリックすると以下のように表示されます。

固定ページ編集の画像

この画面が基本設定画面になります。ここから列や行、ウィジェットを追加していって、各列ごとに設定していくことになります。

「列」や「ウィジェット」って何???って思われるかもしれませんが、実際のカスタマイズ例を見ていきながら解説していきますので、ここで分からなくても大丈夫です。

ブログタイトルを設定

それではまずブログタイトル画面を設定していきます。

ブログタイトル画面は以下のような設定にします。

  1. 列の設定
  • 列        1列
  • 行        1行
  • 横幅       画面全幅
  • 背景画像     使用したい背景を選択
  • 背景画像表示   カバー

それでは、実際の作成画面を見てみましょう。

まずは、「列を追加」をクリックします。

列を追加するときの画像

このような画面が表示されました。

初期画面では50%のマスが二箇所表示されています。ここではこのマスを「行」と呼びます。この場合は「1列に2行」となり、左右で別々の設定を行う事ができます。表示したい内容によっては、「行」を3、4〜と増やすことも可能です。

ここではブログタイトルを設定しますので1行にしてあげます。「set row layout」の箇所で「1」を選択します。「row」は直訳すると「行」という意味になり、「set row layout」は「行のレイアウトを設定します」という事になります。

続いて横幅を設定しますが、右側の「行をレイアウト」をクリックすると、

行のレイアウトで全幅を選ぶ画像
このような画面が表示されるので「全幅」をクリックします。

続いて背景画像の設定を行います。背景画像の設定は右側タブの「デザイン」クリックします。

デザイン選択画面の画像

デザイン画面では、「背景色」、「背景画像」、「背景画像表示」、「境界線の色」を設定できます。背景画像は現在の画像を使用、背景画像表示はカバーを選択して挿入ボタンをクリックします。

ブログテーマの設定

このブログがどんな内容の情報を発信しているのか?という事は、初めてブログに来た方には分かりません。そのような方に自分のブログのテーマを伝えることを目的として、設定を行います。

ブログのテーマは文章で書いても良いのですが、ここでは視覚的に分かりやすくデフォルトで備えられている「アイコン」を使用し、それと自分で短い「キャッチコピー」を作成していきます。

「Page Builder by SiteOrigin」にはデフォルトで数多くの「アイコン」が実装されているのでとても便利です。

ここでは完成図を下図のようにすることを目指します。

ブログテーマの画像

上図の場合、

ブログテーマという文字を入力する「見出し用のウィジェット」

「アイコン+説明用のウィジェット」を使用し上下に並べています。

それではそれぞれの作成方法を解説していきます。

「ブログテーマ」という文字の入力

  • 列       1列
  • 行       1行
  • ウィジェット  SiteOrigin Editor

まずは、ブログタイトルで作成したように「列」と「行」を作成します。

列が作成できたら「ウィジェットを追加」というボタンをクリックすると以下のように表示されます。

ウィジェット追加画面の上段部分の画像

ウィジェット追加画面の下段の画像

デフォルトでは上図の半分くらいしかウィジェットが実装されていないので、一番下にある青色の「Widgets Bundle settings 」をクリックしてウィジェットをインストールしましょう。

それでは、ここでの課題である「ブログテーマ」という文字の入力を行うために「SiteOrigin Editor」というウィジェットを選択します。列にテキストウィジェットが設定されたのが分かります。

サイトオリジンエディタウィジェット追加の画像

右上の編集ボタンを押して編集画面に移動し、以下のように入力します。

サイトオリジンエディタ編集画面の画像

通常に文字を入力したら小さいので、テキストエディタ画面で、

<center><strong><span style="font-size: xx-large;">ブログテーマ</span></strong></center>

と入力して、文字の大きさを変えています。

HTMLで文字を入力している画像

<center>で中央に、<strong>で太文字に、<span style="font-size: xx-large;">で文字の大きさを変更しました。

これで「ブログテーマ」の文章入力設定が完了です。続いて、「アイコン+説明用のウィジェット」の解説をしていきます。

「アイコン+キャッチコピー」を作成しよう

ここでは「アイコン」と「キャッチコピー」の作成方法について解説していきます。

再び先程の図を見てみます。

キャッチコピーの画像

今回は、「アイコン」を4つ使用して、その下に短いキャッチコピーを記載しています。

形は以下のようになります。

  • 列       1列
  • 行       1行
  • ウィジェット  SiteOrigin Features

「SiteOrigin Features」ウィジェットは、アイコン+説明を簡単に作る事ができるウィジェットで、アイコンの「数」、「枠の形や色」、「種類」、「大きさ」、「見出しやテキストの入力」などを設定すると、自動的に配置されるという便利な機能を持っています。

それでは具体的な設定方法を解説していきます。

これまでと同じように「列」と「行」を作成して「SiteOrigin Features」ウィジェットを選択します。編集ボタンをクリックすると以下のように表示されます。

SiteOrigin Featuresの設定画面

これがデフォルトの画面になって、それぞれの項目の簡単な見方を説明します。

「Features」はそれぞれ選択したアイコンの詳細な設定になります。

「add」はアイコンの数を増やしたい時にクリックします。クリックするたびに「Features」が増えていき、複数のアイコンを作成できます。

「Font Design」はタイトルやテキストを使用するときの、フォントの種類や大きさを変更する設定です。

「Icon container shape」はアイコンの周りの枠の形を設定します。roundなら「円」という枠です。

「Icon container size」は枠の大きさを設定します。

「Icon size」はアイコン自体の大きさの設定です。

「Features per row」はアイコンに使用する行の数です。要は何個横並びにしますか?って事です。

「Responsive layout」はレイアウトに反映させるという項目なのでチェックを入れます。

 

それでは、実際に設定が終わったあとの状態を見てみます。

SiteOrigin Features設定後の画像

そして、例えば「Features」個別設定でLinuxの項目を見てみると、

SiteOrigin Features設定後のlinuxの部分の画像

変更後のキャッチコピーの画像

といった感じになります。

「Icon container color」で枠の色の設定、「Icon color」でアイコン自体の色の選択ができます。

「Icon」ではデフォルトで用意されているアイコンを選べます。また、自分で作成したアイコンを使用したければ、「Icon image」から挿入することもできます。

文字入力については、「Title text」と「Text」で任意の文字を入力することが可能となっています。

新着記事設定

ここでは新着記事を横に並べて表示させる方法について解説していきます。

新着記事一覧の画像

完成形はこのような感じになります。

形としては以下のようになります。

  • 列       1列
  • 行       1行
  • ウィジェット  SiteOrigin Post Carousel

まずは、「列」と「行」を作成して「SiteOriginPost Carousel」ウィジェットを選択します。編集ボタンをクリックすると以下のように表示されます。

「SiteOriginPost Carousel」ウィジェットの設定画面

「Titleは」シンプルに「新着記事一覧」としました。

下側にある「+Posts query」の+をクリックすると、

「SiteOriginPost Carousel」ウィジェットの投稿設定画面

となります。今回は投稿記事のみを表示させたいので「投稿」を選択しています。残りの設定についてはデフォルトでOKです。

新着記事を表示させる設定はこれで完了となります。

カテゴリー設定

カテゴリー設定では、表示させたいカテゴリーの数によって行をどれだけ作るか変わってきます。

ここでは2列にしてみます。2列にすると以下のように表示されます。

カテゴリー一覧の画像

雑記がno postとなっているのは記事が投稿されていないからです。またインターネット用語のカテゴリでも、アイキャッチを設定していない場合は、画像が表示されません。ですので、アイキャッチを作成されていない方は、最初にアイキャッチを作成したほうが良いでしょう。

今回作成するカテゴリ一覧表示は、形としては以下のようになります。

  • 列       2列
  • 行       2行
  • ウィジェット  Newpost Catch

カテゴリーが多い場合は下に列を増やしていくか、横にもう1行追加してあげます。

まずは、「列」と「行」を作成して「Newpost Catch」ウィジェットを選択します。以下は全ての設定が終わった後なのでタイトルが入っています。

「Newpost Catch」ウィジェット」の設定画面の画像

「Newpost Catch」ウィジェットでは、「一覧のタイトル」、「表示対象カテゴリ」、「表示する記事の件数」、「サムネイル画像のサイズ」などが指定可能となっています。

それでは、編集画面をクリックして実際の設定画面を見ていきます。

「Newpost Catch」ウィジェットサムネイルの大きさ設定の画像

ここではカテゴリータイトル、サムネイルサイズや表示する記事の数を設定します。今回のケースでは各カテゴリ別に5件ずつ、80px四方のサムネイルを表示させるようにしました。

投稿タイプについては固定ページを除外するので、チェックを外しています。

ここの設定でポイントとなるのは、どうやってそれぞれのカテゴリーを設定に反映させるのかということです。

上段にタイトルという項目がありますが、これはあくまでページを表示させた時に出てくるただの見出しです。

それぞれのカテゴリーを設定に反映させるためには「特定のカテゴリを指定して表示」という項目を設定してあげる必要があります。皆さんが作成したカテゴリにはそれぞれ個別のIDがふられています。そしてカテゴリーIDはカテゴリー編集画面のアドレスバーに表示されます。管理画面からカテゴリー⇒任意のカテゴリーの編集を開くと下図のようになります。

カテゴリー編集画面の画像

この画面の状態の時、上部アドレスバーの文字列の中に以下のような文字列があります。

 

この場合では65がIDとなりますのでこれを入力しています。この番号はカテゴリーごとに違うので注意が必要です。

これで1つ目のカテゴリーの設定が終わりました。残り3つも同様に同じ操作でここでの設定が完了となります。

検索フォームの作成

「検索フォーム」というのは、何かキーワードを入力すると、ブログ全体の中から入力されたキーワードに類似した記事が表示される機能になります。

記事を探す画面の画像

今回はシンプルにこのような形にしています。CSSを使用すれば、色をつけたり、形を変えたり等のカスタマイズも可能です。

形は以下のようになります。

  • 列       1列
  • 行       2行
  • ウィジェット  検索

項目は1つだけでなのに、何故2行にするかというと、1行にすると真ん中に配置されてしまうので2行作成して、その左側にウィジェットを導入していきます。

検索フォーム設定の画像

このような表示になります。右側には何もウィジェットを導入していませんが、このような場合は何も表示されない空白画面となります。

検索に関する設定はこれで完了です。

固定ページの設定

固定ページの設定の変更

それでは作成してきたページを固定ページに反映させるために設定の変更を行います。

画面右側のページ設定をデフォルトから「1カラム」にします。今回作成したのはトップページなので、ここではサイドバーは必要ないということです。

最後に管理画面からカスタマイズ画面に入り、ホームページ設定をクリックします。

ホームページ設定のボタンの画像

そして、「ホームページの表示」のチェックを固定ページ方に切り替えます。最後に「新規固定ページを追加」から今回作成したページを設定したらトップページの設定が完了します。

ホームページ設定固定ページ選択画面の画像

最後に

トップページはそのブログの顔と言える部分です。訪れた方にとって「見やすく」、「分かりやすい」ページになるようにカスタマイズしていきましょう。

今回はプラグインを使用したトップページの作成方法の解説でしたが、トップページの作り方は他にも様々な種類の方法があります。その中から自分に合うものを選択して、お気に入りのトップページを作成できたらよいですね。

「Page Builder by SiteOrigin」以外の役に立つプラグインも沢山ありますので、いろいろ試してみると良いかもですね。

[徹底解説!]TinyMCE Templatesの設定と使い方
記事のテンプレートを作成できるWordPressプラグイン「TinyMCE Templates」の設定方法と使い方を簡単解説します! このプラグインは、ブログなどの記事を作成する際の作業時間を短縮してくれる便利なプラグインになりま...
ビジュアルエディタ「TinyMCE Advanced」の使い方
ビジュアルエディタ「TinyMCE Advanced」で簡単記事作成(できることと使い方の解説) 「TinyMCE Advanced」は記事を作成する際に使用するビジュアルエディタの機能を拡張するWordPressプラグインになり...
ワードプレス高速化!プラグインa3 lazy loadで簡単設定
a3 Lazy LoadをインストールしてWordPressを高速化しよう サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込...

コメント

タイトルとURLをコピーしました