オモコロのやつ

ゴッホ偉業は一時的な衝動でなされるものではなく、小さなことの積み重ねによって成し遂げられるのだ。

牛乳を
注ぐ女適当に選んだらセリフとかいうものが存在しない人だった

[[module css]]
/* アイコンのサイズを規定 */
.speaker {
    --icon-size: 75px;
}

/* 個別の人物についてアイコンと色、名前の行数を規定 */
.speaker1 {
    --img: url(https://www.artic.edu/iiif/2/26d3cea8-44c0-bfbd-a91a-19a007517152/full/1686,/0/default.jpg);
    --color: red;
    --name-lines: 1;
}

.speaker2 {
    --img: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Johannes_Vermeer_-_De_melkmeid.jpg/1042px-Johannes_Vermeer_-_De_melkmeid.jpg?20111225172346);
    --color: blue;
    --name-lines: 2;
}

/* 以下スタイル */

.speaker .speaker-name {
    display: inline-block;
    box-sizing: border-box;
    padding-top: calc(var(--icon-size) - 1.41em * var(--name-lines));
    width: var(--icon-size);
    border-radius: 50%;
    text-align: center;
    vertical-align: text-bottom;
    border: var(--color) solid 3.5px;
    background-image: var(--img);
    background-size: cover;
    background-position: top;
    color: var(--color);
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 0 white, -1px -1px 0 white,
              -1px 1px 0 white, 1px -1px 0 white,
              0px 1px 0 white,  -1px 0 white,
              -1px 0 0 white, 1px 0 0 white;
}
[[/module]]

[!-- 以下本文 --]

[[div class="speaker speaker1"]]
[[span class="speaker-name"]]ゴッホ[[/span]]偉業は一時的な衝動でなされるものではなく、小さなことの積み重ねによって成し遂げられるのだ。
[[/div]]

[[div class="speaker speaker2"]]
[[span class="speaker-name"]]牛乳を
注ぐ女[[/span]]適当に選んだらセリフとかいうものが存在しない人だった
[[/div]]

---

• • _
  批評コメント批評コメント

  
  コメント投稿フォームへ

  注意: 批評して欲しいポイントやスポイラー、改稿内容についてはコメントではなく下書き本文に直接書き入れて下さい。初めての下書きであっても投稿報告は不要です。批評内容に対する返答以外で自身の下書きにコメントしないようお願いします。

  批評コメントTopへ

  - hide block

ERROR

The ukwhatn's portal does not exist.

エラー:	ukwhatnのportalページが存在しません。利用ガイドを参照し、portalページを作成してください。

利用ガイド

1. portal:3396310 (05 Aug 2021 16:19)