Contents Designs showcase
ボックス内 見出しデザイン 一覧
ボックス内の見出しデザイン
- simple-heading (シンプル単色)
- デフォルト正円
- conic-heading (円錐 円グラフ)
- デフォルト正円
- heapup-heading (conic別バージョン)
- デフォルト角丸方形
- gradation-heading (グラデーション)
- デフォルト角丸方形
- mesh-heading (グラデーション メッシュ)
- デフォルト角丸方形
見出しデザインのパターン
- circle (円形)
- radius (角丸)
- square (正四角形)
- rectangle (長方形)
- half-circle-side (左右に半円)
- warp (歪み)
- warp＋square
- warp＋rectangle
ちなみに、すぐ上の見出しデザインは「ボックス外の」gradation-heading
stay_current_portraitなおスマートフォン縦画面では、下記↓の見出しデザインのボックスは縦１列の表示に
ノーマル フル サンプル
【H-1】見出しと段落
画像(1×1)とmoreボタンとアイコン
コーディングは (1)見出し (2)段落 (3)画像 (4)moreボタン (5)アイコン
角丸(radius)枠
【H-2】コーディングの順番と、画像にshadow効果はすべて同じ
外枠(outer-box)と内枠(inner-box)にradius
アイコンにカラー
見出しデザイン(ボックス内)の標準は「boxes-suspend」で囲む
h2見出し
simple-
heading
【H-3】見出し修飾(デコレーション)
simple-headingのデフォルト、正円型
h2見出し
conic-
heading
【H-4】見出し修飾(デコレーション)
conic-headingのデフォルト、正円型
新テーマを活かすには、コンテンツをsectionで囲み、見出しと段落のテキストセット、さらに画像を加えたコンテンツセットで
h2見出し
heapup-
heading
【H-5】本来は外枠内枠のボックス以外で使用するheapup-headingをここの外枠内枠ボックス内で使用、デフォルトは方形で角丸(radius)
このWP新テーマは、サムネイル活用とsectionテキストセットがベーシック
heapup-
heading
circle
【H-6】heapup-headingの外枠内枠ボックス内で使用、circle版
heapup-headingのclassにcircleを追記
heapup-headingは、conic-headingの円グラフ的グラデーションと同じ
shadowのinsetなどを変化させている
simple-
heading
radius
【H-7】sectionテキストセットでささやかなデザインとして見出しh2のデコレーション
simple-headingのclassにradiusを追加
radiusの値を変えて正円から正方形角丸に
simple-
heading
square
【H-8】simple-headingのclassにsquareを追加
radiusをゼロに
simple-heading
rectangle
【H-9】simple-headingのclassにrectangleを追加、長方形(rectangle)に
simple-heading
half-circle-side
【H-10】simple-headingのclassにhalf-circle-sideを追加
simple-heading
radius + rectangle
【H-11】simple-headingのclassにradiusとrectangleを追加
conic-
heading
radius
【H-12】conic-headingのclassにradiusを追加
またカラーyellowを追加
conic-
heading
square
【H-13】conic-headingのclassにsquareを追加
conic-heading
rectangle
【H-14】conic-headingのclassにrectangleを追加
conic-heading
half-circle-side
【H-15】conic-headingのclassにhalf-circle-sideを追加
conic-heading
radius +
rectangle
【H-16】conic-headingのclassにradiusとrectangleを追加
heapup-
heading
radius
【H-17】heapup-headingのclassにradiusを追加
デフォルトでも角丸、radiusを追加するとより丸みが強くなる
heapup-
heading
square
【H-18】heapup-headingのclassにsquareを追加
conic-headingと同じconic-gradientでパターンを変えている
heapupとは盛り上がり
heapup-heading
rectangle
【H-19】heapup-headingのclassにrectangleを追加
heapup-
heading
half-circle-
side
【H-20】heapup-headingのclassにhalf-circle-sideを追加
simple-
heading
warp
【H-21】simple-headingのclassにwarpを追加して歪みを
simple-
heading
warp
【H-22】simple-headingのclassにwarpとrectangleを追加して横長の歪みを
conic-
heading
warp
【H-23】conic-headingのclassにwarpを追加して歪みを
conic-
heading
warp
【H-24】conic-headingのclassにwarpとrectangleを追加して横長の歪みを
heapup-
heading
warp
【H-25】heapup-headingのclassにwarpを追加して歪みを
border-radiusを使いながら四隅を丸めず角張らせて方形を歪めているビジュアルに工夫
heapup-
heading
warp
【H-26】heapup-headingのclassにwarpとrectangleを追加して横長の歪みを
ボックスの外ではwarpのみで横長歪みに
gradation-
heading
default
【H-27】gradation-headingのデフォルト
２重箱の見出しデザインに越境採用
gradation-
heading
circle
【H-28】gradation-headingのclassにcircle
を追加して円形(circle)に
gradation-
heading
square
【H-29】gradation-headingのclassにsquare
を追加して正四角形(square)に
gradation-
heading
warp
【H-30】gradation-headingのclassにwarp
を追加して歪みを
gradation-
heading
half-circle
-side
【H-31】gradation-headingのclassにhalf-circle-side
を追加して左右半円に
mesh-heading
default
【H-32】mesh-headingのデフォルト
２重箱の見出しデザインに越境採用
ボックス内なのでテキストに傾き
mesh-heading
circle
【H-33】mesh-headingのclassにcircle
を追加して円形(circle)に
mesh-heading
square
【H-34】mesh-headingのclassにsquare
を追加して正四角形(square)に
mesh-heading
warp
【H-35】mesh-headingのclassにwarp
を追加して歪みを
mesh-heading
warp +
square
【H-36】mesh-headingのclassにwarpとsquare
を追加して正方形に歪みを
mesh-heading
rectangle
【H-37】mesh-headingのclassにrectangle
を追加して長方形に
mesh-heading
half-circle
-side
【H-38】mesh-headingのclassにhalf-circle-side
を追加して左右半円に
mesh-heading
radius
【H-39】mesh-headingのclassにradius
デフォルトでも角丸、radiusを追加するとより丸みが強くなる
ボックスデザイン 一覧
ボックスデザインは、outerとinnerの２重箱をあえて作って、内箱にいろいろデザイン的な細工をほどこしている
ボックスデザイン 内枠(inner)
- ジグザグ (zigzag)
- 上下左右、上下、左右、上、下
- サーフ波 (surf)
- 上下左右、上下、左右、上、下
- ウェーブ波 (wave)
- 上下左右、上下、左右、上、下
- ドリップしずく (drip)
- 上下、左右、上、下
外枠内枠 アーク(円弧 arc)
- 上
- 下
- 上下
- アーク上と組み合わせ
- ジグザグ下、サーフ波下、
ウェーブ波下、ドリップしずく下
- ジグザグ下、サーフ波下、
- アーク下と組み合わせ
- ジグザグ上、サーフ波上、
ウェーブ波上、ドリップしずく上
- ジグザグ上、サーフ波上、
stay_current_portraitスマートフォン縦画面では、ボックスデザインの箱は縦１列の表示に
内枠の上下左右に
ジグザグ
【B-1】classのboxes-suspendにzigzag-xyを追加
内枠の左右にジグザグ
【B-2】classのboxes-suspendにzigzag-xを追加
ボックスデザインの標準は「boxes-suspend」で囲む
内枠の上下にジグザグ
【B-3】classのboxes-suspendにzigzag-yを追加
内枠の上にジグザグ
【B-4】classのboxes-suspendにzigzag-topを追加
「◯-x」は横(x軸)
「◯-y」は縦(y軸)
「◯-xy」は横縦(xy軸)
内枠の下にジグザグ
【B-5】classのboxes-suspendにzigzag-bottomを追加
「◯-top」は内枠(inner)の上の辺
「◯-bottom」は内枠(inner)の下の辺
内枠の上下左右に
サーフ波
【B-6】classのboxes-suspendにsurf-xyを追加
内枠の左右にサーフ波
【B-7】classのboxes-suspendにsurf-xを追加
内枠の上下にサーフ波
【B-8】classのboxes-suspendにsurf-yを追加
内枠の上にサーフ波
【B-9】classのboxes-suspendにsurf-topを追加
内枠の下にサーフ波
【B-10】classのboxes-suspendにsurf-bottomを追加
内枠の上下左右に
ウェーブ波
【B-11】classのboxes-suspendにwave-xyを追加
内枠の左右に
ウェーブ波
【B-12】classのboxes-suspendにwave-xを追加
内枠の上下に
ウェーブ波
【B-13】classのboxes-suspendにwave-xyを追加
内枠の上にウェーブ波
【B-14】classのboxes-suspendにwave-topを追加
内枠の下にウェーブ波
【B-15】classのboxes-suspendにwave-bottomを追加
内枠の左右に
ドリップしずく
【B-16】classのboxes-suspendにdrip-xを追加
内枠の上下に
ドリップしずく
【B-17】classのboxes-suspendにdrip-yを追加
内枠の上に
ドリップしずく
【B-18】classのboxes-suspendにdrip-topを追加
内枠の下に
ドリップしずく
【B-19】classのboxes-suspendにdrip-bottomを追加
外枠内枠の上が
アーク(円弧)
【B-20】classのboxes-suspendにarc-topを追加
外枠内枠の下が
アーク(円弧)
【B-21】classのboxes-suspendにarc-bottomを追加
外枠内枠の上下が
アーク(円弧)
【B-22】classのboxes-suspendにarc-top-bottomを追加
外枠内枠の上が
アーク(円弧)
下にジグザグ
【B-23】classのboxes-suspendにarc-topとzigzag-bottomを追加
外枠内枠の下が
アーク(円弧)
上に大きなしずく
【B-24】classのboxes-suspendにarc-bottomとdrip-topを追加
ボックスデザインその２ 一覧
ボックスデザイン２は、outerとinnerの２重箱にさらにラップdiv(boxes-extend)を加えて、text-box(中のh3)をinnerの外上に、icon-boxをouterの外下に移動コーディングして、ボックスの上や下に表示している
なお、このスタイル紹介コーナーは、モバイルで横スクロール、デスクトップでスクロールなしで折り返し表示にしている
スタンダード標準
スタイル
Yahooニュース型
スタイル
ZOZOTOWN型
スタイル
メルカリ型
スタイル
Instagram型
スタイル
レガシー theブログ
スタイル
スタンダード標準
スタイル
Yahooニュース型
スタイル
ZOZOTOWN型
スタイル
メルカリ型
スタイル
Instagram型
スタイル
レガシー theブログ
スタイル
ボックスデザインその３ 一覧
ボックスデザイン３は、outerとinnerの２重箱にさらにラップdiv(boxes-suspend)を加えて、text-box(中のh3)をouterの外上に、icon-boxをouterの外下に移動コーディングして、ボックスの上や下に表示している
このサイトレイアウト紹介コーナーは、モバイルで横スクロール、デスクトップでスクロールなしで折り返し表示にしている
１カラム
サイドバーなし
２カラム
左サイドバー
２カラム
右サイドバー
２カラム
左”上下”サイドバー
２カラム
右”上下”サイドバー
３カラム
左右サイドバー
３カラム
右２サイドバー
３カラム
左２つサイドバー
３カラム
左シェアバー
３カラム
右シェアバー
３カラム 右ナビ２
左シェアバー
３カラム 左ナビ２
右シェアバー
ボックスデザイン ２・３general版 一覧
上記のボックスデザイン ２・３は、５種のスタイルや１２通りのレイアウトを紹介するための暫定ボックスデザイン
モバイルで横スクロールの余計な仕掛け
これをコンテンツ箇所で使えるように、汎用(general)版を作成
このボックスデザインセットの上流のsectionやdivのclassにgeneralを加える
見出しと段落と画像とmoreボタンのフルセット、アイコン表示も可
web_assetweb_assetボックスデザイン２ (general：boxes-extend)
上流にgeneralのclassを付けて、h3の見出しをheading-boxで囲み、ボックスの上か下に配置
icon-boxの中のアイコンをボックスの上の、左・中・右に乗せる
スタンダード標準スタイル
【B2-1】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
Yahooニュース型スタイル
【B2-2】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
ZOZOTOWN型スタイル
【B2-3】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
メルカリ型スタイル
【B2-4】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
Instagram型スタイル
【B2-5】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
レガシー theブログスタイル
【B2-6】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
splitscreen_bottomview_carouselsplitscreen_topボックスデザイン３ (general ：boxes-suspend)
上流にgeneralのclassを付けて、h3の見出しをheading-boxで囲み、ボックスからほぼ分離して上か下に配置
icon-boxの中のアイコンをボックスの上か下、見出しの左・右に置く
１カラムサイドバーなし
【B3-1】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
２カラム左サイドバー
【B3-2】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
２カラム右サイドバー
【B3-3】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
２カラム左”上下”サイドバー
【B3-4】ボックスデザイン ２・３の汎用(general)版
見出しと段落と画像とmoreボタンのセット
３カラム右２サイドバー
【flex-pack-normal】
WordPressテーマ 新発売
新開発のgridレイアウトで、カラム数は１カラム、２カラム、３カラム
さらにgridレイアウトで、２つのサイドバーを上下”縦”並びも、左右”横”並びも簡単に
ここのボックスデザインパックは、ボックスデザイン３(general：boxes-suspend)とテキストブロックの横並び
３カラム右２サイドバー
３カラム左シェアバー
【flex-pack-reverse】
WordPressテーマ 新発売
新開発のgridレイアウトで、カラム数は１カラム、２カラム、３カラム
そしてシェアバーを独立させてサイドバーのように配置してposition:stickyを設定
ここのボックスデザインパックは、ボックスデザイン２(general：boxes-extend)
stay_current_portraitスマートフォン縦画面では上記と同じように、見出し・段落・moreボタンの下にボックスデザイン２・３と縦並びに
３カラム左シェアバー
アイコンデザイン 一覧
アイコンデザインは、ボックスの中や外で角丸枠(app-icon)や円形枠(circle-icon)で表示するもの、ボックスの中でouterに少し重ねて、単体でも複数でも、中央揃え、左寄せ、右寄せや均等配置などでデザインを強化
アイコンのカラー設定は、外枠のimage-box、app-icon、circle-iconなどのclassに併記、またはアイコンのspan classに併記
カラーは、未設定のときはblackに
red 、green、blue、yellow、magenta、cyan、limegreen、gold、gray、black、whitesmoke、violet
accentは、カラーセットの中のアクセントカラー(カラーセットでいわば反対色)適用
stay_current_portraitなおスマートフォン縦画面では、アイコンデザインのボックスは縦１列の表示に
Material Icon
app-icon
【I-1】アイコンはMaterial Symbols
ボックスデザインセットの中のimage-boxのclassにapp-iconを併記
Material Icon
circle-icon
【I-2】アイコンはMaterial Symbols
ボックスデザインセットの中のimage-boxのclassにcircle-iconを併記
アイコンのトリプル使い
【I-3】ボックスの中入れと上乗せアイコンとmoreボタンと
image-boxの中に複数アイコン icon-boxの中とmoreボタンに１つのアイコン
ボックスの上乗せ
アイコン左寄せ
moreボタンもアイコン
【I-4】ボックスの上乗せはicon-boxにアイコン
左寄せはleftアイコンカラーはblue
ボックスの上乗せ
アイコン中央
moreボタンもアイコン
【I-5】ボックスの上乗せはicon-boxにアイコン
中央は未設定またはcenterアイコンカラーはblue
ボックスの上乗せ
アイコン右寄せ
moreボタンもアイコン
【I-6】ボックスの上乗せはicon-boxにアイコン
右寄せはrightアイコンカラーはred
ボックスの上乗せ
複数アイコン
【I-7】ボックス上乗せアイコンは、icon-boxのclassにmultiとaroundを追記
flexbox設定済みなのでjustify-content:space-around;が有効に
左右のアイコンと外枠との隙間が他の２つと微妙に異なる
ボックスの上乗せ
複数アイコン
【I-8】ボックス上乗せアイコンは、icon-boxのclassにmultiとevenlyを追記
flexbox設定済みなのでjustify-content:space-evenly;が有効に
左右のアイコンと外枠との隙間が他の２つと微妙に異なる
ボックスの上乗せ
複数アイコン
【I-9】ボックス上乗せアイコンは、icon-boxのclassにmultiとbetweenを追記
flexbox設定済みなのでjustify-content:space-between;が有効に
左右のアイコンと外枠との隙間が他の２つと微妙に異なる
アイコン上乗せ
中央揃え
arc-top組み合わせ
【I-10】ボックス上乗せアイコンは、icon-boxのclassにmultiとcenter(または無し)を追記
複数アイコンが中央に並ぶ
アイコン上乗せ
左寄せ
arc-top組み合わせ
【I-11】ボックス上乗せアイコンは、icon-boxのclassにmultiとleftを追記
複数アイコンが左寄せで並ぶ
アイコン上乗せ
右寄せ
arc-top組み合わせ
【I-12】ボックス上乗せアイコンは、icon-boxのclassにmultiとrightを追記
複数アイコンが右寄せで並ぶ
add_reactionedit_squareボックスデザイン内のアイコン使用例
【I-1】は、「boxes-suspend」のボックスデザインセットの中の、「image-box」のclassに「app-icon」を併記
【I-2】は、「boxes-suspend」のボックスデザインセットの中の、「image-box」のclassに「circle-icon」を併記
data_checkボックス上乗せ 画像の代替 moreボタン
【I-3】は３パターン、「boxes-suspend」のボックスデザインセットの中の上から、
(1)ボックスの上乗せアイコンは「icon-box」の中に span Material Iconを
(2)「image-box」の中に span Material Iconを
(3)「more-button」の classに「double-arrow」を併記して、span Material Icon「keyboard_double_arrow_right」を。ちなみに【I-4】では classに「arrow」を併記して span Material Icon「arrow_forward_ios」、【I-5】では classに「reply」を併記して span Material Icon「reply」、【I-6】では classに「shortcut」を併記して span Material Icon「shortcut」を
なお、この「shortcut」は となるのでCSSで「transform: scaleY(-1)」を設定して上下逆さまに
data_check上乗せで 左・中・右 複数をまとめて左・中・右 間隔開けて整列
【I-4】以降は、「boxes-suspend」のボックスデザインセットの中の、「icon-box」の classに【I-4】「left」を、【I-5】「center」を、【I-6】「right」を併記
【I-7】以降は「icon-box」の classに「multi」を併記して複数アイコン対応、「left」「center」「right」でまとめて左・中・右に、およびflexboxなので「around」「evenly」「between」などで間隔を空けてIconを整列させる
アイコンをスマートフォンのアプリ(app)表示に
アイコンのspanをdiv class icon-rimで囲み、icon-rimのclassにカラー設定してspanの枠とアイコンに色付け、アイコンのspan classにカラー設定した場合はそのカラーでアイコンに色付け
なお「icon-rim」は、ここでの紹介用にgridで横並び折り返しのための暫定div(gridアイテム化)なので、classは何でもいい
じつは、上流で「app-icon」のclassを付けているが、これが必須
カラーは、icon-rimなどの外divは未設定ではspan枠にボックス外枠(outer)のカラーでグラデーション色付け、アイコンは未設定のときicon-rimなどの外divで設定したカラーを適用、icon-rimで未設定のときはblackに
icon-rim・アイコンそれぞれ、red 、green、blue、yellow、magenta、cyan、limegreen、gold、gray、black、whitesmoke、violet
accentは、カラーセットの中のアクセントカラー(カラーセットでいわば反対色)適用
data_checkspan Material Iconのカラー設定はアイコンの色付け
枠のグラデーションカラーはその外のdivなどにカラー設定
念押しで繰り返し、Material Icon span classに追記したカラー名で、そのアイコンのみに色付け
このspan枠にグラデーション色付けするには上流のdivなどのclassにカラー名を記述する
gradation-heading
heapup-heading
ボックスの外で使う見出しデザインのスタンダードは、gradation-headingとheapup-heading
左はgradation-headingのg4、右はheapup-headingのg4とhorizontal
desktop_windowsfit_screenデスクトップ内レスポンシブ dtrwd
h2をdiv(gradation-heading/heapup-heading)で囲み、さらにclassにchange-size-dtrwdを適宜追記
change-size-dtrwdはデバイス別ではなく、デスクトップ内だけでレスポンシブ適用させる工夫(dtrwdは、デスクトップ レスポンシブWebデザインの意味)
新テーマではビジュアルSEO？として、見出しデザインに工夫を凝らしている
flexboxをふくむボックス内ではレスポンシブのCSS手当ては完了済み
ボックス外でデザインされた見出しを使う場合は、CSSを事前に設定するにも、親要素がcontentsやsectionなどで、ボックス内の見出しデザインにまで影響をおよぼすので却下
そこで、デスクトップのブラウザーの横幅がユーザーやディスプレイによって様々
かつ1カラム、2カラム、3カラムなどでコンテンツ箇所の幅も変動
それを反映した幅サイズをデスクトップのブラウザーを対象にレスポンシブに変更
つまり、ボックス外のデザインされた見出し、gradation-heading、heapup-heading、mesh-headingを使う場合は、change-size-dtrwdをクラスに追記して不細工を回避
gradation-headingについて
上記のgradation-headingはclassにhalf-circle-sideを追記して左右が円弧(半円)に
format_h2gradientgradation-headingのデザイン
肝心のgradation-headingのデザインは、CSSのlinear-gradient、４カラーのグラデーション
カラーは、未設定とaccentのときはaccentカラーが前後に
そのほか red、green、blue、yellow、magenta、cyan、gray、violet、gold、black を追記してそれぞれのカラーが前後に
また、g4またはcolorfulでGoogleロゴのレッド・グリーン・ブルー・イエローのグラデーションに
classにmirrorを追記すると、右下から左上へのグラデーションが左下から右上に変わり、また配色の順番も逆転
ちなみに、サイト全体をコントロールするカラーセットを、色変更したいタグの上流に指定すると、そこだけ指定のカラーセットに越境可能
data_check下記は「mustard」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 mirror
red mirror
green mirror
blue mirror
yellow mirror
magenta mirror
cyan mirror
gray mirror
violet mirror
data_check下記のカラーセットは「purple-loyal」およびclassに「rectangle」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 mirror
red mirror
green mirror
blue mirror
yellow mirror
magenta mirror
cyan mirror
gray mirror
violet mirror
data_check下記のカラーセットは「space」およびclassに「half-circle-side」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 mirror
red mirror
green mirror
blue mirror
yellow mirror
magenta mirror
cyan mirror
gray mirror
violet mirror
heapup-headingについて
上記のheapup-headingはclassにhalf-circle-sideを追記して左右が円弧(半円)に
かつclassにhorizontalを追記すればデフォルトで傾いている文字列を水平に
ちなみにclassにgoldのカラー指定では金の延べ棒のような！
brightness_3brightness_2heapup-headingのデザイン
肝心のheapup-headingのデザインは、CSSのradial-gradientとconic-gradientおよび box-shadow inset(盛り上げ用)の組み合わせで、４カラーの円グラフ(扇形)グラデーション
カラーは、未設定とaccentのときはaccentカラーが前後に
そのほか red、green、blue、yellow、limegreen、magenta、cyan、gray、gold、violet、black を追記してそれぞれのカラーが前後に
また、g4またはcolorfulでGoogleロゴのレッド・グリーン・ブルー・イエローのグラデーションに
classにshiftを追記すると、円グラフグラデーションが真ん中が中心から移動して
ちなみに、サイト全体をコントロールするカラーセットを、色変更したいタグの上流に指定すると、そこだけ指定のカラーセットに越境可能
data_check下記は「orange-tulips」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 shift
red shift
green shift
blue shift
yellow shift
magenta shift
cyan shift
gray shift
violet shift
data_check下記のカラーセットは「autumn-leaves」およびclassに「warp」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 shift
red shift
green shift
blue shift
yellow shift
magenta shift
cyan shift
gray shift
violet shift
data_check下記のカラーセットは「fruit」およびclassに「half-circle-side」
未設定
red
green
blue
yellow
magenta
cyan
gray
violet
未設定 shift
red shift
green shift
blue shift
yellow shift
magenta shift
cyan shift
gray shift
violet shift
mesh-headingについて
見出しデザインの追記
上記のmesh-headingはclassにhalf-circle-sideを追記して左右が円弧(半円)に
languagegrid_on
mesh-headingのデザイン
肝心のmesh-headingのデザインは、CSSのradial-gradientのグラデーション メッシュ
見出しh2のフォントカラーは蝋色(ろいろ：#2B2B2B)
メッシュ カラーは基本的に４色、g4のときはGoogleロゴのレッド・グリーン・ブルー・イエローのグラデーションに
そのほか 未設定、blue、yellow、orange、white、illusion、gaudy を追記していろいろなパターンのメッシュ グラデーションに
data_check下記はデフォルト
未設定
blue
yellow
orange
white
illusion
g4
gaudy
data_check下記はclassに「rectangle」
未設定
blue
yellow
orange
white
illusion
g4
gaudy
data_check下記はclassに「half-circle-side」
未設定
blue
yellow
orange
white
illusion
g4
gaudy
camouflage-headingについて
見出しデザインの追記
camouflage-headingのデザインは、迷彩模様の色違い背景画像をCSSで読み込み
背景画像は、未設定(およびgrayscale)、red、green、blue、brown、violet
未設定
red
green
blue
brown
violet
内部リンク紹介カードインターナル リンク カード
内部リンク紹介カード(インターナル リンク カード)は、文字どおりサイト内のページの紹介リンクをカード型に
もちろん、内部リンクだけでなく、外部リンクの紹介にも利用可能
gallery_thumbnailauto_awesome_mosaic定番の見出しと段落と画像とmoreボタンのセット
横型は、画像左で見出し・段落・moreボタン。縦型は、画像上で見出し・段落・moreボタン。および画像上で段落・見出し・moreボタン
なお、横型は単体１つでも使用可
stay_current_portraitスマートフォン縦画面では、画像・見出し・段落・moreボタンの縦並びに
縦型は単体１つではページ内におさまらないので、flexboxで横並びにする
CSS 最終確認用 コンテンツ
このページはいろいろなデザイン、デコレーションの確認のための膨大なコンテンツ群を配置
最後に見出しやボックス以外のコンテンツでCSSの最終確認を
ここは外部リンクの見本 段落(p)タグ内 CSSで Material Icon を呼び出し
↑「target=”_blank」にCSSで紐付け、アイコンが自動的に右に出現
外部リンクの見本 段落(p)タグ内 さらにpにclassのsvg
外部リンクの見本 段落(p)タグ内 さらにpにclassのgmi
ここは引用の見本
かならず段落(p)タグで囲む
classは不要
vignettecounter_0ボタン moreボタン formのsubmit 一覧
ボタン・moreボタンなどの形状
- デフォルトは角丸
- 反転 (turnover)
- 左右半円 (half-circle-side)
- 方形 (square)
ボタンなどのclassまたは上流に追記
- turnover(反転)
- デフォルト、左右半円、方形に適用可
- half-circle-side(左右半円)
- square (方形)
playlist_add_checkボタン (classにbutton)
playlist_add_checkmoreボタン (classにmore-button)
playlist_add_checkformのsubmit (input type=”submit”)
playlist_add_checkformのreset (input type=”reset”)
input type=”reset”は、turnoverオンリー
imagetransform変形の画像デザイン
そのままの画像 1:1
1:1のアスペクト比で、所定の枠に収まる
そのままの画像 4:3
4:3のアスペクト比で、所定の枠に収まる
そのままの画像 16:9
16:9のアスペクト比で、所定の枠に収まる
circle(正円) 1:1画像
元画像が1:1のアスペクト比であれば、正円の呪文「border-radius:999.9rem;」をとなえるだけ
なおiPhoneでは縮小表示されてしまう…
circle(正円) 4:3画像
元画像が4:3のアスペクト比であれば、正円の呪文(border-radius:999.9rem;)ではhalf-circle-side、左右半円になるだけ
しかも画像はレスポンシブなので、サイズ決め打ちもできない
さぁ どうする？
circle(正円) 16:9画像
元画像が16:9のアスペクト比も、画像を歪めず中央部分を残して周りをトリミングするのは難儀の極み
解決策は「aspect-ratio: 1 / 1;」と「object-fit:cover;」および「width:100%;」
warpで歪む画像
warpは上下左右の辺を歪めるので、アスペクト比に沿って画像を切り抜く
warpで歪む画像
4:3のアスペクト比に近く横長で切り抜かれる
warpで歪む画像
16:93のアスペクト比なので、さらに横長に
SEOテンプレート×WordPressテーマサプライズ！
販売サイトは、クレジットカード購入がメインの対応です(Amazon、Microsoftなども採用しているStripeを採用)
銀行振込も加わりました(安全性・信頼性のため Stripe の口座を利用しています)
オンラインからでもATMからでも振り込むとすぐに、マイページでダウンロードできるようになります
また「認証キー」は購入履歴でご確認できます
