IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

WP[Page Builder by SiteOrigin]固定ページで画像を横に並列表示、TOPページを簡単カスタマイズ

      2017/11/10  あとで読む   はてブする

「SiteOrigin Editor」で分割表示させた画面

WordPressのTOPページに固定ページを使って、画像を横に2列や3列に横に並べて手動表示させたい時があります。

tableタグなどを使用すると、画像のサイズや文字数によって左右の画像など崩れたりして、それを修正したりするのに時間がかかってしまいます。また、スマホで見ると、画像が小さくなって見づらいですよね。

そんな時にに便利なプラグイン「Page Builder by SiteOrigin」の使い方、スマホでどう表示されるのかについてもご紹介します。

スポンサーリンク

WordPressプラグイン「Page Builder by SiteOrigin」

まずはwordpressのダッシュボードから「プラグイン」をクリックし、上の「新規追加」をクリック。

右に「キーワードの検索」があるので、そこに「Page Builder by SiteOrigin」を入力しましょう。

WPプラグイン「Page Builder by SiteOrigin」

「今すぐインストール」を押し、インストールが完了すると「有効」にします。

同時に「SiteOrigin Widgets Bundle」というプラグインも入れるように言わるので、それも同じ方法でインストールして下さい。

 

分割したい数を選ぶ

固定ページのページビルダータブ

画像を2つ、3つ横に並ばせたい、或いは画像などを横に回らせたい場合は、まず「固定ページ」を新規でを選んで、右上にある「Page Builder」タブをクリック。

(固定ページ以外に、投稿ページでも使えます。)

 

固定ページ「Page Builder」タブ、分割画面

まずは分割します。「row」をクリックすると分割したい枠を選べます。

 

固定ページ「Page Builder」タブ、2分割画面

デフォルトは2分割で表示されます。PCの画面を左右に2つ表示させたい場合は、これでOK。

 

固定ページ「Page Builder」タブ、3分割画面

3分割にしたいときは上の「2」と表示されている画面を「3」に変更します。

 

固定ページ「Page Builder」タブ、3分割画面

すると「33.3%」という3分割に分かれました。後「Even(1)」の部分を変更すると、33.3%から幅の比率を変更できます。右と左の比率を入れ替える時は「Right to Left」をクリックすると入れ替わります。お好みで設定してください。

 

分割した枠に画像や文字を挿入

分割した枠に画像や文字を挿入

次に分割したそれぞれの枠に、画像や文字を入れていきます。左上の「+Add Widget」をクリック。

 

wordpress、SiteOrigin Editorボタン

色々と出てくるのですが、ここでは「SiteOrigin Editor」をクリックしましょう。これにするとテキストや画像を中心に入力できます。

 

固定ページ分割、それぞれの枠の編集

「SiteOrigin Editor」が先ほどの枠の一つに表示されました。ここだと右側に出ています。

 

「SiteOrigin Editor」の移動

左の枠に移動させたい時は、ドラッグすると簡単に場所を変更できます。

 

「SiteOrigin Editor」をもう一つ作成

もう一度左上の「+Add Widget」をクリックし「SiteOrigin Editor」を選択すると2つ目が表示されました。

 

「SiteOrigin Editor」編集画面

「SiteOrigin Editor」をクリックすると、いつも見かけるWordPressの編集画面になります。自由にテキストや画像を入れて下さい。

 

同じものが必要なら「Edit Duplicate」

固定ページを分割表示、同じ内容を複数作る時は「Edit Duplicate」ボタンで

同じ作業工程のものを複数作る場合は、複数作りたい個所の「Edit Duplicate」をクリックしましょう。

 

固定ページを分割表示、「Edit Duplicate」で複数表示できた例

すると全く同じものが、その下に表示されました(Cというタイトルの下に同じCがコピーされている)。後は一部変更したい個所を編集してください。

 

スポンサーリンク

スマホではどう表示されるのか?

これまではPCで表示させることを目的に横に2分割、3分割などの表示方法をご紹介しました。

ではこの分割法では、スマホでどのように表示されるのか見てみましょう。

「SiteOrigin Editor」に画像とテキストを入力、一例

例としてタイトルに「A」、編集画面に「メディアを追加」から画像を挿入し、同様に右の「SiteOrigin Editor」には、タイトルに「B」、同じく画像を挿入してみました。

 

「SiteOrigin Editor」で分割表示させた画面

編集後プレビューしてみると、上のように画像が左右に並んだ状態で、表示されました。

因みにこれはPCだけで、スマホだとタイトルA→タイトルAの画像→タイトルB→タイトルBの画像と表示されます。

スマホでも大きな画像で表示されるので、見やすく表示されるので便利ですよ。

 

複数画像がある場合

WPプラグイン「Page Builder by SiteOrigin」複数分割

例えばこのように縦2、横2と画像とテキストを入れてみました。

 

WPプラグイン「Page Builder by SiteOrigin」複数分割、スマホの表示順序

PCだとAの横にCが表示され、Aの下にCが表示されるという見たままの表示ですが、スマホだとA→B→C→Dという、まずは左側の列が表示されてから、右の列になるので注意をしてください。

 

まとめ

固定ページを自在にカスタマイズするのに便利なWordPressプラグイン「Page Builder by SiteOrigin」の使い方と、スマホでの表示の順序についてご紹介しました。

今回は同じパターンで画像を表示させましたが、別のものを回り込ませたいときにも使えるので、結構応用が効くと思います。

凝って作り込むと「新聞」のレイアウトのように自由自在に画像を入れたり、回り込ませることも可能です。

これを使うと、画像が一つだけ崩れたりすることが無いので便利ですよ。ぜひ凝ったトップページを作ってみて下さい。

スポンサーリンク

 - WordPress

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

  関連記事

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度「Windows 98 2nd …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …