GOLD BLOG（ゴールドブログ）の基本スタイル、CSSのクラス一覧

※当サイトにはプロモーションが含まれています。

GOLD BLOG（ゴールドブログ）は、ブロックエディタ（Gutenberg）に完全対応したワードプレス（WordPress）テーマです。

そのため、余白の調整や装飾は基本的にブロックエディタ上で完結できます。

また、GOLD BLOGにはウィジェット用に独自の便利なパーツが豊富に揃っており、活用する機会も多いでしょう。

一方で、GOLD BLOGのウィジェット自体には、文字などを装飾する機能がほとんど備わっていません。

GOLD BLOG｜ウィジェット

そこで今回は、ウィジェットのテキストを装飾したい時などに役立つ、GOLD BLOGの基本的なCSSクラスをまとめました。

この記事の目次
  1. GOLD BLOGの基本スタイル、CSSのクラス一覧

GOLD BLOGの基本スタイル、CSSのクラス一覧

GOLD BLOGの基本スタイル、CSSのクラス一覧です。

なお、これら記載したCSSは予め、GOLD BLOGで用意されているものです。

その為、適用したいクラスがあれば、

<p class="u-text_size_xs">小さい文字になります</p>

のように書くことで、クラスが適用されます。

※追加CSSなどに記述する必要はありません

フォントサイズ・色に関するCSS

文字のサイズや装飾を調整するクラスです。

フォントサイズ

.u-text_size_xs {font-size: var(--fit-phrase-quaternary)!important;}
.u-text_size_s {font-size: var(--fit-phrase-tertiary) !important;}
.u-text_size_m {font-size: var(--fit-phrase-secondary) !important;}
.u-text_size_l {font-size: var(--fit-phrase-primary) !important;}
.u-text_size_xl {font-size: var(--fit-phrase-quinary) !important;}

フォントの色

.u-text_color_main {color: var(--fit-color-main) !important;}
.u-text_color_sub {color: var(--fit-color-sub) !important;}
.u-text_color_accent {color: var(--fit-color-accent) !important;}
.u-text_color_text {color: var(--fit-color-text) !important;}
.u-text_color_palette1 {color: var(--fit-color-palette1) !important;}
.u-text_color_palette2 {color: var(--fit-color-palette2) !important;}
.u-text_color_palette3 {color: var(--fit-color-palette3) !important;}
.u-text_color_palette4 {color: var(--fit-color-palette4) !important;}
.u-text_color_palette5 {color: var(--fit-color-palette5) !important;}
.u-text_color_palette6 {color: var(--fit-color-palette6) !important;}
.u-text_color_palette7 {color: var(--fit-color-palette7) !important;}
.u-text_color_palette8 {color: var(--fit-color-palette8) !important;}
.u-text_color_black {color: var(--fit-color-black) !important;}
.u-text_color_dark_gray {color: var(--fit-color-dark_gray) !important;}
.u-text_color_dull_gray {color: var(--fit-color-dull_gray) !important;}
.u-text_color_gray {color: var(--fit-color-gray) !important;}
.u-text_color_light_gray {color: var(--fit-color-light_gray)!important;}
.u-text_color_pale_gray {color: var(--fit-color-pale_gray) !important;}
.u-text_color_blue_gray {color: var(--fit-color-blue_gray) !important;}
.u-text_color_white {color: var(--fit-color-white) !important;}

なお、u-text_color_mainやu-text_color_palette1などは、管理画面の設定内容に応じて色が変わる可変のクラスです。

マージン（外側余白）に関するCSS

自分は、余白調整で一番よく使うクラスになります。

.u-mt_0 {margin-top: 0 !important;}
.u-mt_5 {margin-top: 5px !important;}
.u-mt_10{margin-top: 10px!important;}
.u-mt_20{margin-top: 20px!important;}
.u-mt_30{margin-top: 30px!important;}
.u-mt_40{margin-top: 40px!important;}
.u-mt_50{margin-top: 50px!important;}
.u-mt_60{margin-top: 60px!important;}

パディング（内側余白）に関するCSS

文字などを１文字分内側に入れたい時などに使用します。

.u-ptb_0 {padding-top: 0 !important; padding-bottom: 0 !important;}
.u-ptb_5 {padding-top: 5px !important; padding-bottom: 5px !important;}
.u-ptb_10{padding-top: 10px!important; padding-bottom: 10px!important;}
.u-ptb_15{padding-top: 15px!important; padding-bottom: 15px!important;}
.u-ptb_20{padding-top: 20px!important; padding-bottom: 20px!important;}
.u-ptb_25{padding-top: 25px!important; padding-bottom: 25px!important;}
.u-ptb_30{padding-top: 30px!important; padding-bottom: 30px!important;}
.u-ptb_35{padding-top: 35px!important; padding-bottom: 35px!important;}
.u-ptb_40{padding-top: 40px!important; padding-bottom: 40px!important;}

.u-plr_0 {padding-left: 0 !important; padding-right: 0 !important;}
.u-plr_5 {padding-left: 5px !important; padding-right: 5px !important;}
.u-plr_10{padding-left: 10px!important; padding-right: 10px!important;}
.u-plr_15{padding-left: 15px!important; padding-right: 15px!important;}
.u-plr_20{padding-left: 20px!important; padding-right: 20px!important;}
.u-plr_25{padding-left: 25px!important; padding-right: 25px!important;}
.u-plr_30{padding-left: 30px!important; padding-right: 30px!important;}
.u-plr_35{padding-left: 35px!important; padding-right: 35px!important;}
.u-plr_40{padding-left: 40px!important; padding-right: 40px!important;}

テキスト配置に関するCSS

文字の位置調整（左・真ん中・右）などで使用します。

.u-text_center{text-align: center!important; justify-content: center!important;}
.u-text_left {text-align: left !important; justify-content: left !important;}
.u-text_right {text-align: right !important; justify-content: right !important;}

表示制御に関するCSS

パソコンやスマートフォンで見た時の表示を制御するのに使用します。

/* 改行 */
.u-sp_br {display: block}
.u-pc_br {display: none}

/* 表示・非表示 */
.u-sp_hide {display: none}
.u-sp_hide_flex {display: none}
.u-sp_hide_inline {display: none}
.l-header_box .u-sp_hide{display: none;} /*header_boxだけflexのため*/

.u-pc_hide {display: block}
.u-pc_hide_flex {display: flex}
.u-pc_hide_inline {display: inline}
.l-header_box .u-pc_hide{display: flex;} /*header_boxだけflexのため*/

今のところ、これらのクラスをよく利用しています。

そうすることで、ウィジェットからでも下記のようなデザインを作成することが可能になります。

GOLD BLOG｜ウィジェットでのデザイン例

にゃテックにゃテック

上記のデザインは紹介した基本的なクラス以外にも、自作のCSSを適用しています。