本記事では上画像のように箇条書きの先頭にある記号を変更して，かっこいい箇条書きに変更する方法について説明します．先頭記号の画像をパワポなどで作成してから，スタイルシートで新しい箇条書きの設定を行うという流れになります．
箇条書きの先頭に使う画像を作成する
記事を訪問してくれた方にじっくり読んでもらうためには，記事のリズムが非常に重要になります．
黒い文字がずっと淡々と続く記事はとてもリズムが悪いです．
記事のリズムを変えるには
- 文字の色を変える
- 行間を空ける
- 文字の背景に色をつける
- 箇条書きを入れる
などが重要です．今も箇条書きを使いました．
元の箇条書きのスタイル
- 文字の色を変える
- 行間を空ける
- 文字の背景に色をつける
- 箇条書きを入れる
もそこまで悪くはないのですが，記事のリズムを作るにはもう少し，色や行間を工夫したいと思います．
まずは箇条書きの先頭の画像を作成します．
①パワーポイントなどで先頭記号を好きな感じに作成します．私が先ほど使用した緑の丸にチェックが入っている画像は，丸と棒を組み合わせて描いています．
このときに，最初から小さく作るのは難しいのでサイズは考えず大きめの画像を作成します．
②大きく作った画像をpng形式で保存した後，再度パワーポイントなどに貼り付けてから，大きさを変更して小さくします．大きさとしては，縦0.5cmから0.3cmくらいが良いと思います．
さきほどの緑の丸は縦0.5cmで作成しました．そしてこの小さくした画像を再度png形式で保存します．
③作成した画像をWordPressにアップロードします．管理画面から「メディア→新規追加」を選択し，作成した画像をアップします．
以上で先頭に使用する画像の準備が完了です．
新たな箇条書きのスタイルシートを作成します
作成した画像を使用する新たな箇条書きをスタイルシートに定義します．
①管理画面から「外観→テーマの編集」を選択します．
②テーマがSimplicity2 child: スタイルシート（style.css）になっているのを確認し，一番最後に以下のコードを貼り付けます．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 箇条書き１*/ ul.kajougaki1 { line-height: 2.5em; /* リストの行間を2.5emに広げる */ padding-left: 1.0em; /* 箇条書きが始まる位置を左から1emに調整 */ } ul.kajougaki1 li { padding-left: 2.5em; /* リストが始まる位置を左端から2.5emの場所にする */ background-image: url("http://www.how-to-make-affiliate-blog.com/wp-content/uploads/2016/11/check_mark11.png"); /* 先頭画像を設定する．URLは各自設定する必要があります */ background-repeat: no-repeat; /* 先頭画像は1度だけ表示する */ background-position: 0 0.3em; /* 先頭画像の位置を左から0em, 上から0.3emの場所に配置する */ list-style-type: none; /* リストの先頭にはドットや○などを入れない */ } |
今回はバックグラウンドに画像を入れることで箇条書きを実現させています．
各行の意味はコメント欄をご覧ください．
箇条書きの先頭画像そのものを list-style-image: で変更する方法もあるのですが，その方法ではうまく画像の高さが調整できず，先頭画像とリストの文字の高さがずれてしまい（私の力では修正できなかったので），今回の手法を採用しました．
記事内で今回定義した箇条書きを使用するには
以上で定義した箇条書きを実際に使用する方法を説明します．
①WordPressの記事投稿画面で，通常の箇条書きを作成します．
②記事編集画面の右上のタブから，編集モード「ビジュアル」を「テキスト」に変更します．
③箇条書きの部分は<ul>から始まっているのですが，この部分を
|
1 |
<ul class="kajougaki1"> |
に書き換えます．このclass名はスタイルシートで定義した名前を使用します．
④編集モードを元のビジュアルに戻します．ビジュアルに戻しても箇条書きのマークは変更されていませんが，実際の記事では変更されています．
以上により箇条書きが変更されます．
先頭の記号を画像に変更して，かっこいい箇条書きにする方法の紹介でした．
ご一読いただきありがとうございます．
