これぞテンプレート!コーポレートサイトに最適なWP無料テーマ「Corpo」

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のトップページイメージ

    WordPressテーマ情報

  • テーマタイトル:Corpo ver 1.2
  • 作者名:Aleksandra Laczek
  • 言語:英語
  • 用途:ビジネス, ポートフォリオ, レスポンシブ
  • 価格:無料
  • 配布元最終確認日:2013年9月22日


Wordpressで自由にトップページやランディングページをつくる1日講座
WordPressには有料、無料問わず企業向け・ビジネス系のテーマは数限りなくあり、それらを使えば会…
デザイン
機能・簡単カスタマイズ
SEO対策

総合評価

WordPressには有料、無料問わず企業向け・ビジネス系のテーマは数限りなくあり、それらを使えば会社のホームページ、いわゆるコーポレートサイトなんかもあっという間に作ることができます。

しかし残念ながら用途や機能が限定的すぎるテーマも少なくなく、いいかなぁなんて思っても、やっぱりうちには合わないとか、ちょっと使い勝手が悪いとか、あるいはデザイナーさん(コーダーさん)の助けがないとやっぱりダメということがよくあります。

そんな問題を解決するのが本日ご紹介するWordPress無料テーマ「Corpo(コーポ)」です。名前の通り、まさにコーポレートサイトを作るためのテンプレートと言えるでしょう。

また、企業向けとは言うもののフリーランスの方のホームページ、Webサイト、ポートフォリオサイトとしても120%機能します。

わたしが気に入ったのは以下のような内容ですが、WordPress公式サイト(WordPress.org)でも配布されており、大人気かつ評価の高いテーマです。

  • さわやかで透明感のあるシンプルデザイン
  • トップページが簡単に作成できる
  • トップページはテンプレートだが柔軟性もある
  • 独自ウィジェットパーツがある
  • ポートフォリオページ用のテンプレート
  • レスポンシブWebデザイン

テーマ紹介に使い方の解説と、随分長い記事になってしまいましたが、試作サイトもあわせてご覧いただくとわかりやすいかと思います。

Corpo Demosite Made by Themetank

目次

  1. テーマの特徴
  2. テーマのデザイン・レイアウト
  3. テーマの導入方法・セットアップ
  4. テーマの使い方・カスタマイズ

1.テーマの特徴

◆ デザイン・仕様 ・・・・・・・

  • ビジネス、ポートフォリオサイトに最適なテンプレート、機能
  • モバイル端末対応レスポンシブデザイン:スマホ、タブレットもOK
  • スライドショー:トップページに簡単設定
  • ソーシャルメディア連携:ヘッダーにソーシャルリンクを設置
  • 日本語化ファイル内蔵:テーマをインストール後、すぐに使用可!

◆ カスタマイズ・オプションメニュー ・・・・・

  • テーマ独自のオプションメニュー
  • ロゴ・アップロード機能:サイトロゴも設置簡単
  • バックグラウンド・カスタマイズ機能:背景画像、背景色を設定
  • メニュー・カスタマイズ機能:ヘッダー、フッターにそれぞれ設置
  • ウィジェット・カスタマイズ機能:サイドバーを設定
  • 独自ウィジェットパーツ
  • カラーオプション:テーマカラーを切り換え可能
  • アイキャッチ画像サポート:ブログページで活躍
  • トップページ用テンプレート:あっという間にビジネスサイト構築
  • ポートフォリオページ用テンプレート:まさにテンプレート!
  • 全幅(横幅フル)ページ用テンプレート:使い方いろいろ

◆ その他 ・・・・・・・・・・

  • 英文マニュアルこちらからどうぞ
  • 英語サポート:WordPress公式サイトのサポートフォーラムにて対応
  • テーマ・アップデート:バグ修正、WPアップデート対応、セキュリティ向上に
  • WordPress公式サイト配布テーマ:安心です

2.テーマのデザイン・レイアウト

2−1)トップページのデザイン

テーマ外観から確認していきましょう。まずトップページ・ヘッダーには電話番号、ソーシャルリンク、コーポレートロゴ、キャッチフレーズ、カスタムメニューです。

そして横幅フルでアイキャッチーな大型スライドショーが来て、コールアウトセクション、特徴・サービスなどの表示欄(2〜4つ)、最新プロジェクト一覧と並びます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のトップページのデザイン

ページ下部はフッターウィジェットエリア、クレジット表記、フッターメニュー(カスタムメニュー)です。

 

2−2)投稿ページのデザイン

続いて投稿ページ(ブログページ)ですが、こちらは2カラム、左に記事一覧、右サイドバーという作りです。

テーマ独自のウィジェットパーツとして「タブウィジェット」が用意されています。サムネイル(アイキャッチ画像)付きで人気記事、最近の記事を表示することができます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の投稿ページデザイン1

投稿ページはこちら。すっきりしたデザインでビジネスユースにぴったりです。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の投稿ページデザイン2

 

2−3)ポートフォリオページのデザイン

続いてポートフォリオページですが、下の画像はポートフォリオ一覧ページ。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページのデザイン1

ポートフォリオページ用には「テンプレート」が用意されています。概要、サービス、プロジェクト情報、画像を入力して、サクッとポートフォリオページができ上がります。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページのデザイン2

いわゆる投稿カテゴリのようにサービスカテゴリを設定できるのですが、そのカテゴリに沿って関連プロジェクトを自動表示してくれます。

 

2−4)固定ページ(全幅ページ)

固定ページ用に全幅ページのテンプレートも用意されています。アクセスマップを載せるような時には良いでしょうね。

関連記事:WordPressにGoogleマップの地図を埋め込む4ステップ(プラグインなし)

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の全幅固定ページのデザイン

 

2−4)モバイル端末対応レスポンシブWebデザイン

レスポンシブデザインなのでサイトは流動的に動きます。左がトップページ、右がポートフォリオページです。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のレスポンシブデザインのイメージ1

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のレスポンシブデザインのイメージ2

3.テーマの導入方法・セットアップ

3−1)テーマのダウンロード〜インストール

ここからはテーマの導入方法、使い方についてご説明します。まずは「Corpo」のWordPressテーマファイルをダウンロードしましょう。

Corpo|WordPress公式サイト

ページ右側にある【Download Version X】ボタンをクリックすると「corpo.X.zip」というファイルがすぐにダウンロードできます。

次にこのファイルをWordPressのダッシュボード(管理画面)からアップロード、インストールします。

ダッシュボード > テーマ > 新規追加 > アップロード

インストールが完了したらテーマを有効化、サイトを表示させてみます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のインストール直後の状態

まだただのブログページですね。ではテーマのカスタマイズに入っていきましょう。

 

3−2)テーマのセットアップ(初期設定)

と、その前にテーマの初期設定として「Corpo」に付随する「プラグイン」をインストールしましょう。これをやっておかないとサイトが作れません。

ダッシュボード > プラグイン > Install Required Plugins > Install(インストール)

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の導入方法1

「Activate(有効化)」をクリック。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の導入方法2

ダッシュボードに「Portfolio」と「Slider」という項目が追加されていればOKです。無事にテーマがセットアップされました。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の導入方法3

 

4.テーマの使い方・カスタマイズ

4−1)トップページの設定

ダッシュボード > 外観 > Theme Options > Home Page

トップページの設定は下の図を参考にしてください。コールアウトセクションの記述についてはここでは飛ばしてデフォルトのままにしておけば大丈夫です。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の導入方法4

トップページが切り替わりました。もちろん、まだなにもコンテンツをはめ込んでいませんので下の通りスカスカです。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の導入方法5

 

4−2)背景のカスタマイズ

ダッシュボード > 外観 > 背景

背景を変えたい場合はコチラから。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の背景のカスタマイズ方法

 

4−3)ヘッダーの設定

ダッシュボード > 外観 > Theme Options > Basic Settings

サイトのテーマカラーの設定、ロゴのアップロードを行います。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のヘッダーのカスタマイズ方法1

 

ダッシュボード > 外観 > Theme Options > Social Media

サイト最上部に表示される問合せ先の電話番号、ソーシャルリンクの設定は、必要な項目を埋めていきます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のヘッダーのカスタマイズ方法2

サイト最上部に電話番号とソーシャルリンクが追加されました。ソーシャルリンクはマウスオーバーするとテーマカラーで設定した色になります。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のヘッダーのカスタマイズ方法3

しかし電話番号が「Call us at」という英語表記に続いています。わからなくもないでしょうが、、気になる方はテーマファイルの「header.php」の18行目の「call us at」というテキストを編集して下さい。ここでは「お問合せ」に変えておきました。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のヘッダーのカスタマイズ方法4

 

4−4)トップ − スライドショーの設定

スライドショーはダッシュボードの「Slider」という項目で、一枚ずつ設定します。

ダッシュボード > Slider > New Slide

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のスライドショーのカスタマイズ方法1

スライドショーが反映されました。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のスライドショーのカスタマイズ方法2

 

4−5)トップページ:コールアウトセクション

トップページの「Welcome!」の部分(コールアウトセクション)を編集します。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のCTAのカスタマイズ方法1

コールアウトセクションのうまい訳が思い浮かばなかったのですが、たとえば「オファーフォーム」と言えばまだ一般的かもしれません。やっぱり英語ですが(笑)

「資料請求」などのアクションを呼びかけるエリアですね、設定はコチラから。

ダッシュボード > 外観 > Theme Options > Home Page

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のCTAのカスタマイズ方法2

リンクボタンは[button]Sample button[/button]のようなショートコードで設定します。以下の記述例を参考にColor、Size、リンク先URLの中身を変更します。

[button color=’red’ size=’medium’ url=’http://’]Sample button[/button]

Color → red | blue | green | orange | yellow | white | black
Size    → medium | big

 

4−6)トップページ:サービス、特徴表示欄

こちらもうまい呼び方が見つからないのですが、ビジネス系、ポートフォリオ系テーマでは必ずある項目で、サービスの内容、特徴などを表示する欄です。大体3つか4つのパターンが多いですが、「Corpo」では2つから4つまで設定できます。

ダッシュボード > 外観 > ウィジェット

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフィーチャー部分のカスタマイズ方法1

「ウィジェット」になっているので、ウィジェット編集ページの右側「Home Page Services」というウィジェットエリアに、左側の「Corpo:Service widget」というウィジェットパーツを入れます。

1つのウィジェットパーツにつき1つのサービスを記述するのですが、「Icon」の空欄には「Icon-globe」のような特定のアイコン名称を入れます。アイコン名称は「FontAwesome」というサイトにて探します。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフィーチャー部分のカスタマイズ方法2

数多くのアイコンの中から適切なものを選んで名前をコピーし、さきほどの空欄にペーストします。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフィーチャー部分のカスタマイズ方法3

4つ設定してみました。こういうところでアイコン画像を設定するのは面倒なので助かります。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフィーチャー部分のカスタマイズ方法4

 

4−7)フッターのカスタマイズ

上の項目でウィジェットをいじったついでに、全ページ共通のフッター・ウィジェットも編集しておきましょう。「Prefooter」というウィジェットエリアがフッターです。

ダッシュボード > 外観 > ウィジェット

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフッターの設定方法1

テキストパーツとコンタクトウィジェットというパーツを入れてみました。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のフッターの設定方法2

 

4−8)トップページ完成!

さて、トップページができ上がりました。完成イメージとしてはこのようになります。( ※ 下図はポートフォリオも設定済みのため「Latest Projects」の項目も表示されています)

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のトップページ完成図

 

4−9)ポートフォリオページの作成

ポートフォリオページの作成前に、まずポートフォリオページで表示するサービス内容(カテゴリ)を登録します。ブログのカテゴリ追加と同じ要領です。

ダッシュボード > Portfolio > Services

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法1

ここでは「SEOサービス」「Webコンサルティング」「Webサイト制作」という3つのサービスを登録しました。では、実際のポートフォリオを登録していきましょう。

ダッシュボード > Portfolio > Add New Project

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法2

通常の記事同様、タイトル、本文を記入、アイキャッチ画像を設定。さらにポートフォリオ詳細として「Services」欄にサービス内容(カテゴリ)を、「Project Details」欄にポートフォリオ(プロジェクト)情報を、「Portfolio Gallery」に写真を登録します。写真を複数登録するとスライドショーとして表示されます。

公開するとトップページにサムネイルとタイトル、サービス内容が表示されます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法3

ポートフォリオ単体ページには先ほど入力した内容が入っています。ポートフォリオ(プロジェクト)が複数ある場合には、関連プロジェクトが下に表示されます。

※ポートフォリオとプロジェクトという言葉が入り乱れていますが、同じ意味で使っております。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法4

ページ右上にある漢字の「田」みたいなボタンリンクをクリック。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法5

ポートフォリオ(プロジェクト)一覧ページが出来ているので、このページをサイトのナビゲーションメニューに加えるためURLをコピーしておきます。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法6

ダッシュボードに戻って、メニュー設定ページへ行きます。

ダッシュボード > 外観 > メニュー

リンク項目にてURLの欄にペーストし「メニューに追加」ボタンをクリック。右側に移ったら「メニューを保存」をクリックでOKです。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法7

ナビゲーションメニューに「Project(ポートフォリオ)」追加されました。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法7

ちなみにプロジェクト一覧ページのタイトル、テキストの設定はコチラ。

ダッシュボード > 外観 > Theme Options > Basic Settings

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のポートフォリオページの作成方法8

 

4−10)ブログ一覧ページの作成

元々トップページがブログ一覧ページでしたが、トップページはカスタマイズしてしまいましたので、別途ブログ一覧ページを作ります。

ダッシュボード > 固定ページ > 新規追加

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のブログページの作成方法1

ページ属性のテンプレート欄で「Blog」を選んで公開。次に、ブログ一覧ページのヘッダーを設定します。

ダッシュボード > 外観 > Theme Options > Basic Settings

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のブログページの作成方法2

「Blog Header」で「Yes」を選び、「Custom Blog Header」で「Blog」と記入するとこうなります。

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のブログページの作成方法3

 

4−11)全幅ページの作成

全幅ページを作る場合には、固定ページの新規作成にてページ属性「Full-width」テンプレートを選びます。

ダッシュボード > 固定ページ > 新規追加

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」の固定全幅ページの作成方法

 

4−12)サイドバーウィジェットの設定

サイドバーの設定がまだでした。ウィジェット編集ページより設定しましょう。独自ウィジェットパーツもあるのでぜひ活用してみましょう。

ダッシュボード > 外観 > ウィジェット

ビジネス-ポートフォリオ-会社ホームページ用の無料WordPressテーマ「corp」のウィジェットサイドバーのカスタマイズ方法

 

ようやくご紹介、テーマの説明が終わりました。とても長くなってしまいましたし、分かりづらい箇所も多々あったかと思いますが、今設定してきた内容は試作サイトよりご確認ください。

Corpo Demosite Made by Themetank

テキストと画像だけで解説するとどうしても伝えづらい。。今日はそんなことをよく思いました(笑)ライティングスキルを上げるか、書き方をもっと取説っぽくしてしまうか、あるいはテーマをいじってる様子を動画で解説するか、、悩みどころですね。

「Corpo」は数あるWordPress無料テーマの中でも、ビジネス・ポートフォリオ系テーマの中でもかなり使い勝手の良い優れもののテーマ、いえ、テンプレートだと思います。

プラグインなどを活用してより良いコーポレートサイト、ポートフォリオサイトをぜひ構築していただければと思います。

  • このエントリーをはてなブックマークに追加

This Post Has 5 Comments

  1. non

    すみません、先日Font Awesomeのアイコンが出ないということで質問したのですが、自己解決いたしました。

    css/font-awesome.min.cssの後半に入っているアイコン名を書き換えたことで表示されました。

    失礼いたしました_(._.)_

  2. テーマタンク

    non さま

    すみません、問合せからご連絡いただいていたのでしょうか?メールが届いていないようで、気がつきませんでした。失礼いたしました。解決されたようでよかったです。

  3. choco

    4−6)トップページ:サービス、特徴表示欄
    の部分でつまずいています。Font Awesomeにアイコンの中から適切なものを選んで名前をコピーしても映りません。Font Awesomeのバージョンが変わってしまったからなのでしょうか。
    上記の方のコメントを参考に書き換えてみたのですが、うまく行きませんでした。
    お手数をおかけいたしますが、映り方を教えていただければ幸いです。

  4. テーマタンク

    chocoさま、お返事遅くなりまして失礼いたしました。こちらの件ですが、、、ちょっとわたしにもわかりかねます。。。申し訳ありませんが、どうぞよろしくお願いします。

  5. gira

    今さらですが横から失礼します。chocoさんの、3.2.1のFont Awesomeが反映されない件は、
    下記を使用すれば反映されました。↓↓
    http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/
    いつもテーマタンクさんには感謝しております!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>