数字付きリストのカスタマイズ

リスト

数字付きリストのカスタマイズ

さて、拙テンプレートの利用者様から、このブログで使っている「数字付きリストのカスタマイズ方法」について、ご質問をいただきましたので、方法を説明いたします。
興味のある方で、「olリストタグ」を記事内で使用することがあるという方には、わりとおすすめです。
ただし、3ケタを超えるような長いリストには、適していません。2ケタまで…ですね。

手順

「見本」は、この項で使っている番号付きリストと同じものです。
  1. 「テンプレートの管理」から、CSS(スタイルシート編集)の枠へ行く。
  2. 以下のコードを、以下のリストタグ用のコードよりも下のどこかに貼る。
    listafter
    /*----------数字つきリストタグカスタマイズ用-----------*/
    .blog_entry_text ol{list-style:none;counter-reset:li;}
    .blog_entry_text ol>li{position:relative;margin-bottom:10px;padding:4px 10px;}
    .blog_entry_text ol>li::before{content:counter(li);counter-increment:li;text-align:center;display:block;position:absolute;width:27px;height:27px;line-height:27px;font-weight:bold;top:0;left:-30px;box-shadow:2px 2px 4px gray;background:#7d7b83;color:#fff;z-index:0;}
  3. 青い更新ボタンを押す。
  4. olタグを使っている記事のうちのどれかを開き、できているかどうかを確認する。できていれば、作業は終了。

お好みで色を変更

四角い枠の背景色は、ここでは紫っぽいグレーにしていますが、この色を変えたい場合には、#7d7b83を、お好みの色番号に変えてください。
色を選ぶには↓

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

関連記事

コメント

コメント(27)
おはようございます
リストタグの修正と数字付きリストのカスタマイズ、無事にできました。
ありがとうございました。

柴犬マイア

2020/05/20 03:58 URL 編集返信
Janedoe1471
Re:おはようございます
はい、拝見しました。
大変ご迷惑をおかけしました。
背景色は、お好みで変えてください^^

Janedoe1471

2020/05/20 13:42 URL 編集返信
Janedoe1471
Re:質問の結果です
そうですか、そうなると、運営側の問題ではないというなら、できるだけ解決を目指したいと思います。
同じシステムのテンプレートを使用しているのに、閑人さんの場合だけが、プロフィール画像が表示されないというのは、おかしいからです。

①まず、閑人さんが使用されているブラウザの名前と、バージョンを教えてください。
②また、今回の現象について、「いつも使っているのとは別のなんらかのブラウザ」で、試してみたかどうかを、教えてください。

Janedoe1471

2020/05/20 16:23 URL 編集返信
Re:Re:質問の結果です
恐縮します。
プラウザの意味もわからない、全くの素人です。
意味を調べると、iPadでアップしているので、Safariでしょうか。
設定で確認すると、13.4.1だと思います。
iPad以外でブログをアップしたことは、数ヶ月ありません。
以上で、よろしいでしょうか。

閑人

2020/05/20 17:40 URL 編集返信
Janedoe1471
Re:Re:Re:質問の結果です
そうでしたか、わかりました。それなら、最新バージョンのはずですね。
そうしましたら、いつも使っておられるiPad以外のなんらかのデバイスは、お持ちでしょうか。
PCかスマホです。
もしも、なければ、ご家族のスマホは、ありますか。

一度、「いつも使っておられるiPad以外のなんらかのデバイス」から、FC2にログインをしてみて、そして、ご自分のブログへコメントをしてみていただいて、プロフィール画像が出るかどうかを、試してみていただけますか。

Janedoe1471

2020/05/20 17:48 URL 編集返信
Re:Re:Re:Re:質問の結果です
PCとスマホを持っており、もしやと思いスマホで試してみましたが、結果は同じでした。
関係ないかもしれませんが、最近、ログインする時にメールアドレスを入れるとパスワードを入れなくてもログインできるんです。
また、お気に入りでブログの管理画面をアップし、ブログの確認にすると、再度ログイン画面が出たりします。

閑人

2020/05/20 18:37 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:質問の結果です
そうですか、別のデバイスからでも、同じですか。
そうしましたら、一度、再ダウンロードをしていただいて、「Listen」を、新品状態にしてみてください。
私のほうで、テストブログでやった結果では、Listenの新品を使用した状態で、コメント欄にプロフィール画像は出ています→https://blueskyblue726.blog.fc2.com/blog-entry-1.html#comment9
なお、テストブログでは、コメント欄の背景色はつけていませんが、プロフィール画像が出るかどうかと、コメント欄の背景色のカスタマイズは、両方とも同じ「ログイン判定」を元としています。

ですので、お手数ですが、再ダウンロードをしていただいて、カスタマイズ用のコード(ブロ友一覧用と、コメント欄の背景色用)を載せる前に、一度コメントをしてみていただいて、プロフィール画像が出るかどうかを試してみていただくようにお願いします。
そして、サイドバーのブロ友一覧と、コメント欄の色についてのカスタマイズについては、お手数ですが、再度カスタマイズ用のコードを積み込んでいただくように、お願いします。

閑人さんのお話によると、ログイン画面もおかしいということなので、それは明らかに、テンプレートの問題ではないはずです。
そうなると、もしも、テンプレートを再ダウンロードをして新品状態にしても、プロフィール画像が出ないということであれば、やはり運営側の問題、やはりもしかするとnetドメインに限った問題、かもしれません。
テンプレートの再ダウンロードでも解決をしなかったという場合には、やはりもう一度運営に問い合わせていただき、「ログイン画面がおかしい」ということと、「別のデバイスからやっても同じ症状が出る」ということも、合わせて報告をしていただくほうが、よろしいと思います。
テンプレートの内容の問題と、管理画面へのログインは、無関係のはずなので、そして別のデバイス=スマホでも、同じ症状が出ているなら、運営側で調べてもらわないと、原因ははっきりしないのではないかと思います。
よろしくお願いいたします。

Janedoe1471

2020/05/20 19:32 URL 編集返信
Re:Re:Re:Re:Re:Re:質問の結果です
本当に、ありがとうございます。
Listenを新品状態にするとは、テンプレートを新しく追加することですよね。
追加したテンプレートで試してみましたが、プロフィール画像は表示されませんでした。
ですので運営側の問題だと思いますが、運営側とのやりとりも素人には難しく、パスワード等を連絡し代わって調整してくれるサービスの提供者等があればお願いしますが、そんなものはないと思いますので、画像等のない状態でブログを楽しみます。
きれいなテンプレートを使わせていただき、またいろいろと教えていただき感謝しています。

閑人

2020/05/21 15:23 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:Re:質問の結果です
そうでしたか、そうなると、私の環境では、新品状態でListenを使い、ログインをしてコメントをすると、プロフィール画像が表示されますので、テンプレートの問題とは、思えないのですが、閑人さんのアカウントでは、PCでもスマホでもiPadでも、新品のテンプレートでプロフィール画像が表示されないということだと、原因は、運営側にあるのではないのかな、という気がしますが。
netドメインの場合に、運営側で何かがあるのではないか、という気がしますので、できれば、もう一度、テンプレートの問題ではないということで、運営に問い合わせをされることを、おすすめいたします。
解決まで至らなくて、申し訳ありません。

Janedoe1471

2020/05/21 15:52 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:Re:質問の結果です
本来は、ご本人さんしか、お問い合わせはできないのですが、今回の運営さんの対応は、ちょっと素っ気なさすぎると思いましたので、私のほうからも、運営さんに、お問い合わせというか、苦情をを送ってみました。
これで、もしも運営側が、何かしてくれるのだとしたら、閑人さんのほうにメールでご連絡があると思います。

Janedoe1471

2020/05/21 16:21 URL 編集返信
Re:Re:Re:Re:Re:Re:Re:Re:質問の結果です
まことにありがとうございます。
運営側から連絡があれば、報告いたします。

閑人

2020/05/21 16:26 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:Re:Re:Re:質問の結果です
はい、私も原因を知りたいので、お願いいたします^^

Janedoe1471

2020/05/21 17:37 URL 編集返信
お師匠!!
リストタグでお願いが2つあります。
一つ目は<ul>の行頭の・をもう少し大きめの●か■に変更できませんでしょうか。
行間は今のままが良いのですが、もう少し大きくして目立たせたいと思います。
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/risutotagu1.png

二つ目は<ol>の行間をもっと狭くできませんでしょうか。
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/risutotagu.png
数字つきリストタグのデザインは満足しているのですが、もう少し行間を狭められたと思ってます。

できたらで結構です。絶対ではありませんので可能ならということでお願いします。
また急いでいないのでお暇な時にでもご指導いただけませんでしょうか。
よろしくお願いします。



柴犬マイア

2020/09/17 05:29 URL 編集返信
Janedoe1471
Re:お師匠!!
そうですか、それでは、少しお時間をいただいて、研究してみますね。

Janedoe1471

2020/09/17 15:18 URL 編集返信
Janedoe1471
Re:お師匠!!
お待たせしました。
ひとつずつ行きますね。
まず、簡単なほうからで、数字つきリストの行間の調整です。
以下の画像↓のように、数字をお好みで調整してみてください。

https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/order_list.png

また、数字なしリストのほうの件は、もう少しお時間をいただいて研究してみようと思います。

Janedoe1471

2020/09/17 19:57 URL 編集返信
Janedoe1471
Re:お師匠!!
お待たせしました。
四角のアイコンに変えるだけなら簡単なのですが、四角の大きさや色などを変えるとなると、かなりややこしくなるので、時間がかかってしまってすいません^^
やりかたは、いろいろあるのですが、ここでは、1セルが複数行に渡った場合でも対応できるように、こういう感じにしてみました。
できあがり見本↓
https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/ul_list.png

以下のコードを、「数字用リストタグカスタマイズ用」の下あたりにでも、入れてみてください。
入れる位置↓
https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/ul_listlocation.png

/*--------------数字なしリストカスタマイズ用-----------------*/
.blog_entry_text ul{list-style:none;counter-reset:li;margin:1em 0 1em 50px;}
.blog_entry_text ul>li{list-style:none;position:relative;}
.blog_entry_text ul>li:before{content:counter(li);counter-increment:none;font-size:0px;display:block;position:absolute;width:13px;height:13px;top:5px;left:-25px;background:#008080;}
.relate_ul .relate_li:before{display:none;}

そして、
①四角の大きさの調整は、13pxの13をお好みで変えてみてください。
②色の調整は、background:#008080;の#008080を、お好みの色番号に変えてみてください。
③四角と右側の文字の間の余白の調整については、left:-25px;の25をお好みで変えてみてください。
④四角の上からの位置の調整については、top:5px;の5を、お好みで変えてみてください。
⑤リスト全体の左からの位置については、margin:1em 0 1em 50px;の50を、お好みで変えてみてください。

よろしくお願いします。

Janedoe1471

2020/09/17 21:41 URL 編集返信
Janedoe1471
Re:Re:お師匠!!
すいません、申し忘れていましたが、もしも四角ではなくて丸にしたい場合には、#008080; の直後に、border-radius:50%; を、入れてみてください。

Janedoe1471

2020/09/18 00:37 URL 編集返信
Re:Re:Re:お師匠!!
ありがとうございます。変更してみました。
①数字なしリスト<ul>、私のイメージしたものとピッタリです。
本当にありがとうございます。
②数字つきリスト<ol>ですが、行頭の数字を少し小さくしたいのですが、どこを修正すればよろしいでしょうか?
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/risutotagu2354.png
すみません。ご指導お願いします。

柴犬マイア

2020/09/18 09:17 URL 編集返信
Janedoe1471
Re:Re:Re:Re:お師匠!!
ulのほう、気に入っていただけて、よかったです^^
olの数字の大きさについては、テストブログのほうで確認してみますので、しばらくお待ちください。

Janedoe1471

2020/09/18 15:50 URL 編集返信
Janedoe1471
Re:Re:Re:Re:お師匠!!
お待たせしました。
数字の大きさを変えるには、以下の画像の位置に、
font-size:14px;
というふうに、付け加えてみてください。
大きさの調整は、14を変えて、試してみてください。

https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/fontsize_20200918163439774.png

もともとは、大きさは何も指定していないので、本文の文字の大きさと同じ16pxになっています。
ですので、それよりも小さくするなら、16よりも小さい数字を入れてみてください。
よろしくお願いします。

Janedoe1471

2020/09/18 16:37 URL 編集返信
Re:Re:Re:Re:Re:お師匠!!
ありがとうございます。
ご指導いただき試してみました。3か所数字をいじりました。
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/maiabesuto50.png
結果、以下の感じになりました。行間はベストなんですが、枠が1に変更したのにあまり変わってないような気がします。
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/maiabesuto50.png
すみません、無理ならこれでも良いかなと思ってます。

柴犬マイア

2020/09/18 18:04 URL 編集返信
Re:Re:Re:Re:Re:お師匠!!
すみません。貼り間違いしました。
結果、以下の感じになりました。行間はベストなんですが、枠が1に変更したのにあまり変わってないような気がします。
https://blog-imgs-141.fc2.com/w/y/2/wy2lo675gjj3/20200918180118460.png

柴犬マイア

2020/09/18 18:07 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:お師匠!!
はい、font-size:14px; が、} の外になってしまっていることが原因です。
以下の画像のとおりです。
https://blog-imgs-138.fc2.com/j/a/n/janedoe1471/ollist2.png

font-sizeは、1pxだと小さすぎますので、14pxくらいからじょじょに下げていってみて、ちょうどいいサイズを選ぶとよいと思います。

Janedoe1471

2020/09/18 18:26 URL 編集返信
Re:Re:Re:Re:Re:Re:Re:お師匠!!
ありがとうございます。
ご指示通り修正しました。
14PXを10PXにしましたが、数字は小さくなるのですが、数字を囲む枠は小さくならないみたいです。
https://wy2lo675gjj3.blog.fc2.com/blog-entry-690.html

柴犬マイア

2020/09/18 18:46 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:Re:Re:お師匠!!
枠の大きさですね。
それは、自然になっているのではなくて、人工的に設定してありますので、枠の大きさを変えるには、けっこういろんなところを変える必要があります。
https://blog-imgs-140.fc2.com/b/l/u/blueskyblue726/listol3.png

.blog_entry_text ol>li::before のところを、以下のように変えると、けっこう自然な感じで少し小さくはなるかと思います。

.blog_entry_text ol>li::before{content:counter(li);counter-increment:li;text-align:center;display:block;position:absolute;width:20px;height:20px;line-height:20px;font-weight:bold;top:5px;left:-23px;box-shadow:2px 2px 4px gray;background:#7d7b83;color:#fff;z-index:0;font-size:10px;list-style-type:none;}

サンプル画像↓
https://blog-imgs-140.fc2.com/b/l/u/blueskyblue726/sample.png

そして、大きさを変えるのならば、最後にlist-style-type:none;を、追加してください。
あとは、これで大きさがよければ、これでいいのですが、もっと調整をしたい場合には、各部分の数字を、お好みで調整してみてください。

Janedoe1471

2020/09/18 19:25 URL 編集返信
Re:Re:Re:Re:Re:Re:Re:Re:Re:お師匠!!
お師匠!!ホンマにありがとうございます。
数字つきリストタグも、私のイメージ通りの枠の大きさと行間になりました。
https://wy2lo675gjj3.blog.fc2.com/blog-entry-690.html
https://wy2lo675gjj3.blog.fc2.com/blog-entry-892.html
いろいろお手数をおかけしまして、本当に申し訳ありません。
感謝・感謝です。ありがとうございました。

柴犬マイア

2020/09/18 19:49 URL 編集返信
Janedoe1471
Re:Re:Re:Re:Re:Re:Re:Re:Re:Re:お師匠!!
いえいえ、このカスタマイズは、もともとややこしいことをしてあるので、何かを変えるとなると、あちこち関係してしまうだけです^^
ちなみに、数字つきリストのほうの「上からの位置」が、下すぎるようでしたら、top:5px; の5を、調整してみてください。数字を少なくすれば、もっと上に行きます。
あとは、だいたい要領は理解されたと思うので、お好みでどんどん調整してください^^

Janedoe1471

2020/09/18 20:12 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム