AFFINGER4(アフィンガー4)をこよなく愛す皆様。
どうも。Takaです。
AFFINGER4は細かいカスタマイズができていいよ!という噂を聞いて購入を決意した人も少なくないと思いますが、いろいろなカスタマイズがあるので使いこなせずに悩みますよね。
僕もまだまだ知らない機能がたくさんあります。
気付いたことは備忘録的にここに書いていこうと思います。
今日書きたいのはリスト(ulタグやolタグ)のデザインについてです。
CSSの編集なしでもできるように、AFFINGER4には最初からちゃんと機能が備わっているんですよ。
![](http://tkhb7.com/wp-content/uploads/2017/09/affinger4banar2017_336.gif)
リストとはこれのことです
まず、リストと言っているのはこれのことです。
番号なしリスト(ul)
- あああ
- いいい
- ううう
番号付きリスト(ol)
- えええ
- おおお
- んんん
実はこれをAFFINGER4のデフォルトの機能だけで装飾できるんですね。
そして、装飾後はこうなります(本サイトの場合)
- あああ
- いいい
- ううう
- えええ
- おおお
- んんん
リストの装飾の方法
では、さっそく装飾してみましょう。
めちゃ簡単なのでご安心ください。
①「スタイル」の「olタグを囲む数字ボックス」もしくは「ulタグと囲むチェックボックス」を選ぶ
![AFFINGER4-リスト装飾①](http://tkhb7.com/wp-content/uploads/2018/02/f9cce09a540eb07dacbafb3dbc707b01.jpg)
選ぶとこうなります。
![AFFINGER4-リスト装飾①-1](http://tkhb7.com/wp-content/uploads/2018/02/bdbe507f278252098cb7d55ebce42118.jpg)
②「番号なしリスト」もしくは「番号付きリスト」を選ぶ。
![AFFINGER4-リスト装飾②](http://tkhb7.com/wp-content/uploads/2018/02/9ff6301d52c73f5e6b530ade86e8406d.jpg)
選ぶとこうなります。
![AFFINGER4-リスト装飾②-1](http://tkhb7.com/wp-content/uploads/2018/02/b4f87eece3f8e9bf1d15d922bf1926fa.jpg)
③あとは好きな文字を入力するだけです。こんな感じになります。
![AFFINGER4-リスト装飾③-1](http://tkhb7.com/wp-content/uploads/2018/02/a368d90c2d26b4e63428f355c64f8e82.jpg)
必ず、番号なしなら「ulタグを囲むチェックボックス」、番号付きなら「olタグを囲む数字ボックス」を選んでください。逆を選ぶと機能しません。
リストの装飾をカスタマイズしてみる
これだけでも少しはマシになったのですが、まだ寂しい感じなのでカスタマイズしてみましょう。
①外観 -> カスタマイズ を選ぶ
②[+]オプションカラー を選ぶ
③「数字リストのカラー」「チェックリストのカラー」の項目で、各種色付けをする。
![AFFINGER4-リスト装飾カスタマイズ](http://tkhb7.com/wp-content/uploads/2018/02/88e3bbe21de8745e624ad9b8b1a6568a.jpg)
④僕の場合はこうなりました。
- あああ
- いいい
- ううう
- えええ
- おおお
- んんん
以上。
AFFINGER4は、まだまだいろんな機能が備わっているので、新しい発見がある度に、ブログを書くのが楽しくなりますね!
\本ブログで使用しているテーマ「AFFINGER4」/
![](http://tkhb7.com/wp-content/uploads/2017/09/affinger4banar2017_336.gif)
通常9,800円がこちらからの購入であれば9,000円になります。