引用カード作成くん

今回は引用カードの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/quotes/

## 基本

引用カードは文字通り引用カードを作るためのものです。小説本文を引用して紹介するとき、何かしら明言を引用するときに使用できます。デフォルトでは以下のコードが出力されます。

<div style="margin:auto;font-family: serif;padding:32px;max-width: 320px;background-color: #4f5788;"><div style="color:#fff8c2;text-align:center;font-size:64px;line-height:0;margin:16px 0 8px;">“</div><div style="color:#fdfdfd;margin:0 auto .5em;font-size:32px;line-height:1.5;text-align: justify;">ここに引用文を入力してください</div><div style="text-align: center;font-size:12px;line-height:1.25;"><div style="color:#fdfdfd;">作者名</div><div style="color:#fdfdfd;">作品名</div></div></div>

それぞれの意味は以下の通り。

・margin:外余白

・font-family:フォント

・padding：内余白

・max-width:最大幅

・color: 文字色

・background-color:背景色

・font-size: 文字サイズ

・line-height：行間

・text-align: 位置ぞろえ

ごちゃごちゃしていますが以下のような構造になっています。

<div>

　<div >“</div>

　<div>引用文</div>

　<div>

　　<div>作者名</div><div>作品名</div>

　</div>

</div>

一番外側にサイズや基本的な設定を行っています。その次に引用の“を入れてます。そのあと引用ブロック、付記ブロックを入れています。

詳細設定を開くと、色合い、文字サイズ、位置ぞろえの変更が可能になります。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

自分なりの色合い設定を作って保存しておくとよいでしょう。

## コード説明

引用文はフォントを変更しています。

font-family: serif;で明朝体を指定してます。引用はゴシック体だと見栄えしないのでフォントを変更しています。san-serifでゴシック体、serifで明朝体が指定できます。Android端末だと明朝体がない場合もあるのでその場合はゴシック体で表示されます。

直接フォント名を指定する場合、閲覧端末にあるフォントしか反映されません。なので通常は複数指定します。例えば以下のような感じです。

font-family: 'MS PGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;

左にあるフォントが優先されます。iOSとWindowsの指定を左に書いて、右にゴシック体か明朝体かの設定を書くのが良いと思います。

text-align: justify;

これは両端揃えの指定です。leftやCenterでは両端がそろわないので引用文が汚く見えることがあります。それを防ぐための指定です。

小説本文では基本的にこれが指定されています。両端が不ぞろいになってほしくない場合は指定するとよいでしょう。

-　-　- ✂切り取り✂ -　-　-

ということで引用カード作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。