【日本語Wordpressテーマ】CODE.（TCD090）

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

CODE.の方向性

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

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

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

サイトデザイン

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

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

記事スライダー

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

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

コンテンツスライダー

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

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

3分割スライダー

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

（スマホでは縦1列表示）

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

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

記事カルーセル

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

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

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

タブ記事コンテンツ

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

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

カテゴリー記事

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

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

3カラム記事コンテンツ

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

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

フリースペース

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

グローバルメニュー

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

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

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

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

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

ドロワータイプ

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

オリジナル機能

ランキング一覧ページ

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

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

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

ライター紹介

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

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

ライター一覧ページ

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

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

ブログ詳細ページ

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

プロフィールページ

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

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

クリック計測可能なCTA

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

記事下CTA

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

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

フッターCTA

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

ポップアップCTA

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

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

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

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

モーダルCTA

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

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

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

ランディングページ（LP）

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

デザインコンテンツ

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

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

記事カルーセル

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

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

フリースペース

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

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

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

フッターバナー

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

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

画像にオーバーレイ

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

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

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

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

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

広告・収益化

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

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

その他の主な機能

• アラート表示可能なヘッダーバー
• インストール後に初期設定を一括完了させるテーマオプション管理機能
• フォント変更機能（メイリオ、游ゴシック、游明朝）
• レスポンシブ対応（PC・タブレット・ミニタブレット・スマホ）
• 新スマホ専用フッターバー
• カスタムCSS
• カスタムスクリプト
• オリジナルSNSボタン（Twitter・Facebook・Youtube・Instagram）
• OGP・ツイッターカード機能
• 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能
• サムネイル画像のホバーエフェクト設定（ズーム・スライド・フェード）
• カスタマイズ機能付き404ページ作成機能
• 新クイックタグ（Gutenberg対応）
• microdata形式の構造化マークアップ適用済みパンくずリスト
• 高速化設定（絵文字読み込み・コード最適化）
• 管理画面の多言語対応（日本語・英語）
• パスワード保護ページ機能

どんな方におススメ？

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

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

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