サイトの顔ともいえるトップページのヘッダーにはインパクト大のヒーローヘッダースライダーを採用しています。商品特設ページや、キャンペーン情報ページへのリンクなど自由度の高い設定が可能です。

2021.01.30

イチオシ商品のラインナップを華麗に彩るヒーローヘッダースライダー

ECサイトの入り口となるトップページヘッダーにイチオシ商品や特集を掲載することは第一印象で与えるインパクトを増大させるのはもちろんのこと、センスの良さをアピールする絶好の機会になります。 当テーマ...

商品カテゴリーを視覚的に分類し、商品ページへの導線を作るメガメニュー

メガメニューは、商品カテゴリーをサムネイル付きで表示し、視覚的に整理されたグローバルメニューを作成することができます。

2021.01.28

スタイリッシュかつ認識性に優れた3タイプのメガメニュースタイルを搭載

メガメニューはヘッダーなどにあるグローバルナビゲーション部分をオンマウスした際に表示される広いスペースを活かしたメニューで、多層構造のリンクを一目で誘導できるため、主にコンテンツ量の多いサイトでそ...

ショッピングサイトを構築するためのプラグイン「Welcart」対応

当テーマはECサイトプラグイン「Welcart」に対応するデザインテーマです。当テーマにWelcartをインストールすることでWelcart用に連携された各種機能をご利用になれます。

2021.01.31

Welcartの適用箇所について

Welcartでできること 「ICONIC」では全体のサイトデザイン、投稿（ブログ記事）、カスタム投稿タイプ「お知らせ」など一般的なサイトに関する内容をTCDテーマオプションやWordpressウィジェットでフォローしてい...

ユーザーの購買欲を刺激する関連商品＆レコメンド商品一覧表示機能

ショッピングサイトではユーザーの求める商品を効果的に提示し、商品の魅力を伝えることが重要です。当機能はユーザビリティの向上と購買欲の刺激に一役買っています。

2021.01.28

ユーザーの購買意欲を高める関連商品＆レコメンド商品一覧機能

「ICON」の商品詳細ページの下部には関連商品と、同時に買われている商品を一覧で表示する機能が搭載されています。 関連商品を表示するには、商品管理画面にて「タグ」に表示したい商品の商品コードを入力する...

ECサイトに必要なコンテンツを網羅したトップコンテンツビルダー機能

2021.02.02

トップページのコンテンツ製作が驚くほど捗るコンテンツビルダー機能

WordPressテーマの多くはトップページのコンテンツ構成が予め決まっており、その枠組みの中で、コンテンツを埋め込む形になっているものが大多数であるかと思います。時には直接トップページテンプレート（phpフ...

このツールを使えば、例えば、記事内でスライダーやタブ、2カラムや3カラムレイアウト、画像リストやキャッチフレーズなど様々なコンテンツをHTMLやCSSなど専門知識のない管理者の方にも直感的にしていただくことが可能です。あなたはお好みのレイアウトを選び、必要項目を埋めていくだけで美しく思い通りのページを作成することができます。

下記のようにドラッグ&ドロップの直感的なインターフェースによって、1px単位での調整を可能としながら、ページをデザインできます。

ページビルダー機能は当テーマの投稿ページだけでなく、固定ページにも実装されています。

当テーマではファーストビューでユーザーに与えるメッセージ性を強調し取扱商品を魅力的に見せられるヘッダースライダーを搭載しています。
まず、トップページを開くとフルスクリーンでスライダー画像が表示され、少し間をおいて、フワッとキャッチフレーズがフェードインします。キャッチフレーズは、フォントサイズや色、位置（左寄せ、中央寄せ、右寄せ）、ドロップシャドウに至るまで、詳細な設定が可能になっています。また、このキャッチフレーズの設定はスマホ表示専用の設定項目があるので、PCユーザーだけでなく、スマホユーザーの視点からも見せ方を工夫することができます。

その他、見出しタイトルの表示や任意のリンクを設定できるボタンの設置など実用的な機能も兼ね備えています。また、スライダーの最大設置数は5つとなっており、それぞれのスライダーに異なる表示設定ができる柔軟性の高さも大きな特長です。

当テーマではグローバルメニューで、通常のドロップダウンメニューに加え、３種類のメガメニューを選択することができます。

メガメニューAはカテゴリー一覧をサムネイル付きで表示するメガメニューとなっていて、メガメニューBはカテゴリー一覧とそれぞれのカテゴリーの新着記事を合わせて表示するメガメニュー、メガメニューCはサムネイル無しのカテゴリー一覧となっています。

グローバルメニューに設定した項目が上画像のように、テーマオプションと連動する仕組みになっていて、ドロップダウンメニューから簡単にメガメニューの設定が可能です。

Youtube動画のレスポンシブ表示

記事内のYoutube動画をレスポンシブ表示します。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
PCでは、メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされます。

関連記事のカードリンク表示

サイト内の関連記事へのリンクをサムネイル画像付きで表示できます。

ページが見つかりませんでした | WordPressテーマ「ICONIC (tcd062)」

ショッピングカート機能に対応したECサイト構築用ワードプレステーマ「アイコニック」デモサイト

カラムレイアウト

レイアウト2c

レイアウト3c

見出しスタイル

H3見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H5見出しa

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H5見出しb

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

囲み枠のスタイル

スタイル1･･･Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル2･･･Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル3･･･Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

カスタマイズ＊囲み枠のカラーバリエーション

※クラス指定を追加することで配色の変更が可能です。

スタイル1（red）･･･Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1（blue）Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1（green）Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

スタイル1（yellow）Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ボタンのスタイル

フラットボタン（デフォルトサイズ）
フラットボタン-L
フラットボタン-S

フラットボタン（red）
フラットボタン（blue）
フラットボタン（green）
フラットボタン（yellow）

角丸ボタン（デフォルトサイズ）
角丸ボタン-L
角丸ボタン-S

ラウンドボタン（デフォルトサイズ）
ラウンドボタン-L
ラウンドボタン-S

カスタマイズ＊ボタンの配置方法を指定する

※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。

フラットボタン-L（左揃え）

フラットボタン-L（中央揃え）

フラットボタン-L（右揃え）

テーブルのレスポンシブ表示

テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。

フォームのスタイル

プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。
[contact-form-7]

H1見出し

H2見出し

H3見出し

H4見出し

H5見出し

H6見出し

Blockquote Tests

Blockquote:

Here’s a one line quote.

This part isn’t quoted. Here’s a longer quote:

It’s like a language. You learn the alphabet, which are the scales. You learn sentences, which are the chords. And then you talk extemporaneously with the horn. It’s a wonderful thing to speak extemporaneously, which is something I’ve never gotten the hang of. But musically I love to talk just off the top of my head. And that’s what jazz music is all about.

Stan Getz

And some trailing text.

Table Layout Test

List Type Tests

Definition List

Definition List Title

This is a definition list division.

Definition

An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Gallery

A feature introduced with WordPress 2.5, that is specifically an exposition of images attached to a post. In that same vein, an upload is “attached to a post” when you upload it while editing a post.

Gravatar

A globally recognized avatar (a graphic image or picture that represents a user). A gravatar is associated with an email address, and is maintained by the Gravatar.com service. Using this service, a blog owner can configure their blog so that a user’s gravatar is displayed along with their comments.

Unordered List (Nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Ordered List

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

HTML Element Tag Tests

All other HTML tags listed in the FAQ:

Here is the address for Automattic, using the <address> tag:

This is an example of an <anchor> (otherwise known as a link). This abbr. is an example of an <abbr> tag in the middle of a sentence. Here is a TLA showing off the <acronym> tag. What, you want to see some over-sized text using the <big> tag? Can you cite a reference for that, using the <cite> tag? Have you noticed that all of the tag names are displayed in code-form, using the <code> tag? Similarly, I could emulate keyboard text, using the <kbd> text tag, or emulate teletype text using the <tt> tag.

Oh no! I wrote something incorrectly. I’d better delete it, using the <del> tag. I could alternately strike something out using the <strike> tag, or strike something out using the <s> tag. So many choices, which I emphasize using the <em> tag. Just to clarify, this is some inserted text, that I’ll highlight using the <ins> tag.

Need to display completely unformatted text, such as a large block of code? Use the <pre> tag, which lets you display:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

Want to quote the WordPress tagline Code is Poetry? Use the <q> tag to add quotes around it. This is strong text (otherwise known as bold), using the <strong> tag.

Need to write H₂O or E = MC²? You may find great use for _subscripting text using the <sub> tag, or for ^{superscripting} text using the <sup> tag. Need to call out a variable? Use the <var> tag.

Div and Span Tests

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. This is a span inside of a paragraph, using the <span> tag. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.li