はてなブログでアイキャッチを設定する

f:id:m-oota-711:20190111191746p:plain

どんなアイキャッチ画像が良いのか？

これまで、特に気にしないでいましたが・・・
もう少しブログをおしゃれにしたいと思いました。

正直、デザインはわかりません。

そこで、

方針はシンプルです。
理由は、作りやすい・統一感でる からです。

なのでこのブログでは以下の要件で作成する。

写真を使う（フリー素材、ブログ内容に関連したもの）

写真素材提供サイト

写真素材提供サイトは探せがたくさんあるようです。
そこで使用するなら以下の条件がベストでしょう。
- 無料
- 著作権の帰属表示なし
- 商用利用可

こちらのサイトがおすすめ。

魅力的なフリー画像 · Pixabay

文字を入れる（タイトル、フリーフォント利用）

フリーフォント

こちらも探せばたくさんありました。

以下の条件がベスト。
- 無料
- 商用利用可
- 日本対応

こちらのサイトがおすすめ。

これが欲しかった！フリーフォント21選【日本語対応／商用可／無料】

アイキャッチ画像のサイズ

画像のサイズも重要です。
切れたり、小さかったりは嫌です。

サイズは　448×252

理由は以下のブログで述べられております。

アイキャッチ画像について調べたことまとめました【サイズ・制作ツール・チェッカー】 - buttoblog

アイキャッチ画像の作成

私は面倒くさがりなので自動で作れるようにします。

動作環境

OS:Ubuntu 18.04
言語:Python3
画像処理ライブラリ:OpenCV,PIL

以下のようにコマンドラインで入力すると作成できるようにした。
コードで文字の色や位置、背景画像など変更する。

python3  eyecatch.py タイトル

eyecatch.py

#!/usr/bin/env python3

import cv2
import numpy as np
from PIL import ImageFont, ImageDraw, Image 
import math
import os
import datetime
import sys

USER = os.environ['USER']

IMAGE_PATH = "/home/"+ USER + "/Documents/Wallpaper/blog.jpg"
IMAGE_SIZE = (448,252) # (width,height)

FONT_PATH = "/home/"+ USER +"/Documents/Font/TanukiMagic.ttf"
FONT_SIZE = 30
POINT1 = (30, 110)
POINT2 = (70, 150)
WHITE = (255,255,255)
COLOR = [0,0,0]

SAVE_PATH = "/home/" + USER + "/Documents/Eyecatch/"

def input_string(bgra_img, string, color, point):
    # 文字を入力する（日本語）
    rgba_img = cv2.cvtColor(bgra_img, cv2.COLOR_BGRA2RGBA) # bgra >> rgba
    pil_img = Image.fromarray(rgba_img) # ndarray >> PIL 

    font = ImageFont.truetype(FONT_PATH, FONT_SIZE)
    draw = ImageDraw.Draw(pil_img)
    draw.text(point, string, fill=color, font=font)

    rgba_img = np.asarray(pil_img) # PIL >> ndarray
    bgra_img = cv2.cvtColor(rgba_img, cv2.COLOR_RGBA2BGRA) # rgba >> bgra

    return bgra_img

# 引数でタイトルを取得する
argvs = sys.argv
argc = len(argvs)

if (argc != 3):   # 引数が足りない場合は、その旨を表示
    print('Usage: # python3 %s line1 %s line2' % argvs[0])
    quit()         # プログラムの終了

print("1行目に「{}」を描画する。".format(argvs[1]))
print("2行目に「{}」を描画する。".format(argvs[2]))
line1 = argvs[1]
line2 = argvs[2]

# 透過画像の生成
size = IMAGE_SIZE[1],IMAGE_SIZE[0],4
bgra_img = np.zeros(size, dtype=np.uint8)

# 縁取り用文字入力
bgra_img = input_string(bgra_img, line1, WHITE, POINT1)
bgra_img = input_string(bgra_img, line2, WHITE, POINT2)

# 白文字を膨張させる
kernel = np.ones((5,5),np.uint8)
bgra_img = cv2.dilate(bgra_img,kernel,iterations = 1)

# 白文字の色を変更する
color = []
for y in range(bgra_img.shape[0]):
    for x in range(bgra_img.shape[1]):
        if bgra_img[y,x][-1] > 0:
            color = COLOR + [bgra_img[y,x][-1]]
            bgra_img[y,x] = color

# 文字入力
bgra_img = input_string(bgra_img, line1, WHITE, POINT1)
bgra_img = input_string(bgra_img, line2, WHITE, POINT2)

# 背景画像の入力
img = cv2.imread(IMAGE_PATH)

# 背景画像のリサイズ
resize_img = cv2.resize(img, IMAGE_SIZE)
resize_img = resize_img.astype(np.float64) # uint8 >> float64

# 画像の合成
mask = bgra_img[:,:,3]  # アルファチャンネルを抽出
mask = cv2.cvtColor(mask, cv2.COLOR_GRAY2BGR)  # gray >> bgr
mask = mask / 255.0  # 0-255 >> 0.0-1.0 (透過率)

bgr_img = bgra_img[:,:,:3]  # bgra >> bgr
bgr_img = bgr_img.astype(np.float64) # uint8 >> float64

resize_img[0:IMAGE_SIZE[1],0:IMAGE_SIZE[0]] *= 1 - mask  # 透過率に応じて元の画像を暗くする。
resize_img[0:IMAGE_SIZE[1],0:IMAGE_SIZE[0]] += bgr_img * mask  # 文字画像に透過率をかけて加算する。

# 画像の生成
now = datetime.date.today().strftime('%y%m%d')
cv2.imwrite(SAVE_PATH + 'eyecatch_'+ now + '.png', resize_img)

アイキャッチ画像の設定

ブログの一番最小に作成した画像を貼り付ければOK。

以上。

Kinaconの技術ブログ

Ubuntuはじめました。