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)

全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】

Python+Selenium+Chromeのウェブスクレイピングで,スペースが入った要素を取得する

Python+Selenium+Chromeのウェブスクレイピングで,スペースが入った要素を取得する

Python+Selenium+Chromeのウェブスクレイピングでは,by_class_nameでスペースが入った要素を取得することができませんので,取得できる手法を紹介します.

pythonで長い音声・動画からの文字起こしを実装する

pythonで長い音声・動画からの文字起こしを実装する

短い音声ファイルでの音声からの文字起こしはできましたので,本稿では長い音声・動画での文字起こし(できるだけ無料で)に実装したいです.