サンプルページ

ff-mincyo fw-semibold しっぽり明朝B1

ff-mincyo fw-medium しっぽり明朝B1

ff-mincyo fw-regular しっぽり明朝B1

fw-bold 游ゴシック

fw-medium 游ゴシック

fw-regular 游ゴシック

ff-outfit fw-medium 0123456 ABC

ff-outfit fw-regular 0123456 ABC

ff-outfit fw-light 0123456 ABC

home_url() https://www.kyuhan.jp/sample-page/ get_post_type_archive_link() get_term_link() https://www.kyuhan.jp/privacy-policy/

https://www.kyuhan.jp/wp-content/themes/kyuhan/assets/images
https://www.kyuhan.jp/wp-content/themes/kyuhan

h1

16px

あああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいい

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

1rem

あああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいい

10px

ああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

・ああああああああああああああああああああああああああ

.img-fluid

width="1110" height="200"

width="800" height="200"

width="200" height="100"

width="200" height="100" style="--img-xs-w:100;"

width height なし

Link

.btn-flow

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

Underline opacity 100

Underline opacity 0

Bootstrap

Build fast, responsive sites with Bootstrap

Currently v5.3.0-alpha1

Style Guide Container Artpro Breakpoints Root Font Size Color Font Family Font Weight ／ Font Style Line Height Reset color Text decoration inview Swiper Img Max

Style Guide

::selection {
  background-color: $text-70;
  color: #fff;
}

.empty-none

<p class="p-20 bg-main empty-none"></p>
<p class="p-20 bg-main empty-none">.empty-none</p>

.ff-gothic 游ゴシック

.font-smoothing

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

.font-smoothing

.ff-mincyo 游明朝体

.ff-gothic fw-bold 游ゴシック

.font-smoothing

.ff-gothic fw-bold 游ゴシック

.ff-mincyo fw-bold 游明朝体

.font-smoothing

.ff-mincyo fw-bold 游明朝体

.font-smoothing{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
デフォルト↓
.font-smoothing-none{
  -webkit-font-smoothing: subpixel-antialiased;//antialiased
  -moz-osx-font-smoothing: unset;//grayscale
}

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとな...にぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえ..おかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

.text-justify

.text-justify

・あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

-　あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

デフォルト .text-indent：1em
<p class="fs-18 ls-none text-indent">・あいうえおかきくけこ…</p>
<p class="fs-18 ls-none text-indent" style="--ap-indent:1.5em"> -　あいうえおかきくけこ…</p>

Container Artpro

fs-16

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬ

font-size: 16px;

fs-10

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつて

font-size: 10px;

Breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: $sm-breakpoint,//def 576px @620
  md: (10 * ($artboards-container-width / $font-size-root)) / ($artboards-container-width / $xl-breakpoint),//768px
  lg: 992px,//def 992px
  xl: $xl-breakpoint,//def 1200px @1110+30+100=1240
  xxl: $artboards-size //def 1400px @1300px
) !default;

Root Font Size

1rem

:root {
  //font-size: calc(((100vw * 335 / 375)) / ( 335 / 16));
  @include root-fsr($sp-artboards-container-width, $sp-artboards-container-max, $font-size-root);
  @include media-breakpoint-up(sm) {
    //font-size: calc(((100vw * 1110 / 1240)) / ( 1110 / 16));
    @include root-fsr($artboards-container-width, $artboards-container-max, $font-size-root);
  }
  @include media-breakpoint-up(xl) {
    font-size: #{$font-size-root};
  }
}

Color

.text-default

.text-main

.text-accent

.bg-default

.bg-main

.bg-accent

.bg-primary

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

$default-text:  #343434;//文字色
$mainColor:     #3a7bc6;//青1
$accentColor:   #48acbc;//青3

Font Family

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

$font-family-sans-serif: "Yu Gothic", YuGothic, Verdana, Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-serif: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝",serif;

Font Weight ／ Font Style

Bold text. 700

Bolder weight text (relative to the parent element). bolder

Semibold weight text. 600

Medium weight text. 500

Normal weight text. 400

Light weight text. 300

Lighter weight text (relative to the parent element). lighter

Regular weight text .fw-regular 400

Demibold weight text .fw-demibold 600

Italic text .fst-italic

Text with normal font style .fst-normal

Line Height

.lh-season fs-14 ホテルの一流シェフたちが自信をもって贈る多彩な料理。うれしい「飲み放題」の特典も付いたお得なプラン。

.lh-season fs-14 mincyo 熊本ホテルキャッスルでは、
おすすめご宿泊プランをご用意しております。

.lh-10 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

.lh-50 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

//フォントサイズ+10px
.lh-season{
 line-height: calc(1em + #{10 / $font-size-root-num}rem);
}

Reset color

reset link.
Muted text with a reset link.

<p class="text-danger">
 <a href="#" class="text-decoration-underline">reset link</a>.<br>
 Muted text with a <a href="#" class="text-reset text-decoration-underline">reset link</a>.
</p>

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

This link has its hover text decoration

This text has a line underneath it.

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="">This link has its text decoration removed</a>
<a href="#" class="td-hover-underline">This link has its hover text decoration</a>
<a href="#" class="text-decoration-underline">This link has its text decoration removed</a>

Inview

no class data-inview

.inview-up data-inview

.inview-left data-inview

.inview-right data-inview

.inview-blocks data-inview span.char

<h2 class="" data-inview>no class data-inview</h2>
<h2 class="inview-up" data-inview>.inview-up data-inview</h2>
<h2 class="inview-left" data-inview>.inview-left data-inview</h2>
<h2 class="inview-right" data-inview>.inview-right data-inview</h2>
<h2 class="inview-blocks" data-inview><span class="char">.inview-blocks data-inview span.char</span></h2>
<h2 class="inview-lettering" data-inview data-lettering>.inview-lettering data-inview data-lettering</h2>
<h2 class="" data-inview data-shuffle>data-inview data-shuffle</h2><h2 class="" data-taicha data-lettering>お客様とのご縁に、心より感謝。</h2>

Swiper

これはサンプルページです。同じ位置に固定され、(多くのテーマでは) サイトナビゲーションメニューに含まれる点がブログ投稿とは異なります。まずは、サイト訪問者に対して自分のことを説明する自己紹介ページを作成するのが一般的です。たとえば以下のようなものです。

はじめまして。昼間はバイク便のメッセンジャーとして働いていますが、俳優志望でもあります。これは僕のサイトです。ロサンゼルスに住み、ジャックという名前のかわいい犬を飼っています。好きなものはピニャコラーダ、そして通り雨に濡れること。

または、このようなものです。

XYZ 小道具株式会社は1971年の創立以来、高品質の小道具を皆様にご提供させていただいています。ゴッサム・シティに所在する当社では2,000名以上の社員が働いており、様々な形で地域のコミュニティへ貢献しています。

新しく WordPress ユーザーになった方は、ダッシュボードへ行ってこのページを削除し、独自のコンテンツを含む新しいページを作成してください。それでは、お楽しみください !

はじめまして。昼間はバイク便のメッセンジャーとして働いていますが、俳優志望でもあります。これは僕のサイトです。ロサンゼルスに住み、ジャックという名前のかわいい犬を飼っています。好きなものはピニャコラーダ、そして通り雨に濡れること。

または、このようなものです。

XYZ 小道具株式会社は1971年の創立以来、高品質の小道具を皆様にご提供させていただいています。ゴッサム・シティに所在する当社では2,000名以上の社員が働いており、様々な形で地域のコミュニティへ貢献しています。

aaaa