Bloggerで男の修行を表示する方法

業務外

井戸掘りの心得、ファイナルバージョンです。
取り敢えず完成版をご覧ください。

男の修行　山本五十六 　苦しいこともあるだろう 　云い度いこともあるだろう 　不満なこともあるだろう 　腹の立つこともあるだろう 　泣き度いこともあるだろう 　　これらをじつと 　　　こらえてゆくのが 　男の修行である 陵長

---

画面表示の調整
裾が伸び縮みするのは、画面サイズの自動調整の問題だったようです。竹取JSの設定でブロックの高さを明示的に指定したら止まりました。裾が長いのもギャップを指定しました。スマホで見ると裾が長めなのは仕方ない。
おまけで、角の丸い背景を付けました。色紙ぽく見えませんか？


行書体フォント
行書体のフリーフォントを使用しましたが、教育漢字しか提供されていません。教育漢字は小学校で習得する1006文字です。ここに「云」がないのです。他のフリーフォントを探しましたが、やはり教育漢字の範囲内しか提供されていません。ぐぬぬ。

ネット検索していたら、フォントを自作する記事を見つけました。手書きで簡単にフォントが自作できます。フォントを作るのは本来大変なのですが、それは字数が多い為です。1文字だけなら簡単簡単。でも、マウスで手書きするのはセンスが必要です。なので、パワーポイントの曲線で作図してみました。


落款
最後に、山本五十六の雅号「長陵」の落款を篆書体「長陵」で付けました。白舟から篆書体フォントが配布されていますが、「陵」が教育漢字の範囲外です。こちらも2文字をパワーポイントの曲線で作図してみました。
フォントさえあれば、こんな印影みたいな画像をテキストだけで表現できます。捺印したときの擦れも表現してみました。これは、白の透過画像を背景に重ねています。

感想と構想

JSとかCSSがもう少し理解できたら、と思って始めた井戸掘りの心得＝男の修行ですが、素人には手強かったです。でも、Webフォントとか勉強になりました。
井戸掘りの心得＝男の修行シリーズはこれで終了です。

2016年5月12日木曜日 Bloggerで縦書きする方法

2016年5月26日木曜日 Bloggerで行書体フォントを使う方法

---

印影に擦れ（グランジ）を付けるのに、以下の記事を参考にさせていただきました。
[CSS]テキストにグランジ風のエフェクトをつけるスタイルシート
https://coliss.com/articles/build-websites/operation/css/1386.html

画像で枠線を表現するのに、以下の記事を参考にさせていただきました。
ボーダーに画像を指定する CSS3 プロパティ「border-image」を試してみる
https://bashalog.c-brains.jp/14/06/06-095653.php

篆書体など自作フォントを作るのに、以下の記事を参考にさせていただきました。
完全無料:windowsでフリーソフトだけで作る自作フォントの作り方
https://kouryuu1332.web.fc2.com/writing/how-to-make-font-Inkscape.html#fonth2no_2

Font Garage
https://font.designers-garage.jp/ds/execute/FontSearch?searchType=1&saleType=0&category=09

フォントを長体で表現するのに、以下の記事を参考にさせていただきました。
CSS3のtransformで、文字を長体や平体で表示する方法
https://allabout.co.jp/gm/gc/406308/2/

---

CSSを良く判らずにバリバリ指定しました。入力はHTML編集モードですが、通常の編集モードで更新すると、指定したCSSが蒸発してしまいます。バックアップがあったから助かりましたが、Blogger恐るべし！！