WordPress（ワードプレス）でチェックマークを付ける方法を解説！

2024 4/29

ワードプレスの記事内にチェックマークがついていると、分かりやすくて便利ですよね。

しかし、やり方が分からないという人も多いのではないでしょうか。

チェックマークはテーマによっては簡単につけられるものもありますが、HTMLやCSSをいじらないと作れない場合もあります。

そこで今回は、ワードプレスでチェックマークを付ける方法を解説しますので参考にしてみてください。

ワードプレスでチェックマークを付けるのに便利なサイトを紹介

チェックマークを付けるには、FontAwesomeというサイトを利用するのが便利です。

FontAwesomeを使う方法

FontAwesomeを使う方法について説明しますので順番に見ていきましょう。

FontAwesomeを使える状態にする

まずは、FontAwesomeを使える状態にするところから始めます。

header.phpのheadタグ内に以下のコードを貼り付ける必要があります。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

これでコードが読み込めるようになります。

Cocoonのテーマを使っている人は、この設定は必要ありません。

コードを取得する

次に、FontAwesomeのサイトへ行ってコードをコピーします。

アカウントなどを作る必要はなく、そのまま使えますよ。

まず、「Icon」の部分をクリックしましょう。

検索ボックスが出てくるので、今回はチェックマークを入れたいので「Check」を入力します。

その他にも、目的に応じてそれらしい文言を入力してみてください。

チェックマークを入れたいときは「Check」をクリックするとコードが表示されるのでコピーします。

コードを記事に埋め込む

コピーしたコードを記事内に埋め込んでいきましょう。

クラシックエディタの場合はワードプレスの投稿画面で、コピーしたコードを「テキストモード」に切り替えて貼り付けます。

その後、ビジュアルモードにすればコピーしたアイコンのチェックマークが表示されます。

しかし、このままだとアイコンに色もないし、文字も入っていないためモードを切り替えると消えてしまいます。

ここから、大きさや色など自分の好きなようにカスタマイズしていきましょう。

ブロックエディタでチェックマークを付ける方法

ブロックエディタでも、テーマによってはリストからチェックマークのスタイルを選択することができます。

しかしここでは、CSSを使ってチェックマークを表示させる方法を紹介していきましょう。

CSSをコピペする

ワードプレスの左側にあるメニューから、外観→テーマの編集→（子テーマの）「style.css」にCSSを貼り付けていきましょう。

/*チェックリスト*/
ul.check{
　list-style-type: none;
　padding-left:1em;
}
.check li{
　list-style: none;
　padding-left: 1.5em;
　position: relative;
}
.check li:before{
　content: "\f058";/*font awesomeのコード*/
　position: absolute;
　font-family: "font awesome 5 free";
　left: 0em;
}

こちらはSANGO以外のコードです。

SANGOのテーマを使用している人は次のコードを使用してみてください。

/*チェックリスト*/
ul.check{
　list-style-type: none;
　padding-left:1em;
}
.check li{
　list-style: none;
　padding-left: 1.5em;
　position: relative;
}
.check li:before{
　content: "\f058";/*font awesomeのコード*/
　position: absolute;
　font-family: "font awesome 5 free";
　left: 0em;
}
.sgb-box-simple__body ul.check{/*SANGOのタイトル付きボックス内の位置調整*/
　padding-left: 0px!important;