【コピペでOK】SANGOでスタイルの並び順を変更・カスタマイズする方法!

SANGOでスタイルの並び順を変更・カスタマイズする方法

ワードプレス(WordPress)で人気のテーマ「SANGO」には、デフォルトでたくさんのスタイルがあります。

以下の画像にある「画像のスタイル」「文字のスタイル」「見出し」「ボックス」「ボタン」「表をレスポンシブに変える」「”シンプルな引用ボックス」などです。

SANGO

しかし、そのスタイルの順番を変更・カスタマイズしたい時があると思います。

例えば、「蛍光ペン(青)」をよく使う場合には、スタイルの一番上に持ってきたいかと思います。

この記事では、

SANGOでスタイルの並び順を変更・カスタマイズするにはどうしたらいいの?

と言う疑問にお答えします。

ゆうた

コピペでOK!

SANGOでスタイルの並び順を変更・カスタマイズする方法

具体的な方法は以下の通りです。

の間に、コードをペーストすればOK。

以下のボタンをクリックして展開し、コードをコピペしてください。

 

これでカスタマイズの準備はOKです。

親スタイルの並べ替え

親スタイルと言うのは、

  • 画像のスタイル
  • 文字のスタイル
  • 見出し
  • ボックス
  • ボタン
  • 表をレスポンシブに変える
  • “シンプルな引用ボックス

のことです。

親スタイルの順番を並べ替えるには、以下のコードをいじればOKです。好みの順番に並べ替えてください。

子スタイルの並べ替え

子スタイルというのは、例えば「画像のスタイル」ではこのスタイルの下階層に存在する「画像を小さく」「画像を少し小さく」「画像を線で囲む」などです。

子スタイルの順番を並べ替えるには、以下の array() で囲まれている部分をユニットとして並べ替えるだけです。

例えばこれを、以下のようにすることで並び順を変更できます。

新しいスタイルの追加

新しいスタイルを追加したい場合には、

外観→テーマエディター→style.css と移動して、style.css に任意の class を設定します。

その後、例えば新しく original_class という class を追加した場合には、以下のように設定すればOKです。

'selector' => 'img' や 'inline' => 'span', など、タグによってつけるべき引数があるので、そこだけ注意してください。

好きなスタイルを1階層目に置く方法

子スタイルが親スタイルの下階層に置かれているため、以上の方法では、スタイルを利用するのに2クリック必要です。

最も頻繁に利用するスタイルは、1階層目(親スタイルと同じ階層)に置きたいですよね。

その場合には、例えば以下のようにすればOKです。

この例では、「蛍光ペン(青)」を追加しました。

こうすることで以下の画像のようにすることができます。

並べ替え

ゆうた

参考になったらシェアをしてもらえるとても喜びます!