レビュー風デザイン作成くん

今回はレビュー風デザインの使い方とどんなふうにカスタマイズができるか説明していきます。

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

## 基本

レビュー風デザインは文字通りレビュー風のデザインを作るためのものです。小説家になろうのレビュー欄（リニューアル前）のデザインを参考にしています。もし現在のレビュー欄にしたい場合は次に説明するレビュー風デザイン2で作成してください。デフォルトでは以下のコードが出力されます。

<div style="max-width:580px;margin:auto;padding:15px;border:solid 1px #aabbbb;background:#ffffff;line-height:1.5;font-size:15px;color:#6b6b6b;"><div style="text-align:center;color:#663300;font-size:18px;font-weight:bold;">タイトルをここに</div><div style="text-align:right;color:#0033cc;">レビュー者</div><div style="border-bottom:solid 0.1px #aabbbb;border-top:solid 0.1px #aabbbb;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div><div style="color:#fe7643;text-align:center;">作品名</div></div>

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

・max-width:最大幅

・margin:外余白

・padding：内余白

・border：枠線

・color: 文字色

・background:背景色

・font-size: 文字サイズ

・font-weight:太字設定

・line-height：行間

・text-align: 位置ぞろえ

本体はごちゃごちゃして分かりにくいですが以下のような構造になっています。

<div>

<div>タイトル</div>

<div>レビュー者</div>

<div>本文</div>

<div>作品名</div>

</div>

詳細欄を開くと色合いや文字サイズなど調整できます。

また作品、レビュワーのリンクを付けることもできます。その場合、作品名、レビュワーのところにリンクが付与されます。

## テンプレート

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

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

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

自分なりのレビュー欄を作っておくといいでしょう。

## コード説明

padding:.5em 0;margin:.5em 0のように複数の方向の余白を指定しています。

適用される順番は以下です。

値を1つ指定：[上下左右]

値を2つ指定：[上下][左右]

値を3つ指定：[上][左右][下]

値を4つ指定：[上][右][下][左]

また0.5などといった記述は0を省略して.5のように書くことができます。

こういったレビュー欄を作るときは参考となるデザインを分解してブロックごとに分けて再構築します。今回は以下のように分解しました。

<div>

<div>タイトル</div>

<div>レビュー者</div>

<div>本文</div>

<div>作品名</div>

</div>

分解し終わったらそれぞれ肉付けをしていきます。余白をつけて微調整しながら色合いや行間を調整します。

色合いはベースカラー、メインカラー、アクセントカラーの3色を決めて配置するといいでしょう。レビューの場合はベースカラーは背景色、メインカラーはタイトル、アクセントは作品名とレビュワー欄に指定すると良いかと思います。

色の組み合わせはググれば色々と出てくるので参考にしてみるといいかもしれません。

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

ということでレビュー風デザイン作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。