【Cocoon】リストデザインCSS

記事執筆者

ぽてサポートのメリット

• CSSを知らなくてOK！
• SEO対策済みです
• サイトスピードまでサポート
• ブログイラスト入手方法付き
• SEO対策完全ロードマップ付き
• Lineで一人一人サポートしていきます

無料版デザインに含まれていないもの

• 文字サイズ・文字色・文字間
• 一部css
• 配色ごとの心理効果マニュアル
• ブログ相談、Lineサポート

サイトレイアウトのCSSをコピペしていない方は、先に下記記事をお読みください。

今回は、リストをCSSでデザインします。

この記事の流れ

リストデザインCSS

すること

• テーマファイルをクリック
• CSSをコピペ

1：外観　→テーマファイルエディター　をクリック

2：テーマファイルエディターにCSSをコピペします。

注意

• できればバックアップすること
• CocoonChildのstyle.cssにコピペすること

コピペ用

/************************************
****　リスト
************************************/
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
background: #F7F7F7;/*背景色*/
line-height:2;
border-radius: 4px;
border:1.5px dashed;
border-color:#75b1a9; /*枠の色*/
padding: 1.5em;
padding-left:3em;
}
.article ul li:not(.toc-list li,.toc-list ul li,.faq li){
margin: 0em;
}
@media (max-width:600px){
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
padding-left:2.5em;
}
}
.article li ul{
padding-left:1em;
}
/************************************
****　番号付きリスト
************************************/
.article ol:not(li ol,.toc-list,dd ol,.widget ol){
background: #F7F7F7;/*背景色*/
line-height:2;
border-radius: 4px;
border:1.5px dashed;
border-color:#75b1a9; /*枠の色*/
padding: 1.5em;
padding-left:3em;
}
.article ol li:not(.toc-list li,.toc-list ol li,.faq li){
margin: 0em;
}
@media (max-width:600px){
.article ol:not(li ol,.toc-list,dd ol,.widget ol){
padding-left:2.5em;
}
}
.article li ol{
padding-left:1em;
}
/************************************
****　記述リスト
************************************/
.article dl:not(.faq){
background: #F7F7F7;/*背景色*/
line-height:2;
border-radius: 4px;
border:1.5px dashed;
border-color:#75b1a9; /*枠の色*/
padding: 1.5em;
margin: 3em 0;
}
.article dt:not(.faq-question)::before{
content: '✔ ';
font-size: 20px;
color: #75b1a9;/*✔の色*/
}
.article dt{
	font-weight:bold;
}
.article dd {
margin-left:5px;
}
.article dd ul,.article dd ol{
padding-left: 1.2em;
margin-bottom: 0;
}
.article dl p{
margin-bottom: 0;
}
@media (max-width:600px){
.article dd ul,.article dd ol{
padding-left: .9em;
}
}

以上でリストのデザインは完了です。

リストデザイン｜まとめ

テーマファイルエディターをいじるので、重要なコードを消さないように気をつけてください。

• background: #F7F7F7;/*背景色*/
• border-color:#75b1a9; /*枠の色*/
• color: #75b1a9;/*✔の色*/

上記のcss変更で、色を変えられます。

この記事は以上です。

他の場所のCSSも下記記事にまとめています。

アフィリエイト作成〜収益化｜よくある質問 Q＆A

おすすめサーバーロリポップ｜会社情報・運営情報

ロリポップ会社情報・運営情報

• サービス名：ロリポップ（LOLIPOP)
• 運営会社：GMOペパボ株式会社
• 所在地：〒150-8512   東京都渋谷区桜丘町26番1号セルリアンタワー
• サービス内容：フリーランス向け金融支援サービス
• 代表：佐藤 健太郎

2003年から運営されており、大手で安心できますし、サーバーのスピードもトップクラスです。

アフィリエイト稼ぎ方｜効率重視

アフィリエイトサイト｜完全効率重視

• 手順1　wordpressを導入
• 手順2　ASPにて自分が宣伝しやすい商品を選択
• 手順3　商品が決まったら、サイトの構成を考える
• 手順4　記事内容を充実させて検索順位をあげる

ブログのロードマップを作成しました。ぜひ参考にしてください。

このページで解説した内容

この記事は以上です。