フリーランスの請求書 – BillVektorをカスタマイズして使ってみよう！

請求書、見積書を何で発行してます？

2023年10月1日（令和5年10月1日）よりインボイス制度が導入されるということもあり、フリーランスのWEB制作者も請求書について関心があると思います。

多くの方は、クラウドの請求書作成サービスや、エクセルの請求書テンプレートを利用されているのでしょうか。

私も独立当初は、無料でMisocaを利用していたのですが、弥生がMisocaを買収し、無料で利用できる範囲が小さくなった時、ちょうどこちらが出てきて、すぐに飛びつきました。

BillVektor

ベクトル社が提供している、請求書の管理をWordPressのテーマとして実装したオープンソースの請求書管理システムです。

WordPressでのWEB制作をしていて、BizVektorやLightningを使ってましたので、違和感なくBillVektorを使いこなせ、見積書・請求書作成・管理が飛躍的に楽になりました。

導入、使い方

カスタマイズできる

既存の請求書テンプレートや請求書作成サービスは
ありきたりだし、デザインも。。。

だよね。
デザインを生業にしてるので
請求書も、他とは違う見た目にしたいよね。

色だけでなく
フォントサイズや余白を変えるだけで
かなり変わるもんね

そう、そういうちょっとした所だけでも変えたいよね。

クラウドだと数種のテンプレートから選んで。とかだし
エクセルだと見た目を変えるのに慣れていないから
思うように変えにくいし
結局、行政っぽい、定形になっちゃうよね。

ちょっと差をつけたい、変えたい人こそ
BillVektorがいいんだよ。

WEB制作をしているなら
普段からWordPressのテーマをカスタマイズしているし
CSSで見た目を整えてるよね。

BillVektorはWordPressのテーマなので普段どおりにカスタマイズして
請求書のデザインも作れるんだよ。

見た目を変える

請求書を入力してプレビューするとこんな感じになります。

非常にシンプルですが、ベースなので、お好きなようにCSSでいじっていきます。

例えば、「ご請求書」と下のボーダーの余白、気になりますよね。

DEVツールなどでソースを確認すると、その箇所は

.bill-title {
    line-height: 1em;
    border-bottom: 3px double #000;
    text-align: center;
    letter-spacing: 1em;
    margin-top: 10px;
    margin-bottom: 1em;
    font-size: 1.6em;
}

なので、

.bill-title {
    padding-bottom: 10px;
    font-size: 2em;
}

と変えてみたり、

表の見出し部分の色を変えたいなら

table.table-bill thead tr th {
    background-color: #666 !important;
    color: #fff;
    letter-spacing: 0.2em;
}

などCSSを触り、追加CSSに書くか、子テーマのCSSに追加します。

皆さん得意なCSSのカスタマイズなので、エクセルのテンプレートを編集するより、
簡単に見た目を自分仕様に変えられます。

請求書をPDFで出力

請求書なので、メールで添付したり、印刷するため、PDFで出力する事があると思います。

やり方は、

先程の請求書のシングルページで右クリック。印刷を選択し

ポップアップの「送信先」を「PDFに保存」で保存すればPDFで出力できます。

サイトで見ると、ブラウザの都合で横長なので間延びしているようになりますが、
印刷の際は縦長になりますので、それを踏まえ、見た目のカスタマイズをしてください。

子テーマの小数点

見積書についての追加機能についての要望です。

への対応なのか、

こちらのカスタマイズ用子テーマを使うと、単価・金額欄の金額が小数点以下２桁まで表示されるようになっています。

この子テーマのfunctions.phpは

add_filter( 'item_price_print_digits', 'item_price_print_digits_change' );
function item_price_print_digits_change( $digits ) {
	// 小数点以下の桁数
	$digits = 2;
	return $digits;
}

となっているので、小数点不要の方は

とすれば、小数点以下を消すことが出来ます。

請求書管理システム

BillVektorは、フリーランスにとっても見積書・請求書作成し、見た目をカスタマイズしやすいものではあるのですが、

本当の良さは、請求書・見積書の管理を楽にする請求書管理システムの部分なのです。

エクセルで1件1件発行していると、一覧で見れないので、管理が大変なんだよね。

BillVektorはWordPressのテーマとして実装されてるから
1件1件は投稿記事と同じなので、サイト内に請求書がたまっていく。

一覧表示はWordPressの得意なところだよ。

発行日や取引先も、カテゴリごとに絞り込み検索できるので
見たい項目の一覧表示も簡単

発行日はWordPressの投稿日なので
並び替えたければ、普段使ってるプラグインを入れればいいしね。

この手のシステムの管理画面って、どのように作られているのかが、
私レベルだと理解できないのですが、
WordPressを使って、WordPressのテーマとして実装されているから、
どこを触ればどこが変わるのか理解できるので使いやすい。

私なりの使い方・カスタマイズ

タグの利用

制作会社宛の請求書なら、タイトルにサイト名を書くのでいいけど
直取引の請求書だと、どこの案件かわかりにくいね。

一手間かかるけど
タグに取引先名を入れてる

タグに取引先ごとのリンクが付くので
請求書が増えていっても、
取引先の過去分を含んだ一覧が管理画面でも見れるのは便利だね。

金額の表示

カテゴリ分けしてて、各一覧が見れるのは便利だけど、
未入金一覧など、案件ごとの金額がパッと見れればいいのに。

そのために、こんな感じにカスタマイズしてる。
WordPressだから俺でもできた。

CSSで見た目を触るだけなら、追加CSSでいいのに
↑↑で子テーマの話をしたのは、ここからのカスタマイズのためなのよ。

<?php if ($page_post_type['slug'] != 'client') { ?>
  <th>件名</th>
  <?php if ($post_type['slug'] != 'salary') { ?>
    <th>カテゴリー</th>
  <?php } elseif ($post_type['slug'] == 'salary') { ?>
    <th>支給分</th>
  <?php } ?>
<?php } ?>

<th class="price_tit">金額</th>

<?php if ($page_post_type['slug'] != 'client') { ?>

  <!-- [ 件名 ] -->
  <td><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></td>
  <!-- [ カテゴリー ] -->
  <td><?php echo bill_get_terms(); ?></td>

<?php } ?>

<!-- [ 金額 ] -->
<?php
global $post;
if (isset($post->bill_tax_type) && $post->bill_tax_type == 'tax_not_auto') {
  $bill_total = bill_total_no_tax($post);
} else {
  $bill_total = bill_total_add_tax($post);
}
?>
<td class="price">￥ <?php echo number_format($bill_total); ?></td>

td.price {
  text-align: right;
}

これで税込表示されます。

おお、これなら、1件ずつ開いて確認しなくていいので便利！

請求書のテキストを変えたい

請求書の合計金額の上の文章。
「平素は格別のご高配に賜り・・・」
企業ならいいけど、フリーランスだとかたいよね。
ここを変えるには？

備考の文言は管理画面の「BillVektor設定」から変えられるけど
この部分はカスタマイズしないとね。

フリーランスぽい、優しい文章になったね

Admin Columns

石川さんが結構な頻度で推しているプラグイン。
Admin Columns をここで使ってみましょう。

Admin Columnsは、投稿・固定ページ・メディアなどの記事一覧ページをカスタマイズできるWordPressプラグインです。

個人利用なので、このままで問題ないのですが、
Admin Columnsを使えば、いらない項目を消したり順序を入れ替えられたりします。

「投稿者」「コメント」を削除し、「日付」を最後に持っていきました。

Custom Fieldも追加できます。

BillVektorでは、すでに用意されていますので、
画像のように、TypeでCustom Fieldを選び、Labelを任意の言葉に変え、Fieldを選べばいいだけです。

画像では「お支払い期日」を表示する場合ですが、請求書項目の「メモ」なら「bill_memo」です。

「メモ」だったら、担当者名とか、どんな言葉でも入れられるので、使い方はあなた次第です。

Admin Columnsは、このような使い方だけでなく、項目ごとのwidthだけの設定もここからできます。

横幅調整だけでも使う価値アリです。使い方次第で、思うように見た目を整えられます。

イチオシなわけですね。

最後に。

Advent Calendarでネタかぶりしないよう、ベクトル製テーマ＆プラグインの中からBillVektorを選んでみました。

それだけでなく、実際にカスタマイズし愛用してますので、更に便利なカスタマイズを紹介したかったのです。

無料で使えますし、WordPressを使った制作をしているフリーランスの方は、ぜひ使ってみてください。

記事の最初にインボイスについて触れたわりに、何も関係ない記事でしたが、
適格請求書の記載事項は、「適格請求書発行事業者の氏名又は名称及び登録番号」等々なので、
BillVektor設定の「住所」の欄に、登録番号を書けばいいのかなあと思っています。

ベクトル社自体でもBillVektorを利用されてますので、石川さんが対応してくれることに期待しましょう。

投稿者プロフィール

ふじた たいぞう

フリーランスのWEB屋

【WordPressコミュニティ活動】
・2016 WordCamp Kansai - サイト制作ハンズオン世話役
・Kansai WordPress Meetup 神戸 - 元共同オーガナイザー
・2021 WordCamp Japan - 実行委員
・ベクトル年末クイズ大会2021 優勝

【制作実績】 認定こども園

最新の投稿

• BillVektor2021年12月9日フリーランスの請求書 – BillVektorをカスタマイズして使ってみよう！
• Lightning2020年12月5日My Lightningはいかが？