Vuepressで吹き出しを実装する
Vuepressで吹き出しを実装します.主にcssの設定をVuepressでどうのように実装するかの流れになります.
全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】
# ファイル構成
ファイル構成は以下通りです.
hamlet_engineer
└── src
├── public
│ └── hirasu1231.jpg
└── .vuepress
├── (省略)
├── styles
│ └── index.styl
└── config.js
# 概要
Custom Containerという,文字に対する装飾ではなく,ブロックに対してデザインを付与する仕組みを利用します.
公式の説明ページはこちら (opens new window)です.
これを利用してMarkdownに以下のコードを記述すると、吹き出しも出すことができるようになります.
::: bubble9
このような吹き出しを追加します.
:::
このような吹き出しを追加します.
# Vuepressでの吹き出し
# プラグインのインストール
Custom Containerはvuepress-plugin-containerというプラグインで導入されています
以下のコマンドでvuepress-plugin-container (opens new window)というプラグインをインストールします.
yarn add vuepress-plugin-container
# vuepress-plugin-containerの設定
.vuepress/config.jsに以下のコードを追記します.
module.exports = {
...,
plugins: [
...,
// 吹き出し
'vuepress-plugin-container': {
type: 'bubble9',
defaultTitle: '',
before: info => `<div class="bubble9"><div class="imgs"><img src="/hirasu1231.jpg" alt=""></div><div class="chat"><div class="ss">${info}`,
after: '</div></div></div>',
},
],
}
# 吹き出しのデザイン
.vuepress/styles/index.stylに以下のコードを追記して,吹き出しのデザインを調整します.
ベースはcssですが,tab区切りとスペース区切りになっています.
/* 吹き出し*/
/*以下、②左側のコメント*/
.bubble9
width 100%
margin 1.5em 0
overflow hidden
.bubble9
.imgs
float left
margin-right -90px
width 75px
.bubble9
.imgs img
position relative
top 10px
width 95%
height auto
border solid 3px #1976D2
border-radius 50%
.bubble9
.chat
width 95%
.ss
margin 16px
position relative
padding 10px
border-radius 10px
color #000000
background-color #BBDEFB
margin-left 90px
.ss
:after
content ""
display inline-block
position absolute
top 20px
left -24px
border 12px solid transparent
border-right 12px solid #BBDEFB
.ss p
margin 16
padding 10
# まとめ
Vuepressで吹き出しを実装しました.吹き出し以外にも追加できそうです.
# 参考サイト
VuePressで独自のCustom Containerの追加方法(吹き出し) (opens new window)
CSSのみで吹き出しを作る方法【デザインサンプル10種】 (opens new window)
Vuepress Custom Containers (opens new window)