業務外
井戸掘りの心得、ファイナルバージョンです。
取り敢えず完成版をご覧ください。
男の修行 山本五十六 苦しいこともあるだろう 云い度いこともあるだろう 不満なこともあるだろう 腹の立つこともあるだろう 泣き度いこともあるだろう これらをじつと こらえてゆくのが 男の修行である |
画面表示の調整
裾が伸び縮みするのは、画面サイズの自動調整の問題だったようです。竹取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恐るべし!!
0 件のコメント:
コメントを投稿