どうもこんにちは、りゅう(@ryuta_blog)です。
今回はリストスタイルを簡単にカスタマイズしてみます!


デフォルトがかるく右寄せだったので、左に寄せてみました。
あとマークも大きくして、よりハッキリした印象にしてみたよ!
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
JINをカスタマイズする前に!
- カスタマイズする前はなるべくバックアップをとっておいてください。
- カスタマイズは必ず子テーマから行ってください(親テーマを編集してしまうと、アップデートした際にカスタマイズが全て消えます)。
▼子テーマを導入していない方は、以下からダウンロードしましょう。
▼子テーマって何や?という方はまずは下記を読みましょう。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

【JIN カスタマイズ】リストスタイルを簡単にアレンジ
style.cssに以下のコードを追加してください。
/*===============================================
リストスタイル 左寄せ&マークを大きくする
===============================================*/
.cps-post-main ul{
padding-left: 0px; /*左に寄せる*/
}
.cps-post-main ol{
padding-left: 0px; /*左に寄せる*/
}
.cps-post-main ul li {
margin-bottom: 0.7em; /*リストの行間*/
padding: 0em 0px 0em 25px; /*マークと文字のスペース*/
}
.cps-post-main ul:not([class]) li:before, .cps-post-main table ul:not([class]) li:before {
width: 9px; /*マークの大きさ 横*/
height: 9px; /*マークの大きさ 縦*/
}
カスタマイズがうまく反映されない場合
一度ページのキャッシュを空にしてから、再度ページを更新してみてください。
- safari:「開発」タブから「ページのキャッシュを空にする」をクリック
- InternetExplorer:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
- Chrome:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック
まとめ
おわり!かんたん!
その場合は、コピペした部分を削除すれば、元に戻るかと思います。
▼こちらのカスタマイズもおすすめ!




プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか?
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック!