アイキャッチ画像が面倒くさい Wordpressでブログを投稿していると面倒なことがある。 それはアイキャッチ画像の設定である。 画像探すのも面倒だし、それなりの質が担保されていないとサイト全体がチープに見える。 だからこのブログでは統一感を出せるように、同じデザインの画像の上にテキストを載せるようにした。 で、アイキャッチ画像を作成するようページを作成した。 ……、ことは以前ブログで書いた。 何が面倒って、アイキャッチ画像を設定するほど面倒なことはない 効率化したと書いたが、それすら面倒になった。 なってしまったのである。 そこで、タイトルを書いたらそれがそのままアイキャッチ画像になる。 そんな仕組みを作ってみた。 それがこれである。 さて、次はこれをプラグイン化してみようかと思っている。
ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの1つにアイキャッチ画像の選定がある。 面倒なことを楽にできるのがエンジニアの特権だ。 ということでアイキャッチ画像を簡単に作れるようにした。 作成されるアイキャッチ画像 本ツールを作成できるアイキャッチ画像はこんな感じ。 「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。 作成するうえでの考え方 JavaScriptのCanvasに背景画像を描画する その上にCanvas で文字を書く 作成したコード <div id="creatEyeCatch"> <div class="input"> <input type="text" id="input" placeholder="記事タイトルを記入する"> </div> <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas> <div class="operation"> <button id="deleteTitle">タイトルを削除</button> </div> </div> <script> // var const deleteTitle = document.getElementById('deleteTitle') // 背景CANVASの作成 const canvasGround = document.getElementById('canvas--background') const ctxGround = canvasGround.getContext('2d') const nove = new Image(); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height); // 入力されたタイトルを描画する関数 const drawFont = (el) => { ctxGround....