最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

先頭の記号を画像に変更して,箇条書きをかっこよくカスタマイズする方法

本記事では上画像のように箇条書きの先頭にある記号を変更して,かっこいい箇条書きに変更する方法について説明します.先頭記号の画像をパワポなどで作成してから,スタイルシートで新しい箇条書きの設定を行うという流れになります.

箇条書きの先頭に使う画像を作成する

記事を訪問してくれた方にじっくり読んでもらうためには,記事のリズムが非常に重要になります.

黒い文字がずっと淡々と続く記事はとてもリズムが悪いです.

記事のリズムを変えるには

  • 文字の色を変える
  • 行間を空ける
  • 文字の背景に色をつける
  • 箇条書きを入れる

などが重要です.今も箇条書きを使いました.

元の箇条書きのスタイル

  • 文字の色を変える
  • 行間を空ける
  • 文字の背景に色をつける
  • 箇条書きを入れる

もそこまで悪くはないのですが,記事のリズムを作るにはもう少し,色や行間を工夫したいと思います.

まずは箇条書きの先頭の画像を作成します.

①パワーポイントなどで先頭記号を好きな感じに作成します.私が先ほど使用した緑の丸にチェックが入っている画像は,丸と棒を組み合わせて描いています.

このときに,最初から小さく作るのは難しいのでサイズは考えず大きめの画像を作成します.

②大きく作った画像をpng形式で保存した後,再度パワーポイントなどに貼り付けてから,大きさを変更して小さくします.大きさとしては,縦0.5cmから0.3cmくらいが良いと思います.

さきほどの緑の丸は縦0.5cmで作成しました.そしてこの小さくした画像を再度png形式で保存します.

③作成した画像をWordPressにアップロードします.管理画面から「メディア→新規追加」を選択し,作成した画像をアップします.

161120_1

以上で先頭に使用する画像の準備が完了です.

新たな箇条書きのスタイルシートを作成します

作成した画像を使用する新たな箇条書きをスタイルシートに定義します.

①管理画面から「外観→テーマの編集」を選択します.

161118_2

②テーマがSimplicity2 child: スタイルシート(style.css)になっているのを確認し,一番最後に以下のコードを貼り付けます.

今回はバックグラウンドに画像を入れることで箇条書きを実現させています.

各行の意味はコメント欄をご覧ください.

箇条書きの先頭画像そのものを list-style-image: で変更する方法もあるのですが,その方法ではうまく画像の高さが調整できず,先頭画像とリストの文字の高さがずれてしまい(私の力では修正できなかったので),今回の手法を採用しました.

記事内で今回定義した箇条書きを使用するには

以上で定義した箇条書きを実際に使用する方法を説明します.

①WordPressの記事投稿画面で,通常の箇条書きを作成します.

161120_2

②記事編集画面の右上のタブから,編集モード「ビジュアル」を「テキスト」に変更します.

③箇条書きの部分は<ul>から始まっているのですが,この部分を

に書き換えます.このclass名はスタイルシートで定義した名前を使用します.

161120_3

161120_4

④編集モードを元のビジュアルに戻します.ビジュアルに戻しても箇条書きのマークは変更されていませんが,実際の記事では変更されています.

※実際の記事を見ても箇条書きが作成した画像版に切り替わっていない場合は,2つの可能性があります.1つ目はスタイルシートのコードで{}のどちらが抜けていたり,全角スペースが入っている可能性です.2つ目はブラウザのキャッシュがあるために,変更したスタイルシートが反映されていない可能性です.後者の場合の修正方法は以下の過去記事をご覧ください.
2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法
本記事では,グローバルナビのデザインを変更する方法を説明します.上記のアイキャッチ画像の上の状態から下の状態へ変更します.今回グロー...

以上により箇条書きが変更されます.

161120_5

先頭の記号を画像に変更して,かっこいい箇条書きにする方法の紹介でした.

ご一読いただきありがとうございます.