秀逸なWordPressテーマArkhe(アルケー)に、最初から用意されているとっても便利な汎用クラス!
いちいちファイルを開いて確認してたけど、自分用にまとめてみました〜
Arkhe使っている人には特に説明せずとも便利なクラスだと思います〜
「高度な設定」の「追加CSSクラス」にクラス名を入れるだけですぐに使えます。
alignfull.scss
.alignfull {
position: relative;
left: calc(50% - ( 50vw - var(--ark-scrollbar_width) / 2 ));
width: calc(100vw - var(--ark-scrollbar_width));
max-width: 100vw !important; // embedなどの max100% のものを上書き
+ .alignfull {
margin-top: 0;
}
// div中の全幅は、内部に収まるように。(ネスト内でも広げたいケースはそれぞれ明示的に指定する)
:where(.c-postContent > div) & {
left: 0;
width: 100%;
}
// サイドバーありの時、コンテンツエリアでは幅を制限
[data-sidebar="on"] .l-main & {
@include pc {
left: 0 !important;
width: 100% !important;
}
}
// 背景色ありグループ・カバーブロックの余白量を大きく。
&.wp-block-cover,
&.wp-block-group.has-background {
padding: 4em var(--ark-padding--container, 48px);
}
// インナーコンテンツの最大幅を記事幅に維持する
> .wp-block-cover__inner-container,
&.has-background > .wp-block-group__inner-container {
max-width: var(--ark-width--article);
margin: 0 auto;
}
// 全幅の中の記事幅コンテンツの中の、さらに幅広なコンテンツの挙動
> .wp-block-cover__inner-container,
&.has-background > .wp-block-group__inner-container,
> .ark-block-container__inner,
&:not([data-inner="full"]) > .ark-block-section__body > .ark-block-section__bodyInner {
// さらにその中の全幅は、左右のpaddingまでに収まるように。
> .alignfull {
left: calc(50% - ( 50vw - var(--ark-padding--container) ));
width: calc(100vw - var(--ark-padding--container) * 2);
}
> .alignwide {
--ark-alignwide_ex_width: revert;
}
}
}
alignwide.scss
//left: 50%; transform: translateX(-50%);を使いたいけど、background-attachment: fixed;との併用ができない。
.alignwide {
position: relative;
left: calc(var(--ark-alignwide_ex_width) * -1);
width: calc(100% + var(--ark-alignwide_ex_width) * 2);
max-width: unset !important; // embedなどのmax100%のものを上書き
// div中の全幅は、内部に収まるように。(ネスト内でも広げたいケースはそれぞれにrevertで0を打ち消す)
:where(.c-postContent > div) & {
--ark-alignwide_ex_width: 0px;
}
}
// サイドバーありの時、コンテンツエリアでは幅を制限
[data-sidebar="on"] .l-main .alignwide {
left: 0;
width: 100%;
}
cf.scss
.u-cf {
clear: both !important;
}
.u-cf--after::after {
display: block;
clear: both;
height: 0;
visibility: hidden;
content: "";
}
color.scss
.u-color-thin {
opacity: var(--ark-opacity--thin);
}
display.scss
.u-display-none {
display: none !important;
}
.u-display-block {
display: block !important;
}
flex.scss
.u-flex {
display: flex;
}
.u-flex--aic {
display: flex;
align-items: center;
}
.u-flex--aicw {
display: flex;
flex-wrap: wrap;
align-items: center;
}
// .u-flex--jcc {
// display: flex;
// justify-content: center;
// }
.u-flex--c {
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
}
font-size.scss
.u-fz-xs,
.has-xsmall-font-size {
font-size: var(--ark-fz--xs, .75em) !important;
}
.u-fz-s,
.has-small-font-size {
font-size: var(--ark-fz--s, .9em) !important;
}
.u-fz-n,
.has-normal-font-size {
font-size: var(--ark-fz--n, 1rem) !important;
}
.u-fz-m {
font-size: var(--ark-fz--m, 1.1em) !important;
}
.u-fz-l,
.has-large-font-size {
font-size: var(--ark-fz--l, 1.25em) !important;
}
.u-fz-xl,
.has-xlarge-font-size {
font-size: var(--ark-fz--xl, 1.5em) !important;
}
.u-fz-xxl,
.has-xxlarge-font-size {
font-size: var(--ark-fz--xxl, 2em) !important;
}
.has-huge-font-size {
font-size: var(--ark-fz--huge, 2.75em) !important;
}
font-weight.scss
.u-fw-bold {
font-weight: bold !important;
}
.u-fw-normal {
font-weight: normal !important;
}
.u-fw-lighter {
font-weight: lighter !important;
}
fullhight.scss
.u-fullheight {
height: var(--ark-height--full, 100vh) !important;
}
line-height.scss
.u-lh-10 {
line-height: 1 !important;
}
.u-lh-12 {
line-height: 1.2 !important;
}
.u-lh-14 {
line-height: 1.4 !important;
}
.u-lh-15 {
line-height: 1.5 !important;
}
.u-lh-16 {
line-height: 1.6 !important;
}
.u-lh-18 {
line-height: 1.8 !important;
}
.u-lh-20 {
line-height: 2 !important;
}
margin.scss
// margin-bottom
.u-mb-0 {
margin-bottom: 0 !important;
}
// remベース
.u-mb-5 {
margin-bottom: .5rem !important;
}
.u-mb-10 {
margin-bottom: 1rem !important;
}
.u-mb-15 {
margin-bottom: 1.5rem !important;
}
.u-mb-20 {
margin-bottom: 2rem !important;
}
.u-mb-25 {
margin-bottom: 2.5rem !important;
}
.u-mb-30 {
margin-bottom: 3rem !important;
}
.u-mb-40 {
margin-bottom: 4rem !important;
}
.u-mb-50 {
margin-bottom: 5rem !important;
}
.u-mb-60 {
margin-bottom: 6rem !important;
}
.u-mb-80 {
margin-bottom: 8rem !important;
}
// margin-top
.u-mt-0 {
margin-top: 0 !important;
}
// remベース
.u-mt-5 {
margin-top: .5rem !important;
}
.u-mt-10 {
margin-top: 1rem !important;
}
.u-mt-15 {
margin-top: 1.5rem !important;
}
.u-mt-20 {
margin-top: 2rem !important;
}
.u-mt-25 {
margin-top: 2.5rem !important;
}
.u-mt-30 {
margin-top: 3rem !important;
}
.u-mt-40 {
margin-top: 4rem !important;
}
.u-mt-50 {
margin-top: 5rem !important;
}
.u-mt-60 {
margin-top: 6rem !important;
}
.u-mt-80 {
margin-top: 8rem !important;
}
object.scss
.u-obf-cover {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
// font-family: "object-fit: cover;";
}
.u-obf-contain {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
// font-family: "object-fit: contain;";
}
pc-sp.scss
@include pc {
.u-only-sp {
display: none !important;
}
.u-hide-pc {
display: none !important;
}
}
@include sp {
.u-only-pc {
display: none !important;
}
.u-hide-sp {
display: none !important;
}
}
text-align.scss
.u-ta-c {
text-align: center !important;
}
.u-ta-l {
text-align: left !important;
}
.u-ta-r {
text-align: right !important;
}
wp-utils.scss
.alignleft {
float: left;
}
.alignright {
float: right;
}
// ?
.sticky {
display: block;
}
// ?
.bypostauthor {
color: inherit;
}