◎【ユーザーパーツ設定】ユーザーパーツを利用して、オリジナルの見出しやボタンを作り/使う方法

この記事では、ユーザーパーツ設定(ユーザーパーツを利用して、オリジナルの見出しやボタンを作り/使う方法)をご紹介します。

ユーザーパーツ設定では、見出し・ボタン・ハイライト・ボックスなどのオリジナルのパーツを作成することが出来ます。

また、作成したパーツをプリセットパーツ(テーマ側で用意しているパーツ)よりも優先的に表示させることが出来ます。

  • プリセットパーツ=テーマ側で用意しているパーツ(ボックス・ボタン・見出しなど)
  • ユーザーパーツ=自分で作成するオリジナルのパーツ(ボックス・ボタン・見出しなど)

 

「ユーザーパーツ設定」で、オリジナルのパーツを作成するには、cssの知識が必要です。ユーザーパーツ設定は、中級レベル以上の方向けの設定項目です。

(1)「ユーザーパーツ設定」をする

Step1.「テーマ設定」→「ユーザーパーツ設定」に進む

(1)はじめに、「テーマ設定」→「ユーザーパーツ設定」→「基本」の順に進みます。

(2)次に、「ユーザーパーツ機能の有効化設定」でON」にチェックを入れます。

(3)最後に、「変更を保存」を押して下さい。

これで、ユーザーパーツ機能が有効化され、詳細な設定をすることが可能になりました。

※既に、「ユーザーパーツ機能の有効化設定」がONになっている場合は、Step1の操作は不要です。

Step2.「ユーザーパーツ」を編集する

※この記事では「見出し」を編集する事例で解説しています。

(1)はじめに、「ユーザーパーツ設定」→「見出し」の順に進みます。

(2)次に、パーツ編集の「NAME」にパーツの名前を入力します。

※管理しやすい・分かり易い名前を付ければOKです。

(3)「styleを編集する」をクリックします。

Step3.styleを編集する

(1)styleの編集画面で、cssを追記し編集を行います。

(2)編集が終わったら最後に、「変更を保存」を押してください。

これで、ユーザーパーツの編集は完了です。

(2)作成したユーザーパーツをプリセットパーツよりも優先的に表示させる

このセクションでは、作成したユーザーパーツをプリセットパーツよりも優先的に表示させる方法を解説します。

Step1.「並び替え」ボタンをドラッグ&ドロップする

(1)はじめに、プリセットパーツよりも優先的に表示させるユーザーパーツの並び替え」ボタンをドラッグします。

(2)次に、「この上に移動することで・・・優先的に表示されます」の表示よりも上のスペースにドロップします。

Step2.「変更を保存」を押す

(1)下記画像↓のように、「この上に移動することで・・・優先的に表示されます」の表示よりも上に、優先的に表示させるユーザーパーツが表示されているのを確認し、最後に、「変更を保存」を押してください。

※作成したユーザーパーツの使い方については、この記事2ページ目↓で詳しく解説していますので、ご確認ください。