ホームページらしく枠にはめた感じで表示したページを作りたい場合の記事作成方法についてお話します。

「カラム」（ブロック）で構成する

※新エディタの場合です

  1. ブロックの追加ボタンをクリックして表示されるリストの中から、カラム（アイコンは3カラム表示の絵です）をクリック。
  2. デフォルトで２カラムで表示されます。
  3. その2カラムの片方にマウスカーソルを持って行き、ブロックの追加マークが表示されたらクリックしてカラムを追加。
  4. もう片方も同じ事をすると、４カラムになります。
  5. それぞれのカラムに画像や文章を書いていて下さい。
    ※画像は、鉛筆マークをクリックしてフルサイズ表示にしておいてください。スマホでの見え方対策です。

実際に「カラム」ブロックで４つ並べてみました

一応パソコンではきちんと並んで表示されますが、スマホで見ると画像がスマホの画面一杯には表示されないので、おかしな感じになってしまいました。

あとでわかったのですが、原因は画像の表示サイズ設定を「フルサイズ」にしなかった為でした。

画像をクリックして画像編集ボタンの鉛筆マークをクリック、画像編集画面で、表示サイズをフルサイズに変更してください。

とはいえ、使い勝手の良い方は、やはり次にご紹介するプラグインで構成する方法でしょうか。

あああああああああああああああああああああああああああああああああ

いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい


うううううううううううううううううううううううううううううううううう


ええええええええええええええええええええええええええええええええええええ

プラグインを使って構成する

  1. Page Builder by SiteOrigin　と　SiteOrigin Widgets Bundle
    ２つのプラグインをインストール⇒有効化する
  2. Page Builder by SiteOriginの管理画面がひょうじされるので、タブの「一般」をクリックし、下の赤丸のところのチェックを外す。

    ※管理画面から出てしまっていた場合は、「設定」⇒「ページビルダー」をクリックすると「SiteOrigin Page Builder管理画面」が表示されます。
  3. 固定記事または投稿（記事）で新規追加をクリック
  4. 記事部分に青いバー［Add SiteOrigin Layout Block］が表示されているので、それをクリックしてもいいですし、それは無視して「ブロックの追加」ボタンをクリックしてもOKです
  5. 「ブロックの追加」ボタンをクリックした場合は、⇒「レイアウト要素」タブの右の開くマークをクリック
  6. 「SiteOrigin Layout」をクリック
  7. 記事にページビルダーが表示されます
  8. 「列を追加」（「三本線アイコン」または「Row」）をクリック
  9. デフォルトで２カラム（50%ずつ）で表示されるので、好きな数のカラム数を設定して「挿入」ボタンをクリック
  10. 薄いブルーで指定したカラム数で行が１列表示されます。
  11. 記事を書きたいカラム部分をクリック（選択）すると、そのカラムの青色が濃くなります
  12. 選択した状態で、上のボタンの「ウィジェットを追加」（「ギアアイコン」または「Widget」）をクリック
  13. ウィジェットリストが表示されるので、その中から予定している表示方法ができるウィジェットをクリックして選択する
    ※いろいろ試してみてどういう感じになるかやってみるといいと思います。
  14. ここでは、サイドバーやフッターエリアの書き方の説明で使った「ビジュアルエディター」で説明していきます（選択します）
  15. 選択したカラム入ったビジュアルエディターにマウスカーソルを充てると、「編集」「重複」「削除」ボタンが表示されるので「編集」をクリック
  16. 「メディアを追加」ボタンで画像を選択して表示させる
  17. 画像をクリックし、鉛筆マークの編集ボタンを押して画像の編集画面に入り、画像の表示サイズをフルサイズにする
    ※フルサイズにしておかないと、スマホで見た場合、設定サイズにより画面一杯に表示されない場合があります
  18. 必要なら説明文を書いたり、画像または説明文に詳細ページへのリンクを貼る
  19. 右下の「終了」ボタンをクリック
  20. 同じスタイルで記入するときは、「ビジュアルエディター」の「重複」ボタンをクリックして複製して、場所（カラム）を移動させ、「編集」することも可能です（「複製」とするところが、和訳が間違ったのだろうと思います）
  21. 記事を書き終えたら、右側のシステムメニューの「文章」をクリックし、パーマリンク、アイキャッチ画像、カテゴリ（投稿記事の場合）、タグなどを設定して「公開」ボタンを押す。
  22. 通常のページを表示させ（別タブ推奨）、きちんと表示されているか、リンク先ページが正しく表示されるか確認して完了です。

※１ページ、全部このページビルダーで構成してもいいですし、他のブロックとも混ぜてページを構成させても大丈夫です。

※下の動画では、Lightningの機能の「フキダシ」と「カラーボックス」の説明も最後に追加しました。参照にしてください。m(__)m

お気軽にお問い合わせください。平日：10:00-17:00
[12:00－13:00は除く]
※GW、年末年始、夏季休暇有り
※集中講座、メンタルセッションは、上記営業時間外にも実施。
お問い合わせください。

お問い合わせフォーム