OrigamiUI

メニュー

閉じる

>

スタイルの作り方

OrigamiUIやWordpress標準のエディターを使ったスタイルの作り方を紹介します。

  • サイズ(縦横の幅)
  • 余白
  • 配色
  • 背景画像
  • フォント
  • 枠線と角丸
  • カスタムCSSでスタイルする方法
  • スタイル用のクラスをつける

サイズ(縦横の幅)の調整方法

OrigamiUIを使ったサイズ(縦横の幅)設定では%とpxを使った設定が可能で、ブレークポイントごとに変更することが出来ます。

サイズ設定の流れはこちらのようになります。

  1. サイズ変数の設定
  2. ブレークポイントの選択
  3. 幅、高さの設定

まずはサイズ変数を設定します。

幅と高さはサイズ変数で入力した数値に1~10の値をかけたものとautoから選択できます。

なのでサイズ変数を10pxにした場合、幅や高さは10px~100pxの間で選択出来ます。

また、変数以外はブレークポイントごとに設定を変更可能です。

ブレークポイントはメディアクエリの`min-width`で設定されるため、スマホで設定した内容は他のブレークポイントで変更しない限り全てのブレークポイントで適用されます。

例) スマホで幅を300pxに設定 -> スマホ、タブレット、PCの全てで300px

例) スマホで幅を300pxに設定、PCでトップを500pxに設定 -> スマホとタブレットで300px、PCで500px

余白の作り方

余白(パディングとマージン)はOrigamiUIで作る場合とWordpress標準のスタイル設定で設定できます。

OrigamiUIで余白を作る場合

OrigamiUIの設定は「スペース設定」のパネルでサイズと同様ブレークポイントごとの設定が可能です。

手順もサイズ設定と同じでこちらのようになります。

  1. スペース変数の設定
  2. ブレークポイントの選択
  3. パディング、マージンの設定

まずはスペース変数をセットしてください。スペース変数は、px、em、remから選択可能です。

そのあと設定したいブレークポイントを選択して、マージンとパディングを設定します。

こちらも変数に1~10をかけた値を設定できます。

例えばスペース変数を10pxにセットした場合、マージンやパディングは10px~100pxの間で選択可能です。

サイズと違う点は上下左右を別々に設定する点です。以下の設定が可能です。

  • Top: 上
  • Bottom: 下
  • Left: 左
  • Right: 右

WordPress標準のスタイルで作る場合

WordPress標準のスタイル設定でも余白を設定できます。各種ブロックの「スタイル」タブをクリックするとスタイルの設定パネルに切り替わります。

WordPress標準のスタイル設定では「サイズ」の項目で余白を設定できます。

スライドを動かして調整するか、右側のボタンをクリックして数値を直接入力します。

パディングやマージンの横にあるリンクアイコンを押すと、上下左右を個別に設定することもできます。

WordPressのスタイル設定はレスポンシブに対応していません。

配色の設定方法

配色の設定を行うには、ブロックの「スタイル」タブを押してスタイル設定に切り替えてください。

OrigamiUI以外のブロックでも設定方法は同じです。以下のような配色の設定が可能です。

  • テキスト(文字)の色
  • 背景色
  • ボーダー(枠線)の色

テキスト(文字)の色を設定する

テキストの文字色を変更するには、スタイル設定パネルにある「色」の項目にある「テキスト」をクリックして色を変更できます。

「色が選択されていません」の上にある四角が並んだところをクリックすると色を自由に設定できます。

「テーマ」の項目にあるのはWordpressテーマで設定されたカラーパレットです。ここから色を選ぶこともできます。

スタイル設定パネルの他に、編集画面で色を変えたい文字の範囲を選択して「ハイライト」から個別に色を設定することもできます。

この場合は選択した範囲の色だけを変えることが出来ます。

背景色を設定する

テキストの文字色を変更するには、スタイル設定パネルにある「色」の項目にある「背景」をクリックして色を変更できます。

「色が選択されていません」の上にある四角が並んだところをクリックすると色を自由に設定できます。

「テーマ」の項目にあるのはWordpressテーマで設定されたカラーパレットです。ここから色を選ぶこともできます。

スタイル設定パネルの他に、編集画面で色を変えたい文字の範囲を選択して「ハイライト」から個別に文字の背景色を設定することもできます。

ハイライトを選択した後、「背景」のタブに切り替えると文字の背景を設定できます。

この場合は選択した範囲の色だけを変えることが出来ます。

ボーダー(枠線)の色を設定する

枠線の色を変更するには、まず枠線の設定を表示する必要があります。

その後色設定の部分をクリックすることで色の設定パネルを表示できます。

背景画像の設定方法

背景色については先ほど紹介した通りです。

背景画像の設定もスタイル設定パネルで行います。色設定の下にある「背景画像を追加」のボタンを押すと以下のようなパネルが表示されます。

ここでは画像を新規にアップロードするか、すでにWordpressにアップロードしたものから選ぶかを選択することが出来ます。

アップロードする場合は「アップロード」、すでにあるものから選ぶ場合は「メディアライブラリを開く」を選んでください。

背景画像を設定した後、画像のボタンを押すと詳細な設定パネルが表示されます。

ここでは背景画像の位置やサイズを調整することが出来ます。

フォントの変更方法

フォントの設定もスタイルパネルで行います。フォントサイズ以外の隠れている設定を表示するには、「タイポグラフィ」の横にあるメニューボタンを押して設定したい項目を選択してください。

スタイルパネルでは以下の設定ができます。

  • サイズ: フォントサイズの設定
  • フォント: フォントファミリーの選択
  • 外観: 文字の太さの設定
  • 行の高さ: 行間の余白設定
  • 文字間隔: 文字間の余白設定
  • 装飾: 下線、打ち消し線の設定
  • 方向: 横書き、縦書きの設定
  • 大文字小文字: 大文字のみ、小文字のみの設定

フォントファミリーの選択肢を増やす方法

WordPressのテーマにはあらかじめフォントが用意されている場合がありますが、別のフォントを使いたい場合はフォントを増やすことが出来ます。

編集画面から一旦出て、Wordpressの管理画面メニューで外観->エディターを選択します。

エディターページでスタイルを選択すると、カラーパレットの編集などデフォルトのスタイル設定ができる画面が表示されます。

この画面でタイポグラフィを選択し、「フォント」の右にあるメニューアイコンをクリックします。

するとフォント追加パネルが表示されるので、アップロードするか、Googleフォントからインストールすることが出来ます。

ここで追加したフォントは、デフォルトのフォントにしたり、スタイル設定パネルの「フォント」から選ぶことができるようになります。

枠線と角丸の変更方法

枠線と角丸のスタイルもスタイル設定パネルから行います。設定が表示されていない場合は、「枠線」の横にあるメニューボタンから項目を選んで表示させてください。

枠線の設定では、線の太さ、色、線のスタイルを変更できます。また、右にあるリンクアイコンを押すと上下左右それぞれの設定を変更できるようになります。

カスタムCSSでスタイルする方法

カスタムCSSはOrigamiUIのブロック設定で入力できます。

ここではCSSコードをそのまま入力することが可能です。

セレクタは「selector」と入力することで選択中のブロックに適用することが出来ます。`:hover`や`:before`のような擬似クラス、メディアクエリを使ったレスポンシブ対応のスタイルを作ることもできます。

例)
selector {
  color: red;
}
selector:hover {
  color: blue;
}
selector p {
  color: blue;
}

スタイル用のクラスをつける

スタイルシートを用意し、その中にクラスで定義されたスタイルがある場合、ブロックにクラスをつけることでスタイルを当てることが出来ます。

ブロック設定の「高度な設定」にある「追加 CSS クラス」の入力フォームにクラス名を入力してください。

例えば以下のようなボタンクラスがある場合、「button」と入力するとスタイルを当てることが出来ます。

.button {
  font-size: 14px;
  font-weight: bold;
  background-color: blue;
  color: #fff;
}

もともと入っている「oui_cm-xxx-xxxxxx」はこのブロックのクラス名です。消さずに半角スペースを入れて追加のCSSクラスを追記してください。

ノーコードでWordpressサイト作るなら

OrigamiUI