パーツ番号 06-13-11 ・ CSSのみ

原著者+翻訳者の併記クレジット

海外記事の翻訳版であることを示す、原著者と翻訳者を並べた表記です。海外ニュースの翻訳記事や海外事例紹介のWordPressサイトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="av">翻</div>
          <div class="tx">
            <span class="badge">翻訳</span>
            <p class="nm">原著: J. Carter / 翻訳: 小川 real</p>
          </div>
        </div>

CSS

.d06-13-11 .card{display:flex;align-items:center;gap:12px;width:100%;max-width:300px;padding:14px 16px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;}
        .d06-13-11 .av{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:sans-serif;}
        .d06-13-11 .tx{text-align:left;}
        .d06-13-11 .badge{display:inline-block;padding:2px 9px;border-radius:999px;background:#2563eb;color:#fff;font-size:10px;font-weight:700;font-family:sans-serif;}
        .d06-13-11 .nm{margin:5px 0 0;font-size:11.5px;font-weight:700;color:#1e3a8a;font-family:sans-serif;}

クラス名 .d06-13-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。