ブロガーの皆さんはアイキャッチ画像をどのように作成しているでしょうか。
私は無料でおしゃれに画像をデザインできるCanvaで作成しています。
Canvaは操作がとても簡単で素材もたくさんあり、不満はないのですが
それでも毎回画像を作成するのは手間です。
そこで今回はGASで作る
アイキャッチ画像自動生成ツール
の作り方を紹介します！
ブログで使用するので、WordPress自動アップロード機能 もあります！
ツールの全体像はこんな動きになります。
コードだけ見れればいい！って方はこちらをどうぞ！
作業の流れ
Googleドライブに画像合成用のスクリプトを作成
新規でGoogle Apps Scriptを作成
以前の記事で手順を紹介しているので、参考にしてください。
doGet.js のコードを貼り付ける
コード.gs に以下を貼り付けます。
index.html のコードを貼り付ける
『ファイル』→『New』→『HTMLファイル』を選択します。ファイル名は『index』にします。
index.htmlに以下を貼り付けます
width と heightを変更する
背景画像のサイズによって、4行目のwidth と height は変更してください。
1200と630の数値を変更してください。
画像合成用のスクリプトを公開
以前の記事で手順を紹介しているので、参考にしてください。
取得したURLは次の手順で使います！
アイキャッチ画像の設定を入力するスプレッドシートを作成
公開しているスプレッドシートにアクセスします。
『ファイル』→『コピーを作成』からマイドライブにコピーします。
スプレッドシートにスクリプトを作成する
コピーしたスプレッドシートを開き、スクリプトエディタを開きます。
createEyecatchImage.js のコードを貼り付ける
コード.gs に以下を貼り付けます
シートIDとシート名を書き換える
３行目「シートID」と４行目「シート名」をコピーしたスプレッドシートの情報に書き換えます。
GASの公開URLを書き換える
30行目の部分を前の手順で取得したURLに書き換えます。
width と heightを変更する
PhantomJsCloudでキャプチャする位置を背景画像のサイズによって変えてください。
32行目から47行目の数字をキャプチャする位置によって調整します。
1200と630の数値の変更と59はGoogleで表示されるヘッダー部分です。
PhantomJsCloudのAPIキーを書き換える
50行目の部分をPhantomJsCloudで取得したAPIキーに書き換えます。
APIキーの取得方法はこちらの記事が参考になりました！
WordPressのユーザー名、パスワードを書き換える
57行目の部分をWordpressのユーザー名、パスワードに書き換えます。
WordPressAPIのユーザー名、パスワードは以前の記事を参考にしてください。
WordPressのURLを書き換える
67行目の部分をWordpressのURLに書き換えます。
このブログだったら『https://arukayies.com』に書き換えます。
使い方
『画像生成』ボタンにスクリプトを割り当てる
ボタンにスクリプトを割り当てます。『main』と割り当ててください。
アイキャッチ画像の設定を入力
背景画像のURLを設定
シートのB2セルには背景画像のURLを設定します。
背景画像のURLはこちらです。
生成された画像はこちらです。
メインタイトル・サブタイトルの設定
シートのB3・B4セルにはメインタイトル・サブタイトルの文字列を設定します。
ダミー画像生成、モックアップ用画像作成ツールの https://placehold.jp/ を使って、文字入りの画像を生成しています。
以下のコード部分で文字入りの画像を生成しています。
画像サイズ・レイアウトはコードの21行目と22行目の数値を変えて使ってください。
生成された画像はこんな感じです。これを背景に合成しています。
画像の合成位置の設定
シートのB6〜B9はメインタイトル・サブタイトルの画像の合成位置の設定になります。
背景画像のサイズ・合成画像のサイズを意識した位置関係で設定してください。
何度か試してみて、納得いく合成位置を試してみてください。
画像の詳細設定
WordPressのメディアライブラリに反映される情報を事前に設定できます。
『画像生成』ボタンを押下する
すべての設定が設定できたら、『画像生成』ボタンを押下します！
これが生成される画像です！！！！！
まとめ
構想から完成まで4ヶ月ぐらいかかってしまいました。。。
コメント