• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework の使い方Genesisサイトの設定方法【MetroPro】
  • Genesis Framework の使い方

Genesisサイトの設定方法【MetroPro】

metro-pro-settings-thumbnail

metro-pro-settings-thumbnail Genesis とGenesis子テーマを(インストール)できたら、Genesisサイトをセットアップしてみましょう。

ここでは海外で人気のGenesis子テーマ『MetroPro』を使用し、StudioPressのデモページ風に設定してみます。どのGenesisテーマも公式サイトに解説ページがあるので、お使いのテーマに合わせて確認してみてください。(※ ログインが必要です)

genesis-theme-setup-using-metro-pro-27

Metro Pro 設定ページ:
http://my.studiopress.com/setup/metro-theme/

genesis-theme-setup-using-metro-pro-2
Metro Pro Theme Setup

目次

  • ① プラグインをインストール
  • ② サイト全体のレイアウトを設定
  • ③ 背景画像を設定
  • ④ ロゴ画像を設定
  • ⑤ ウィジェットを設定
    • 1 Header Right
    • 2 Primary Sidebar
    • 3 Secondary Sidebar
    • 4 Home – Top
    • 5 Home – Middle
    • 6 Home – Bottom
    • 7 After Entry
    • 8 Footer

① プラグインをインストール

Genesisサイトの運用に便利な以下のプラグインをインストールします。

  • WP Multibyte Patch  日本語のようなマルチバイト文字に対応させる
  • Genesis Sandbox Featured Content Widget  記事一覧を表示
  • Genesis eNews Extended メルマガを配信
  • Regenerate Thumbnails サムネイルを再生成

② サイト全体のレイアウトを設定

管理画面の『Genesis』→『Theme Settings』でサイト全体のレイアウトを設定します。

genesis-theme-setup-using-metro-pro-3

ここでは『Theme Settings』でサイト全体のレイアウトを設定しましたが、カテゴリや記事ごとにレイアウトを変更することもできます。

③ 背景画像を設定

『外観』→『カスタマイズ』を選択します。

genesis-theme-setup-using-metro-pro-5

『背景画像』を選択し、下のように設定します。

genesis-theme-setup-using-metro-pro-4

④ ロゴ画像を設定

ロゴ画像がある場合は、背景画像と同じようにカスタマイザーの『ヘッダー画像』から設定します。

genesis-theme-setup-using-metro-pro-7

genesis-theme-setup-using-metro-pro-6

⑤ ウィジェットを設定

次にウィジェットの設定をしていきます。

『Metro Pro』には合計11のウィジェットエリアが用意されているので、この中にウィジェットを入れていきます。ここではデモサイトを参考に設定にしましたが、お好みに合わせて変更して下さい。

genesis-theme-setup-using-metro-pro-9

下の画像で①を振った『Secondary Sidebar』は、3カラムのレイアウトにしたときに表示されるウィジェットエリアです。

genesis-theme-setup-using-metro-pro-15

トップページのメインコンテンツ部分には3つのウィジェットエリアが用意されており、『Home – Top』と『Home – Bottom』がメインコンテンツ幅と同じ横幅、『Home – Middle Left』と『Home – Middle Right』がその半分の横幅になります。

genesis-theme-setup-using-metro-pro-28

1 Header Right

ヘッダー右上に表示されるウィジェットエリアです。

『検索』ウィジェットを入れます。

genesis-theme-setup-using-metro-pro-10

2 Primary Sidebar

サイドバーに表示されるウィジェットエリアです。下の画像のように4つのウィジェットを入れました。

genesis-theme-setup-using-metro-pro-11

2-1. テキストウィジェット 1

サイドバーウィジェットの1つ目には、プロフィール画像用のテキストウィジェットを入れます。

『内容』の中には以下のコードを入れました。このページと同じように設定する場合には、お好みに合わせて文章や画像を変更して下さい。

<img src="プロフィール画像" alt="" />Starbucks Addict. Sarah McLachlan Fan. Blogger. Nomad Theorist. Aspiring Fashion Photographer. Believer in Karma. World Traveler. <a href="リンク先">More about me</a>

genesis-theme-setup-using-metro-pro-13

2-2. テキストウィジェット 2

サイドバーウィジェットの2つ目は、SNSアイコン用のテキストウィジェットを入れます。

『内容』の中には以下のコードを入れました。下のコードの『○○』の部分には、お使いのSNSアカウントIDなどを入れて下さい。

<a class="social-buttons" href="http://www.facebook.com/○○">Facebook</a><a class="social-buttons" href="https://plus.google.com/○○">Google</a><a class="social-buttons" href="http://instagram.com/○○/">Instagram</a><a class="social-buttons last" href="http://twitter.com/○○">Twitter</a>

genesis-theme-setup-using-metro-pro-14

2-3. Genesis eNews Extendedウィジェット

サイドバーウィジェットの3つ目には、メルマガ用に『Genesis eNews Extended』ウィジェットを入れました。

Genesis eNews Extendedについては、こちらのページで使い方を紹介しています。

2-3. 最近の投稿ウィジェット

サイドバーウィジェットの4つ目には『最近の投稿』ウィジェットを入れます。

genesis-theme-setup-using-metro-pro-16

3 Secondary Sidebar

3カラムのレイアウトにした場合に、サイドバーに表示されるウィジェットエリアです。

今回は何もウィジェットを入れませんでしたが、『Primary Sidebar』と同じように使用することができます。

4 Home – Top

トップページ・メインコンテンツ部分の一番上に表示されるウィジェットエリアです。

この中に『Genesis Sandbox Featured Contents』ウィジェットを入れて一番最新の記事を表示させます。

※ 『Genesis Sandbox Featured Contents』ウィジェットの設定方法は、『Genesis Featured Posts』ウィジェットの使い方とほとんど同じです。

genesis-theme-setup-using-metro-pro-18

5 Home – Middle

『Home – Middle Left』と『Home – Middle Right』には、『Home – Top』と同じように『Genesis Sandbox Featured Contents』ウィジェットを入れます。

genesis-theme-setup-using-metro-pro-19

設定はほとんど同じなので、全体の画像は添付しませんが、『Exclude Previously Displayed Posts?』にチェックを入れておくと、『Home – Top』で表示された投稿が表示されなくなります。

genesis-theme-setup-using-metro-pro-20

6 Home – Bottom

『Home – Bottom』についても『Home – Top』や『Home – Middle』と同じようにGenesis Sandbox Featured Contentsウィジェットを入れます。

このウィジェットエリアでは、記事を5件表示させているので、『Home – Bottom』用の小さいサムネイルを左寄せで表示させます。

genesis-theme-setup-using-metro-pro-21

7 After Entry

記事本文の終わりに表示されるウィジェットエリアです。

genesis-theme-setup-using-metro-pro-22

ここではTwitterのフォローボタンと、メルマガ用のeNews Extendedウィジェットを表示させました。『eNews Extended』については、メールアドレスのフォームのみを表示させています。

genesis-theme-setup-using-metro-pro-23

7-1. テキストウィジェット

『内容』の入力欄に、Twitterフォローボタン用のコードとテキストを入力します。

genesis-theme-setup-using-metro-pro-24

8 Footer

Footerには下の画像のように3つのウィジェットエリアが用意されています。

genesis-theme-setup-using-metro-pro-26

このFooterウィジェットもデモサイトとはコンテンツを若干変えていますが、テキストウィジェットや『最近の投稿』ウィジェットなど通常のウィジェットを使っています。

genesis-theme-setup-using-metro-pro-25

これでセットアップは完了です!

関連記事

  • studiopress-logo
    2016年3月13日

    Genesis購入者限定のレスポンシブデザイン・テストツールの使い方

  • genesis-landing-page-template-1
    2016年4月6日

    Genesisの機能でランディングページを作る方法

  • 2016年3月15日

    Genesisサイトの管理画面からAnalyticsのコードを追加する方法

  • studiopress-logo
    2016年3月31日

    StudioPress公式サイトでGenesis子テーマのドキュメントを確認する方法

  • 2016年3月22日

    Genesis管理画面からヘッダー/フッターにコードを追加する方法

  • Genesis Framework の使い方
  • Genesisの設定

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
Genesisサイトの設定方法【MetroPro】
【Genesis】パンくずリストを日本語化する方法
次の記事 →
Genesisサイトの設定方法【MetroPro】
Genesis Simple Editsプラグインの使い方

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • ① プラグインをインストール
  • ② サイト全体のレイアウトを設定
  • ③ 背景画像を設定
  • ④ ロゴ画像を設定
  • ⑤ ウィジェットを設定
    • 1 Header Right
    • 2 Primary Sidebar
    • 3 Secondary Sidebar
    • 4 Home – Top
    • 5 Home – Middle
    • 6 Home – Bottom
    • 7 After Entry
    • 8 Footer
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.