AFFINGER5（アフィンガー5）で丸付きの番号なしリストを表示する方法

番号なしリストをかっこよくオシャレにカスタマイズしたいけどやり方が分からない・・・・。

◆そんな疑問を解決します。

アサヒ

こんにちは。
アサヒです（@asahi621）

AFFINGER5（アフィンガー5）を使っていて、番号なしリスト・番号付きリストを使用することが多いと思いますが、シンプルで見やすい作りですがデザインに物足りなさを感じていませんか？

僕は他の人のブログを読んでいて、自分のブログのデザインに物足りなさを感じて、番号なしリスト・番号付きリストをオシャレにデザインして載せています。

今回は番号なし・番号付きリストの丸付きのカスタマイズを紹介していきます。

やり方は簡単ですので、是非気になったらやってみて下さい！

AFFINGER5（アフィンガー5）で番号なしリストカスタマイズの方法

ではまず先に番号なしリストの作成です。

通常こちらの様な内容です。

• こちらはサンプルです1行目
• こちらはサンプルです2行目
• こちらはサンプルです3行目

見やすいけど、ちょっと寂しいですよね！？

それがこんな感じになります。

僕はこっちのほうがしっくり来たのでよく使っています。

では、やり方の説明です。

まずは普通に先程の様な文章を作ります。

画像の様に「番号なしリスト」を選択して文章を作ります。

作ったら「テキスト」の画面に切り換えます。

①を全選択してから②をクリックします。

このように変換されます。

プレビューで見てこのようになっていればO.Kです！

AFFINGER5（アフィンガー5）で番号付きリストカスタマイズの方法

続いては番号付きリストの方をやっていきます。要領は同じです。

通常こちらの様な内容です。

1. こちらはサンプルです1行目
2. こちらはサンプルです2行目
3. こちらはサンプルです3行目

こちらも少し寂しいので、このようにカスタマイズしていきます。

画像の様に「番号付きリスト」を選択して文章を作ります。

テキストを選択して画面を切り替えます。

①を全選択してから②をクリックします。

テキストで見るとこのように変わります。

プレビューで見てこのようになっていればO.Kです。

番号なしリスト・番号付きリストをボックスデザインにアレンジ

ここでは少しボックスで囲んだアレンジ内容を見ていきましょう！

シンプルなボックス線にタイトルを入れられるタグです！

囲みたい文章を全選択して　⇒　タグ　⇒　ボックスデザイン　⇒　マイボックス　⇒　基本

ボックスが出来ます。

色付きのボックスでタイトルを入れられます！

文章の一行上をクリックして　⇒　タグ　⇒　テキストパーツ　⇒　複合　⇒　ココがポイント

を選択します。

[/st-cmemo]の位置を画像の位置にコピペすれば完成です。

シンプルだけど見栄えがするボックスデザイン！

文章を全選択します。　⇒　ボックスデザイン　⇒　マイボックス（＋CSSクラス）　⇒　メモ（枠・下線あり）

ボックスのタイトルを入れれば完成です。

アサヒ

シンプルな表示だけど、どれも見ごたえがある表示になっています。

ブログ記事のアクセントに使ってみて下さい！

AFFINGER5（アフィンガー5）で丸付きの番号リストにアレンジしよう！

ブログを書く時は、文章だけでは読み手も飽きてしまい、離脱の可能性が高くなってしますので、装飾や行間などが大切です！

今回の記事を見て記事の装飾の参考にして読み易い文章を作ってみましょう！

今回は以上です。