adbird(広告鳥) 備忘録

html + css で年賀状の宛名書き(Ubuntuで年賀状宛名書き)

※↓もっと簡単な方法ができました。こちらのほうをオススメします。

Ubuntuで年賀状の宛名作成 csvで住所録編集 2020年版 。手元にエクセル等で住所録がある人などはこちらの方が楽かも。


はじめに

Ubuntuの年賀状の宛名書きが毎年の悩みだった。
Adobe AIRを入れれば年賀状ソフト使えるらしいが、Linux用は開発が終わったらしく、WindowsAdobe AIRを入れるためにはWineを入れないといけないとか…、面倒過ぎる。

LibreOfficeでもできるらしいが、これも調べたら、すごく面倒くさそう…。

できるだけ軽く、ソフト開発中止で使えなくなるとかいうリスクも少なく、将来にわたって継続して使い続けられる方法はないかと模索していた。

去年はこちらのTeXクラスファイルを使わせてもらった。
TeXで宛名印刷

しかし、宛名の連名には対応していなくて、無理やり連名にしようとすると文字列の配置に不満が残った。
自分でTeXの設定をいじれればいいのだけど、できない…。
TeXは印刷面の微妙な調整をやろうとすると、非常に複雑で自分にはあまり向いていない気がする…。

そこで今年はcssを駆使して、htmlで作成してみようと試みた。
…というか、去年もそれを試みたのだがうまくいかず挫折していたのだった(^_^;)。

今年は何とか成功!
以下、作成方法。

基本は、任意のフォルダ内に、「nenga.css」と「年賀状宛名.html」の2つのファイルを作って、テキストエディタで編集するだけ!

IPAmj明朝フォントをインストール

人名に使われている様々な異体字が使えるらしいので、IPAmj明朝フォントをインストールする。

なお、下記cssではIPAmj明朝フォントで設定していて、郵便番号の文字間などもこのフォントで調節しているので、もし郵便番号のフォントを変えるときはcssの調整が必要になると思う。

cssファイル

テキストエディタで、nenga.css を以下の内容で作成。

郵便番号の数字の位置に関しては、現在の私の環境で最適に合わせているつもりなので、プリンタ・ブラウザ環境(ちなみにChromium派生のVivaldiブラウザを使っている)などが変わるとズレる恐れもあるので、テスト印刷してみてズレているようであれば、cssで調整をする。

@page {size:100mm 148mm; margin:0; padding:0;}

body {margin: 0; padding:0;}

.sheet {
    width:100mm; height:148mm;
    margin: 0;
    padding:0;
    position: relative;
    page-break-after: always;
}

p{
    margin:0;
    padding:0;
}

.郵便番号 {
    font-size:12pt;
    font-family:"IPAmj明朝" ; /* IPAmj明朝で文字間等を調整している */
    margin:0;
    padding:0;
    position:absolute; top:14mm; left:46mm; /* ズレる場合は位置調整 */
    letter-spacing: 4.4mm; /* 文字間 */
}

.住所 {
    font-family: "IPAmj明朝"; 
    font-size:14pt;
    margin-left:0px;
    padding-top:0px;
    line-height:1.5em;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    position:absolute; top:30mm; right:10mm;
}

.宛名 {
    font-family:"IPAmj明朝" ;
    font-size:22pt; 
    letter-spacing: 0.1em;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateY(-10%) translateX(-50%);
    transform: translateY(-10%) translateX(-50%);
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

.差出人住所氏名 {
    position:absolute; top:70mm; left:10mm;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

.差出人住所 {
    font-family:"IPAmj明朝" ;
    font-size:10pt; 
    margin:0;
    padding-left:0.5em;
}

.差出人 {
    font-family:"IPAmj明朝" ;
    font-size:14pt; 
    letter-spacing: 0.1em;
    margin:0;
    padding-top:0.5em;
}

.差出人郵便番号{
    font-size:10pt;
    font-family:"IPAmj明朝"; /* IPAmj明朝で文字間等を調整している */
    margin:0;
    padding:0;
    position:absolute; top:124mm; left:6mm; /* ズレる場合は位置調整 */
    letter-spacing: 1.8mm; /* 文字間 */
}

/** For screen preview **/
@media screen {
    body { background: #e0e0e0 }
    .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm;
    }
}

@media print {
  body {
    width:100mm; height:148mm; /* needed for Chrome */
}

css作成の際に参考にしたのは、以下のサイト。ありがとうございました。

htmlファイル(宛名作成)

テキストエディタで、 年賀状宛名.html を以下のように、書いていく。
郵便番号は半角数字、住所の数字は漢数字または全角数字で。

通信面に差出人の名前・住所を書いているなら、下記の差出人の氏名・住所・郵便番号のところはなくてもよい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="nenga.css" type="text/css">
<title>年賀状宛名</title>
</head>
<body>

<section class="sheet">
    <p class="郵便番号">1234567</p>
    <p class="住所">鹿児島県鹿児島市○○町一―一<br />桜島マンション一〇一号</p>
    <div class="宛名">
        <p>山田 太郎 様</p>
        <p>   花子 様</p>
    </div>
    <div class="差出人住所氏名">
        <p class="差出人住所">鹿児島市○○町一―二<br />霧島コーポ二〇二</p>
        <p class="差出人">山田 一郎</p>
        <p class="差出人">   二郎</p>
    </div>
        <p class="差出人郵便番号">1234567</p>
</section>

<section class="sheet">
    <p class="郵便番号">1234567</p>
    <p class="住所">鹿児島県鹿児島市○○町1―1<br />桜島マンション101号</p>
    <div class="宛名">
        <p>小山田 長次郎 様</p>
    </div>
    <div class="差出人住所氏名">
        <p class="差出人住所">鹿児島市○○町1―2</p>
        <p class="差出人">山田 一郎</p>
        <p class="差出人">   二郎</p>
    </div>
        <p class="差出人郵便番号">1234567</p>
</section>

<section class="sheet">
    <p class="郵便番号">1234567</p>
    <p class="住所">鹿児島県鹿児島市○○町1―1<br />桜島マンション101号</p>
    <div class="宛名">
        <p>小山田 長次郎 様</p>
    </div>
</section>

</body>
</html>

とりあえず、連名で書いても、少し長めの宛名(姓:3文字+名:3文字)でも、自分なりに満足のいくレイアウトになった。

f:id:adbird:20180220100952p:plain

ブラウザで印刷するので(ブラウザでPDFに出力してから印刷でもいい)、重たい余計なソフトは必要ないし、テキストベースでのデータ保存なので、ソフト開発終了で使えなくなるとか、データが開けなくなるとかがないので、安心。

印刷

うちのモノクロレーザープリンタ・ブラザーのHL-5250DNのLinuxドライバには、もともとハガキ設定がないこともあるのか、いろいろ設定してもハガキ印刷ができたり、できなかったりと不安定極まりない。

解決策?として、上記でできたhtmlファイルをGoogle Chromeで開いて、設定用紙はA4サイズのまま、余白をカスタムで「左56mm、上・下・右はそれぞれ0mm」にして、A4用紙の最上部・中央に位置するように設定、手差しトレイからハガキ印刷するとできた。

ただし、1枚ずつしか印刷できない…。連続して印刷しようとするとなぜか印刷されない。

左の余白は毎年、要調整だろうし、まだまだハガキ印刷は苦労が続く…。