CSS on MoeJue's Blog

AEはできませんが、コードは書けます

Sat, 23 Aug 2025 12:29:01 +0000

✨ 緒山まひろの隠れ家 ✨

🌸 緒山まひろの隠れ家へようこそ 🌸

わぁ！私の秘密基地を見つけちゃったんだね！(*≧ω≦)

ここは緒山まひろの個人サイトだよ。かわいいアニメーションと面白いコンテンツがいっぱい！ここでは、私のお気に入りのアニメ、マンガ、ゲーム、そして日常のささやかな幸せをシェアしていくね～

💕 私について 💕

私は緒山まひろ。エロゲを愛する引きこもりのダメニートだよ。アニメ、マンガ、ライトノベル、そしてかわいいものが大好き！好きな色はピンクと水色！

  ∩∩
（･ω･）  <- 私だよ！
＿|　⊃／(＿＿
／ └-(＿＿＿／

🎀 サイトコンテンツ 🎀

🌟 素敵なアニメーション
📚 私のプライベートフォト
🎵 おすすめの音楽
📷 日常のワンシーン

🌈 関連リンク 🌈

🎭 デモ: https://mahiro.moejue.cn/
🏠 個人ブログ: https://MoeJue.cn/
🐱 GitHub: https://github.com/iAJue/Mahiro
📧 公式サイト: https://onimai.jp/

📝 著作権情報 📝

このサイトは @Moejue によってデザイン・開発されました
サイト内で使用されているすべてのアニメーション、マンガの画像、キャラクター、および関連コンテンツの著作権は、原作者（ねことうふ）およびその発行元（スタジオバインド、一迅社）に帰属します
著作権侵害の可能性がある場合は、上記の連絡先までお知らせください。速やかに関連コンテンツを削除いたします
GNU GENERAL PUBLIC LICENSE Version 2
Copyright © 2025 MoeJue. All rights reserved.

💌 スペシャルサンクス 💌

緒山まひろを好きでいてくれるみんな、ありがとう！(●’◡’●)

# 俺の二次元アルバムが帰ってきた

Fri, 08 Nov 2024 09:52:39 +0000

最初のギャラリーから画像アップローダー、そして現在のアルバムに至るまで、私の画像に対するこだわりは、もはや世紀をまたぐほどのものです。ギャラリーの画像は七牛雲（Qiniu Cloud）に保存していましたが、後にトラフィックを不正に消費されたため閉鎖しました。画像アップローダーは現在、ブログ用の画像アップロードサービスとして利用しています。アルバムは、スマートフォンのアルバムのような概念で、画像も動画も保存できます。徐々に完成度が高まってきています。

ここ数日で、普段保存している動画や画像などをサーバーにアップロードし、UIとAPIを作成して、ついでにオープンソースとして公開しました。（私は熱心なオープンソース支持者でありたいと思っています）

私の二次元アルバムフロントエンドUI

ここは阿珏ちゃん（A-Jue-chan）のプライベートアルバムで、普段収集した画像や、各プラットフォームで「いいね」や「お気に入り」登録した動画を保存しています。
Bilibili、YouTube、TikTok、X、Facebook、pixivなどのプラットフォームの動画や画像を含みますが、これらに限定されません。関連するデータ情報の著作権はすべて原作者に帰属します。
データは不定期に手動で更新されます。特定の画像や動画が必要な場合は、直接阿珏ちゃんにご連絡ください。

プレビュー

https://photo.moejue.cn

特徴

画像と動画の表示をサポート
アルバムの表示をサポート
アルバムのパスワード保護をサポート
18+保護をサポート
検索機能をサポート

Todo

エフェクト表示の最適化
UIの滑らかさの最適化

インストール手順

リポジトリをローカルにクローンします：
```
git clone https://github.com/iAJue/PhotoGallery.git
```
プロジェクトディレクトリに移動します：
```
cd PhotoGallery
```
依存関係をインストールします：
```
npm install
```
プロジェクトをビルドします
```
npm run build
```

バックエンドAPI

参考用 https://github.com/iAJue/wasteCode/tree/main/photo

返却データ形式

写真API

[
{
    "date": "\u6628\u5929",
    "items": [
        {
            "src": "https:\/\/moejuevideo.pages.dev\/file\/1730957555106_ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "alt": "ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "isVideo": false,
            "duration": null
        }
    ]
}
]

アルバムAPI

[
{
    "folder_id": "3",
    "folder_name": "images",
    "created_at": "2024-11-07 15:09:06",
    "photo_count": "61",
    "latest_image": "https:\/\/moejuevideo.pages.dev\/file\/1730963758087_GZIaBGlbAAALz_E.jpeg",
    "attribute": "2",
    "ispassword": true
}
]

ランダムAPI

ネット回線速度の速遅による違い

Sat, 07 Nov 2020 14:09:07 +0000

ネット速度の速遅による違いについて

ネットワークの普及に伴い、ユーザーは応答速度の速遅をますます重視するようになっています。ウェブサイトが速ければ速いほど、ユーザーの定着率とコンバージョン率も高まります。簡単に言えば、スピードアップが重要です！ウェブサイトの速度に影響を与える要因はたくさんあります。例えば………………….

真面目な話は私のスタイルではありません。さて、私のパフォーマンスをご覧ください。 アイデアの起源：最初は純粋なCSSで実装することを考えました。背景画像をbase64エンコードしてbackground-imageに直接配置すれば、背景画像がウェブページと一緒に読み込まれる効果が得られるだろうと。

ステップ1：まず、事前に準備した素材画像を処理し、水着と水着のスカートを脱がせますステップ2：新しいHTMLファイルを作成しますステップ3：

完了。。すると問題が見つかりました。私の背景画像ファイルサイズが12MBに達していたため、エンコード後の文字列が大きすぎ、ウェブページの読み込みが重く遅くなり、まったくユーザー体験がありませんでした。さらに、この方法で読み込まれた背景画像は突然表示され、唐突すぎて効果が良くありませんでした。

その後、変更しました： CSS+JavaScriptで実装することにしました。background-imageで背景画像を直接読み込むことで、徐々に表示される効果が得られ、背景画像の読み込みが完了した後、JSで動的に画像を挿入します。

思わず一言漏らしました。「なんてひどいネットワークだ、遅すぎて人物画像の服すら読み込めないなんて！」

Discuz!フォーラム個人スペースのCSSカスタマイズ

Tue, 24 Mar 2020 13:23:51 +0000

先日、暇だったのでDiscuzフォーラムの脆弱性を探してみたところ、本当に見つかりました。ついでにツールを作成し、勢いでこの記事を書いています。以下が事の経緯です。この脆弱性はウェブサイトに大きな危害を与えるものではなく、個人スペースのCSSスタイルをカスタマイズできるだけで、サイトのデータに脅威を与えることはありませんので、ご安心ください。

このツールを使えば、Discuzの個人スペースのCSSスタイルをカスタマイズでき、個人スペースを豊かに美化し、単調さをなくすことができます。

テストしたDiscuzのバージョンはX3.4です。他のバージョンはご自身でテストしてください。
全球主机交流论坛（管理人さん、お許しを）でのみテストしました。同じバージョンのDiscuzであれば理論上は共通で使えるはずです。
個人スペースが開設されていないフォーラムでは使用できません。
カスタムCSSは多すぎないようにし、失敗を避けるために一行に圧縮することをお勧めします。
プロトコルヘッダーは通常、変更する必要はありません。テキストボックスを設置したのは、主に拡張性を考慮したためです。
もしlocフォーラムで操作する場合、デフォルトで阿珏ちゃんをフォローし、友達に追加します。[#手動でニヤリ + 保身のための犬アイコン]

本ソフトウェアはローカルでリクエストを送信するのみで、サーバーにデータをアップロードすることはありません。ソフトウェアはパック（圧縮・暗号化）されているため、ウイルス対策ソフトが誤検知する可能性がありますが、安心してご使用ください Cookieの取得

ブラウザで開発者ツール（F12）を開き、対象のウェブサイトにアクセスします。ログイン状態であればどのページでも構いません。開発者ツールで「Network」タブに切り替え、ページを更新（F5）します。現在のドメインのリクエストデータを見つけてクリックし、「Headers」タブの「Request Headers」にあるcookieを探します。皆さんが私の言っていることを理解できないだろうと思ったので、特別に図を用意しました。

2つ目の方法はより簡単で迅速ですが、どのcookieが必要か分かっている場合に適しています。下の図のように操作します。

1つ目の方法で使う開発者ツールは、以前のブログ記事でも使用しましたが、cookieの取得方法については説明していませんでした。やはり1つ目の方法をお勧めします。cookieは多くても問題ありませんが、少ないと動作しません。 免責事項

本ソフトウェアは学習と交流のみを目的としています！
本ソフトウェアの作者は一切の責任を負いません！
本ソフトウェアを使用した場合、本規約に同意したものとみなします！

ダウンロード

以下のダウンロードスタイルは何年も使っていませんでしたが、今日ついに復活させました。 .down_link{background:url(‘https://www.52ecy.cn/content/uploadfile/201707/md-bg.jpeg') no-repeat 100% 0% #fffdff; border: 1px solid #faf8fb; border-radius: 2px; color: #666; font-size: 14px; margin-bottom: 10px; padding: 5px 20px;}.downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downlink a{text-decoration:none;} .downlink a{text-decoration:none;font-size:15px;} .downlink a:link{color: #ffffff;} .downlink a:visited{color: #ffffff;} .downlink a:hover{color: #ffffff;} .downlink a:active{color: #ffffff;} .downbtn{background: none repeat scroll 0 0 #1BA1E2; border: 0 none; border-radius: 2px; color: #FFFFFF !important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .yanshibtn{background: none repeat scroll 0 0 #d33431; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;text-transform:none;text-decoration:none;} .downbtn:hover,.yanshibtn:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF!important; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;} .downbtn a:hover,.yanshibtn a:hover{background: none repeat scroll 0 0 #9B59B6; border: 0 none; border-radius: 2px; color: #FFFFFF; cursor: pointer; font-family: “Open Sans”,“Hiragino Sans GB”,“Microsoft YaHei”,“WenQuanYi Micro Hei”,Arial,Verdana,Tahoma,sans-serif; font-size: 14px; margin: -4px 20px 0 0; padding: 8px 30px;}

CSS3ランダム背景画像切り替えエフェクト

Wed, 16 May 2018 11:58:08 +0000

CSS3のランダム背景画像フェードイン・フェードアウト切り替えエフェクトデモ効果はこの記事の背景に表示されています
皆さんが私の幻想領域二次元限定版のソースコードを解析するのに苦労しているようなので（30分以上もかけている人もいるようです）、時間を見つけて整理して公開することにしました
当初はjQueryで実装する予定でしたが、CSS3の@keyframesルールに気づきました。CSS3は、かつてJSでしか実現できなかった効果を実装できるほど強力になっています

定義と使い方

@keyframesルールを使用することで、アニメーションを作成できます。

アニメーション作成の原理は、あるCSSスタイルを別のスタイルに徐々に変化させることです。

アニメーションの過程で、このCSSスタイルを複数回変更することができます。

変化が起こるタイミングは、パーセンテージで指定するか、キーワード「from」と「to」（それぞれ0%と100%に相当）で指定します。

0%はアニメーションの開始時点、100%はアニメーションの終了時点です。

最高のブラウザサポートを得るためには、常に0%と100%のセレクタを定義する必要があります。

注：アニメーションの見た目を制御するには、アニメーション関連のプロパティを使用し、アニメーションをセレクタにバインドしてください。

CSSのコア部分（画像アドレスの変更を忘れないでください）

body {
	background: #000;
	background-attachment: fixed;
	word-wrap: break-word;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat
}

ul {
	list-style: none
}

.cb-slideshow li:nth-child(1) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)
}

.cb-slideshow li:nth-child(2) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)
}

.cb-slideshow li:nth-child(3) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)
}

.cb-slideshow li:nth-child(4) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)
}

.cb-slideshow li:nth-child(5) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)
}

.cb-slideshow li:nth-child(6) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)
}

.cb-slideshow,.cb-slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2
}

.cb-slideshow:after {
	content: ''
}

.cb-slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: -2;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 36s linear infinite 0s;
	-moz-animation: imageAnimation 36s linear infinite 0s;
	-o-animation: imageAnimation 36s linear infinite 0s;
	-ms-animation: imageAnimation 36s linear infinite 0s;
	animation: imageAnimation 36s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s
}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s
}

.cb-slideshow li:nth-child(4) span {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s
}

.cb-slideshow li:nth-child(5) span {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s
}

.cb-slideshow li:nth-child(6) span {
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 30s
}

@-webkit-keyframes imageAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in
	}

	8% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-out
	}

	17% {
		opacity: 1;
		-webkit-transform: scale(1.1) rotate(0)
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.1) rotate(0)
	}

	100% {
		opacity: 0
	}
}

もちろん、HTMLコードと組み合わせる必要があります
HTML部分（中のテキスト部分と

の数は自由に変更可能です）

簡単なCSS3アバター回転と3D回転効果

Mon, 10 Jul 2017 07:45:23 +0000

ウェブサイトのコメント欄で、コメント投稿者のアバターにマウスカーソルを合わせると360°回転するのをよく見かけます。

まず効果を見てみましょう。

.tximg{ height:300px; border-radius:50%; border:2px solid green; /*変化規則*/ transition:all 2s; } .tximg:hover{ /* 変化動作 定義2d回転、パラメータは角度を記入 */ transform:rotate(360deg); }

CSS部分

img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*変化規則*/
	transition:all 2s;
}

img:hover{
	/*
		変化動作
		2D回転を定義し、パラメータに角度を記入
	*/
	transform:rotate(360deg);
}

HTML部分（非常にシンプルで、画像が1枚だけです）

<img src="http://www.52ecy.cn/log0.png">

3D回転効果（フロントエンドの表示スタイルがやはり競合しているようです -。-）

.div{ width:300px; height:300px; border:1px solid red; /*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/ perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/ } .img{ width:300px; height:300px; border:1px solid red; /*変化規則*/ /*回転要素の原点位置を設定*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*変化動作*/ transform:rotateX(60deg); }

CSSコード

div{
	width:300px;
	height:300px;
	border:1px solid red;
	/*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/
	perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/
}
img{
	width:300px;
	height:300px;
	border:1px solid red;
	/*変化規則*/
	/*回転要素の原点位置を設定*/
	transform-origin:bottom;
	transition:all 2s;
}

img:hover{
	/*変化動作*/
	transform:rotateX(60deg);
	
}

HTMLコードの部分はアバター回転の部分と全く同じで、画像を1枚置くだけなので、ここでは省略します。

効果画像を現在のページに直接挿入すると、現在のページのCSSスタイルと競合し、ページ全体が崩れてしまうため、効果画像のスタイルセレクタを変更しました。

注意：IEモードでは動作しない可能性があります。

CSS3でiPhoneを描く

Mon, 03 Jul 2017 06:09:01 +0000

まずは完成イメージをご覧ください、お先にどうぞ。(これは決して画像ではありません。うん～、なんか変な言い方ですね～)

iPhoneの何世代目か聞かないでください、私も知らないし、使ったこともないので、お察しください。

CSSスタイル部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*设置div元素的圆角边框*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*距离上边距10px 左右居中*/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*当宽高相同时，则为圆*/ margin:10px auto; }

/*:before 选择器在被选元素的内容前面插入内容。*/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*即使插入的内容为空也需要写，否则不显示*/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

後で少し機能を追加しました

ホームボタンをクリックすると携帯の画面が点灯し、5秒後に再び画面が消えます