sydney

Sydney応用編 – フロントページ全面を全幅背景画像で埋め尽す

公開日:2017/06/21  更新日:2020/12/03

フロントページヘッダー部分の、全面画像スライダー(5枚!)がとても魅力的なWordPressテーマ「Sydney」ですが、プラグイン「Page Builder by SiteOrigin」を導入することで、フロントページ全面をブロックで分かれた複数の全幅背景画像で埋め尽くすことが可能になります。

今回は、そのカスタマイズ方法を簡単にご説明しましょう。
基本的なカスタマイズ方法をマスターすることで、 【サンプルサイト】のようなフロントページを持つウェブサイトの作成が可能になります。

プラグイン「Page Builder by SiteOrigin」のインストール方法については、本サイトで以前に書いた記事「Sydney – WPテーマと推奨プラグインのインストール」をご参照下さいませ。
同時に2つのプラグイン「SiteOrigin Widgets Bundle」「Sydney Toolbox」のインストール&有効化もお忘れなく。

また「Page Builder by SiteOrigin」のインストール&有効化後、管理画面の【設定】→【ページビルダー】→【一般】で、ページビルダーを使用したい投稿タイプを忘れずに選択しておいてください。

WordPress【設定】→【ページビルダー】→【一般】管理画面画像

さあ、では始めましょう。

1.ページ編集画面の右上に追加された【ページビルダー】タブをクリックする。

ページビルダー編集画面-画像01

2.【列の追加】ボタンをクリック → 薄いブルーのブロックが1つ追加される。
  • Set row layout:1カラム(例)
  • 割合:Even(1)(例)
  • 方向:左から右(例)

ページビルダー編集画面-【列を追加】画像01 ページビルダー編集画面-【列を追加】画像02 ページビルダー編集画面-【列を追加】画像03

3.ブロック右上のスパナ記号 →【行の編集】をクリックして編集画面を表示。
  • 【レイアウト】→ 行のレイアウト:全幅(または、全幅ページ(ストレッチ))
  • 【デザイン】→ 任意の背景画像を選択(1500px ×1000px 以上を推奨)

ページビルダー編集画面-【行の編集】画像01 ページビルダー編集画面-【行の編集】画像02

4.【ウィジェットを追加】ボタンをクリック → スペースを確保するための適当なウィジェットを選択(例:SiteOrigin Post Carousel など)。

ページビルダー編集画面-【ウィジェットを追加】画像01 ページビルダー編集画面-【ウィジェットを追加】画像02

5.ブロック右上のスパナ記号 →【行の複製】を4回クリックしてブロックを5つに増やし、それぞれのブロックの背景画像を任意のものに変更する。

ページビルダー編集画面-【行の複製】画像01 ページビルダー編集画面-【行の複製】画像02

6.フロントページに設定する場合は、ページ属性のテンプレートを「フロントページ」に変更。フロントページ以外の場合は「全幅」にする。

WordPress管理画面-【固定ページの属性】画像01

今回は初歩的なカスタマイズ方法のご紹介のため非常に簡単な説明となりましたが、実際にはマージンやパディング等の微調整作業が必要になるかと思います。

このように、Sydneyと相性の良いプラグインを上手に組み合わせてカスタマイズすることで、複雑なプログラミングなど無しに独創的で高度な視覚表現が実現できます。ぜひお試しください。

 *本サイトは、WordPressテーマに「Sydney」を導入しています。 

Sydney導入サイト 制作費10%OFFキャンペーン始めました

制作費10%OFFのキャンペーンは終了しました。 ポイント還元花盛りの令和元年10月です。HideoGoto.org も制…続きを読む →

好評です!Sydney導入WPサイト制作代行 格安プラン

やっと秋らしく過ごしやすい時期になりましたね。 秋田生まれの私にとって今年の東京の夏は本当に永く苦しい修行のような日々でし…続きを読む →

Sydney改造編 – 抜粋文のあとに「続きを読む」ボタンを設置

サイトロゴ・ヘッダースライダー・背景画像などのビジュアル要素を直感的にカスタマイズできる管理画面が秀逸なWordPress…続きを読む →

Sydney改造編 – CSSでヘッダーメニュー項目に背景色を設定

直感的なカスタマイズが可能な管理画面とフロントページの全幅画像ヘッダースライダーが秀逸なWordPressテーマ「Sydn…続きを読む →

コメントなし

Sydney改造編 – CSSでヘッダーサブメニューの背景色を半透明化

★今回は分かりやすくお伝えするために【改造済みサンプルサイト】を作ってみました。宜しければご覧ください(別ウインドウで開き…続きを読む →

コメントなし

Sydney改造編 – CSSでモバイルナビゲーションの背景色を強制変更

世界中で根強い人気で当サイトでもお世話になっているWordPressテーマ「Sydney」。 PC、タブレット、スマートフ…続きを読む →

コメントなし

Sydney改造編 – CSSでヘッダースライダー内のボタンをカスタマイズ

フロントページの洗練された全幅ヘッダースライダーが魅力的なWordPressテーマ「Sydney」。 初心者でも、管理画面…続きを読む →

Sydney改造編 – CSSでヘッダースライダーのテキストをカスタマイズ

当サイトでもお世話になっているWordPressテーマ「Sydney」。 初心者でも、管理画面から直感的で多彩なカスタマイ…続きを読む →

Sydney改造編 – 投稿ページの前後ナビゲーションをカスタマイズ

フロントページの全幅画像ヘッダースライダーと都会的で洗練されたテンプレートデザインが人気のWordPressテーマ「Syd…続きを読む →

Sydney改造編 – CSSで「ページTOPに戻るボタン」の色を強制変更

当サイトでも導入しているWordPressテーマ「Sydney」には、デフォルトの状態でページ右下部に「ページTOPに戻る…続きを読む →

Sydney応用編 – Sydney Toolbox でフロントページをカスタマイズ

WordPressテーマ に「Sydney」を導入し、推奨WPプラグイン「Sydney Toolbox」をインストール&有…続きを読む →

Sydney応用編 – フロントページ全面を全幅背景画像で埋め尽す

フロントページヘッダー部分の、全面画像スライダー(5枚!)がとても魅力的なWordPressテーマ「Sydney」ですが、…続きを読む →

Sydney導入サイト 失敗しないための5つのポイント

Sydneyはシンプルなフォーマットと多彩なカスタマイズ機能を併せ持ったバランスの良いWordPressテーマです。これは…続きを読む →

Sydneyをビジネスサイト用WPテーマとしてお勧めする理由

初心者でも簡単にカッコいいブログを始められるということで、世界中で人気のWordPressテーマ「Sydney」。 外国産…続きを読む →

Sydney導入例 – WordPressサンプルサイト集

WordPressテーマ”Sydney”で制作した業種・職種別のサンプルサイト集(すべて全画面スライダー&レスポンシブデザ…続きを読む →

Sydney – テーマカスタマイズの管理画面と機能概要

レスポンシブデザイン・全画面スライダー・パララックス背景効果等、無料のテーマとは思えない豊富なカスタマイズと、都会的で洗練…続きを読む →

Sydney – 3つの推奨プラグインの機能と管理画面

フリーランスや企業用コーポレートサイトの構築に最適なWordPressテーマ「Sydney」。 このテーマの特長を最大限に…続きを読む →

Sydney – WPテーマと推奨プラグインのインストール

WordPress公式テーマのSydneyは、管理画面上からの直感的な操作により、フロントページやブログページのカスタマイ…続きを読む →

Sydney – 企業・飲食店・自営等の商用サイトに最適WPテーマ

Sydney(シドニー)といっても、高層ビルや英国風のモダンな町並み、海や緑の自然との調和が美しいオーストラリアの都市のこ…続きを読む →