アイキャッチ画像
HOME > テーマ一覧 > TCD > 【日本語WordPressテーマ】CODE.(TCD090)

【日本語Wordpressテーマ】CODE.(TCD090)

ライフスタイル、カルチャー、ファッション、アートといった幅広い分野で情報を発信するWEBマガジン構築をイメージして作られたWordPressテーマがTCD90番目のCODE.です。

CODE.の方向性

単なるWEBマガジンではなく企業が運営するWEBマガジンにはマーケティング戦略も必要。

その戦略のひとつとしてサイトにオシャレさや先進性をどれだけ印象付けられるかというのがCODE.の基本概念です。

規模としては複数の執筆陣で運営する中規模以上のメディアに最適かと。

購入ボタン画像

”初心者”のための用語解説

※当サイトで紹介しているテーマ内に出てくる独自(専門)用語の意味がイマイチわからないという方のために用語の解説ページを作っておきました。

以下の用語について簡単に解説してます。【五十音順】

【ABテスト・AMP・CSS非同期読み込み・CTA・ECサイト・gzip・OGP&ツイッターカード・PWA・Welcart(ウェルカート)・WooCommerce(ウーコマース)・アップセル&クロスセル・ウィジェット・ウィッシュリスト・オンラインサロン・カスタム投稿タイプ・コーポレートサイト・サイトアフィリエイト・サイト回遊率・ショートコード・スクロール追尾・スプリット仕様・ドロップシッピング・ニュースティッカー・バイラルメディア・パララックス(デザイン)・ハンバーガーメニュー・ヒーローヘッダー・ファーストビュー・ファビコン・プラットフォーム・ブランディング・フルードグリッド・ブログアフィリエイト・ポータルサイト・ポートフォリオサイト・マイクロコピー・メガメニュー・モーダルウィンドウ・ランディングページ・リッチスニペット&構造化マークアップ(JSON-LD)・レスポンシブデザイン・子テーマ】

TCDテーマの管理画面には「テーマオプション」というカスタマイズ項目が出てきます。

サイト全体のカラーを変えたりロゴを設定したり、ファビコンの設定や文章・見出しのフォント(書体)設定、フッター情報の登録、SNSボタンの設定といった通常ならとても面倒な設定が、この「テーマオプション」操作画面上で手順通りに進めるだけで完結します。

サイトデザイン

デザインの妙

ページを開いたときに”かっこいい”と思わせるスタイリッシュなデザインあらゆる情報を発信しやすいレイアウト仕様がCODE.の特長。

トップページ・スライダー

ファーストビューには3タイプのヘッダー機能(ファーストビュー)が用意されてます。

記事スライダー

通常のブログ記事へのリンク(画像)スライダー形式で表示できます。

スライダー下には記事タイトルやカテゴリー、記事執筆者なども表示可。

キャプチャ画像

画像ではなくmp4動画も設置できます。

ただし遷移先の記事ページでは静止画のアイキャッチ画像が表示されます。

コンテンツスライダー

こちらは静止画・mp4動画・Youtube動画も設置可能な大画面形式のスライダーです。

スライド1枚目は動画、2枚目は静止画といった設定も可能で、ブログ記事へのリンクのほかサイト内外の任意のリンク先を設定することも可。

キャプチャ画像

3分割スライダー

CODE.の特徴的なスライダーで、左半分がスライダー形式右半分にはブログ記事を2記事設置できる複数表示のスライダーです。

(スマホでは縦1列表示)

キャプチャ画像

トップページ・コンテンツビルダー

トップページのヘッダー下にはTCDお得意のコンテンツビルダーを利用して下記のコンテンツを自由に組み合わせたレイアウトが構成できます。

記事カルーセル

コチラは一般的な記事スライダーで、「すべての記事・おすすめ記事・特集記事・ピックアップ記事」といったように表示するタイプを指定できます。

並び順も「日付 or ランダム」から指定可。

ちなみにトップページの「PICK UP」には”おすすめ記事”に設定した記事が表示されてます。

キャプチャ画像

タブ記事コンテンツ

3つまで切り替え可能なタブ記事グループ。

右サイドには特集ウィジェットを設定可。(デモサイトならランキングや特集ウィジェット)

キャプチャ画像

カテゴリー記事

背景に画像とパララックスエフェクトを設定可能なカテゴリー記事の一覧表示機能。

特に見せたいカテゴリー記事の一部をトップページでアピールする時に使えます。

キャプチャ画像

3カラム記事コンテンツ

3カラムにレイアウトされた記事紹介コンテンツ。

中央は3記事のスライダー形式、両サイドにはタイプ別の記事を3つまでセット可能な仕様。

キャプチャ画像

フリースペース

通常のエディター(ビジュアル・テキスト)で作成可能なフリースペースも用意されてます。

グローバルメニュー

CODE.のグローバルメニューは左側のサイドバー内に格納されていて、ハンバーガーメニューをクリックすると2タイプのメニューが展開されます。

カテゴリーとタグ一覧タイプ

カテゴリーとタグを画面いっぱいに一覧表示する先進的なタイプ。

サイト内のコンテンツを視覚的に理解しやすい構造になってます。

(3つ以上設定した場合はスライダー形式で表示)

キャプチャ画像

ドロワータイプ

こちらはシンプルなテキスト形式で表示させる一般的なドロワーメニューです。

キャプチャ画像

オリジナル機能

オリジナル機能の妙

利用者が鮮度の高いコンテンツを簡単に見つけやすい機能が数多く実装されてます。

ランキング一覧ページ

どの記事から見たらいいかわからないとかマストな記事だけ確認したい…そんな方向けに用意されてるのがランキングページ

閲覧回数を自動でカウントしランキング順位に反映される仕様で、設定した数の記事がスライド表示されます。

集計期間も日間・週間・月間・年間・無制限で切り替え可。

キャプチャ画像

管理人

年間ランキングであれば多少古めのコンテンツも見てもらえる可能性が高まりますね。

サイドバーにもタブ別ランキングを表示できます。

ライター紹介

WEBマガジンであれば多くの執筆者がいるもの。

ということでCODE.には”この人の記事を読みたい”と思わせるライター紹介ページ作成機能が搭載されてます。

ライター一覧ページ

記事を作成しているライターの一覧表示ページです。

ライターの写真・名前・キャッチフレーズが表示可。

キャプチャ画像

ブログ詳細ページ

ブログ記事の下部には執筆者情報執筆者の最新記事を(タブ)表示できます。

キャプチャ画像

プロフィールページ

ライター一覧表示ページやブログ記事下執筆者情報から行ける各プロフィールページではライター個人の詳しい紹介や作成記事が閲覧できます。

さらに各種SNSへのリンクアイコンも表示可能なので人気のあるライターなら自分の得意エリアへの流入も期待できます。

キャプチャ画像

管理人

ライターにしてみれば実績はとても大事。

それゆえライターの情報(ブログやSNS)の掲載だったりページ作りの演出などがしっかりしているページ構成であれば必然的にライターも集まってくるというものでしょう。

クリック計測可能なCTA

CODE.には高度なマーケティング戦略の助けになる4タイプのCTA機能が搭載されてます。

記事下CTA

通常の投稿記事下に表示されるCTA。

3種類のデザインから選択可。

キャプチャ画像

フッターCTA

フッターにもCTAが表示でき、こちらも3種類のテンプレートから選択可。

キャプチャ画像

記事下CTAとフッターCTAではABテストが計測可能。

デザインや文面を変更しながらコンバージョン率の変化を見極められます。

キャプチャ画像

ポップアップCTA

画面右下にひょこっと表示されるシンプルな小型CTA。

メルマガ購読や会員登録などを促したりするのに役立ちます。

利用者がキャンセルするまで表示されます。

またどのページで表示するかなどの設定も可。

キャプチャ画像

モーダルCTA

モーダルウィンドウ形式のCTA。

ただしアピール力が高い反面、閉じるまで他の操作ができないというデメリットもあります。

その対策として表示するページを細かく設定したり、一度閉じたあとはブラウザを閉じるまで二度と表示されない「1回限定表示」などの設定も用意されてます。

キャプチャ画像

ランディングページ(LP)

CODE.なら専用のコンテンツを組み合わせてのオリジナルランディングページを作ることができます。

デザインコンテンツ

テキストと画像によるシンプルなコンテンツ作成機能。

テキストと画像の位置が交互になるよう自動でレイアウトされます。

キャプチャ画像

記事カルーセル

ブログ記事をカルーセルスライダー形式で表示できます。

記事タイプや表示順、表示数なども調整可。

キャプチャ画像

フリースペース

自由に記載可能なフリースペース。

あらゆるコンテンツが自作可能。

もちろんLP用にヘッダー・フッターの有無、ヘッダー画像のタイプやコンテンツ幅などもページ単位で変更可。

キャプチャ画像

フッターバナー

フッターには最大3つのバナーを表示できます。

カテゴリーやタグ一覧ページへリンクさせるもよし、外部サイトにリンクさせるもよし。

キャプチャ画像

画像にオーバーレイ

雰囲気がイマイチな写真も簡単に味のある写真になるよう加工可能なオーバーレイ機能(写真画像に色を重ねる)が搭載されてます。

色と透明度はあらかじめ指定しておけるので写真をアップするだけでOK。

単調になりがちな写真でもぐっと画面を引き締めてくれます。

キャプチャ画像

スマホでも見やすいレイアウト

CODE.は小さい画面のスマホでも”楽しく見れる”よう、スマホでは専用のレイアウトで表示されるよう設計されてます。

キャプチャ画像

広告・収益化

CODE.にはブログ記事一覧ページやトップページの一部、ウィジェットの一部にネイティブ広告(インフィード広告)を表示する機能が実装されてます。

ネイティブ広告は通常のコンテンツに溶け込むようなデザインでサイト内に設置できるのが特長で、どの部分の何記事目に表示するかも設定できます。

キャプチャ画像

その他の主な機能

どんな方におススメ?

  • ゴチャゴチャ感の少ない独自のWEBマガジンサイトを開きたい
  • 複数のライターによる厚みのあるWEBマガジンサイトを構築したい

奇をてらったデザインや動きは最初は珍しがられますが、いかんせん記事内容が伴ってなければ利用者は自ずと離れていくモノ。

そうではなく利用者に純粋に記事を楽しんでほしいリピーターを増やせるWEBマガジンを構築したいのであれば、落ち着いた雰囲気のCODE.はおススメです。

購入ボタン画像

記事はお役にたてましたか?

記事にご興味をもっていただけましたら下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)