hugoで会話風デザインをやってみる

記事内に商品プロモーションを含む場合があります。

2023.7.9 23 views

やり取り風

こんにちは、今回は Line とかでよくある会話風のデザインを hugo でやってみたいと思います。

おお、いいですね。普通にテキストが並んでいるよりも読みやすいと感じる人多いかも！

それでは早速やってみたいと思います。

はい、よろしくお願いします！！

まずはコードですね。shorcode のファイルを actor.html で作成しました。登場人物(actor)、感情(emotion)、左右(direction)どちらから表示するかを指定できるようにしてみました。

{{- $actor := .Get "name" -}}
{{- $emotion := .Get "emotion" -}}
{{- $direction := .Get "direction" -}}

{{- if eq $direction "l" -}}
<div class="actor_l">
    <div class="actor_icon"><img src="{{ .Site.Params.img_url }}/actor/{{ $actor }}/{{ $emotion }}.png" alt=""></div>
    <p class="says">{{- .Inner -}}</p>
</div>
{{- else -}}
<div class="actor_r">
    <div class="actor_icon">
        <img src="{{ .Site.Params.img_url }}/actor/{{ $actor }}/{{ $emotion }}.png" alt="">
    </div>
    <div class="says">{{- .Inner -}}</div>
</div>
{{- end -}}

cssはactor.cssというファイルを作って、中身はこんな感じにしてみました。

.actor_l,
.actor_r{
  margin: 30px 0;
  display:flex;
  justify-content: flex-start;
  align-items: flex-start;
/*   align-items: center; */
}
.actor_r{
  justify-content:flex-end;
}
.actor_icon img{
  width: 80px;
  height: auto;
}
.actor_r .actor_icon{
  margin-left:25px;
}
.actor_l .actor_icon{
  margin-right:25px;
}
.actor_r .actor_icon{
  order:2 !important;
}
.says {
  max-width:500px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 17px 13px 15px 18px;
  border-radius: 12px;
  background: #54dbc2;
  box-sizing:border-box;
  margin:0 !important;
  line-height:1.5;
/*   align-items: center; */
}
.says p{
  margin:8px 0 0 !important; 
}
.says p:first-child{
  margin-top:0 !important;
}
.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
/*   margin-top:-3px;  */
}
.actor_l .says:after {
  left: -26px;
  border-right: 22px solid #54dbc2;
}
.actor_r .says:after {
  right: -26px;
  border-left: 22px solid #54dbc2;
}

簡単に説明してもらえると嬉しいです。

まずは呼び出し方ですね。マークダウンファイルでは、direction、name、emotion、コメントの 4 つを指定します。

{{< actor direction="l" name="mokuzine" emotion="normal" >}}ここにコメントをかくよ{{< /actor >}}

※shotocodeのhugoのマークダウンに書くときは/* */で囲んでいます。
{{</* shortcode */>}}