# 何が面倒って、アイキャッチ画像を設定するほど面倒なことはない
4 min read
Table of Contents
ブログ更新ってめんどくさい
ブログ更新は面倒くさい。
そんなこと分かり切っている。
なかでも面倒なことの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.font = '32px Noto Sans JP'; ctxGround.fillStyle = '#000000'; const x = (canvasGround.width - ctxGround.measureText(el).width) / 2 const y = (canvasGround.height + 32 / 2) / 2 + 40 ctxGround.fillText(el, x, y, 708); }
// テキストが入力確定で出力 const input = document.getElementById('input') input.addEventListener('change', () => { drawFont(input.value) clearCanvas() window.setTimeout(() => { drawFont(input.value) }, 500) })
// テキストの削除 deleteTitle.addEventListener('click', () => { clearCanvas() input.value = '' })
const clearCanvas = () => { ctxGround.clearRect(0, 0, canvasGround.width, canvasGround.height); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height);
} // タイトルの文字量をチェック input.addEventListener('input', () => { if (input.value.length > 21) { alert('今はまだ、タイトルは20文字以内にしてください。') } })</script>基本的にコメントアウトを残したので、それ通りに作れば特に難しい点もないと思う。
投稿画面にリンクを張る
最後に作成したツールに飛ぶためのリンクを投稿画面に貼る。
add_action('admin_footer-post-new.php', 'add_custom_text');add_action('admin_footer-post.php', 'add_custom_text');function add_custom_text(){?> <script> const selectEyeCatch = document.getElementById('postimagediv') selectEyeCatch.insertAdjacentHTML('afterend', '<p class="creatEyeCatch"><a href="URL" target="_blank" rel="noopener noreferrer">nove のアイキャッチを生成する</a></p>'); </script><?php}これですこしブログ更新を楽にできる。
わからない部分はコメントに残してもらえれば解説します。
