てがきはてなでヘッダー画像をこさえて、PCからもスマホからもタイトルが手書き画像になるようにしたよ

　先日、はてなラボにて「てがきはてなブログ」がリリースされたので絵日記を書いてみました。

clara-stoopman.hatenablog.jp

　2度目の挑戦では、タイトル画像をこさえてみました。

　最初は、はてなブログに手書き画像をアップするのにちょっと便利なだけだと思っていましだが、侮っていた自分が恥ずかしい。

　iPadのお手軽なお絵かきアプリで、レイヤー機能が使えるものはそうそうありませんが、「てがきはてなブログ」は、デフォルトで5階層まで利用可能です。

　ペンの種類が若干寂しいところですが《てがきでサクッと》が目的でであれば、ペンと鉛筆さえあれば十分です。背景用紙は「4コマ用紙」「絵日記用紙」と私好みのものが揃っているので感謝の極みです。

　若干苦戦したのは、カラーツール。数値（コードやRGB）指定ができないので、今回タイトル画像を作成するにあたって、使用中のブログテーマに使われているネイビーカラーと、同じ色を指定することができませんでした。

　てがき＝「アナログに近い感覚」を重視した仕様で、絵具の調合に苦戦してると思えば、それもまた味として楽しめるのです。

　とは言いつつ、今後のアプデに期待したい。欲を言えば筆ペンも欲しい（しかるべきところへリクエストすればいいものを、できない小心者）。

　完成後、意気揚々とブログのタイトルを「てがきはてなブログ」でこさえた画像に設定してみたのですが…

てがきはてなブログで
タイトル画像をこさえてみたけれど、スマホからだとはみ出しちゃうので速攻で取り下げた。
PCに合わせると1000×200で作るやん？スマホに自動で縮小変換されんの？

色指定も微妙に合わんかったし。 数値入力できたらいいのに

幻のタイトル画像となりました✨#オヤスミ pic.twitter.com/bipPKoAyu1

— くららねこぜまん (@clara_stoopman) 2020年9月30日

　スマホ表示がフィットしません。調整方法がわからず、一旦引き下げることになりました。

　後日グーグル教授に相談したところ、古い記事をいくつか参考にしてみろと教えてくれたので、いくつか試してみてやっと完成。

　やってやったぜ！

　公式アプリもしっかり反映してくれています。

　ありがとう、グーグル教授。

　ありがとう、てがきはてなブログ。

　忘れないうちに、今回追加したCSSをメモっておくよ。

1. /* ヘッダー画像調整 */
2. #blog-title {
3. margin-top:0px;
4. margin-bottom:0px;
5. padding-top: 0px;
6. padding-bottom: 0px;
7. }
8. /* レスポンシブヘッダー調整　 */
9. @media (max-width: 480px){
10. #blog-title-inner,#title a{
11. height:80px!important;
12. width:auto;
13. }
14. #blog-title-inner {
15. background-size: contain!important;
16. }
17. /* タイトル画像上下の余白を調整 */
18. #blog-title {
19. margin: 50px auto 5px auto;
20. padding: 0;
21. }
22. }