ボディケア – 【a:r】アール |アールビューティーバランス

デザイン性豊かな固定ページをサクッと作成

店長 — Fri, 20 Jan 2017 00:05:01 +0000

当ページには、さまざまな固定ページサンプルをご用意しております。

各固定ページサンプルのデザインを見比べてみてください。

・CONCEPT
・CONCEPT2
・サンプルページ（コンテンツヘッダー+サイドなし）
・サンプルページ（ページヘッダー画像あり）

「CONCEPT」「CONCEPT2」はTCDオリジナルのページビルダーで作成しております。この機能によって、HTMLやCSSの知識がない方でも、記事内に2カラム、3カラムとコンテンツを組み立てていけるほか、記事中にスライダーを追加したり、タブ切り替えを入れてみたりと、ドラッグ&ドロップの直感的な操作でページ作成が可能となります。もちろんすべてレスポンシブ対応です。

また各固定ページには、カスタムフィールドがあり、「サイドコンテンツあり」「サイドコンテンツなし」のバージョンが選択可能となっています。

また「Header title」「Header Subtitle」「ヘッダー画像」の設定で「サンプルページ（コンテンツヘッダー+サイドなし）」のような美しいヘッダー画像が表示される仕様となっています。

究極的に実用性を重視した「フッターバー」が電話予約や記事の拡散効果を増大

店長 — Mon, 16 Jan 2017 23:54:24 +0000

パソコンよりもスマホでの閲覧の方が多くなりがちな昨今、スマートフォンにも一発でユーザーが電話予約やシェアが行える簡便なUX/UI設計が重要となってきています。

最近のTCDテーマでは、電話予約や記事のシェアにすぐにつなげれるようスマホ画面の最下部に常にフッターバー固定表示させることができます。これはサイト閲覧者にお店やサイトの情報を分かりやすく伝えるほか、アイコンの種類は6種類あり用途に応じて使い分けてさまざまな使い分けが可能となっています。

デザインはこのような感じです。一度実機で見るのがいいかもしれません。4つ推奨ですがいくつでも表示できます。

試しに、「電話アイコン」をタップすればすぐに電話番号が表示されます。

「シェア」をタップするとポップアップでツイッター、フェイスブック、はてぶ、LINEの4つのシェアボタンが表示されます。

アイコンは全部で6種類用意されており、いくつもアイコンを表示（4つ推奨）させることができます。

ロゴを自動的にRetinaディスプレイに対応する機能を追加しました

店長 — Mon, 16 Jan 2017 00:53:29 +0000

RetinaディスプレイとはApple独自の高精細ディスプレイの名称で、画面解像度が高いことが特徴です。

Macbookとかで見ると、サイトのロゴが不自然にぼやけていると感じたことはありませんか？実は、これらのディスプレイは画面解像度が2倍になったことにより、普通のディスプレイで等倍で表示していた画像が、縦横2倍に引き伸ばされた状態で表示されているということになります。

これが原因でロゴがぼやけているということです。これの対処法は、いたってシンプルで、2倍に引き伸ばされているのなら2倍サイズのロゴをアップロードします。

TCDテーマではテーマオプションに、Retinaディスプレイ用にロゴがセットできるようになっていますので、例えば推奨サイズ300px×120pxであるなら、その2倍の600px×240pxをアップロードし、ここにチェックを入れてください。

この部分に、2倍サイズのロゴ画像をアップロードすれば自動的にRetina用に変換できる仕様になっておりますので、ぜひご利用頂けたらと思います。

デザイン知識不要！いつもの記事をワンランクアップするクイックタグ機能の使い方

店長 — Fri, 13 Jan 2017 01:56:45 +0000

HTMLやCSSの知識不要で、記事作成時のスタイル指定を簡単に行えるクイックタグ機能をご用意しました。
たとえば、使用頻度の高い見出し、リンクボタン、囲み枠といったスタイルをボタン1つで呼び出すことができます。

「

」といった煩わしい記述を行う必要がなくなることで記事作成の効率化につながるほか、単調になりがちな記事ページに視覚的なリズムをプラスする効果も見込めます。

また、記事の装飾のほかにもYoutube動画のレスポンシブ表示、サイト内の関連記事をスマートに美しく表示できるカードリンクパーツといった記事ページのユーザビリティを補強するスタイルもご用意しています。
→クイックタグ一覧

読みやすく伝わりやすい記事作成にぜひお役立て下さい。

記事の装飾をより美しくするためのTCD独自機能「クイックタグ」一覧

店長 — Fri, 13 Jan 2017 01:52:35 +0000

テーマ付属の設定ファイルに入っているクイックタグの表示サンプル一覧です。
エディタ上に表示されるクイックタグボタンと同じ順にご紹介します。

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

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

カラムレイアウト

レイアウト2c

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.

レイアウト3c

見出しスタイル

H3見出しa

H3見出しb

H4見出しa

H4見出しb

H5見出しa

H5見出しb

囲み枠のスタイル

スタイル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（右揃え）

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

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

CSS	Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは…
レスポンシブデザイン	レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する…

フォームのスタイル

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

テーマオプションやウィジェット設定、コンテンツの注力で一流サイトが出来上がる

店長 — Fri, 13 Jan 2017 01:51:47 +0000

テーマオプションで一部の機能の設定を行っていただければ、あとはあなたがコンテンツに注力し、アイキャッチに統一感を出していただくだけで、まるでプロのデザインナーが作ったかのような一流のサイトに仕上げることができます。

特別なプラグインやカスタマイズも基本的に必要ありませんが、簡単なサポートであれば、弊社のカスタマーサポートで承っておりますので、もし使っていて、「ここの部分をもう少しこのようにしたい」などあればお気軽にカスタマーの方にお問い合わせください。

また弊社テーマのカスタマイズ専門サイト「TCD LABO」もございますので、そちらもよろしくお願いします。

投稿者名や関連記事など、幅広くテーマオプションから表示・非表示ができる

店長 — Fri, 13 Jan 2017 01:15:19 +0000

投稿者名やコメント、トラックバック、SNSボタンや関連記事など、非表示にしたい項目があれば、テーマオプションからチェックを外すだけで完了することができる便利機能を搭載しています。

幅広いサイト運営を行うのにこのカスタマイズ機能は必須とご好評いただいている機能です。

投稿ページごとの「meta title」「meta description」設定

店長 — Fri, 13 Jan 2017 00:35:52 +0000

SEO強化機能の一つとして、詳細記事ページと固定ページごとに、「meta title」「meta description」が設定できる機能を追加しました。

例えば下図のように、投稿記事の編集ページで「meta title」「meta description」を設定できます。これでさらに自由度の高い検索エンジン対策が可能です。

海外版WordPressにも対応

店長 — Mon, 24 Oct 2016 00:51:29 +0000

日本語だけでなく、グローバルに展開できるよう英語にも対応しています。

英語版のWordPressをインストールすることで、テーマオプションやサイト上の設定が英語で表示されるようになっています。

※サイトのコンテンツが勝手に翻訳されるわけではありませんのでご注意。
その場合、翻訳系のプラグインをご利用ください。
→【Plugin】Google翻訳の自動翻訳を利用できる「Google Language Translator」

スマホ専用のウィジェット配置が可能

店長 — Mon, 24 Oct 2016 00:40:25 +0000

スマートフォン表示ではPC表示と異なるウィジェットが必要な場合があるかと思います。

そのような場合に備え、当テーマではスマートフォンとPCで別々のウィジェットを設置していただくことができるようになります。

特別なプラグインをご用意していただく必要がなく、レスポンシブのデザインも気軽に構築していただけるのが当テーマの魅力の一つとなっております。

ボディケア – 【a:r】アール |アール ビューティーバランス