アニメのロゴやフォントを調べます！

最近Netflixで化物語見直してるんですけどやっぱすごすぎる。
放送当時はちょうどフォトショ買いたてでロゴを真似してつくって遊んでいました。
で、今ならCSSだけで表現できるのでは、と思ったのでチャレンジしてみまみた。

完成サンプル

※Chrome/FireFox/IE10以降等のモダンブラウザでご確認ください。

化物語のロゴについて

化物語ロゴのフォントは新宋体が使われています。

物語シリーズのロゴにはいくつかのパターンがありますが、基本は新宋体に傾斜をつけて、グラデーション光彩です。
webフォントで新宋体を使うこともできますが、今回のサンプルでは明朝体を使用しています。

HTML

<div class="bmg-wrap">
  <span class="kanji">化</span>
  <span class="kana">バ</span>
  <span class="kana">ケ</span>
  <span class="kana">モ</span>
  <span class="kana">ノ</span>
  <span class="kanji">物</span>
  <span class="kana">ガ</span>
  <span class="kana">タ</span>
  <span class="kana">リ</span>
  <span class="kanji">語</span>
</div>

cssのtransformを利用して１文字ずつ変形するので、spanでマークアップします。

CSS

.bmg-wrap span {
    display: inline-block;
    float: left;
    line-height: 80px;
    -webkit-transform: skewY(-20deg) scaleX(0.5);
    -moz-transform: skewY(-20deg) scaleX(0.5);
    -o-transform: skewY(-20deg) scaleX(0.5);
    transform: skewY(-20deg) scaleX(0.5);
    -webkit-text-shadow: 0 0 20px #f00;
    -moz-text-shadow: 0 0 20px #f00;
    -o-text-shadow: 0 0 20px #f00;
    text-shadow: 0 0 20px #f00;
}
.bmg-wrap span.kanji {
    font-size: 80px;
    font-family: '游明朝','YuMincho', 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', 'ＭＳ Ｐ明朝',serif;
    letter-spacing: -30px;
    color: #fff;
}
.bmg-wrap span.kana {
    font-family: '游ゴシック','YuGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    font-size: 24px;
    letter-spacing: -10px;
    color: #ff0;
}
.bmg-wrap:after {
    clear: both;
    display: block;
    content: "";
    height: 0;
}

使用する際は適宜サイズ変更してください。
transformのscaleXを使って文字幅を半分にし、skewYでY軸方向に傾斜をつけています。
文字間はletter-spacingを使って調整しました。

色違い版

text-shadowのカラーを変更すれば別の色でも可能です。

テキストシャドウにグラデーションが可能になればいいのにな！

• tweet
•