![](https://babylon-liq.com/wp-content/uploads/2021/03/w_af_honki-1-1024x683.png.webp)
![](https://babylon-liq.com/wp-content/uploads/2021/02/publicdomainq-0030186wwq-600x545.jpg)
affinger6をテーマで使っているんだけど
ブログ内で手順を見やすく説明したいけど、いい方法ない?
こんな方のお悩みにお答えしますよ!
手順を見やすく書きたいなら、ステップのショートコードを利用するのがおすすめです。
番号も振られているので、見やすさは抜群です。
こんな感じです。
![](https://babylon-liq.com/wp-content/uploads/2021/03/jjia-1024x746.png.webp)
なにか手順を説明するのにはピッタリですよね。
この記事の内容
・affinger6のステップの設定方法
・ステップの配色とデザイン変更
こんな感じで進めていきます。それでは始めます。
affinger6のステップの入力方法
![](https://gekkolog.com/wp-content/uploads/2020/09/john-schnobrich-2FPjlAyMQTA-unsplash-1024x683.jpg)
step
1ステップのショートコードをブログ内に入れる
![](https://gekkolog.com/wp-content/uploads/2020/09/ステップショートコード-1024x438.png)
ステップのショートコードは以下にあります。
ステップの場所
・タグ→テキストパーツ→ステップ
実際のショートコードが以下のものです。
メモ
step
1
step
2ステップを必要な数だけ入力する
![](https://babylon-liq.com/wp-content/uploads/2020/09/banngou.png)
-
step
1を必要なだけ入力する
- 赤枠内の番号を順番になるように変更する。※デフォルトだと1になっています。
現時点だとこんな感じ。
![](https://babylon-liq.com/wp-content/uploads/2021/03/iuguiwi-1024x528.png.webp)
step
3ステップのタイトルと説明文を入れる
1つ前の時点で骨格は完成しているので、タイトルと内容を記入します。
![](https://babylon-liq.com/wp-content/uploads/2020/09/hkhgvuigolk.png)
- 赤枠の部分にタイトルを入れる
- オレンジ枠の部分に説明文を入れる
すると以下のように表示されます。
![](https://babylon-liq.com/wp-content/uploads/2021/03/jjia-1-1024x746.png.webp)
結構見やすくなりますよね!
ココだけだとそこまで感動は無いかもしれませんが、ブログの中で効果的に使うと「より」見やすさがわかるかと思います!
以上で、ステップの入力方法は終了です!
affinger6のステップのデザインを変更する方法
![](https://gekkolog.com/wp-content/uploads/2020/05/undraw_share_opinion_jpw0-1024x679.png)
affinger6のステップのデザインを変更するにはカスタマイズから変更することができます。
また、変更できるデザインの要素は以下です。
ポイント
- ステップの背景色
- ステップ・ポイントの文字色
- タイトルの背景色
- タイトルの文字色
- 下線の色
- 丸み、角
それでは、まず変更できる項目までをご紹介します。
step
1ステップ/ポイントのデザイン変更する画面を開く
![](https://gekkolog.com/wp-content/uploads/2020/09/外観カスタマイズ-1024x794.png)
TOPのダッシュボードから「外観→カスタマイズ」をクリックします。
![](https://gekkolog.com/wp-content/uploads/2020/09/オプションカラー②-1024x619.jpg)
オプションカラーを選択します。
![](https://gekkolog.com/wp-content/uploads/2020/09/ステップ③-1024x648.jpg)
ステップポイントをクリックします。
![](https://gekkolog.com/wp-content/uploads/2020/09/例④-1024x426.png)
この部分までたどり着ければOKです。
それでは、デザインを変更していきます。
step
2ステップ/ポイントのデザインを実際に変更する
ステップのデザインを変更できるのは先ほどご紹介した以下です。
ポイント
- ステップの背景色
- ステップ・ポイントの文字色
- タイトルの背景色
- タイトルの文字色
- 下線の色
- 丸み、角
実際のどこを変更したら、どこが変わるのかをご紹介します。
ステップの背景色
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/hjこい-1024x108.png)
ステップ・ポイントの文字色
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/文字色-1024x107.png)
タイトルの背景色
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/テキスト背景-1024x112.png)
タイトルの文字色
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/テキスト色-1-1024x106.png)
下線の色
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/らいん-1024x105.png)
丸み、角
![](https://gekkolog.com/wp-content/uploads/2020/09/元-1024x111.png)
![](https://gekkolog.com/wp-content/uploads/2020/09/角-1024x103.png)
こんな感じです。
ちなみに、このサイトのデザイン配色は以下になってますよ!
メモ
ステップの背景色
#ff9800
ステップ・ポイントの文字色
#ffffff
タイトルの背景色
#000000
タイトルの文字色
#ffe8cc
下線の色
#ff9800
丸み、角
チェックボックス有り
まとめ:ステップを編集して、コンテンツをより見やすく!
![](https://gekkolog.com/wp-content/uploads/2020/06/542-1024x660.jpg)
ステップの配色デザイン変更についてご紹介しました。
affinger6はいろんな機能があって、使いきれないほどですが、
中でも、このステップは記事を見やすくするにはうってつけなので、
使ったことが無いという方はぜひ使ってみてください。
本日もありがとうございました!