サイトをリニューアルしました

これまでトップページは固定ページとしていましたが、見た目のイメージを手軽に変更したい気持ちになり、スキンとCocoonの機能を使用することにしました。スキンは「COLORS」ブラックを適用し、アピールエリア、おすすめカード、カルーセルを配置してみました。

また、地図やグラフなどが手軽にサイト上に配置できるようにしてみました。

以下はスキン適用時の見た目と、今回の目玉である特殊パーツ(地図、グラフ)をご紹介します。

見出し2

これは見出し2です。

見出し3

これは見出し3です。

見出し4

これは見出し4です。

見出し5

これは見出し5です。

見出し6

これは見出し6です。

ブロックについて

Cocoon汎用ブロックです。これは今まで通りですね。

Cocoon汎用ブロック

Cocoonブロック

引用です。

あいうえおabcABC1234567890

https://iinjyane.comより

アンダーマーカー。あいうえおabcABC1234567890

マーカー。あいうえおabcABC1234567890

バッジです。各種カラーあります。。あいうえおabcABC1234567890

普通のテーブル

初期費用	月額費用	容量
無料	440円～	最大1TB

特殊ブロックについて

wordpress/Cocoon以外で用意している特殊ブロックについて説明します。

PlantUML図

UML図を記事に記載することができます。

図のパス(＝図が格納されている場所)をインラインHTMLに記載しています。

図の編集はいつでも外部から編集が可能で、変更を即記事に反映することができます。

leaflet.jsによるマップデータ

地図データを記事内に記載することができます。

地図データはGPXを元にしたCSVデータを取り込んで表示しています。(※地図を表示するための詳細な仕様は別途記事にしたいと思います。)

Chart.jsによるグラフデータ

さまざまなグラフ(チャートグラフ、、棒グラフ、円グラフ）を記事に記載することができます。　(※D3(Data Driven Document)、Venn図は今後追加予定)

グラフはクライアント側でコンテンツを読み込んだ際に表示されます。JavaScriptという言語で記載され、その内容はインラインHTMLで記載しています。一部の共通的なJavaScriptはサーバ内に事前に格納しておく必要があります。

グラフの編集はJavaScriptの編集して行います。データはCSVデータを取り込んで表示しています。(※グラフを表示するための詳細な仕様は別途記事にしたいと思います。)

※データの数値はダミーです。

line

line

bar

bar stacked

bar

bar 対数グラフ

bar horizon

bar horizon stacked

bar doughnut total

bar doughnut percent

bar doughnut normal

bar pie

bar radar

line

bar+line

bar+line csv direct

styleboxパーツ

CSSを用いたさまざまなパーツのサンプル集です。その内容はインラインHTMLで記載しています。

stylebox-heading-Tcolumn

stylebox-heading-white

stylebox-record-article-green

stylebox-record-article-blue

stylebox-record-article-lightgray

stylebox-record-article-gray

stylebox-point-orange

stylebox-merit / stylebox-demerit

stylebox-kakaku-table

stylebox-emphasis-table 1

	プランA	プランB	プランC	プランD
費用	0 円	2,000 円	3,000 円	10,000 円
有効期限	無期限	無期限	1年間	3年間

stylebox-emphasis-table 2 (non emphasis)

	プランA	プランB	プランC	プランD
費用	0 円	2,000 円	3,000 円	10,000 円
有効期限	無期限	無期限	1年間	3年間

stylebox-item-box

スマートフォンA （腕時計型）
価格 8,000円 ※2023年11月の価格
スマートフォンと連動して、音楽、睡眠測定が可能 XX機能付きモデル『2023年』新登場 豪華特典付き！
詳細を見る

stylebox-item-box 2

スマートフォンA （腕時計型）	スマートフォンB （腕時計型）
価格 8,000円 ※2023年11月の価格	価格 9,000円 ※2023年11月の価格
スマートフォンと連動して、音楽、睡眠測定が可能 XX機能付きモデル『2023年』新登場 豪華特典付き！	スマートフォンと連動して、音楽、睡眠測定が可能 XX機能付きモデル『2023年』新登場 豪華特典付き！
詳細を見る	詳細を見る

stylebox-item-box-horizon

	価格 8,000円 ※2023年11月 スマートフォンと連動して、音楽、睡眠測定が可能 XX機能付きモデル『2023年』新登場 豪華特典付き！ 詳細を見る
	価格 9,000円 ※2023年11月 スマートフォンと連動して、音楽、睡眠測定が可能 XX機能付きモデル『2023年』新登場 豪華特典付き！ 詳細を見る

stylebox-spec-box 4

順位	総合1位	総合2位	総合3位	総合4位
商品名	AAA EAH-AZ80	アイテム2 WF-1000XM5	CCC TOUR-PRO-2	DDD QuietComfort
マルチポイント	◯	◯	✕	△
性能1	1	2.5	3.5	5.0
性能2	2.5	3.5	4.5	5.0
性能3	2	3	4	5.0
価格（税込）	36,630円	38,000円	30,000円	39,600円

stylebox-spec-box 1

順位	総合1位
商品名	AAA EAH-AZ80
マルチポイント	◯
性能1	1.0
性能2	2.0
性能3	3.0
性能4	4.0
性能5	5.0
価格（税込）	36,630円

フォトギャラリー