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

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

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

## 基本

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

<div style="max-width: 580px;margin:0 auto 5px;line-height:1.5;padding:14px;border:1px solid rgba(0,0,0,.1);background:#ffffff;font-size:14px;border-bottom:3px solid rgba(0,0,0,.1);border-right:3px solid rgba(0,0,0,.1);"><div style="margin-bottom:2em;"><div style="font-size:18px;color:#de4900;font-weight:bold;">タイトルをここに</div><div style="margin-bottom:15px;color:#de4900;">レビュー者</div><div style="color:#333333;">ここに本文を入力</div></div><div style="margin-bottom:2em;line-height:1.8;"><span style="font-size:.85em;line-height:1;padding:.3em;text-align:center;letter-spacing:.1em;background-color:#e9ecef;color:#333333;margin-right:5px;">レビュー作品</span><span style="font-size:12px;color:#de4900;">作品名</span></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><span>レビュー作品</span><span>作品名</span></div>

</div>

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

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

## テンプレート

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

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

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

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

## コード説明

設定項目は、ほとんどレビューデザイン作成くんと同様でレイアウトだけ変更した物です。表示するものは同じでも場所を変えたり大きさを変えたりするだけで大きく見栄えが変わります。

また今回は影を表現するためにborderをいくつか設定しています。

border:1px solid rgba(0,0,0,.1);border-bottom:3px solid rgba(0,0,0,.1);border-right:3px solid rgba(0,0,0,.1);

これで左側と上側のボーダーは狭く、右側と下側のボーダーは濃く表示され影っぽくなります。

本来であればdrop-shadowなどを使うべきですが小説家になろうでは対応していないのでこのような対応にしています。

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

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