ワードプレス、プラグインを使わず吹き出し枠を作ってみる

プラグインを使うと万が一違うブログに引っ越ししたいとか？は無いとは思いますがHTMLとCSSで表現出来るとプラグインがなくなってもどうにか対応できるのではないか？
ショートコードに登録してとかテンプレートに登録出来るプラグインもありだけど、画像も自由に変えたいとか我儘なものでしてね。

吹き出しプラグインSpeech Bubbleを参考に4種類盗み真似しました。
左右の吹き出しと回想風に見える左右の吹き出しです。

Name

こんな感じです。

テンプレートとかでは無くてfunctions.phpにタグ登録して入力は簡単にしました。

Speech Bubble の多分？少し枠になるところ？を削除してみました。
一応、名前のところは残しました。要らない気もしなくはないですが？
画像の大きさは60pxになるようにしてます。正方形に近いと綺麗に縮小される気がします。

<div class="spBox spSubBoxLe">
  <div class="spSpeaker">
    <div class="spIcon"><img src="#" /></div>
    <div class="spName">名前</div>
  </div>
  <div class="spContent spText">
    吹き出し内容
  </div>
</div>

spSubBoxLe 左吹き出し
spSubBoxRi 右吹き出し
spSubBoxLeRe 左想像吹き出し
spSubBoxRiRe 右想像吹き出し

div.spBox {
  overflow: hidden;
  padding: 10px 20px;
  margin: 0;
}

div.spBox.spSubBoxLe:after,
div.spBox.spSubBoxRi:after,
div.spBox.spSubBoxLeRe:after,
div.spBox.spSubBoxRiRe:after {
  display: block;
  clear: both;
  content: "";
}

div.spBox.spSubBoxLe .spSpeaker,
div.spBox.spSubBoxLeRe .spSpeaker {
  float: left;
  margin-right: -70px;
  width: 70px;
}

div.spBox.spSubBoxRi .spSpeaker,
div.spBox.spSubBoxRiRe .spSpeaker {
  float: right;
  margin-left: -70px;
  width: 70px;
}

.spSpeaker .spIcon {
  text-align: center;
  height: 60px;
}

.spSpeaker > .spIcon > img {
  height: 60px;
  width: 60px;
  border-radius: 4px;
}

.spSpeaker > .spName {
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

div.spBox.spSubBoxLe .spContent:before {
  position: absolute;
  top: 10px;
  left: -6px;
  z-index: 1;
  height: 0;
  width: 0;
  border-style: solid solid solid none;
  border-width: 6px;
  border-color: transparent #111;
  content: "";
}

div.spBox.spSubBoxLe .spContent:after {
  position: absolute;
  top: 10px;
  left: -5px;
  z-index: 3;
  height: 0;
  width: 0;
  border-style: solid solid solid none;
  border-width: 6px;
  border-color: transparent #fff;
  content: "";
}

div.spBox.spSubBoxRi .spContent:before {
  position: absolute;
  top: 10px;
  right: -6px;
  z-index: 1;
  height: 0;
  width: 0;
  border-style: solid none solid solid;
  border-width: 6px;
  border-color: transparent #111;
  content: "";
}

div.spBox.spSubBoxRi .spContent:after {
  position: absolute;
  top: 10px;
  right: -5px;
  z-index: 3;
  height: 0;
  width: 0;
  border-style: solid none solid solid;
  border-width: 6px;
  border-color: transparent #fff;
  content: "";
}

div.spBox.spSubBoxLe .spContent.spText,
div.spBox.spSubBoxRi .spContent.spText {
  position: relative;
  z-index: 2;
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 4px;
}

div.spBox.spSubBoxLeRe .spContent:before {
  position: absolute;
  top: 10px;
  left: -17px;
  height: 10px;
  width: 10px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 50%;
  content: "";
}

div.spBox.spSubBoxLeRe .spContent:after {
  position: absolute;
  top: 20px;
  left: -27px;
  height: 7px;
  width: 7px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 50%;
  content: "";
}

div.spBox.spSubBoxRiRe .spContent:before {
  position: absolute;
  top: 10px;
  right: -17px;
  height: 10px;
  width: 10px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 50%;
  content: "";
}

div.spBox.spSubBoxRiRe .spContent:after {
  position: absolute;
  top: 20px;
  right: -27px;
  height: 7px;
  width: 7px;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 50%;
  content: "";
}

div.spBox.spSubBoxLeRe .spContent.spText,
div.spBox.spSubBoxRiRe .spContent.spText {
  position: relative;
  padding: 5px 10px;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #111;
  border-radius: 4px;
}

@media screen and (min-width:721px) {
  div.spBox.spSubBoxLe .spContent {
    float: left;
    position: relative;
    margin-left: 80px;
    margin-right: 80px;
  }
}

@media screen and (min-width:721px) {
  div.spBox.spSubBoxRi .spContent {
    float: right;
    position: relative;
    margin-right: 80px;
    margin-left: 80px;
  }
}

@media screen and (min-width:721px) {
  div.spBox.spSubBoxLeRe .spContent {
    float: left;
    position: relative;
    margin-left: 100px;
    margin-right: 80px;
  }
}

@media screen and (min-width:721px) {
  div.spBox.spSubBoxRiRe .spContent {
    float: right;
    position: relative;
    margin-left: 80px;
    margin-right: 100px;
  }
}

@media screen and (max-width:720px) {
  div.spBox.spSubBoxLe .spContent {
    float: left;
    position: relative;
    margin-left: 80px;
  }
}

@media screen and (max-width:720px) {
  div.spBox.spSubBoxRi .spContent {
    float: right;
    position: relative;
    margin-right: 80px;
  }
}

@media screen and (max-width:720px) {
  div.spBox.spSubBoxLeRe .spContent {
    float: left;
    position: relative;
    margin-left: 100px;
  }
}

@media screen and (max-width:720px) {
  div.spBox.spSubBoxRiRe .spContent {
    float: right;
    position: relative;
    margin-right: 100px;
  }
}

これで何とか形になっていると思います？
ビジュアルエディタのスタイルシートに登録したら投稿画面でも確認しながら出来ちゃうんでない？
ワードプレス以外でも使えるんじゃないですか？？
装飾なども利用出来ますね。

かなり自己満足しています。

いよいよ完成？ってことで2日に渡り完成したように思います。
エンターキーで改行したら吹き出しが2個になっちゃうけど仕様なんじゃないのかね？

ビジュアルエディタではShif+Enterの改行をしないと吹き出しが増えますね。
どんな仕様なのかは分かりません。

Pタグを入れたら大丈夫そうだけど？うーん、中々に難しいですね。

過去の吹き出し編集しないとダメですね・・