Work

ブログで吹き出し付きの記事書きたいって依頼

投稿日:

遊:「ちょっとさぁ、ブログで吹き出しみたいな感じで記事書きたいんだけどできる〜?」

 

 

いやそんな事やったこと無いしできるわけないでしょう。。

なんでもできると思いよって。。

 

 

俺:お金請求していい?

 

 

遊:「もちろんOKよ〜」

 

 

センキュー!やる気出します!

 

要するに会話みたいな感じのやつやんな?

LINEとかそんな感じのメッセージやりとり的なやつのでいいよね?

 

って勝手に解釈してやってみました。

 

一応やったこと無いし調べながらやるスタンスでやってみると、まぁできなくはない感じか。。

WordPressだしそのへんまぁまぁ融通きいてやりやすいんでね。

 

たぶんWordPressのやり方なんで他ではちょっと違うかもしれんけど今後自分も使うようにメモっておくことにしました。

 

プラグイン導入

WordPressに「Speech Bubble」っていうプラグインを入れました。

 

下の英列を記事の置きたいところへ置く。

 

デフォルト

自分側の吹き出し

[speech_bubble type="ln" subtype="a" icon="□□" name="〇〇 ]Hello!![/speech_bubble]

 

相手側の吹き出し
[speech_bubble type="ln" subtype="b" icon="□□" name="▲▲" ]Yaaahhhh!![/speech_bubble]

 

ここではtype=の指定が「"ln"」になっているのでLINE風のデザイン吹き出しでやっている。

 

  • [speech_bubble] [/speech_bubble] の間の文字が会話の中身になる。
  • icon="□□"←アイコン画像はここをアップロードしたものに変更すると変えられる。
  • name="〇〇"/name="▲▲"←〇〇もしくは▲▲部分が喋っている人の名前。

上の文字列から参照してます。

 

アイコン画像の変更

画像を変更したい場合はFTPでSpeech Bubbleのimgフォルダに画像をアップロードする。

アップロードしたショートコードを指定する。(上ではicon="□□"の部分)

アップロードするフォルダの場所はwp-content > plugins > speech-bubble > img。

 

吹き出し装飾デザインの変更

type="ln"の「ln」の部分は変更して吹き出しタイプの装飾が変えられる。

(drop・std・fb・fb-flat・ln・ln-flat・pink・rtail・think)

 

LINE風やFacebook風などまぁまぁ数のパターンに変更できる。

 

吹き出し会話の位置

上のデフォは左側が自分の吹き出しになってるけど、会話の位置を逆転したい場合は下の文字列「subtype="a"」の部分を変える。

 

基本的「subtype="a"が左側吹き出しで「subtype="b"が右側吹き出し。

 

考えてる風の吹き出し

「コイツ何やってんだ。。。」

って言う感じの考えてる風の吹き出し

こんなやつ

 

このやり方は「subtype="c"」で左側の考えてる風吹き出しで、「subtype="d"」が右側の考えてる風吹き出しになる。

 

 

 

そんな感じでした。

 

 

とりあえず注文されたやつの出来上がりがこれ

LINEっぽいのができました。

 

さて、高額請求、高額請求♪

 

-Work

Copyright© YOuTsk , 2020 All Rights Reserved Powered by STINGER.