この記事はCSS Advent Calendar 2017の24日目です。メリークリスマス!!


アイキャッチ作成ツールをHTML+CSS+JSで作りました。
デモはこちら。ソースは後でGithubに上げようと思いますが今はデベロッパーツールとかで見てください。

  • 一行目にWebアイコン
  • 二行目にタイトル
  • 三行目に背景グラデーション

を入力し、「Go!」ボタンを押せば作成されます。
「ダウンロード」ボタンを押すとpngでダウンロードできます。

これまで私のブログのアイキャッチは、デフォルト画像が並ぶことが多かったですが、本ツールで作った画像を使って少し華やかにすることができました。

ビフォアー…

アフター!

仕組み

html2canvasというJSライブラリを使って、HTML+CSSのデザインを一旦canvasに変換してからダウンロードするようにしています。
フォントはGoogle Fonts、WebアイコンはFont AwesomeDeviconsを使いました。

問題点としては、html2canvasは全てのCSSプロパティをサポートしている訳ではないという点です。
例えば、linear-gradientの角度を指定する時に、to right top ではなく、25deg 入れた時は動きません。

HTML+CSSでは綺麗にグラデーションされていてでも、上手くcanvasに変換されないため、想定通りのpng画像がダウンロードされません。

サポートされているものとサポートされていないものは、ドキュメントのFeaturesで確認することができます。 ここに載っていないCSSプロパティは使えないので気を付けてください。

まとめ

アイキャッチ画像は、画像編集ソフトで作っている人が多いのかなと思いますが、こうやってHTML+CSSで作るのもありだと思います。ツール化しておくと便利です!