ブログ・サイト運営の話

【事例あり】ワードプレステーマGENSENをレビュー。必須カスタマイズも解説

この記事を読めばTCDのWordPressテーマである「GENSEN」の良さ、サイト事例、実際に使うときに必須のカスタマイズがわかります

たくろー
たくろー
どうも。札幌のwebライター、たくろーです。

今回はポータルサイト製作に最適なワードプレステーマ「GENSEN」を入手してサイトを作ってみました。めちゃくちゃ良いテーマでしたので、詳しくご紹介していきたいと思います。

この記事が役に立つ人
  • GENSENを買おうか迷っている人
  • ポータルサイトを作りたい人
  • コーポレートサイトを作りたい人
  • とにかくかっこいいサイトを作りたい人

GENSENを使えばカンタンに綺麗で高機能なサイトを作れます。めっちゃおすすめですね。

TCDのWordPressテーマ「GENSEN」はポータルサイトに最適だった

TCDの販売しているWordPressテーマである「GENSEN」は、いわゆる「ポータルサイト」を作れるテーマです。デモサイトとして上の画像のような「温泉地のポータルサイトのサンプル」が用意されていて、これを見るだけでも最高にカッコイイことがわかるでしょう。

まだご覧になっていなければ、まずはTCDの公式サイトからGENSENのデモサイトを見てみて下さい。

さて、僕は今回どうしてもポータルサイトが作りたくなって、このTCDのGENSENというテーマを購入してサイトを作成しました。「けっこう高いし、失敗したらヤダな…」と正直3か月くらい悩んだのですが、思い切って購入して使ってみたところ、これがめちゃくちゃ良いと。

たくろー
たくろー
このレベルの機能を実装するとなると、もし製作会社に頼んだらどう考えても100万円単位の料金がかかります

というわけで、実際に使ってみたレビューを交えながらGENSENの良さをお伝えしたいと思います。

僕の製作したポータルサイトであるサブスク比較サイト「SubscPicks(サブスクピックス)」を実例に上げながら解説しますね。

簡単にコーポレートサイトのような外観に仕上がる

簡単にコーポレートサイトのような外観に仕上がる

上記の画像は、僕がGENSENをつかって製作したサイト「サブスクピックス」のトップ画面です。PCでもスマホでも画面幅いっぱいのビジュアルが表示されていて、いわゆるコーポレートサイトっぽい作りですよね。

ちなみに画像ではわかりませんが、PC表示のサイトトップには動画を掲載することも可能で、上記サイトも動画にしてあります。(スマホ版は画像にしか対応してません)

よかったら下記URLから実際に見てみて下さい。新しいタブで開きます。

おすすめサブスク比較サイト「サブスクピックス」を見る。

たくろー
たくろー
ちなみに今回はあくまで現時点のサイト状況で解説しますが、日々アップデートしてますのでサイトの様子がかわってたらスミマセン

しかも、GENSENは設定もカンタンです。

GENSENテーマの設定画面

上の画像のようにGENSENにはテーマ専用のオプション設定画面が用意されていまして、順番に選んでいくだけで良い感じに仕上がるというワケです。

トップページのビジュアルにかぶって表示されるキャッチコピーや文章、CTAボタンなども超カンタンに設置可能。カンタンに作り込めるように用意されてました。

たくろー
たくろー
最高です

「投稿・紹介ページ・お知らせ」が独立してて、痒いところに手が届く

普通のワードプレステーマでは、基本的に記事をつくる項目は「投稿」か「固定ページ」だけですよね。しかしGENSENのテーマでは「投稿・紹介ページ・お知らせ・固定ページ」と4種類に分かれています。

それぞれ別のカテゴリを設定できたり、表示する場所をバラバラにできたりと痒いところに手が届く仕様。

基本的に「紹介ページ」にはポータルサイトのメインコンテンツをいれることになると思いますが、たとえば僕の作成したサイトなら下の画像のようにサブスクサービスの紹介ページにしています。

TCDのワードプレステーマGENSENのサイト実例

いまは上記のようにトップページにスライダーで表示させてますが、記事をならべたりといろんな形で表示させられます。

「投稿」はいわゆるブログ記事のように独立させて使えて、そちらにはキーワード設定したSEO記事をいれて集客できると。「特集記事」みたいな感じで組んでもいいですね。まだ1記事しかいれてませんが、下の画像のように別枠で表示できたりします。

TCDのワードプレステーマGENSENのサイト実例

さらに「お知らせ」として作成した記事は検索バーの下に一覧で表示させられて、新着情報などを掲載できます。たとえば下の画像のような感じですね。

TCDのワードプレステーマGENSENのサイト実例

こんな風に、TCDのGENSENというテーマはポータルサイト運営において痒いところに手が届くシステムが組まれていると。

たくろー
たくろー
正直ここまで期待してなかったので、かなり良い買い物でした。

「絞り込み検索」が、そんじゃそこらのテーマにはない

「絞り込み検索」が、そんじゃそこらのテーマにはない

ポータルサイトを作る以上、やっぱり気になるのが「絞り込み検索」の機能です。その点でもGENSENは超優秀。

検索機能を追加できるプラグインなどもめちゃくちゃ調べましたが、ここまで多機能かつビジュアルが良いものは見つかりませんでした。

  • キーワード検索は「and か or」でユーザーが選べる
  • 「投稿」と「紹介ページ」から検索対象をえらべる
  • 検索対象にするカテゴリは3ジャンル設定できる

GENSENのテーマでは、投稿と紹介ページにそれぞれ3カテゴリまで設定できるんです。これだけでも珍しいんですが、それを絞り込みにつかえると。

僕の作成したサイトはまだコンテンツ量が少ないのであまり活用できていませんが、たとえば「都道府県別」かつ「ジャンル別」かつ「価格帯」とかで絞り込ませるような用途が考えられますね。

正直ここまでできるテーマとかプラグインは他にみたことないので、WordPressの既存のテーマでポータルサイトを作るなら本当にGENSEN一択ですね。

\CHECK NOW/

ポータルサイトを作るならGENSENがベスト
GENSEN公式をチェック

WordPressテーマ「GENSEN」のサイト事例を紹介


こんな最高のテーマであるGENSENですが、もちろん僕以外にもサイト制作につかっている方や企業はたくさんいらっしゃいます。

せっかくですので、GENSENのテーマをつかって作られたサイト事例を3つだけご紹介。参考にしてみて下さい。

  • セブペディア様
  • ドッグランナビ様
  • ちょいすバイト様

GENSENのサイト事例①セブペディア様

セブペディア様

GENSENのサイト事例①「セブペディア | セブ島最大の情報検索サイト」

セブ島の情報ポータルとして運営されているサイトです。確認した時点では更新が止まっているようでしたが、こちらでは

  • 投稿記事をセブ島の記事に
  • 紹介ページはスタッフ紹介に
  • お知らせは定期的な更新情報に

使われていました。シンプルな作りですね。

GENSENサイト事例②ドッグランナビ様

GENSENのサイト事例②「ドッグランナビ | 全国ドッグラン情報サイト」

全国のドッグランを紹介しているポータルサイトとして運営されています。シンプルにブログ記事だけをつかって運営されてますね。

GENSENのサイト事例③ちょいすバイト様

GENSENのサイト事例③「Choiceバイト〜バイト探しはちょいすバイト〜」

こちらのサイトはアルバイト情報ポータルとして運営されています。投稿と紹介ページは分けずに統一されてますね。

エリアと仕事内容で絞り込みできるようになっていて、ポータルサイトのGENSENの機能を最大限に活かしています。

GENSENの公式で用意されたデモサイトもかなり手が込んでますので、ぜひあわせてご覧ください。

\CHECK NOW/

ポータルサイトを作るならGENSENがベスト
GENSEN公式をチェック

GENSENを使うときに必須のカスタマイズを解説

ここからは、実際にGENSENのテーマでサイト制作をするときに「これは絶対カスタマイズがいるぞ」と思った必須項目をお伝えしておきます。

正直けっこう困ったので、めっちゃググりました。

ちなみに具体的なCSSやHTMLのコードも記載しておきますが、これを使ってなにか重大なエラーが起きたりしても責任とれませんので、あくまで自己責任でおねがいします。

GENSENの<h1>~<h6>の構造をSEO最適化するカスタマイズ

TCDのテーマには多々ある事例のようですが、GENSENも例にもれず見出しの<h1>~<h6>の構造に少々クセがあります。

たくろー
たくろー
ある程度専門的な話になりますので、わかる方だけ実践してくださいね

ウェブページにおいては、基本的に<h1>が記事タイトルで、以降<h2>が大見出し、<h3>が中見出し、<h4>が小見出し…といったように使われます。

なのですが、なんとGENSENのデフォルトの設定では

  • <h1>が常にサイトのタイトル
  • <h2>が記事のタイトル
  • <h3>が大見出し
  • 以降ちいさい見出し

上記のような設定になってるんです。これはいけない…。

最悪の場合検索エンジンのクローラーが「全部の記事のタイトル=サイトのタイトル」と認識してしまうかもしれません。そうなったら検索順位なんて付くわけないですよね。

実際のところどう認識されるかわかりませんが…SEOの内部対策を最適化するなら変更して損はありません。

で、この症状については公式が修正方法を回答していましたので、それを参考に記載します。少なくとも僕の環境では、この通りに修正してうまくいきました。繰り返しますが、自己責任で触ってください。

全部で4ファイルをいじる必要があります。

1か所目

編集するファイル
functions/logo.php
(「外観→テーマエディタ」から探してください。)

編集する項目①
<h1 class=”logo”>

<?php if( is_singular() && !is_front_page() ): ?>
<div class=”logo”>
<?php else: ?>
<h1 class=”logo”>
<?php endif; ?>

編集する項目②
</h1>

<?php if( is_singular() && !is_front_page() ): ?>
</div>
<?php else: ?>
</h1>
<?php endif; ?>

※どちらも4か所ずつあるので、入念に探して編集してください。

たくろー
たくろー
上記はサイトトップページのロゴ部分のコードを動的にする修正ですね。トップページが表示されてるときはサイトタイトルが<h1>に。記事のページが表示されてるときは<div>になります。
2か所目

編集するファイル

  • single.php
  • single-news.php
  • single-introduce.php

編集する項目①
<h2>

<h1>

編集する項目②
</h2>

</h1>

たくろー
たくろー
上記は「紹介ページ」「投稿」「お知らせ」記事の各ページのタイトルを<h1>にするための修正ですね。

繰り返しますが、僕の環境では上記のカスタマイズで修正できました。あくまで自己責任でどうぞ。

GENSENの見出しデザインを変えるカスタマイズ

GENSENのデフォルトの設定では、見出しデザインがぜんぶ「文字の大きさがちょっと変わるだけ」で、めっちゃわかりにくいんです。

なので見出しデザインを変えたいと。

ちなみに僕のサイトでは、h2を下の画像のようなデザインに。

h3を下の画像のようなデザインにしました。

一応、以下のコードを「外観→カスタマイズ→追加CSS」にそのまんま貼り付けたら上記のようなデザインになります。

繰り返しますが、エラーが起きても自己責任でお願いしますね。

見出し変更のCSS例

.post_content h2 {
color: #fdfffc;
font-weight:bold;
position: relative;
padding: 0.9em 0.9em ;
background: #dd7a7a;
margin-bottom:1.5em;
}

.post_content h2:after{
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #dd7a7a;
width: 0;
height: 0;
}

.post_content h3 {

padding: 0.6em 0.6em;
color:#dd7a7a ;
background: transparent;
border-left: solid 5px #dd7a7a;
font-weight:800;

margin-bottom:1em;
margin-top:1em;

}

TCDのWordPressテーマGENSENは最高だという話でした

というわけで、GENSENめっちゃ良かったよというお話でした。既存テーマでポータルサイトを作りたい人は、本当にGENSEN一択です。

  • めっちゃ簡単にコーポレートサイトのような外観のサイトができる
  • ほかにないレベルの優秀な絞り込み検索機能あり
  • 4つにわかれた便利な投稿ページ

個人的には上記3点がおすすめポイントですね。

ぜひ導入してみて下さい。

\CHECK NOW/

ポータルサイトを作るならGENSENがベスト
GENSEN公式をチェック

たくろー
たくろー
僕の製作したサイトサブスクピックスもついでによろしくお願いします。
ABOUT ME
アバター
たくろー(WEBライター)
これまでにアパレル業界のエリアマネージャー職や人事・総務の仕事を経験。現在は企業メディアで編集・ライティング・SEO対策を担当する副編集長として働きつつ、ブロガー・webライターとしてパラレルワーク中。筋トレとザンギが好きです。詳しくはPROFILEもご覧ください。
3週間で転職できるスキルが身に付く「ブログ講座」を用意しました

【速報】ブログを始めて未経験から超ホワイトなwebマーケ企業に転職した僕がお届けする「3週間講座」を無料で用意しました。

職務経歴書に書けるブログの作り方
こんなあなたにオススメです。

  • お店で毎日消耗しながら働いて、いつか転職しようとは思うけれど踏ん切りがつかない27歳のアパレル店長
  • それなりに出世したものの、先が見えてしまって絶望している35歳・人事部の中間管理職
  • もしも40歳をすぎて今の会社が潰れたら…と想像すると、どうやって暮らしていけば良いのかわからない営業マン

3週間で学び、ブログを書き、1年後にはwebマーケティング企業に転職できるスキルを身に付けましょう。

【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座
【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座この記事は「職務経歴書に書けるブログの作り方&webライティングスキル」を3週間(21日)で学べる講座です。 さっそく申し...