おはようございます！
皆さん、ブログを書くときにリストにして書いたりしますか？
ブログは見やすくした方が読者の方が読んでくれるとのことなので、リストにして書くようにしています。
簡単にリスト表示を見やすくする方法
リストを見やすくするのにいちいち
- リストで書く
- それをボックスで囲む
というようにしていたのですが、モブログ派（スマホからブログを書くこと）の私には面倒くさい。
ということで見つけた、リストを書くときに自動的にボックスで囲まれる仕様のカスタマイズ！
「コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに」の中の「2-3.チェックリスト」を参考にしました。
こんな感じに。
参考にして、私のブログ用にカスタマイズしたコードはこちら ↓↓
/* リスト */
.post-area ul {
border: solid 2px #fb93ac;
padding: 1em 1em 1em 2.3em !important;
position: relative;
}
.post-area ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;/*ポチ消す*/
}
.post-area ul li:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #fb93ac; /*アイコン色*/
}
※カスタマイズする前には必ず、バックアップを取りましょう！失敗すると元に戻せません😭
こちらのコードを「テーマ編集」→「HTML編集」から、「/* リスト */」という項目を見つける。
私のブログで言うと、979段目のところ。
.post-area ul li {
margin-left: 30px;
}
.post-area ul {
padding-left: 0;
margin-left: 1.5em;
}
このコードを、先ほどコピーしたコードと置き換えましょう。
目次とSNSボタンの不具合を直す
リスト表示をカスタマイズすると、目次とSNSボタンにも適用されるみたい😂
ということで、不具合を直すためのコードを作成。
目次の修正
「テーマ編集」→「HTML編集」で「目次」の項目を見つける
「Ctrl＋f」で「目次」を探す。
/* 目次タイトル */ の下に
#toc ul {
border: none !important;}
このコードを追加します。（上記の画像では既に追加してあるものになります。）
SNSボタンの修整
次は、「SNS」を探します。
.share-are 〜 の上に
.share-area ul {
border: none !important;}
.share-area ul li:before {
display: none !important;}
というコードを追加します。
これで完成！
ボックスで囲まれたolリストにする
ついでに「数字のリスト」も自動的にボックスで囲まれる仕様にしました！
「コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに」の「3-1.円で番号を囲う」のコードをそのままコピペしています。
そのコードはこちら ↓↓
/* 番号付きリスト */
.post-area ol {
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:1em !important;
background: #f5faff;
}
.post-area ol li {
position: relative;
padding-left: 30px;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 30px;
}
.post-area ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*以下数字のデザイン変える*/
display:inline-block;
background: #5c9ee7;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
/*以下 上下中央寄せのため*/
top: 50%;
-webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
「番号付きリスト」を探します。
番号付きリストの
.post-area ol li {
margin-left: 30px;
padding: 0;
}
.post-area ol {
padding-left: 0;
margin-left: 1.8em;
}
と先ほどコピーしたコードを上のものと置き換えます。
これだけでカッコいい表示に変わりました！
簡単に読みやすくなりました💕
しかもスマホからでもカスタマイズできました。良かったです。
皆さんも気軽に、楽しくブログを続けていきましょう☺️✨
コメントを投稿
別ページに移動します