ManyFaceを使って分割カラムの実践

トップページのデフォルト設定は3カラムとなっておりますが、固定ページのワンカラム機能と「Black Studio TinyMCE」と 「Page Builder by SiteOriginWidget」プラグインを利用して様々なカラムページを制作することができます。

トップページをワンカラムレイアウトにする方法

固定ページを用意

ダッシュボード内の「固定ページ」→「新規追加」をクリックして新規固定ページ編集画面を開きます。

タイトルを「トップページ」という名前にします。

次に右側にあります、「ページ属性」にあるテンプレートの「デフォルトテンプレート」をクリックし、「1列表示用」に切り替えます。

2016-06-04

上記の状態で公開ボタンをクリックします。

トップページに反映

ダッシュボード内の「設定」から「表示設定」をクリックします。

フロントページの表示を「固定ページ」に合わせ、フロントページをトップページにします。

投稿設定

「変更を保存」ボタンを押して保存します。

外観の変更

ダッシュボード内の「外観」から「テーマ設定」をクリックします。

「ホームに記事一覧を表示する」→OFF

「更新情報の表示位置」→表示しない

「ウィジェット内でショートコードを使えるようにする」→ON

「ウィジェットが登録されていない場合に説明文を表示する」→OFF

「フッタースライダーを表示する」→任意
※フッターのスライダーに表示する記事種別で、ブログを表示させたい場合は「新着記事」に、固定ページを表示させたい場合は「おすすめ固定ページ」にすることで下部に記事一覧が表示されます。

基本設定

これでトップページの準備が整いました。

ページの作り方

先ほどの制作した固定ページ(トップページ)の編集画面にいきます。

Page Builderのタブをクリックします。
※タブがない場合は 「Page Builder by SiteOriginWidget」をインストールして有効化ください。

Page Builder

ページのレイアウトを決める

左にあるAdd Rowをクリックします。

addrow

左上の「Set row layout」を使ってカラム数を選択し、右下にあるInsertをクリックします。

※ここでは左右の比率50% / 50%で説明します。

collwm

境界線部分を左クリックしつつ左右に移動させると、カラム比率を任意で修正することもできます。

hiritu

 

セクションごとに異なるレイアウトを作りたい場合にも対応

2-3-4

「Add Row」を繰り返すことで上記のように一つのページ内に複数のカラムを共有させることもできます。

colloum

各カラムごとにテキストや写真を挿入する

制作したいカラムをクリックで選択したのちに、Add Widgetをクリックします。

click

ビジュアルエディターを選択します。
※ビジュアルエディターが表示されていない場合は「Black Studio TinyMCE」をインストールして有効化してください。

visual

以下のようにカラム内にビジュアルエディターが挿入されたことを確認できればOKです。

sounyuu

※挿入したウィジェットはカラム内であればドラックでどこにでも移動が可能です。

次にビジュアルエディターウィジェットにマウスを載せると右上にEditが現れますのでクリックします。

2016-06-09

クリックすると見慣れた光景が現れたと思います。後は、画像を入れるなり、文章を入れるなり、いつもの投稿と同じ方法でセットアップを行ってください。

oksfr

上記の方法でカラム全てにビジュアルエディターやその他プラグインを同じように設定し、最後に保存を行ってください。