ぱたぱたアニメ館

すでに画像素材として「ネオン・ブロック・プレート」を配布していますが、 カスタマイズ可能な CSS 版のコード も掲載しました。

配布中の画像プレートは「濃い背景」での使用に適していますが、今回作成した CSS プレートは、「明るい背景」により馴染むデザインになっています。 CSS 版は色やサイズを自由に変更できますので、濃い背景で利用される場合は、お好みの色調に調整してご利用ください。

デモ：ナイト・グリッド（飾り用）

NIGHT-GRID NIGHT-GRID

デモ：ナイト・グリッド（リンク用）

NIGHT-GRID NIGHT-GRID

コード：ナイト・グリッド（飾り用）

HTML 

<div class="night-grid">
  文字を入力してください
</div>
CSS 

.night-grid {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #00f2ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（一番最後に置く） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

コード：ナイト・グリッド（リンク用）

HTML 

<a href="リンク先のURL" class="night-grid">
  文字を入力してください
</a>
CSS 

.night-grid {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #00f2ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #ffffff !important;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
.night-grid {
  transition: transform 0.1s, box-shadow 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.night-grid:hover {
  box-shadow: 0 0 20px #00f2ff, inset 0 0 20px #00f2ff;
  text-shadow: 0 0 10px #00f2ff;
}
.night-grid:active {
  transform: scale(0.98);
}
/* レスポンス調整（一番最後に置く） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

色違いの各コード（飾り用）

デモ：フレア・ルビー

FLARE-RUBY FLARE-RUBY
HTML （クリックで表示）
HTML 

<div class="flare-ruby">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.flare-ruby {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #1a1a1a;
  border: 2px solid #ff0000;
  border-radius: 8px;
  box-shadow: 0 0 10px #b30000, inset 0 0 10px #b30000;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .flare-ruby {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #b30000, inset 0 0 8px #b30000;
  }
}

デモ：サイバー・マゼンタ

CYBER-MAGENTA CYBER-MAGENTA
HTML （クリックで表示）
HTML 

<div class="cyber-magenta">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.cyber-magenta {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ff00ff;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px #ff00ff, inset 0 0 10px #ff00ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .cyber-magenta {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #ff00ff, inset 0 0 8px #ff00ff;
  }
}

デモ：ライム・パンク

LIME-PUNK LIME-PUNK
HTML （クリックで表示）
HTML 

<div class="lime-punk">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.lime-punk {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #adff2f;
  border: 2px solid #76d200;
  border-radius: 8px;
  box-shadow: 0 0 10px #5ee300, inset 0 0 10px #5ee300;
  color: #1a1a1a;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .lime-punk {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #5ee300, inset 0 0 8px #5ee300;
  }
}

デモ：アイス・バイオレット

ICE-VIOLET ICE-VIOLET
HTML （クリックで表示）
HTML 

<div class="ice-violet">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.ice-violet {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #bf94ff;
  border: 2px solid #9933ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #7a00ff, inset 0 0 10px #7a00ff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .ice-violet {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #7a00ff, inset 0 0 8px #7a00ff;
  }
}

デモ：クリムゾン・オレンジ

CRIMSON-ORANGE CRIMSON-ORANE
HTML （クリックで表示）
HTML 

<div class="crimson-orange">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.crimson-orange {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ff4500;
  border: 2px solid #ffaa33;
  border-radius: 8px;
  box-shadow: 0 0 10px #d32f00, inset 0 0 10px #d32f00;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .crimson-orange {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #d32f00, inset 0 0 8px #d32f00;
  }
}

デモ：プラズマ・シアン

PLASMA-CYAN PLASMA-CYAN
HTML （クリックで表示）
HTML 

<div class="plasma-cyan">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.plasma-cyan {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #00f2ff;
  border: 2px solid #a0f9ff;
  border-radius: 8px;
  box-shadow: 0 0 10px #00bfff, inset 0 0 10px #00bfff;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .plasma-cyan {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00bfff, inset 0 0 8px #00bfff;
  }
}

デモ：ルナ・シアン

LUNA-CYAN LUNA-CYAN
HTML （クリックで表示）
HTML 

<div class="luna-cyan">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.luna-cyan {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #70e8ef;
  border-radius: 8px;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff;
  color: #00f2ff;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .luna-cyan {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}

デモ：ソーラー・ゴールド

SOLAR-GOLD SOLAR-GOLD
HTML （クリックで表示）
HTML 

<div class="solar-gold">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.solar-gold {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #ffcc00;
  border-radius: 8px;
  box-shadow: 0 0 10px #ffbf00, inset 0 0 10px #ffbf00;
  color: #ffbf00;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .solar-gold {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #ffbf00, inset 0 0 8px #ffbf00;
  }
}

デモ：キャンディ・パルス

CANDY-PULSE CANDY-PULSE
HTML （クリックで表示）
HTML 

<div class="candy-pulse">
  文字を入力してください
</div>
CSS （クリックで表示）
CSS 

.candy-pulse {
  margin: 20px auto;
  width: fit-content;
  max-width: 90%;
  padding: 15px 40px;
  background: #ffffff;
  border: 2px solid #ff4db8;
  border-radius: 8px;
  box-shadow: 0 0 10px #e600a2, inset 0 0 10px #e600a2;
  color: #e600a2;
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
  line-height: 1.2;
}
/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .candy-pulse {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #e600a2, inset 0 0 8px #e600a2;
  }
}

カスタマイズ

＜文字色がおかしい・変わらない＞

通常は .night-grid { color: #ffffff; } で動きますが、 お使いのテンプレートや外部 CSS の影響で、リンクの色が強力に固定されている場合にこの現象が起こります。 もし色が変わらない場合は、以下の 【Step 1】 から順に コードを書き換えて試してみてください。

【Step 1】要素名を指定する
クラス名の前に a を付け足します。これだけで少し優先度が上がります。


a.night-grid { color: #ffffff; }
CSS

【Step 2】クラス名を二重にする
クラスを2回繋げて書きます。スコア（詳細度）が2倍になり、一気に強くなります。（HTML側でクラス名を2回書く必要はありません。）


.night-grid.night-grid { color: #ffffff; }
CSS

【Step 3】 !important を付ける
色の指定の直後に !important を書き加えます。他のルールを無視して優先させる強力な指定です。


.night-grid { color: #ffffff !important; }
CSS

【Step 4】最強の組み合わせ（最終手段）
【Step 1】〜【Step 3】をすべて合体させた方法です。相手側のCSSでも !important が使われていて、どうしても色が変わらない時の切り札です。


a.night-grid.night-grid { color: #ffffff !important; }
CSS

＜マウスを乗せたら背景色が変わる＞

ページ全体の a:hover 設定が干渉しているのが原因です。 その場合は、以下のようなクラス専用の設定で上書きして背景色を固定してください。

例： 

.night-grid:hover {
  background: #1a1a1a;
}
CSS

ご使用中のコードで指定している background と同じ色を指定すると、 背景を固定したままエフェクト（光）だけを綺麗に見せることができます。お好みの色にカスタマイズしてもOKです。

＜スマホでも綺麗に見せる＞

10 種類すべてのコードの末尾には、以下のようなレスポンシブ用コードを含めています。 スマホでの表示サイズを微調整したい場合に使用してください。不要な場合は削除しても問題ありません。


/* レスポンス調整（コードの最後に配置） */
@media (max-width: 600px) {
  .night-grid {
    font-size: 30px;
    padding: 10px 30px;
    box-shadow: 0 0 8px #00f2ff, inset 0 0 8px #00f2ff;
  }
}
CSS

＜各クラス名とカラーコード＞

名前クラス名背景色枠線影文字色
ナイト・グリッド.night-grid#1a1a1a#00f2ff#00f2ff#ffffff
フレア・ルビー.flare-ruby#1a1a1a#ff0000#b30000#ffffff
サイバー・マゼンタ.cyber-magenta#ff00ff#ffffff#ff00ff#ffffff
ライム・パンク.lime-punk#adff2f#76d200#5ee300#1a1a1a
アイス・バイオレット.ice-violet#bf94ff#9933ff#7a00ff#ffffff
クリムゾン・オレンジ.crimson-orange#ff4500#ffaa33#d32f00#ffffff
プラズマ・シアン.plasma-cyan#00f2ff#a0f9ff#00bfff#ffffff
ルナ・シアン.luna-cyan#ffffff#70e8ef#00f2ff#00f2ff
ソーラー・ゴールド.solar-gold#ffffff#ffcc00#ffbf00#ffbf00
キャンディ・パルス.candy-pulse#ffffff#ff4db8#e600a2#e600a2
★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る