• 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子テーマStudio Proの設定方法
  • Genesis Framework の使い方

Genesis子テーマStudio Proの設定方法

full-width-thumb

full-width-thumb

今回は Genesis 子テーマの Studio Pro を使って、Genesisサイトを設定する方法を紹介したいと思います。

制作するサイトによって表示する画像や文章など全く変わってくると思うので、まずはデモサイトと同じような表示にしてみましょう。

目次

  • ウィジェットの設定
    • 1 メインビジュアル
    • 2 Front Page 1
    • 3 Front Page 2
    • 4 Front Page 3
    • 5 Front Page 4
    • 6 Front Page 5
    • 7 Before Header
    • 8 Before Footer
  • 配色の設定
  • フッターのコピーライトを変更する

ウィジェットの設定

1 メインビジュアル

トップページのメインビジュアル部分は、カスタマイザーの『ヘッダーメディア』というセクションから変更することができます。
動画は、1920x1080px(8MB以下)でアップロードするよう推奨されています。

もし動画ではなく画像を表示したい場合には、ヘッダー画像という部分からヘッダー画像を追加することができます。

2 Front Page 1

Front Page 1は、メインビジュアルの上に表示する文字を追加することができます。

下のコードをカスタムHTMLウィジェットの中に書き込みます。

※ テキストウィジェットでも同じような表示になりますが、おかしな表示になることがあるので、テキストウィジェットではなくカスタムHTMLウィジェットを使う方がオススメです。

<h1>Hi, we're Studio Pro.<br>A digital agency.</h1>
<p>We transform great ideas into amazing digital products.</p>
<a href="#" class="button">See our work</a>

上のコードを追加すると、下のような表示になります。

3 Front Page 2

Front Page 2についても、カスタムHTMLウィジェットを使って、以下のコードを追加します。下は3つにコードが分かれていますが、それぞれ1つずつカスタムHTMLウィジェットを使って、コードを記入します。

<i class="icon-tools"></i>
<h6>Branding</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>
<i class="icon-mobile"></i>
<h6>Web</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>
<i class="icon-genius"></i>
<h6>Strategy</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elementum Proin gravida niauctor aliquet.</p>

コード追加後

アイコンについては、テーマ制作会社のサイトにアイコン一覧が用意されています。こちらから使いたいアイコンを選び、上のコード中にある <i> タグに、 icon-mobile や icon-phone のようにクラス名をつければ、それに応じたアイコンが表示されます。

4 Front Page 3

Front Page 3はショートコードを使ってポートフォリオを表示しているウィジェットエリアです。

コード中の posts_per_page="6" の数字を変更すれば、お好みの数だけポートフォリオをトップページに表示させることができます。

※ 画像サイズや投稿タイプについても、ショートコード内の引数を変えれば、別の内容に変更することができます。

[display-posts post_type="portfolio" image_size="portfolio" posts_per_page="6"]

ポートフォリオのアイテムについては、管理画面の Portfolio Items というメニューの中の Add New から追加することができます。アイキャッチ画像として設定した画像が、トップページやポートフォリオ一覧に表示されます。

5 Front Page 4

デモサイトでは、Front Page 4 のウィジェットエリアは、お問い合わせボタンを表示しています。カスタムHTMLウィジェットを使って、下のコードを入力すれば、デモサイトと同じような表示にすることができます。

<h2>This is a call to action</h2>
<a href="#" class="button gradient">Get Studio Pro</a>

6 Front Page 5

Front Page 5 では、Genesis Featured Postsプラグインを使って下のように設定します。Continue reading などの文章は、『もっと読む』などお好みで変更して下さい。

7 Before Header

Before Headerは、サイトの最上部に文字などを表示することができるウィジェットエリアです。ユーザーが×ボタンをクリックすると消えるようになっているので、メッセージのような文章を入れるのが良いかもしれません。
こちらについてもカスタムHTMLウィジェットで、HTMLコードを記入します。

<b>Get the Studio Pro theme today!</b>

8 Before Footer

Before Footerは、デモサイトでSNSアイコンを表示しているウィジェットエリアです。

こちらについても、カスタムHTMLウィジェットを使って、以下のコードを記入します。icon-... の…部分については、テーマ制作会社のアイコン一覧から、お好みのものに変更して下さい。

<ul class="aligncenter">
  <li class="ssi-dribbble"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-email"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-github"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-instagram"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-medium"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
  <li class="ssi-snapchat"><a href="#" target="_blank"><i class="icon-..."></i></a></li>
</ul>

配色の設定

Studio Pro では、管理画面のカスタマイザーから配色を変更することができます。

下の画像のように『色』というセクションから、カラーピッカーで配色を選択します。Gradient Left (Right) Color では、メインビジュアル部分やボタンで使われるグラデーションの色を設定することができます。

フッターのコピーライトを変更する

Studio Pro を購入したままの状態では、フッターのコピーライト部分に『© 2017 Studio Pro by Seo Themes. Built on the Genesis Framework.』という表示が入ってしまいます。

管理画面から簡単に変更できそうなオプションも見当たらなかったので、テーマファイルから変更しましょう。

テーマファイル(studio-proフォルダ)の中に includes フォルダがあるので、この中の helpers.php の240目付近のコードを変更します。

変更前

function studio_footer_creds_filter( $creds ) {
    $creds = '© 2023 <a href="' . CHILD_THEME_URL . '">Studio Pro</a> by <img src="' . get_stylesheet_directory_uri() . '/assets/images/favicon.png" width="10"> <a href="https://seothemes.com" title="Seo Themes">Seo Themes</a>. Built on the Genesis Framework.';
    return $creds;
}

変更後

function studio_footer_creds_filter( $creds ) {
    $creds = '© 2023 ' . get_bloginfo('name') . ' All Rights Reserved.';
    return $creds;
}

これでフッターのコピーライトから、テーマ制作会社へのリンクなどが消えて、自分のサイト名が入りました。コピーライトの編集方法は 以前書いた記事 もあるので、こちらも参考にして下さい。

変更前

変更後

関連記事

  • genesis-theme-settings-thumbnail
    2016年4月1日

    Genesis Theme Settingsの設定方法

  • genesis
    2016年3月13日

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

  • genesis
    2016年3月13日

    Genesisサイトの記事一覧を抜粋表示/全文表示にする方法

  • genesis-page-navigation-button-jp-thumbnail
    2016年5月17日

    Genesisサイトのページナビゲーションを日本語化する方法

  • genesis-seo-settings-4
    2016年4月24日

    Genesis SEO Settings の設定方法

  • Genesis Framework の使い方

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

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

詳しく見る
← 前の記事
Genesis子テーマStudio Proの設定方法
Genesis子テーマからウィジェットエリアを追加する方法
次の記事 →
Genesis子テーマStudio Proの設定方法
GenesisフレームワークとGenesis子テーマを日本語化する方法

最初のサイドバー

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 メインビジュアル
    • 2 Front Page 1
    • 3 Front Page 2
    • 4 Front Page 3
    • 5 Front Page 4
    • 6 Front Page 5
    • 7 Before Header
    • 8 Before Footer
  • 配色の設定
  • フッターのコピーライトを変更する
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.