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なおスマートフォン縦画面では、下記↓の見出しデザインのボックスは縦1列の表示に

 

ノーマル フル サンプル

【H-1】見出しと段落
画像(1×1)とmoreボタンとアイコン

コーディングは (1)見出し (2)段落 (3)画像 (4)moreボタン (5)アイコン

1x1画像
push_pin

角丸(radius)枠

【H-2】コーディングの順番と、画像にshadow効果はすべて同じ

外枠(outer-box)と内枠(inner-box)にradius
アイコンにカラー

見出しデザイン(ボックス内)の標準は「boxes-suspend」で囲む

4x3画像
push_pin

h2見出し
simple-
heading

【H-3】見出し修飾(デコレーション)
simple-headingのデフォルト、正円型

16x9画像
push_pin

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にradiusrectangleを追加

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にradiusrectangleを追加

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にwarprectangleを追加して横長の歪みを

conic-
heading
warp

【H-23】conic-headingのclassにwarpを追加して歪みを

conic-
heading
warp

【H-24】conic-headingのclassにwarprectangleを追加して横長の歪みを

heapup-
heading
warp

【H-25】heapup-headingのclassにwarpを追加して歪みを
border-radiusを使いながら四隅を丸めず角張らせて方形を歪めているビジュアルに工夫

heapup-
heading
warp

【H-26】heapup-headingのclassにwarprectangleを追加して横長の歪みを
ボックスの外ではwarpのみで横長歪みに

gradation-
heading
default

【H-27】gradation-headingのデフォルト
2重箱の見出しデザインに越境採用

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のデフォルト
2重箱の見出しデザインに越境採用
ボックス内なのでテキストに傾き

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にwarpsquare
を追加して正方形に歪みを

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の2重箱をあえて作って、内箱にいろいろデザイン的な細工をほどこしている

ボックスデザイン 内枠(inner)

  • ジグザグ (zigzag)
    • 上下左右、上下、左右、上、下
  • サーフ波 (surf)
    • 上下左右、上下、左右、上、下
  • ウェーブ波 (wave)
    • 上下左右、上下、左右、上、下
  • ドリップしずく (drip)
    • 上下、左右、上、下

外枠内枠 アーク(円弧 arc)

  • 上下
  • アーク上と組み合わせ
    • ジグザグ下、サーフ波下、
      ウェーブ波下、ドリップしずく下
  • アーク下と組み合わせ
    • ジグザグ上、サーフ波上、
      ウェーブ波上、ドリップしずく上

stay_current_portraitスマートフォン縦画面では、ボックスデザインの箱は縦1列の表示に

 

内枠の上下左右に
ジグザグ

【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を追加

ボックスデザインその2 一覧

ボックスデザイン2は、outerとinnerの2重箱にさらにラップdiv(boxes-extend)を加えて、text-box(中のh3)をinnerの外上に、icon-boxをouterの外下に移動コーディングして、ボックスの上や下に表示している

なお、このスタイル紹介コーナーは、モバイルで横スクロール、デスクトップでスクロールなしで折り返し表示にしている

スタンダード標準
スタイル

スタンダード標準スタイル

Yahooニュース型
スタイル

Yahooニュース型スタイル

ZOZOTOWN型
スタイル

ZOZOTOWN型スタイル

メルカリ型
スタイル

メルカリ型スタイル

Instagram型
スタイル

Instagram型スタイル

レガシー theブログ
スタイル

レガシー型スタイル

スタンダード標準
スタイル

スタンダード標準スタイル
counter_1

Yahooニュース型
スタイル

Yahooニュース型スタイル
counter_2

ZOZOTOWN型
スタイル

ZOZOTOWN型スタイル
counter_3psychology_altstar_border

メルカリ型
スタイル

メルカリ型スタイル
counter_4thumb_up

Instagram型
スタイル

Instagram型スタイル
counter_5

レガシー theブログ
スタイル

レガシー型スタイル
counter_6

 

ボックスデザインその3 一覧

ボックスデザイン3は、outerとinnerの2重箱にさらにラップdiv(boxes-suspend)を加えて、text-box(中のh3)をouterの外上に、icon-boxをouterの外下に移動コーディングして、ボックスの上や下に表示している

このサイトレイアウト紹介コーナーは、モバイルで横スクロール、デスクトップでスクロールなしで折り返し表示にしている

1カラム
サイドバーなし

1カラム サイドバーなし
looks_one

2カラム
左サイドバー

2カラム 左サイドバー
splitscreen_left

2カラム
右サイドバー

2カラム 右サイドバー
splitscreen_right

2カラム
左”上下”サイドバー

2カラム 左上下サイドバー
space_dashboard

2カラム
右”上下”サイドバー

2カラム 右上下サイドバー
space_dashboard

3カラム
左右サイドバー

3カラム 左右サイドバー
view_column

3カラム
右2サイドバー

3カラム 右2サイドバー
view_column

3カラム
左2つサイドバー

3カラム 左2つサイドバー
view_column

3カラム
左シェアバー

3カラム 左シェアバー
shareview_column

3カラム
右シェアバー

3カラム 右シェアバー
view_columnshare

3カラム 右ナビ2
左シェアバー

3カラム 右ナビ2 左シェアバー
shareview_column

3カラム 左ナビ2
右シェアバー

3カラム 左ナビ2 右シェアバー
view_columnshare

 

ボックスデザイン 2・3general版 一覧

上記のボックスデザイン 2・3は、5種のスタイルや12通りのレイアウトを紹介するための暫定ボックスデザイン
モバイルで横スクロールの余計な仕掛け

これをコンテンツ箇所で使えるように、汎用(general)版を作成
このボックスデザインセットの上流のsectionやdivのclassにgeneralを加える
見出しと段落と画像とmoreボタンのフルセット、アイコン表示も可

web_assetweb_assetボックスデザイン2 (general:boxes-extend)

上流にgeneralのclassを付けて、h3の見出しをheading-boxで囲み、ボックスの上か下に配置
icon-boxの中のアイコンをボックスの上の、左・中・右に乗せる

スタンダード標準スタイル

【B2-1】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

スタンダード標準スタイル
counter_1

Yahooニュース型スタイル

【B2-2】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

Yahooニュース型スタイル
counter_2

ZOZOTOWN型スタイル

【B2-3】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

ZOZOTOWN型スタイル
counter_3psychology_altstar_border

メルカリ型スタイル

【B2-4】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

メルカリ型スタイル
counter_4thumb_up

Instagram型スタイル

【B2-5】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

Instagram型スタイル
counter_5

レガシー theブログスタイル

【B2-6】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

レガシー型スタイル
counter_6

 

splitscreen_bottomview_carouselsplitscreen_topボックスデザイン3 (general :boxes-suspend)

上流にgeneralのclassを付けて、h3の見出しをheading-boxで囲み、ボックスからほぼ分離して上か下に配置
icon-boxの中のアイコンをボックスの上か下、見出しの左・右に置く

1カラムサイドバーなし

【B3-1】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

1カラム サイドバーなし
looks_one

2カラム左サイドバー

【B3-2】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

2カラム 左サイドバー
splitscreen_left

2カラム右サイドバー

【B3-3】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

2カラム 右サイドバー
splitscreen_right

2カラム左”上下”サイドバー

【B3-4】ボックスデザイン 2・3の汎用(general)版
見出しと段落と画像とmoreボタンのセット

2カラム 左上下サイドバー
space_dashboard

3カラム右2サイドバー

【flex-pack-normal】
WordPressテーマ 新発売
新開発のgridレイアウトで、カラム数は1カラム、2カラム、3カラム
さらにgridレイアウトで、2つのサイドバーを上下”縦”並びも、左右”横”並びも簡単に

ここのボックスデザインパックは、ボックスデザイン3(general:boxes-suspend)とテキストブロックの横並び

3カラム右2サイドバー

3カラム 右2サイドバー

3カラム左シェアバー

【flex-pack-reverse】
WordPressテーマ 新発売
新開発のgridレイアウトで、カラム数は1カラム、2カラム、3カラム
そしてシェアバーを独立させてサイドバーのように配置してposition:stickyを設定

ここのボックスデザインパックは、ボックスデザイン2(general:boxes-extend)
stay_current_portraitスマートフォン縦画面では上記と同じように、見出し・段落・moreボタンの下にボックスデザイン2・3と縦並びに

3カラム左シェアバー

3カラム 左シェアバー

アイコンデザイン 一覧

アイコンデザインは、ボックスの中や外で角丸枠(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なおスマートフォン縦画面では、アイコンデザインのボックスは縦1列の表示に

Material Icon
app-icon

【I-1】アイコンはMaterial Symbols
ボックスデザインセットの中のimage-boxのclassにapp-iconを併記

palette

Material Icon
circle-icon

【I-2】アイコンはMaterial Symbols
ボックスデザインセットの中のimage-boxのclassにcircle-iconを併記

palette

アイコンのトリプル使い

【I-3】ボックスの中入れと上乗せアイコンとmoreボタンと
image-boxの中に複数アイコン icon-boxの中とmoreボタンに1つのアイコン

htmlcode_blockscss
check_circle

ボックスの上乗せ
アイコン左寄せ
moreボタンもアイコン

【I-4】ボックスの上乗せはicon-boxにアイコン
左寄せはleftアイコンカラーはblue

check_box

ボックスの上乗せ
アイコン中央
moreボタンもアイコン

【I-5】ボックスの上乗せはicon-boxにアイコン
中央は未設定またはcenterアイコンカラーはblue

fact_check

ボックスの上乗せ
アイコン右寄せ
moreボタンもアイコン

【I-6】ボックスの上乗せはicon-boxにアイコン
右寄せはrightアイコンカラーはred

assignment_turned_in

ボックスの上乗せ
複数アイコン

【I-7】ボックス上乗せアイコンは、icon-boxのclassにmultiとaroundを追記
flexbox設定済みなのでjustify-content:space-around;が有効に
左右のアイコンと外枠との隙間が他の2つと微妙に異なる

shopping_cartstorelocal_shippingshopredeem

ボックスの上乗せ
複数アイコン

【I-8】ボックス上乗せアイコンは、icon-boxのclassにmultiとevenlyを追記
flexbox設定済みなのでjustify-content:space-evenly;が有効に
左右のアイコンと外枠との隙間が他の2つと微妙に異なる

new_releasesmilitary_techlocal_policefmd_badstars

ボックスの上乗せ
複数アイコン

【I-9】ボックス上乗せアイコンは、icon-boxのclassにmultiとbetweenを追記
flexbox設定済みなのでjustify-content:space-between;が有効に
左右のアイコンと外枠との隙間が他の2つと微妙に異なる

starstar_halfstar_outlinestar

アイコン上乗せ
中央揃え
arc-top組み合わせ

【I-10】ボックス上乗せアイコンは、icon-boxのclassにmultiとcenter(または無し)を追記
複数アイコンが中央に並ぶ

starstar_halfstar

アイコン上乗せ
左寄せ
arc-top組み合わせ

【I-11】ボックス上乗せアイコンは、icon-boxのclassにmultiとleftを追記
複数アイコンが左寄せで並ぶ

starstar_halfstarstar_half

アイコン上乗せ
右寄せ
arc-top組み合わせ

【I-12】ボックス上乗せアイコンは、icon-boxのclassにmultiとrightを追記
複数アイコンが右寄せで並ぶ

starstar_halfstarstar_halfstar

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】は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」は 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にカラー名を記述する

 

palette
desktop_mac
desktop_windows
laptop_mac
tablet_mac
phone_iphone
event
toggle_on
toggle_off
add_photo_alternate
account_tree
comment
store
credit_card
local_mall
local_grocery_store
add_shopping_cart
shop
local_shipping
thumb_up
integration_instructions
grid_view
settings
link
visibility
expand_circle_down
face_3
keyboard_double_arrow_right
check_box
report_problem
sms_failed
category
menu_book
keyboard
info
assignment_late
stadia_controller
headset_mic
screen_rotation
devices_wearables

 


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、4カラーのグラデーション

カラーは、未設定と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(盛り上げ用)の組み合わせで、4カラーの円グラフ(扇形)グラデーション

カラーは、未設定と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)
メッシュ カラーは基本的に4色、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ボタン
なお、横型は単体1つでも使用可
stay_current_portraitスマートフォン縦画面では、画像・見出し・段落・moreボタンの縦並びに
縦型は単体1つではページ内におさまらないので、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のアスペクト比で、所定の枠に収まる

1x1画像

そのままの画像 4:3

4:3のアスペクト比で、所定の枠に収まる

4x3画像

そのままの画像 16:9

16:9のアスペクト比で、所定の枠に収まる

16x9画像

circle(正円) 1:1画像

元画像が1:1のアスペクト比であれば、正円の呪文「border-radius:999.9rem;」をとなえるだけ
なおiPhoneでは縮小表示されてしまう…

1x1画像

circle(正円) 4:3画像

元画像が4:3のアスペクト比であれば、正円の呪文(border-radius:999.9rem;)ではhalf-circle-side、左右半円になるだけ
しかも画像はレスポンシブなので、サイズ決め打ちもできない
さぁ どうする?

4x3画像

circle(正円) 16:9画像

元画像が16:9のアスペクト比も、画像を歪めず中央部分を残して周りをトリミングするのは難儀の極み
解決策は「aspect-ratio: 1 / 1;」と「object-fit:cover;」および「width:100%;」

16x9画像

warpで歪む画像

warpは上下左右の辺を歪めるので、アスペクト比に沿って画像を切り抜く

1x1画像

warpで歪む画像

4:3のアスペクト比に近く横長で切り抜かれる

4x3画像

warpで歪む画像

16:93のアスペクト比なので、さらに横長に

16x9画像
アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース