sydney

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

公開日:2017/07/16  更新日:2020/12/03

WordPressテーマ に「Sydney」を導入し、推奨WPプラグイン「Sydney Toolbox」をインストール&有効化されている方は、管理画面のメニュー項目に5つの英単語が追加されていることに気がつくはずです。

「Services」「Employees」「Testimonials」「Clients」「Projects」

これら5つの英単語は、簡単にフロントページをコーポレートサイト風にカスタマイズできる魔法の文字列であり、サイト上で公開したい組織・会社の情報を、ウィジェットを使ってフロントページに組み込み表示させる際、その情報の元となるカスタム投稿・カスタムフィールドを編集・登録するために必要となるメニュー項目です。

Sydney Toolbox を使うことで、WordPressテーマ に Sydney を導入中の方は誰でも、フロントページに組織・会社の情報を、画像を使いながらグラフィカル&スマートに表示させることが可能になります。

【サンプルサイト01】 【サンプルサイト02】

今回は、そのプラグイン Sydney Toolbox の使い方を、超シンプルに解説したいと思います。

5つの英単語と5つのウィジェットの関係性を知る

管理画面メニューに追加された、5つの英単語項目から登録される5種類のカスタム投稿は、特定のウィジェットと結びつくことで、それぞれ別々の情報をフロントページに表示するように作られています。

5つの英単語と5つのウィジェットの関係性-画像

フロントページに掲載したい5種類の情報を登録する

さあ、それでは情報の入力方法をご説明しましょう。

任意のメニュー項目にマウスオーバーした時に表示される「Add New 〜〜」をクリックすると、それぞれの投稿の編集画面に切り替わります。

(「Add New 〜〜」の下の「カテゴリー」の編集により、それぞれの投稿にカスタムフィールド(メタデータ)を追加して、カテゴリーで分類することも可能になります。ご参考まで)

管理画面メニュー項目-画像

1.Services【サービス・提供できること・役に立つこと】

編集画面より「サービス名」「説明文」「アイコンのUnicode」「リンクしたいページのURL」「アイキャッチ画像」等を追加できます。
フロントページには「アイコン(リンク付)」「アイキャッチ画像(リンク付)」「サービス名」「説明文」が表示されます。

Service 編集画面-画像

2.Employees【従業員・被雇用者】

編集画面より「名前」「説明文」「地位・役職等」「SNSのURL」「名前にリンクしたいページのURL」「アイキャッチ画像」等を追加できます。
フロントページには「名前(リンク付)」「地位・役職等」「SNSのアイコン」「アイキャッチ画像」が表示されます。

Employee 編集画面-画像

3.Testimonials【お客様の声・推薦状】

編集画面より「タイトル」「説明文」「名前・役職名・会社名等」「アイキャッチ画像」等を追加できます。
フロントページには「タイトル」「説明文」「名前・役職名・会社名等」「アイキャッチ画像」が表示されます。

Testimonials 編集画面-画像

4.Clients【クライアント・顧客・取引先】

編集画面より「クライアント名」「クライアントのウェブサイトURL」「アイキャッチ画像」等を追加できます。
フロントページには「アイキャッチ画像(リンク付)」が表示されます。

Client 編集画面-画像

5.Projects【プロジェクト・企画・計画】

編集画面より「タイトル名」「説明文」「リンクしたいページのURL」「アイキャッチ画像」等を追加できます。
フロントページには「アイキャッチ画像(リンク付)」「タイトル名(マウスオーバー時のみ)」が表示されます。

Project 編集画面-画像

表示用のウィジェットをフロントページの任意の箇所に挿入する

5種類のカスタム投稿の編集・登録作業が終わったら、いよいよフロントページのカスタマイズに入ります。カスタマイズは、レイアウト調整を自由自在にしてくれるスグレモノのプラグイン「Page Builder by SiteOrigin」の助けを借りながらの作業となります。インストール&有効化をお忘れなく。

まず、フロントページ用の編集画面を開いたら、右上にある「ページビルダー」タブをクリック。

フロントページカスタマイズ-画像01

ページビルダーの専用画面に切り替わったら、「列を追加」ボタンをクリック。

フロントページカスタマイズ-画像02

青いボックスの「列」が追加されたら、そのボックスを一度クリック(選択)して「ウィジェットを追加」ボタンをクリック。

フロントページカスタマイズ-画像03

フロントページで使用できるウィジェットの一覧が表示されたら、使用するウィジェットを1つ選択。

フロントページカスタマイズ-画像04

すると、青いボックスの中に先ほど選択したウィジェットが挿入されます。
ウィジェットが複数必要な場合は、「列の追加」と「ウィジェットの追加」を何度か繰り返しながらカスタマイズ作業を進めましょう。場合によっては、「列」のボックスを複数に分けたり、マージン・パディング等の調整も必要になるかと思いますが、説明が長くなりますので今回そのあたりは省かせていただきます。

フロントページカスタマイズ-画像05

各ウィジェットは、編集画面からの詳細な設定が可能です(日本語表示なので解説は省きます)。

フロントページカスタマイズ-画像05

だいぶ説明が長くなってしまいましたが、作業の流れとしてはこんな感じです。
最適なレイアウトになるまで、何回かページプレビューしながらの作業になるかと思います。

WordPressテーマに「Sydney」を導入中で、簡単にフロントページをコーポレートサイト風にカスタマイズしたい方は、このプラグイン「Sydney Toolbox」を是非お試しください。

 *本サイトは、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(シドニー)といっても、高層ビルや英国風のモダンな町並み、海や緑の自然との調和が美しいオーストラリアの都市のこ…続きを読む →