41作目のTCDテーマ「STORY」以降に標準搭載されるようになったTCDオリジナルの「ページビルダー」について解説していきたいと思います。早速使って頂いている方からは「このWordPressテーマ神ってるっ！」「これはやばい！」「画期的な機能ですね。」との評判を頂いております。ありがたい限りです。
なお、YouTubeにページビルダーの解説動画もアップしておりますので、そちらも併せてご視聴ください。
それではTCDオリジナルページビルダーの使い方を解説していきましょう。
目次
コンテンツが劇的に生まれ変わる”国内初”のページビルダー
ブログの記事は、文章を正しく【構成】することが重要です。しかし、いくら素晴らしい内容の文章が完成したとしても”文字だけを羅列しただけの記事”は読み手が退屈してしまい、離脱につながってしまいます。それではせっかくのコンテンツがもったいないですよね。
そのため、文章を【構成】するだけではなく、画像を用いて視線を動かしたり、項目ごとに小見出しでアクセントを付けたり、タグを活用してグルーピングしながら、読み手を楽しませたり”おもてなし”をする意識をもって、視覚に刺激を与える【構図】を整えることが大切です。しかし・・
- 「CSSなどの基本的な知識がないから自分でカスタマイズするのは難しい」
- 「できればいろいろなプラグインを併用するは避けたい」
- 「もともとデザインとかのセンスを持ってないから自信がない」
このような悩みを持っている方が多いため、私たちTCDは全精力を傾け、検証と改善を繰り返しながら【WordPress初心者でも、自由自在に記事ページがデザインができる”国内初”のページビルダー機能】を作り上げました。
CSSのカスタマイズやプラグイン不要で、このようなデザインの記事ページが作れますので、ぜひデモページをご覧になってください↓
WordPressブログに革命を起こすページビルダーでできること
ページビルダーはブログ記事を作る際に必要となる文章や見出し、画像の挿入はもちろん、記事カラムを分割したり、美しいスライダーやGoogleマップ、タブなどのコンテンツを直観的な操作で追加することができます。
たとえば2つに分割したカラムの左側に画像、右側にタブを追加すれば ↓ のようなレイアウトも簡単に作ることができます。
直観的に操作することができるページビルダーの使い方
通常、WordPressの記事投稿の画面では【ビジュアルエディタ】と【テキストエディタ】が用意されており、どちらかを選択して記事を書くことができますが、TCDテーマのSTORYをインストールすると、【ページビルダー】というタブが追加されています。（まずここで驚かれる方が多いです）
ページビルダーのタブをクリックすると、ページビルダー画面に切り替わり【行】や【コンテンツ】を追加していくことができます。
まず初めに【行を追加する】をクリックしてみましょう。するとポップアップウィンドウが開きますので、任意のカラム数（1から最大6カラムまで選択可）を選択します。また、カラム間のスペースも任意の数値に変えることができます。
さらに、分割された各カラムサイズも直観的な操作で調整が可能です。
カラム数や各カラムのサイズが決まり【追加】をクリックすると、ページビルダー画面に【行】が追加されますので、今度は指定したカラムに【コンテンツを追加】してみましょう。
【画像】【見出し】【キャッチフレーズ】【文章】【Googleマップ】【スライダーの設定】【タブ】の中から、追加したいコンテンツを選択することができます。（ここでは画像を追加してみます）
アップロードした画像にはリンク先URLを指定することも可能です。
指定したカラムすべてに画像を追加すれば、このように簡単に記事内に画像を並べることができます。
もし、各カラム間のスペースが不要であれば、【行を編集する】をクリックして、数値を0にします。
すると画像間のスペースがなくなりました。
スマホの表示方法も変更可能でモバイルファーストに対応
現在の検索エンジンでは、スマートフォン向けのコンテンツページを評価するモバイルファーストを実施しているため、スマホ表示にも意識を向けましょう。
ページビルダーで横並びにした画像は、スマホでも最適な表示ができるように【横並びの状態を解除する】を選択した状態では、自動でレスポンシブ対応になり画像は縦に表示されます。
もし、パソコンと同じように画像を横並びにしたい場合には、【横並びの状態を保つ】を選択することで表示方法を切り替えることができます。
SEO観点を考慮した見出し＆キャッチフレーズの使い方
1カラムの【行】を追加し、【見出し】と【キャッチフレーズ】のコンテンツを追加してみます。
フォントサイズは任意の数値を入力し、フォント色はカラーピッカーで自由に変更が可能です。フォントタイプも【メイリオベース】【游ゴシックベース】【游明朝ベース】から選択することができます。
すると記事内にこのような、見出しとキャッチフレーズが作れます↓
実は、この【見出し】と【キャッチフレーズ】のフォントサイズ、カラー変更、フォントタイプの選択などの機能はまったく同じものなのですが、ソースを見て頂くと、見出しは【H3】で、キャッチフレーズは【H4】で出力されているのが分かると思います。
読み手にはデザイン的な差異で要点を伝え、SEO観点を考慮してH3とH4の使い分けができる仕様になっております。
WordPress初心者でも使いやすいUIを実現したページビルダー
同じ要領で、複数の【行】と【コンテンツ】を追加した後も、ドラッグ＆ドロップで任意の場所に移動することができます。
このように、ページビルダーはWordPress初心者でも使いやすいUIを実現していますので、後はあなたのアイデア次第！ぜひあなたのセンスを活かして素敵な記事やランディングページを作ってください。
ページビルダーを活用して作成したサンプル記事ページ
ページビルダーが搭載されたTCDテーマの詳細は、こちらからご確認ください ⇒ 【STORY (tcd041)】
合わせて読みたいWordPressテーマ【STORY(tcd041)】の関連記事
第1回 : ブライダル業界の集客革新を提案するブランディング戦略
第2回 : あなたのコンテンツが劇的に生まれ変わる”国内初”のページビルダーの使い方
第3回 : 最上級の美しさで訴求するランディングの活用イメージ
