コメントジェネレーター改良版を作成しました。
設定ファイルではなくCSSを使用してデザイン作成できます。
デザイン自由度が高く、透過や半透明、グラデーションなども設定できます。
ファイルを上書きしないので気に入らなかったら2つのファイルを削除するだけでもとに戻せます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 コメントジェネレーターFruct</title>
<!-- ver 0.0.1 -->
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<ul id="comments"></ul>
</div>
<script>
/*設定*/
/************************************************/
const COMMENT_MAX = 5; //コメントの最大表示数
const SERVICE_NAME = 1; //サービス名表示
const HANDLE_ORDER = 1; //ハンドルネーム表示
const SLASH_COMMENT = 0; //スラッシュから始まるコメントを表示
const EP_COMMENT = 0; //!から始まるコメントを表示
const BSP_COMMENT = 0; //バックスペースコメントを表示
const ALLOW_URL = 0; //コメントに含まれるURLを表示
const OWNER_COMMENT = 1; //オーナーコメント
const NO_HANDLE_TYPE = 0; //ハンドルネームなしコメントのnumberを表示
const NO_HANDLE_NAME = "名無し"; //ハンドルネームなし時の表示名
/************************************************/
1→ON、0→オフ
コメントの表示数とコメント処理
このファイルの設定でデザインを決める。自由度無限なので説明しきれません。
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
/*↑追加フォントインポート*/
/* ここではデザインのみ設定できる*/
/* 最低限の設定のみ記述してる */
/* さらなるコテコテエフェクトは追記が必要 */
/* コメントの最大数とかはコメジェネ本体側で設定 */
/* ボディ。ウィンドウ全体という認識でOK */
body{
margin: 0;/*謎の余白を削除*/
background-color: transparent;/*背景色transparent(透明)*/
transform: translateZ(0);/*魔法*/
overflow: hidden;/*スクロールバーを消す*/
}
/* コメントリストの集合体 */
#comments{
margin: 3px;/*周りの余白。0だと文字がギリギリに引っ付くので少し必要。基本これだけで調整*/
padding: 0;/*周りの余白2。デフォルトだと謎の余白があって邪魔なので0を指定してる*/
color: white;/*文字色*/
font-family: 'Kosugi Maru', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;/*PCにあるフォントを使う。左優先。Googleフォントとかから落としてきても使える*/
font-weight: normal;/*太字*/
font-size: large;/*文字サイズ*/
list-style: none;/*リストの前に表示する点(・)、noneは非表示*/
line-height: 1.5em;/*行間*/
/*white-space: pre-wrap;/*改行を無効化*/
-webkit-text-stroke: 0px black;/*文字の輪郭線。1pxは太さ。blackは色。*/
text-shadow: 1px 1px 3px black;/*文字のシャドウ。1pxは距離。3pxはぼかし。blackは色。*/
}
#comments li{
margin: 3px;/*周りの余白*/
background: linear-gradient(90deg, rgba(0,0,0,0.8), transparent);/*背景色transparent(透明)*/
/*border-radius: 3px;*/
box-shadow: 1px 1px 3px black;/*ボックスのシャドウ。1pxは距離。3pxはぼかし。blackは色。*/
display: -webkit-box;/*Webkitのみ*/
-webkit-line-clamp: 2;/*行数*/
-webkit-box-orient: vertical;
overflow: hidden;
animation: anim 1s;/*コメントの表示アニメーション。1秒で表示*/
transition-timing-function : ease-out;/*アニメーションの動き。ease-outは最後にゆっくりと止まる*/
}
/*0%から100%に変化する*/
@keyframes anim {
0% {
transform: translateX(300px);
}
80% {
transform: translateX(0px);
}
91% {
transform: translateX(5px);
}
100% {
transform: translateX(0px);
}
}
黒→透明にグラデーションをしてます。少し透過してます。
動きは横から流れて少し跳ねるようにしてます。
デフォルトでも大体の場面で使えるようにしてます。
コメントを下から表示する場合は下記のcssをstyle.cssの最下部に追記
左下にコメント欄を表示する場合は設定することをおすすめする。
div{
display: flex;
align-items: flex-end;
height: 100vh;
}
style.cssはVSCodeで編集することを強くおすすめします。
さらなるコテコテエフェクトは追記が必要。
Kosugi Maru、Merriweatherをデフォルトでインポートしてます。
GoogleFontsで好きなフォントを追加できます。
@importはページ最上部でしか動作しません。
いくつか変更例を紹介しておきます。ご自由にお使いください。
#comments li:nth-child(even){
background: linear-gradient(350deg, transparent, gray);
}
#comments li{
background: linear-gradient(170deg, transparent, gray);
border-radius: 3px;
box-shadow: 1px 1px 3px black;
animation: anim 1s;/*コメントの表示アニメーション。1秒で表示*/
transition-timing-function : ease-out;/*アニメーションの動き。ease-outは最後にゆっくりと止まる*/
}
/*0%から100%に変化する*/
@keyframes anim {
0% {
transform: translateX(300px);
}
100% {
transform: translateX(0px);
}
}
| バージョン | 更新内容 | OBS | Xsplit |
| v0.0.2 |
|
hcg_v0.0.2 | Xsplit_v0.0.2 |
| v0.0.1 | hcg | hcg_xsplit |