sikaku

response

message

  • parody01にて下記二点の改変をしたい
    • 既読表記から数字を消す
    • HEAD内記述が固定の機能内でページ毎に配色を変更

response

再度のご連絡ありがとうございます。　前回分は解決されたようで何よりです。　以下本件分になります。

code edit

既読表記から数字を消す

デフォルトでつかないようにしています。　<li class="kdkset" 省略></li>の記述以降にのみ数字表記有に切り替えるよう設定しているので、該当記述を消してみてください。

基本数字表記有で一部のみ無しにしたい場合

head,bodyそれぞれ下記の編集をしてください。

head
head
  1. .talk > li.kdk > div > p:last-child::before {
  2. content: '既読';
  3. }

を.talk > li.kdk > div > p:last-child::before ,.talk > li.kdk_nonum > div > p:last-child::before {に置き換え

body

数値無しにしたい発言内容の、kdkをkdk_nonumに変更

ページ毎に配色を変える

やや煩雑な手順が必要です。

head,bodyでそれぞれ指示通りの編集を行ってください。

head

下記三点の編集をしてください。

１

を下記と置き換え

head内
  1. /* === color === */
  4. /*　ベース　*/
  6. body::before {
  7. background-color: var(--base-bg,#cccccc);/* PC向け背景色 */
  8. }
  10. body ,.text::after ,#layout::before {
  11. background-color: var(--talk-bg,#849ec0);/* トーク部分背景色 */
  12. }
  14. body ,li > div > p:last-child {
  15. color: var(--talk-fc,#000000);/* 文字色 */
  16. }
  19. /*　リンク文字色　*/
  21. a:link { color: var(--link-l-fc,#0000ff); }/* 通常 */
  22. a:visited { color: var(--link-v-fc,#800080); }/* 訪問済 */
  23. a:hover { color: var(--link-h-fc,#ffff00); }/* 選択時 */
  24. a:active { color: var(--link-a-fc,#ff0000); }/* クリック時 */
  27. /* リンク装飾のリセット */
  29. .button a ,.talk .stamp a ,.talk .image a {
  30. text-decoration: none;
  31. }
  34. /*　ヘッダー　*/
  36. header {
  37. background-color: var(--header-bg,#464e66);/* 背景色 */
  38. color: var(--header-fc,#ffffff);/* 文字色 */
  39. }
  42. /*　フッター　*/
  44. footer {
  45. background-color: var(--footer-bg,#ffffff);/* 背景色 */
  46. color: var(--footer-fc,#888da1);/* 文字色 */
  47. }
  50. /* フッター内テキストエリア */
  52. footer .textarea {
  53. background-color: var(--textarea-bg,#f6f6f6);/* 背景色 */
  54. color: var(--textarea-fc,#000000);/* 文字色 */
  55. box-shadow: 0 0 0 1px var(--textarea-stroke,#e8e6ec);/* 枠線 */
  56. }
  59. /*　日付,区切り　*/
  61. .talk > .system p {
  62. background-color: var(--talk-s-bg,rgba(0,0,0,0.2));/* 背景色 */
  63. color: var(--talk-s-fc,#ffffff);/* 文字色 */
  64. }
  67. /*　左寄せふきだし　*/
  69. .talk > .left > .text {
  70. background-color: var(--talk-l-bg,#ffffff);/* 背景色 */
  71. color: var(--talk-l-fc,#000000);/* 文字色 */
  72. }
  75. /*　右寄せふきだし　*/
  77. .talk > .right > .text {
  78. background-color: var(--talk-r-bg,#baf291);/* 背景色 */
  79. color: var(--talk-r-fc,#000000);/* 文字色 */
  80. }
  • 各行カラーコードで、色の変更をしない場合のデフォルト配色を設定できます。
  • JavaScript無効環境だとここでの設定が採用されるので、その点加味して編集を。
２

head内style要素間の、どこか自分が管理しやすい箇所に下記を追加

追加CSS
  1. .colorA {
  2. /*　ベース　*/
  3. --base-bg: #cccccc;/* PC向け背景色 */
  4. --talk-bg: #333333;/* トーク部分背景色 */
  5. --talk-fc: #cccccc;/* 文字色 */
  7. /*　リンク文字色　*/
  8. --link-l-fc: #ffffff;/* 通常 */
  9. --link-v-fc: #ffffff;/* 訪問済 */
  10. --link-h-fc: #eeeeee;/* 選択時 */
  11. --link-a-fc: #000000;/* クリック時 */
  13. /* ヘッダー */
  14. --header-bg: #000000;/* 背景色 */
  15. --header-fc: #ffffff;/* 文字色 */
  17. /*　フッター　*/
  18. --footer-bg: #666666;/* 背景色 */
  19. --footer-fc: #ffffff;/* 文字色 */
  21. /* フッター内テキストエリア */
  22. --textarea-bg: #ffffff;/* 背景色 */
  23. --textarea-fc: #000000;/* 文字色 */
  24. --textarea-stroke: transparent;/* 枠線 */
  26. /*　日付,区切り　*/
  27. --talk-s-bg: #000000;/* 背景色 */
  28. --talk-s-fc: #ffffff;/* 文字色 */
  30. /*　左寄せふきだし　*/
  31. --talk-l-bg: #ffffff;/* 背景色 */
  32. --talk-l-fc: #000000;/* 文字色 */
  34. /*　右寄せふきだし　*/
  35. --talk-r-bg: #000000;/* 背景色 */
  36. --talk-r-fc: #ffffff;/* 文字色 */
  37. }
  • 上記で配色パターン１セット分です。
  • colorA部分と、各行カラーコードをお好きなように編集した上で、上記を必要数分足してください。
  • デフォルトと同色で良い箇所は、行ごと削除して問題有りません。
３

head末尾(style要素外)に下記を追加

head末尾
  1. <script>
  2. function addStyle(css){
  3. var style = document.createElement('style');
  4. style.appendChild(document.createTextNode(css));
  5. document.head.appendChild(style);
  6. }
  7. function selectStyle(name){
  8. document.body.classList.add(name);
  9. }
  10. </script>
body

状況に合わせて下記どちらかを追加してください。記述はページ内どこでも問題ありませんが、可能な限り上部を推奨します。

headに追加した配色パターンを利用
JavaScript
  1. <script>
  2. selectStyle('colorA');
  3. </script>
  • colorA部分でhead編集２の追加CSSの配色パターンセットと紐づけています。　同一文字列を記述してください。
そのページ限りの配色設定をする
JavaScript
  1. <script>
  2. addStyle(`head編集２追加CSSをここに記述`);
  3. </script>
  • head編集２追加CSSの、.colorAをbodyと置き換えた上で記述してください。