【コピペで楽々】どんなサイトにも馴染むシンプルなリストカスタマイズ

リストデザインを作ったので公開します。利用するときは、見たまま編集で作成したリストを次のように修正するとデザインを変更できます。

HTML編集をクリック
リストのタグ<ul>を探す
<ul class="list_appeal">または<ul class="list_point">と変更する

リストデザインその1：シンプルなデザイン

りんご
ごりら
らっぱ

/****************list_appealのリストデザイン*****************/
.entry-content .list_appeal{

  padding: 1.5em 1.5em 1.5em 3.3em;
  position: relative;
  background: transparent;
  border: 1px solid #f2cf01;
}

.entry-content .list_appeal li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.entry-content .list_appeal li:before {
  font-family: FontAwesome;
  content: "\f0da";
  position: absolute;
  left : 2em; /*左端からのアイコンまで*/
  color: #c93a40; /*アイコン色*/
}

/*********************************/

リストデザインその2：ポイントを強調したいデザイン

りんご
ごりら
らっぱ

/****************list_pointのリストデザイン*****************/
.entry-content .list_point{

  padding: 1.5em 1.5em 1.5em 3.3em;
  position: relative;
  background: transparent;
  border: 1px solid #d5848b;
}

.entry-content .list_point li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.entry-content .list_point:before {
  font-family: FontAwesome;

  content: "Check";
  display:block;
  background:#d5848b;
  padding:0 0.5em;
  position: absolute;
  top:-1em;
  left : 1em; /*左端からのアイコンまで*/
  color: white; /*アイコン色*/
  font-size:14px;
}

.entry-content .list_point li:before {
  font-family: FontAwesome;
  content: "\f0da";
  position: absolute;
  left : 2em; /*左端からのアイコンまで*/
  color: #d5848b; /*アイコン色*/
}

/*********************************/

以上です。シンプルですね。