https://mikage.to/

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>mikage's link</title>
7  <meta name="description" content="Mikage Sawatari の自作ソフト・ツール置き場。Windows 用画像ビューア mImageViewer、住宅ローンシミュレーション、アコーディオン練習ツール、ユリアーモ（エスペラント）辞書などを公開しています。">
8  <link rel="canonical" href="https://mikage.to/">
9<style>
10* {
11  margin: 0;
12  padding: 0;
13  box-sizing: border-box;
14}
15
16body {
17  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
18  color: #333;
19  background: linear-gradient(135deg, #fff5f9 0%, #ffeef7 100%);
20  min-height: 100vh;
21  line-height: 1.6;
22  padding: 20px;
23}
24
25.container {
26  max-width: 900px;
27  margin: 0 auto;
28}
29
30.intro-text {
31  text-align: left;
32  font-size: 1.1rem;
33  color: #666;
34  margin-bottom: 40px;
35  padding: 20px;
36  background: rgba(255, 255, 255, 0.8);
37  border-radius: 20px;
38  box-shadow: 0 4px 15px rgba(255, 96, 192, 0.1);
39}
40
41h1 {
42  color: #d63384;
43  background: linear-gradient(135deg, #ffeeee 0%, #ffe0ec 100%);
44  font-size: 1.8rem;
45  padding: 15px 25px;
46  margin-bottom: 30px;
47  border-left: 5px solid #ff60c0;
48  border-radius: 10px;
49  box-shadow: 0 2px 10px rgba(255, 96, 192, 0.2);
50  position: relative;
51  overflow: hidden;
52}
53
54h1::after {
55  content: '';
56  position: absolute;
57  bottom: 0;
58  left: 0;
59  width: 100%;
60  height: 3px;
61  background: linear-gradient(90deg, #ff60c0, #ff9ed0);
62}
63
64.links-section {
65  margin-bottom: 50px;
66}
67
68.links-grid {
69  display: grid;
70  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
71  gap: 20px;
72  margin-top: 20px;
73}
74
75.link-card {
76  background: white;
77  border-radius: 15px;
78  padding: 0;
79  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
80  transition: all 0.3s ease;
81  border: 2px solid transparent;
82  position: relative;
83  overflow: hidden;
84  cursor: pointer;
85}
86
87.link-card-content {
88  padding: 20px;
89  display: block;
90  text-decoration: none;
91  color: inherit;
92}
93
94.link-card::before {
95  content: '';
96  position: absolute;
97  top: 0;
98  left: 0;
99  width: 100%;
100  height: 4px;
101  background: linear-gradient(90deg, #ff60c0, #ff9ed0);
102  transform: translateX(-100%);
103  transition: transform 0.3s ease;
104}
105
106.link-card:hover {
107  transform: translateY(-5px);
108  box-shadow: 0 10px 30px rgba(255, 96, 192, 0.2);
109  border-color: #ffb0d9;
110}
111
112.link-card:hover::before {
113  transform: translateX(0);
114}
115
116.link-card-content .link-title {
117  color: #d63384;
118  font-size: 1.1rem;
119  font-weight: 600;
120  display: inline-block;
121  margin-bottom: 8px;
122  transition: color 0.3s ease;
123}
124
125.link-card:hover .link-title {
126  color: #ff60c0;
127}
128
129a.link-card-content:visited .link-title {
130  color: #a02860;
131}
132
133.link-description {
134  color: #666;
135  font-size: 0.95rem;
136  line-height: 1.5;
137}
138
139@media (max-width: 768px) {
140  body {
141    padding: 15px;
142  }
143
144  h1 {
145    font-size: 1.5rem;
146    padding: 12px 20px;
147  }
148
149  .links-grid {
150    grid-template-columns: 1fr;
151    gap: 15px;
152  }
153
154  .intro-text {
155    font-size: 1rem;
156    padding: 15px;
157    margin-bottom: 30px;
158  }
159}
160
161</style>
162
163</head>
164<body>
165<div class="container">
166  <div class="intro-text">
167    自分用リンク集代わりとして…。(^^;
168  </div>
169
170  <section class="links-section">
171    <h1>自分のコンテンツ</h1>
172    <div class="links-grid">
173      <div class="link-card">
174        <a href="/mimageviewer/" class="link-card-content">
175          <div class="link-title">mImageViewer</div>
176          <p class="link-description">フォルダを開いた瞬間に中身が全部見える Windows のビューア。画像・ZIP・PDF・動画・音声を同じ一覧で扱え、AI 生成画像の整理にも使えます。</p>
177        </a>
178      </div>
179      <div class="link-card">
180        <a href="https://www.tunecore.co.jp/artists/sonicmelty?lang=ja" class="link-card-content">
181          <div class="link-title">Sonic Melty</div>
182          <p class="link-description">

182最近DTM始めたのですが、作った曲を Sonic Melty の名前でリリースしてます。</p>
183        </a>
184      </div>
185      <div class="link-card">
186        <a href="http://loan.mikage.to/" class="link-card-content">
187          <div class="link-title">住宅ローンシミュレーション</div>
188          <p class="link-description">住宅ローンの支払い額を様々な条件でシミュレーションできます。</p>
189        </a>
190      </div>
191      <div class="link-card">
192        <a href="https://mikage.to/acmidi/acmidi.html" class="link-card-content">
193          <div class="link-title">Roland Vアコーディオン用ボタン確認ツール</div>
194          <p class="link-description">アコーディオン練習時に左手の操作を画面に表示するツールです。</p>
195        </a>
196      </div>
197      <div class="link-card">
198        <a href="https://mikage.to/acchord/acchord.html" class="link-card-content">
199          <div class="link-title">アコーディオン コード確認ツール</div>
200          <p class="link-description">アコーディオンのコードボタンを押したときに出る和音を確認するツールです。</p>
201        </a>
202      </div>
203      <div class="link-card">
204        <a href="https://mikage.to/radiation/" class="link-card-content">
205          <div class="link-title">放射線・放射線測定器のメモ</div>
206          <p class="link-description">放射線・放射線測定器のメモです。</p>
207        </a>
208      </div>
209      <div class="link-card">
210        <a href="https://mikage.to/juliamo/" class="link-card-content">
211          <div class="link-title">ユリアーモ辞書（エスペラント辞書）</div>
212          <p class="link-description">ことのはアムリラートで使われているユリアーモ言語の辞書です。フォント以外はエスペラントと一緒ですので、エスペラント辞書としても使えます。</p>
213        </a>
214      </div>
215      <div class="link-card">
216        <a href="https://mikage.to/photoframe/" class="link-card-content">
217          <div class="link-title">画像合成</div>
218          <p class="link-description">ブラウザ上で画像を合成するサイトです。透過png画像とjpeg画像を合成します。</p>
219        </a>
220      </div>
221      <div class="link-card">
222        <a href="http://blog.mikage.to/" class="link-card-content">
223          <div class="link-title">日記</div>
224          <p class="link-description">最近はちょっとブログっぽくなりました。</p>
225        </a>
226      </div>
227      <div class="link-card">
228        <a href="https://mikage.to/erlang/" class="link-card-content">
229          <div class="link-title">Erlang Tips</div>
230          <p class="link-description">プログラミング言語Erlangに関する情報です。</p>
231        </a>
232      </div>
233      <div class="link-card">
234        <a href="https://mikage.to/jquery/" class="link-card-content">
235          <div class="link-title">jQuery 開発者向けメモ</div>
236          <p class="link-description">JavaScriptライブラリのjQuery.jsに関する情報です。</p>
237        </a>
238      </div>
239      <div class="link-card">
240        <a href="https://mikage.to/jlod/" class="link-card-content">
241          <div class="link-title">高速タイピング JLOD配列 (Japanese Layout on Dvorak)</div>
242          <p class="link-description">Dvorak配列でのローマ字入力を改良し、楽に覚えられて、少ない打鍵で速く打てる配列を考えています。</p>
243        </a>
244      </div>
245      <div class="link-card">
246        <a href="https://mikage.to/majo/majo.html" class="link-card-content">
247          <div class="link-title">マジョカ†マジョルナ / 進化時パラメータ計算機</div>
248          <p class="link-description">マジョカ†マジョルナ（ゲーム）でカードを進化させたときのパラメータを計算できます。</p>
249        </a>
250      </div>
251      <div class="link-card">
252        <a href="http://nayuki.sherry.jp/" class="link-card-content">
253          <div class="link-title">なゆき</div>
254          <p class="link-description">CROW/SSP向けのSHIORIシステム。デスクトップアクセサリの頭脳部分を作るためのフレームワークです。</p>
255        </a>
256      </div>
257      <div class="link-card">
258        <a href="http://bllookup.mikage.to/" class="link-card-content">
259          <div class="link-title">BL-Lookup : RBL / DNSBL による spam対策 for Becky Plug-In</div>
260          <p class="link-description">Becky用のRBL参照プラグインです。手軽なspam対策に便利です。</p>
261        </a>
262      </div>
263      <div class="link-card">
264        <a href="https://mikage.to/pronto/" class="link-card-content">
265          <div class="link-title">タッチパネル式学習リモコン Pronto NG</div>
266          <p class="link-description">PDAのような形の学習リモコンに関する話です。</p>
267        </a>
268      </div>
269    </div>
270  </section>
271
272  <section class="links-section">
273    <h1>関連ページ</h1>
274    <div class="links-grid">
275      <div class="link-card">
276        <a href="http://www.tnet.to/" class="link-card-content">
277          <div class="link-title">T-Net</div>
278          <p class="link-description">DTM系の掲示板。一部管理をやってます。</p>
279        </a>
280      </div>
281      <div class="link-card">
282        <a href="http://bottle.mikage.to/" class="link-card-content">
283          <div class="link-title">SSTP Bottle</div>
284          <p class="link-description">CROW/SSPのコミュニケーション(?)システム。サーバー側のデーモンを作っています。</p>
285        </a>
286      </div>
287    </div>
288  </section>
289</div>
290
291</body>
292</html>