カエテングラフ｜初心者でも洗練されたサイトが作れるワードプレステーマ

テーマのみならず、分かりやすくて見やすい テーマ管理ページと設定マニュアル を提供することにも力を注いでいます。どんなに高機能でデザインが格好よくてもユーザー様が使いこなせないと意味がありません。設定のほとんどはテーマ管理ページからできて 初心者でも洗練されたサイトが簡単に作成 できるテーマになっています。

ワードプレスは様々なビジネスシーンで Web からの集客活動に利用されています。収入を得るためにはインデックスされて・アクセスされて・多くの記事がしっかりと読まれるサイト作りが大事です。そのようなサイトを効率良く作るには、記事作成・SEO対策・キーワード選定と同様に テーマ ( テンプレート ) 選びも大事な要素 になります。カエテングラフなら 記事がしっかりと読まれるサイト を簡単に作ることができます。是非あなたのビジネスでご活用ください。

これから詳しい特長・商品内容・ご購入方法をご説明します。次のことに１つでも該当するならば続きをじっくりとお読みください。

レスポンシブデザイン対応

レスポンシブデザインとは、PC・タブレット・スマートフォンなど閲覧するデバイスごとに最適化されたサイト表示をする技術です。コンテンツを適切にインデックスできる・効率的に発見できるなどの理由でGoogleでも推奨されているサイト構築方法のひとつです。

 

一般的なテーマは記事の改行が PC ではちょうど良くてもスマホではガタガタで読み辛くなることが多いです。カエテングラフは 画面横幅 799 px 以下のデバイス ( スマホ等 ) では改行タグが未反映 になりバランス良く記事を見せることができます。

▲カエテングラフ：各デバイスイメージ

• そのために既存サイトを当テーマに変更すると記事が詰まり読み辛くなる場合があります。基本的には当テーマに沿った記述で記事の修正が必要ですが CSS を追加して一括で修正する方法もマニュアルサイトで説明しています

セールスレターの場面

セールレターはご存知の通り内容のボリュームがあり結構な長文です。また、説明する順番など話の流れが重要で、作成中や仮完成後にコンテンツの順番を入れ替えることも頻繁です。

そんな内容が膨大なセールレター、1 つの記事だけで管理していると、何かと不便です。

レター作成経験者は分かると思いますが次のようなことは日常茶飯事で悩みの種です。
1 記事で管理するのは、正直、効率が悪過ぎます。

• コンテンツのひと纏まりが分かり辛く探すのに時間がかかる
• どこを修正していたのか分からなくなる・別の箇所を修正してしまった
• 入れ替え時にHTMLタグが欠落してレイアウトが崩れた

カエテングラフならそんな悩みから解消されて効率良く作業できます。コンテンツはヘッダー・メイン含め 16 個 まで設定できます。コンテンツをブロック ( 話の纏まり ) 別に作成して構成を考えながら入れ替える ことも簡単にできます。

ビジネスサイトの場面

昨今は次のようなサイトデザインが主流になっています。

• 詰まり過ぎないゆとりあるレイアウトで
• イメージが湧きやすいように視覚的に訴えて
• 誘導したいコンテンツを分かりやすく見せる

カエテングラフならそのようなトップページの作成も簡単です。アイキャッチ画像を背景にしたメリハリある見出しタイトルの見せ方・コンテンツ毎に違うデザインの設定・誘導するボタン設置などができて 洗練されたセンス良いトップページ を作ることができます。

▲ビジネスサイト：トップページ：コンテンツの一例

ランディングページ作成機能もご用意しています

ランディングページ作成機能 は１カラムのページが作成できて、ページ別にトップページコンテンツの表示設定ができます。カスタム投稿を利用した専用ページと固定ページで作成できます。記事ページ扱い ( 記事 ID 管理 ) のページになりますので AMP 対応も可能です。

• トップページコンテンツは管理ページで表示するコンテンツとページを選択して表示設定をします
• 例えば個別記事ページで表示設定したコンテンツは全ての個別記事ページで表示されます
• ページ別に表示するコンテンツを替えたいときは当機能でランディングページで作成ください

カエテンシリーズお馴染みの定番機能

ベースカラー

デザインで設定している ベースカラー ( 背景色・罫線色・ホバー背景色 ) を自由に設定できます。お好みの色やサイト内容のイメージに合った色を設定してください。

 

 

▲ベースカラー：設定管理ページ

従来まではこの 2 つがデザインカスタマイズのベースでした。
ですが、私自身もサイトを数多く作るなかで「 もっと自由にデザインを組みたい 」と想うようになり、またユーザー様からも同様の希望を頂くこともありました。そこで、次で説明する新機能をカエテングラフには搭載しました。

新機能　エリア別デザイン変更

もっと自由にデザインを組めるように、文字色・背景色・罫線・角丸・グラデーションを設定できる エリア別デザイン変更機能 をカエテングラフにはご用意しました。変更する項目をチェックして色選択・数値入力をするだけで簡単に設定できます。

▼サイドバータイトル：デザイン変更例

その他の機能　レイアウト・コンテンツ表示・サイト表示横幅・文字書体

コンテンツ表示選択

トップとアーカイブページは 記事・記事一覧の表示・非表示 を管理ページのチェックだけで設定できます。

 

 

基本レイアウト・ページ別レイアウト

次のレイアウト設定 が管理ページのボタン選択だけでできます。

 

• 基本レイアウト設定2 カラム右・ 2 カラム左・ 3 カラムなど 5 つのレイアウトから選択できます
• トップページ・記事ページのカラム変更トップページだけを 1 カラムにするなどの変更ができます
• 特定の記事だけを 1 カラム記事単位で 1 カラムに変更できます。記事作成ページで選択できます

 

記事ページのカラム変更は商品レビューサイトなどでお勧めです。

サイドバーの情報量が多過ぎると周囲に気が散って記事がしっかりと読んでもらえないことがあります。 記事ページを 1 カラムや 2 カラムにすると周囲の情報量が減って気が散らずに「 集中して記事を読んでもらえる環境 」が作れて「 成約率を高める効果 」も狙えます。

▲基本レイアウト：設定管理ページ

 

▲ページ別レイアウト： 3 カラムの場合：設定管理ページ

独自ウィジェット

最近の投稿サムネイル付き・人気記事ベータ版・ 最近のコメントリッチ表示・カテゴリー記事の 4 つの独自ウィジェット をご用意しています。サイドバー・メインカラムフリースペース・フッターフリースペースなどに設定してください。

カテゴリー別の記事をサムネイル付きで表示・カテゴリーはタブ切替式で 8 つまで・新着記事も設定できます

人気記事をサムネイル付きで表示・集計期間は日間・週間・月間・全期間の 4 つから選択できます

記事を彩り読みやすくする装飾パーツ

記事装飾パーツを利用して閲覧者に好印象を与える読みやすい記事が簡単に作れます。17 種類 で 400 個 以上をご用意しています。

1. 文字装飾　文字位置・太字・下線・文字サイズ・文字色・文字背景・蛍光マーカー・蛍光ライン・罫線囲み・文字だけ見出し
2. テーブル
3. 画像回り込み
4. 引用
5. ボックス
6. アコーディオン ( 開閉式コンテンツ )
7. Ｑ＆Ａ
8. ボタン
9. 記事カード
10. 会話コンテンツ
11. flexbox ( 横並びボックス )
12. h2 タグ
13. h3 タグ
14. ul タグ ( 番号なしリスト )
15. ol タグ ( 番号ありリスト )
16. バッジ
17. その他　マージン余白・パディング余白・角丸・横幅・罫線・背景・表示関連

 

記事作成に少しの手間をかけるだけで成果は大きく変わります。

文字だけの記事は、単調で読みづらく流し読みも多くなります。ですが「 画像や見出し 」を使うとアクセントになり格段に読みやすくなります。また、そのように手間をかけた記事は、閲覧者に好印象を与えて信頼・安心を高め、記事がしっかりと読まれるきっかけになりビジネスや収入に繋がりやすくなります。

H2タグ

H2タグ

H2タグ

H3タグ

H3タグ

H3タグ

• 番号なしリスト

• 番号なしリスト

• 番号なしリスト

• 番号なしリスト

1. 番号ありリスト

1. 番号ありリスト

名前

会話コンテンツ左側

名前

会話コンテンツ右側

文字背景 文字背景 文字背景 蛍光マーカー 蛍光マーカー

蛍光ライン 蛍光ライン 蛍光ライン 罫線囲み 文字見出し

注意して欲しい事の補足説明ボックス

インフォメーションなどの補足説明ボックス

SNS ボタン・OPG タグ・ Twitter Cards

同イメージで記事作成ができるビジュアルエディタ

旧エディタ TinyMCE と 新エディタ Gutenberg のビジュアルエディタでは 文字サイズ・フォント・表示幅・文章の折り返しが「 実際の記事と同じ表示 」になります。同イメージで記事作成ができて校正の手間を省くことができます。

▲新エディタ：ビジュアルエディタ

▲旧エディタ：ビジュアルエディタ

記事投稿画面と実際の記事の表示が違うテーマが多いため、投稿後に「 思っていたのと違う位置で文章が折り返されてバランスが悪く実際の記事を何度も見ながら修正した 」という経験があるはずです。カエテングラフなら実際と同じイメージで作成できますので、もし修正が必要でも最低限で済むように工夫しています。サイト表示横幅や文字サイズを変更したときは専用 CSS を編集してビジュアルモードの表示を変更できます。

Google 検索エンジン最適化スターターガイドでも解説されていますが、タイトルや説明文などの SEO重要タグは各ページ固有の内容にする ことを推奨されており、カエテングラフはそれに準じた内部 SEO 対策ができます。SEO 対策用プラグインの導入は不要です。

最新の HTML5 で作成しています

HTML5 では header・footer・article・aside・section などの新設タグがあり、そのマークアップに従って HTML を作成しています。HTML5 では 1 ページで h1 タグの複数利用が OK ですが、h1 タグは 1 ページで 1 つのみの旧ルールのサイトもあり、そのサイトも検索エンジンの評価を得ている状況です。現時点のカエテングラフは旧ルールを適用しています。また、HTML5 の運用ルール自体にも未確定要素がありますので ルールが整理・精査に合わせてフレキシブルに HTML の見直し ( アップデート ) をしていきます。

記事ページ構造化データマークアップ

Google が推していることを鑑みて schema.org での 構造化データを JSON-LD 形式でマークアップ するカスタマイズをしています。構造化データとは HTML に書かれている情報を検索ロボットにも理解できるように意味づけをするメタデータのことです。構造化データをサイトに導入することで Google 検索結果にリッチスニペットが表示されるなどのメリットがあります。

パン屑リスト構造化データマークアップ

パン屑リストは data-vocabulary.org での 構造化データを Microdata ( マイクロデータ ) 形式でマークアップ するカスタマイズをしています。検索結果にページタイトルと一緒にパン屑リストも表示されます。

AMP 対応機能 ( ベータ版 )

AMP とは Google と Twitter で共同開発している「 モバイル端末でウェブページを高速表示する 」プロジェクトのことです。カエテングラフは 個別記事・固定ページの AMP 対応が可能 です。ワードプレスには AMP 化するプラグインもありますがデザインのカスタマイズ性に乏しく見た目が似たサイトばかりになっている現状があります。カエテングラフは デザインを可能な限り AMP 対応したページでも反映させて他サイトとデザインの差別化 ができるようにしています。

ページ表示速度最適化

テーマでは主に レンダリングを妨げるリソースの除外・オフスクリーン画像の遅延読み込み を改善する設定ができます。他の項目の改善はお勧めのプラグインをマニュアルサイトで紹介しています。

＜ 当テーマ利用サイトのページ表示速度一例 ＞

• 上記は Google が公式提供しているウェブページの表示速度計測ツール Page Speed Insight での計測結果です
• 上記は 2020/5/4 8:00 時点の計測結果です。計測する時間帯でスコアは変わる場合があります。予めご了承ください

ワードプレスには高機能なテーマがたくさんありますが、テーマによっては、マニュアル説明が乏しかったり、各種設定をする管理ページが「 分かりづらい・見づらい・操作しづらい・複雑すぎる 」というものも少なくありません。

そのため、カスタマイズをしたいけど「 設定方法や管理ページ操作が全く分からずカスタマイズは到底無理でお手上げ 」と挫折してテーマをデフォルトのまま利用している人も多いのではないでしょうか。カエテングラフならそのような悩みから解放されます。

直観的に操作できる管理ページ

カエテングラフはマニュアルと管理ページを分かりやすく制作することにも力を注いでいます。ワードプレス本体機能のカスタマイザーを利用した オリジナル管理ページで初心者でもプレビューを見ながら直感的に操作ができる ようにしています。デザイン変更など操作したことがプレビューに反映しますので、どのようなデザインになるのか確認しながらカスタマイズができます。

▲各種設定管理ページ

• 保存して公開をする前に「 設定する・しない 」を繰り返した操作したときはプレビューに反映しない場合もありますが公開時は必ず反映していますので予めご了承ください。

管理ページで設定できること

ここまでの説明で紹介してない管理ページの機能をいくつかご紹介します。

1 ページに表示する記事数

トップページ・アーカイブページ・関連記事で表示する記事数を設定

 

記事一覧の記事タイトル・抜粋文の文字数

記事一覧・関連記事で表示する記事タイトル・抜粋文の文字数を設定

 

タグクラウド表示件数

ワードプレス本体機能では変更できないタグクラウドの表示数を設定

 

テキスト変更

記事一覧タイトルや記事の続きを読むなどのテキストを設定

 

記事の並び順を投稿日の古い順にする

ワードプレス本体機能では変更できない投稿日の古い順に表示する設定

 

投稿日の表示

個別記事・固定ページで投稿日・更新日の表示・非表示を設定

 

カスタム分類

通常のカテゴリー・タグとは別の独自分類を追加する設定

 

文字色

メインエリア・サイドバー・リンク文字などの文字色を設定

 

文字サイズ

記事本文・サイドバー・各種タイトルなどエリア別の文字サイズを設定

 

文字書体 ( font-family )

Noto Sans Japanese・メイリオ・游ゴシック・游明朝の 4 つから設定

 

サイト背景色

サイト全体・メインカラム・サイドバーの背景色を設定

 

サイト背景画像

サイト全体の背景画像を設定

 

グローバルメニューアレンジ

サイトタイトルと横並び・スクロールで上部に固定表示を設定

 

ヘッダー背景画像

ヘッダー全体の背景画像や縦幅を設定。画像の中央部分に合わせて表示します

 

ヘッダー内側画像 ( HTML )

HTML で画像を設定。サイトタイトルなど文字入り画像を設定ください

 

ヘッダー内側画像 ( CSS )

CSS で画像を設定。ヘッダー内側の背景に画像を表示します

 

注意メッセージ

2 年以上未更新の記事に注意メッセージを表示する設定

 

記事を読む時間・文字数

記事を読む時間・記事の文字数を表示する設定

 

広告ショートコード登録

広告ソースや定型文を 10 個までショートコード登録できます

 

インフィード広告

記事一覧・関連記事のなかにインフィード広告を表示する設定

 

Google Analytics

Google アナリティクスの設定。トラッキング ID を入力してください

 

Google Search Console

Google Search Console の設定。HTML メタタグを入力してください

 

スクリプト・コンテンツスライダー

HTML 内にスクリプトを設定。スライダー ( bxSlider ) も利用できます

 

CSS 追加

CSS の追加設定。テーマに保存できてアップデートしても消えません

 

記事一覧・関連記事レイアウト

1 ～ 4 列から選択・サムネイルサイズの変更もできます

 

追従サイドバー

スクロールに追従するサイドバーを設定。IE11では未反映

▲カエテングラフ：トップページ

テーマ内容のまとめ

テーマ名：カエテングラフ kaetenGraph

• 流行り廃りがないシンプルなデザインでさまざまなジャンルでご利用いただけるテーマです
• ビジネスサイト・セールスレター・ランディングページが簡単に作成できるトップページコンテンツ機能を搭載。記事で設定するアイキャッチ画像をアクセントとして見せるデザインをベースにしています

 

デフォルトデザイン

• 図がトップページのデフォルトデザインになります
• ベースカラーはブルー ( #1e73be )
• ベースカラー・エリア別デザイン変更・エリア別デザインプランの組み合わせで様々なデザインに変更できます

 

サイト横幅　( 文字や画像が表示される横幅 )

• 2 カラム版　メインカラム 650 px / サイドバー 250 px / ヘッダー 1000 px
• 3 カラム版　メインカラム 650 px / サイドバー 200 px / ヘッダー 1200 px
• サイト表示幅設定機能で自由に変更できます

 

その他

• トップページ・アーカイブページは記事一覧・記事の表示・非表示が選択できます
• 記事本文の文字サイズは16 px で変更も可能。記事本文だけでなくサイトや記事のタイトル・サイドバーなどエリア別の文字サイズも変更できます
• フリースペースは 9 エリアで 18 箇所をご用意。ワードプレス本体機能のウィジェットとテーマ機能の専用管理ページの 2 つから設定できます

 

基本レイアウト： 5 種類　( ご利用いただけるレイアウトは 19 パターン )

• 2 カラム右サイドバー　通常版・トップページ 1 カラム・記事ページ 1 カラム
• 2 カラム左サイドバー　通常版・トップページ 1 カラム・記事ページ 1 カラム
• 3 カラム両サイドバー　通常版・トップページ 1 カラム・記事ページ 1 カラム・記事ページ 2 カラム右サイド・記事ページ 2 カラム左サイド
• 3 カラム右サイドバー　通常版・トップページ 1 カラム・記事ページ 1 カラム・記事ページ 2 カラム右サイド
• 3 カラム左サイドバー　通常版・トップページ 1 カラム・記事ページ 1 カラム・記事ページ 2 カラム左サイド

アップデート・サポート・ご利用規約

ご購入後 1 年間のテーマ無償アップデート

ワードプレス本体のシステムアップデートに伴いテーマに不具合があったときはアップデート版を無償でご提供させていただきます。

ご購入後 90 日間の無償メールサポート付き

テーマの設定にお困りの際はご安心ください。ご購入後 90 日間の回数制限無しの無償メールサポート付きです。但し、特別なカスタマイズやアレンジをご希望されるときは別途にサポート代金をご請求させていただく場合がありますので予めご了承ください。

• ワードプレス本体システムのインストールについてのマニュアル説明はございませんので予めご了承ください
• ワードプレス本体システムのインストール方法はご利用のサーバーのマニュアル等でご確認いただきご自身でインストールをしてください

テーマご利用規約

• 当テーマはご購入いただいた方のみが自己所有サイトでご利用できるテーマです。自己所有サイト以外 ( 自己所有であっても第三者のためのサイト・第三者のために制作代行したサイトを含む ) で当テーマを利用する行為は一切禁止いたします。
• テーマに含まれるPHPファイルについてはGPLライセンス仕様に基づきますが、スタイルシート・画像素材・JavaScriptファイル・PDFの著作権はクリエイティブプランニングが保有しています。第三者に対する無断配布・転売・貸与・交換・改変に関わる全ての行為は一切禁止いたします。
• マルチ商法・ねずみ講・ネットワークビジネス等への勧誘・紹介等を行うサイト、反社会的・暴力的・猟奇的な情報を発信するサイト、犯罪行為その他違法行為を幇助・教唆・助長・指嗾する情報を発信するサイト、第三者の権利を侵害するサイトで当テーマを利用する行為は一切禁止いたします。
• 禁止事項に該当する本商品の不正入手や使用が発覚した場合は使用停止を通告すると共に不正利用者を特定し損害賠償請求を行う場合があります。