ぱたぱたアニメ館

すでに画像素材として「メタル・スタイル・プレート」を公開していますが、 カスタマイズ自由な CSS 版のコード も掲載しました。

画像版のようなヘアライン（横筋）やマイナス溝などの細かな装飾はありませんが、 文字数に合わせて横に伸び、スマホやタブレットの画面幅にも柔軟にフィットするレスポンシブ仕様になっています。

デモ：サテン・シルバー

SATIN-SILVER SATIN-SILVER
HTML （クリックで表示）
HTML 

<div class="satin-silver">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  SATIN-SILVER SATIN-SILVER
</div>
CSS （クリックで表示）
CSS 

.satin-silver {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #444444;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #eeeeee, #cccccc);
  border: 1px solid #888888;
  box-shadow: inset 1px 1px 0 #ffffff, 2px 2px 7px rgba(0,0,0,0.4);
}
.satin-silver .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #cccccc 40%, #444444 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-silver { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-silver .screw { width: 10px; height: 10px; }
}
.satin-silver .screw-tl { top: 12px; left: 12px; }
.satin-silver .screw-tr { top: 12px; right: 12px; }
.satin-silver .screw-bl { bottom: 12px; left: 12px; }
.satin-silver .screw-br { bottom: 12px; right: 12px; }

デモ：サテン・ゴールド

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

<div class="satin-gold">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  SATIN-GOLD SATIN-GOLD
</div>
CSS （クリックで表示）
CSS 

.satin-gold {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #7a5901;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #f3e5ab, #eaddca, #c2b280);
  border: 1px solid #9e842a;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 2px 2px 8px rgba(0,0,0,0.45);
}
.satin-gold .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d4af37 40%, #7a5901 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-gold { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-gold .screw { width: 10px; height: 10px; }
}
.satin-gold .screw-tl { top: 12px; left: 12px; }
.satin-gold .screw-tr { top: 12px; right: 12px; }
.satin-gold .screw-bl { bottom: 12px; left: 12px; }
.satin-gold .screw-br { bottom: 12px; right: 12px; }

デモ：サテン・ブラス

SATIN-BRASS SATIN-BRASS
HTML （クリックで表示）
HTML 

<div class="satin-brass">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  SATIN-BRASS SATIN-BRASS 
</div>
CSS （クリックで表示）
CSS 

.satin-brass {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #3d3020;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, #eaddca, #bda470);
  border: 1px solid #8b4513;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 6px rgba(0,0,0,0.4);
}
.satin-brass .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #bda470 40%, #4a3924 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-brass { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-brass .screw { width: 10px; height: 10px; }
}
.satin-brass .screw-tl { top: 12px; left: 12px; }
.satin-brass .screw-tr { top: 12px; right: 12px; }
.satin-brass .screw-bl { bottom: 12px; left: 12px; }
.satin-brass .screw-br { bottom: 12px; right: 12px; }

デモ：アンティーク・カッパー

ANTIQUE-COPPER ANTIQUE-COPPER
HTML （クリックで表示）
HTML 

<div class="antique-copper">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  ANTIQUE-COPPER ANTIQUE-COPPER
</div>
CSS （クリックで表示）
CSS 

.antique-copper {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #3a1a00;
  text-shadow: 1px 1px 0px rgba(255, 245, 230, 0.4);
  background: linear-gradient(135deg, #e4b491, #a05a2c);
  border: 1px solid #5d2e0d;
  box-shadow: inset 1px 1px 0 rgba(253, 245, 230, 0.5), 2px 2px 7px rgba(0,0,0,0.5);
}
.antique-copper .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fdf5e6 0%, #b87333 40%, #4d260a 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .antique-copper { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .antique-copper .screw { width: 10px; height: 10px; }
}
.antique-copper .screw-tl { top: 12px; left: 12px; }
.antique-copper .screw-tr { top: 12px; right: 12px; }
.antique-copper .screw-bl { bottom: 12px; left: 12px; }
.antique-copper .screw-br { bottom: 12px; right: 12px; }

デモ：オールド・ブロンズ

OLD-BRONZE OLD-BRONZE
HTML （クリックで表示）
HTML 

<div class="old-bronze">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  OLD-BRONZE OLD-BRONZE 
</div>
CSS （クリックで表示）
CSS 

.old-bronze {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
color: #0e0a05; /* ぼやけを完全に消す、鉄のような深い黒茶 */
  text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.2); /* 輪郭を際立たせる最小限の光 */
  background: linear-gradient(135deg, #c5b398, #6d5a42);
  border: 1px solid #1a120b; /* 枠も締めて全体をくっきりさせる */
  box-shadow: inset 1px 1px 0 rgba(238, 232, 170, 0.3), 2px 2px 8px rgba(0,0,0,0.6);
}
.old-bronze .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #eee8aa 0%, #a8957c 40%, #2a2010 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.6));
}
@media (max-width: 768px) {
  .old-bronze { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .old-bronze .screw { width: 10px; height: 10px; }
}
.old-bronze .screw-tl { top: 12px; left: 12px; }
.old-bronze .screw-tr { top: 12px; right: 12px; }
.old-bronze .screw-bl { bottom: 12px; left: 12px; }
.old-bronze .screw-br { bottom: 12px; right: 12px; }

デモ：ビンテージ・アイアン

VINTAGE-IRON VINTAGE-IRON
HTML （クリックで表示）
HTML 

<div class="vintage-iron">
  <span class="screw screw-tl"></span><span class="screw screw-tr"></span>
  <span class="screw screw-bl"></span><span class="screw screw-br"></span>
  VINTAGE-IRON VINTAGE-IRON 
</div>
CSS （クリックで表示）
CSS 

.vintage-iron {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #eeeeee;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, #8b6b4d, #3a2510);
  border: 1px solid #1a0f00;
  box-shadow: inset 1px 1px 0 rgba(220, 220, 220, 0.2), 3px 3px 10px rgba(0,0,0,0.7);
}
.vintage-iron .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #dcdcdc 0%, #5d3914 40%, #1a0f00 90%);
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.7));
}
@media (max-width: 768px) {
  .vintage-iron { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .vintage-iron .screw { width: 10px; height: 10px; }
}
.vintage-iron .screw-tl { top: 12px; left: 12px; }
.vintage-iron .screw-tr { top: 12px; right: 12px; }
.vintage-iron .screw-bl { bottom: 12px; left: 12px; }
.vintage-iron .screw-br { bottom: 12px; right: 12px; }

カスタマイズ

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

「こちら」の詳細な解説を参考に、上から順に試してみてください。


/* 1.まずはこれを試す */
a.satin-silver { color: #444444; }

/* 2.これでもダメなら */
.satin-silver.satin-silver { color: #444444; }

/* 3.強制的に適用させる */
.satin-silver { color: #444444 !important; }

/* 4.【最終手段】どうしても変わらない時 */
a.satin-silver.satin-silver { color: #444444 !important; }
CSS

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

名前クラス名文字色背景色外枠ねじ中間色
サテン・シルバー.satin-silver#444444#eeeeee 〜 #cccccc#888888#cccccc
サテン・ゴールド.satin-gold#7a5901#f3e5ab 〜 #eaddca 〜 #c2b280#9e842a#d4af37
サテン・ブラス.satin-brass#3d3020#eaddca 〜 #bda470#8b4513#bda470
アンティーク・カッパー.antique-copper#3a1a00#e4b491 〜 #a05a2c#5d2e0d#b87333
オールド・ブロンズ.old-bronze#0e0a05#c5b398 〜 #6d5a42#1a120b#a8957c
ビンテージ・アイアン.vintage-iron#eeeeee#8b6b4d 〜 #3a2510#1a0f00#5d3914
★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る