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

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

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

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

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

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

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

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

Corpo Demosite Made by Themetank

目次

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

１．テーマの特徴

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

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

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

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

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

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

２．テーマのデザイン・レイアウト

２−１）トップページのデザイン

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

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

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

 

２−２）投稿ページのデザイン

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

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

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

 

２−３）ポートフォリオページのデザイン

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

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

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

 

２−４）固定ページ（全幅ページ）

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

関連記事：WordPressにGoogleマップの地図を埋め込む４ステップ（プラグインなし）

 

２−４）モバイル端末対応レスポンシブWebデザイン

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

３．テーマの導入方法・セットアップ

３−１）テーマのダウンロード〜インストール

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

Corpo｜WordPress公式サイト

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

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

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

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

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

 

３−２）テーマのセットアップ（初期設定）

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

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

「Activate（有効化）」をクリック。

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

 

４．テーマの使い方・カスタマイズ

４−１）トップページの設定

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

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

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

 

４−２）背景のカスタマイズ

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

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

 

４−３）ヘッダーの設定

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

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

 

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

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

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

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

 

４−４）トップ − スライドショーの設定

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

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

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

 

４−５）トップページ：コールアウトセクション

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

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

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

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

リンクボタンは［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

 

４−６）トップページ：サービス、特徴表示欄

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

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

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

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

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

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

 

４−７）フッターのカスタマイズ

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

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

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

 

４−８）トップページ完成！

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

 

４−９）ポートフォリオページの作成

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

ダッシュボード > Portfolio > Services

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

４−１０）ブログ一覧ページの作成

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

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

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

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

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

 

４−１１）全幅ページの作成

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

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

 

４−１２）サイドバーウィジェットの設定

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

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

 

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

Corpo Demosite Made by Themetank

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

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

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

• Tweet
•