ランキング風デザイン作成くん

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

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

## 基本

ランキング風デザインは文字通りランキング風のデザインを作るためのものです。小説家になろうのランキングっぽいものを作ることができます。デフォルトでは以下のコードが出力されます。

<div style="font-size:14px;"><div style="font-size:1.5em;color:rgb(253,103,52);font-weight:bold;margin:0 0 .5em 0;">タイトルをここに</div><div>作者：<span style="color:rgb(42,84,212);">作者名</span></div><div style="font-size:1.1em;font-weight:bold;"><span style="color:rgb(238,51,51);">1,000</span> pt</div><div style="font-size:1em;background-color:rgb(230,250,250);padding:8px;margin:.5em 0 .5em 0;">あらすじ等</div><div style="font-size:0.9em;border:1px dashed rgb(91,187,187);padding:5px;margin:.5em 0 .5em 0;">あらすじ</div>キーワード：<span style="color:rgb(116,209,181);font-weight:bold;">キーワード</span></div>

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

・font-size: 文字サイズ

・color: 文字色

・font-weight:太字設定

・background:背景色

・border：枠線

・margin:外余白

・padding：内余白

・line-height：行間

・text-align: 位置ぞろえ

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

<div>

　<div>タイトルをここに</div>

　<div>作者：<span>作者名</span></div>

　<div><span>1,000</span> pt</div>

　<div>あらすじ等</div>

　<div>あらすじ</div>

　キーワード：<span>キーワード</span>

</div>

それぞれのブロックに分けて作っています。最後のキーワードに<div>を入れていないのはわざとです。文字数の節約のためですね。他もbrでもよかったかもしれません。

## コード説明

レイアウトを考える場合はレイアウトを分解していってブロックごとに並べて作るといいですね。ブロックごとにdivタグを使いましょう。そこに余白をつけたりします。

spanは局所的な装飾に使います。主に色と文字サイズを変えるために使っています。

今回の装飾ではフォントサイズを一番外側に絶対値を指定して、その下はemで相対指定しています。こうすると基準サイズが変わっても相対的なサイズは変わらないのでフォントサイズの変更が楽になります。

覚えておくとよいかもしれません。

また今回は色指定をrgbで設定しています。color:rgb(238,51,51);

色の設定はいくつかの方法で行えます。

・キーワード指定：red, blueなどの色名を使う

・16進数カラーコード：#ffffff, #000000など、16進数カラーコードを使う

・RGB：rgb( 255, 255, 255), rgba( 255, 125, 153, 0.5)のようにrgbを指定。透明度も指定できる

・HSL：hsl( 0, 100%, 100%), hsla( 0, 100%, 100%, 0.5)のようにhsl指定。透明度も指定できる

キーワード指定は直感的に使えます。ただ細かい調整ができないのが難点。

１６進数コードはよく使われます。デザインソフトでよく使われるのでデザイナーさんにはなじみがあるかと。

RGBはRed, green, blueの大きさを指定して色を作ります。rgbaにすると透明度も指定できます。透明度を指定したい場合に使えます。

HSLはHue(色相)、Saturation(彩度)、Lightness(輝度)を指定します。hslaにすると透明度も指定できます。

概ね16進数カラーコードかrgbaでいいかと思います。それ以外はあんまり使わないかと。透明度を指定したい場合はrgbaを使ってください。

rgbaの透明度は0になるほど透明になります。1は不透明です。0.2～0.4くらいにするととても淡い色合いになります。

儚げな雰囲気を出したいときにおすすめです。

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

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