つばさのーと

つばさの日常を綴るのーと

Re:けものフレンズ風のソースコードハイライト

f:id:tsubasa123:20170223163527j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

なんか最近流行っているっぽい「けものフレンズ」ネタです。暇ができたら一気に視聴する予定ですが、おもしろそうだったので未視聴ながらも乗っかってみました。この記事でお届けするのは、なんの実用性もないカスタマイズ?です。

 

 

元ネタはこちら

 

pronama.azurewebsites.net

 

ソースコードのハイライトをけものフレンズのロゴテイストに変更するスニペットです。めちゃくちゃ見にくくなりますが、好きな人にはたまらないのかもしれません。

 

これをはてなブログの記事で試してみようというのが今回の試みです。ちなみに、いつも通りですがGoogleChromeの最新版でしか動作は確認していません。今回はベタな書き方しているのでそこそこ古いブラウザでも動くと思いますがご了承ください。

 

クリックしてどうぞ

 

 

上のボタンをクリックしてみてください。すごーい!ってなります。これだけです。最初に申し上げました通り、実用性は皆無です。リンク設定や既存の文字装飾も全てリセットされます。クリックしたボタンもボタンじゃなくなってると思います。元ネタを紹介するためにブログカードだけは残るように手をいれましたが、その他にもどんな悪影響があるかわかりません。

 

やってることは、対象となる文字列に対して、1文字ずつタグで囲んで文字の色を指定するという処理になります。あまり詳しい知識はありませんが、SEO的に良いこととは思えないことをやっています。あとアクセシビリティ的には最悪かもしれません。使ったことありませんが、音声読み上げソフトからしたら邪魔者以外の何物でもないと思います。

 

自分で作っておいてなんですが、ご利用は計画的にお願いします。

 

ソースコードはこちら

 

ほぼ元ネタのパクリなので載せるか迷いましたが一応はっときます。

 

<script>
var c=["23AC69","91C132","F19726","E8552D","1AAB8E","E1147F","2980C1","1BA1E6","9FA0A0","F19726","E30B20","E30B20","A3338B"],i=0;
$('#kemono').one('click', function() {
$(".entry-content > p").each(function() {
    if ($(this).find('> iframe').length) return;
    this.innerHTML = this.innerText.replace(/./g, function(s) {
        return '<span style="color:#' + c[i++%c.length] + '">' + s + '</span>';
    });
});
});
</script>

 

ファンの方、宜しければカスタマイズしてお使いください。

 

ロゴジェネレーターもあるみたい

 

 

こっちはかなり便利に使えそう、ジェネレーター職人の人はほんとに仕事がはやいです。どうやって類似フォントを見つけているのか、探し方が気になります。

 

さいごに

 

最近、ブログを書く暇がなくてむしゃくしゃしたのでネタに走りました、後悔はしていません。次回はもう少しまともな記事をお届けする予定です。

 

ではでは、最後までお付き合いいただきありがとうございました。