サムネイル(OGP)画像を自動生成するCUIアプリケーション

このリポジトリをクローンし、ローカルでコマンドを叩くだけで↑のようなサムネイル(OGP)画像を生成することができます。

本アプリケーションはご自由にお使いください。(クレジット表記は不要ですが、記載していただけると作者が喜びます)
※2次配布はご遠慮ください。

1.使用方法

1-1.初期インストール

git clone https://github.com/zawa1205/generate-ogp.git

cd generate-ogp

npm install

1-2.実際の画像生成

src/thunbnail.json内のtitle, githubをそれぞれ任意のものに変更

npm run gen

npm run genをすると画像が生成されます。
任意のタイトル/著名にしたい場合は、src/thunbnail.jsonの中身を修正してください。
titleが画像中央のタイトル文、authorオブジェクト内のgithubが画像右下のGitHubアカウントになります。

1-2-1.タイトルを改行したい場合

src/thunbnail.json内のtitle内では全角スペースが、画像出力時に改行に自動変換されます。

1-2-2.画像を変更したい場合

画像を変更したい場合はsrc配下(background.jpgと同じ階層)に好きな画像を入れていただき、src/style.cssの16行目background-image: url('background.jpg');のbackground.jpgを入れた画像名に変更してください。

1-2-3.文字色を変更したい場合

css等わかる方はご自由に変更いただいて構いません。
また、文字色を白にしつつ背景画像を暗くオーバーレイするcssのみ記述してあるので、以下の手順で有効にしてください。

1. src/style.cssの３行目color: #383838;をコメントアウト
2. src/style.cssの5行目color: #fff;のコメントアウトを外す
3. src/style.cssの27~35行目のコメントアウトを外す
4. src/style.cssの45行目filter: invert(22%);をコメントアウト
5. src/style.cssの47行目filter: invert(100%);のコメントアウトを外す

2.使用例

1-2-1. ~ 1-2-3.をすると↓のように自由なサムネイルに変更が可能です。

参考

使用画像1: Rawpixel.com
使用画像2: みっこむさん